Gopal Tiwari

Gopal Tiwari

WEB DEVELOPER & DESIGNER

Home Projects RunEthics Digital
Case Study

RunEthics Digital

A modern digital marketing and branding platform built entirely from scratch — with custom-engineered animations, a Canvas API hero, and a premium UI/UX experience — all without relying on any external UI framework or animation library.

Category Digital Marketing Platform
Year 2025
Role Full Website Design & Dev
RunEthics Digital Website
Overview

About the Project

RunEthics Digital is a modern digital marketing and branding platform developed to showcase high-performance marketing services through a visually engaging and highly interactive web experience. The project was fully designed and developed from scratch with a strong focus on performance, scalability, smooth animations, and premium UI/UX design.

Unlike traditional marketing websites, the goal was to create a unique digital identity using custom-built components, handcrafted animations, and a completely framework-independent frontend architecture — making the entire experience highly optimized and custom engineered.

My Role

What I Did

Full Website Design & Development UI/UX Design Frontend Architecture Responsive Development Animation Engineering SEO Optimization Hosting & Deployment Performance Optimization

This project was developed completely independently — including planning, design system creation, frontend engineering, interaction development, deployment configuration, and optimization.

Key Features

What Was Built

  • Fully custom-built frontend without any external UI frameworks
  • Interactive animated hero section powered by the Canvas API
  • Smooth scroll-reveal animations using IntersectionObserver API
  • Dynamic testimonial slider with fluid transitions
  • Filterable portfolio section with live DOM manipulation
  • Mega menu navigation system and responsive mobile drawer
  • SEO-optimized architecture with semantic HTML, sitemap.xml & robots.txt
  • Clean URL routing via Apache .htaccess configuration
  • Custom reusable component system for scalable code
  • Performance-optimized animations using requestAnimationFrame
Development Approach

How It Was Built

The website was structured using a modular architecture with reusable CSS and JavaScript components to maintain scalability and clean code organization. A custom design system was created for typography, spacing, color palette, animation behavior, and responsive layouts.

Advanced frontend techniques such as IntersectionObserver, requestAnimationFrame, Canvas rendering, and dynamic DOM manipulation were used to create a smooth and engaging user experience — all without relying on GSAP, React, or any third-party animation library.

Challenge

The Problem to Solve

One of the biggest challenges was building a highly interactive and modern experience entirely from scratch — without relying on external libraries such as React, Bootstrap, GSAP, or Tailwind CSS. Every animation, component, and interaction had to be engineered from the ground up.


Another major focus was maintaining peak performance while implementing advanced animations, particle systems, testimonial sliders, and dynamic UI interactions across all devices — requiring careful use of requestAnimationFrame, lazy loading, and optimized DOM operations.

Outcome

The Result

🏆

The final result was a modern, performance-focused digital marketing platform with a premium visual identity and highly interactive user experience — built entirely with vanilla HTML, CSS, and JavaScript.


RunEthics Digital stands as one of my fully custom-developed projects, showcasing both design creativity and deep frontend development capabilities. The project reflects my approach toward creating visually engaging, responsive, and optimized web experiences with strong attention to design, performance, and usability.