Desktop view of Animated Portfolio
Overview
A visually immersive personal portfolio built from scratch with Next.js 14, layering three distinct rendering layers — a persistent WebGL 3D background, a GSAP-animated DOM content layer, and a real-time fluid simulation overlay — all composited together in the browser.
The 3D background is powered by React Three Fiber, Three.js, Drei, and the Rapier physics engine, creating a living, depth-rich backdrop that responds to scroll and viewport state. "Window" cutouts in the DOM layer let the 3D scene bleed through for a dimensional, layered effect.
A full-viewport WebGL fluid dynamics simulation driven by cursor movement sits above everything, using mix-blend-mode to produce a painterly, organic texture across the entire interface. GSAP and ScrollTrigger drive all scroll-triggered reveals and custom page transitions.
Key Highlights
Three-layer composited rendering: WebGL 3D + DOM + fluid simulation overlay
Real-time WebGL fluid dynamics driven by cursor movement via GLSL shaders
React Three Fiber 3D scene with Rapier physics engine
Custom GSAP-powered page transitions with react-transition-group
Responsive 16-column (desktop) / 6-column (mobile) grid system
Fluid vw-based typography with Neue Haas Grotesk Display Pro
Smooth scroll via Lenis with GSAP ScrollTrigger integration
72% JavaScript, 26.5% SCSS, 1.3% GLSL — a truly custom build
Features Included
Persistent WebGL 3D background scene with scroll & viewport reactivity
Real-time fluid simulation overlay with mix-blend-mode compositing
GSAP ScrollTrigger scroll-triggered content reveals (AppearTitle / AppearBlock)
Custom GSAP page transitions via react-transition-group
Shaped box-shadow "window" cutouts for 3D bleed-through effect
GSAP-animated tooltip cards rendered via React portals
Animated noise texture overlay via CSS pseudo-element
Lenis smooth scroll throughout
Zustand global state management
Responsive CSS grid with custom properties (vw-based sizing)
Project listing & dynamic project detail pages
About section with overview, services, and process
SEO-ready with next-sitemap and Vercel hosting