Back
Year
2025
Tech & Technique
React, Three.js, GSAP, WebGL, Vite, TypeScript, Tailwind CSS
Description
Immersive 3D web experience with real-time rendering, physics simulations, and interactive animations.
Built with modern web technologies achieving 90 FPS on mid-range devices and <1.5s load time.
Key Features:
Architecture Overview:
Technical Highlights:
Key Features:
- 🎮 Scroll-Based Animations: Built dynamic, scroll-triggered motion using GSAP for a highly engaging browsing experience.
- 🧩 Clip-Path Transitions: Implemented geometric shape reveals and section transitions using CSS clip-path animations.
- 🕹️ 3D Hover Effects: Added interactive 3D transforms that respond to cursor/hover for a modern “gaming” feel.
- 🎥 Video Storytelling: Integrated seamless video transitions to enhance narrative flow and visual immersion.
- 📱 Fully Responsive UI: Optimized layout and interactions for mobile, tablet, and desktop with consistent performance.
Architecture Overview:
- Component-Driven UI: Modular React components (reusable sections, cards, and motion wrappers).
- Animation Layer (GSAP): ScrollTrigger-based timelines controlling entrance effects, transitions, and parallax motion.
- Styling System (Tailwind): Utility-first styling with consistent spacing, typography, and responsive breakpoints.
- Reusable Motion Patterns: Centralized animation utilities and shared components (e.g., rounded corners, clip masks).
Technical Highlights:
- Developed with React.js + Tailwind CSS + GSAP (ScrollTrigger) for smooth, high-FPS interactions
- Implemented clean folder structure and reusable UI primitives to keep the codebase maintainable
- Optimized media rendering and transitions for better perceived performance and smooth playback
- SEO Score 95/100 Cumulative Layout Shift 0.05 and Time to interactive is 1.2 sec
My Role
Frontend Developer & UI Engineer
Personal Project – Award-Winning Website Recreation
Personal Project – Award-Winning Website Recreation
- 🎮 Independently recreated a visually rich, award-winning 3D gaming website inspired by Zentry.
- 🧩 Designed and implemented complex scroll-based animations and geometric transitions using GSAP.
- 🕹️ Built interactive 3D hover effects and motion-driven UI components with React and CSS transforms.
- 🎥 Integrated video transitions and storytelling elements for an immersive user experience.
- 📐 Architected a reusable, component-driven frontend using React and Tailwind CSS.
- 📱 SEO Score 95/100 Cumulative Layout Shift 0.05 and Time to interactive is 1.2 sec .