Overview
A premium engineering studio portfolio website with cinematic 3D visuals, scroll-linked animations, and accessibility-first design. Features WebGL particle fields, shader blobs, magnetic interactions, smooth scroll, and a fully responsive bento-grid case study showcase. Includes contact form with email dispatch and embedded booking.
Tech: TypeScript, Next.js, React, Three.js, GSAP, Tailwind CSS, Framer Motion, Resend, Vercel
Tech Stack
TypeScriptNext.jsReactThree.jsGSAPTailwind CSSFramer MotionVercel
Key Features
3D WebGL hero with particle fields, shader blobs, and geometric accents
Scroll-triggered animations with GSAP ScrollTrigger and Lenis smooth scroll
Bento-grid portfolio showcase with dynamic case study pages
Magnetic cursor and interactive button hover effects
WCAG 2.1 AA accessible with full reduced-motion fallbacks
Contact form with Resend email dispatch and Cal.com booking embed
Fluid responsive typography and token-driven design system
Challenges & Solutions
Performance with Heavy 3D Visuals
Lazy-loaded Three.js and React Three Fiber with dynamic imports (SSR disabled), controlled DPR scaling, and CSS gradient fallbacks for reduced-motion to maintain Lighthouse 90+ scores.
Accessibility-First Animation Design
Every animation — smooth scroll, 3D canvas, magnetic cursor, number counters — has a static fallback respecting prefers-reduced-motion, ensuring WCAG 2.1 AA compliance without sacrificing visual impact.
Architecture
Next.js 16 App Router with React 19 Server/Client Components. 3D scenes via React Three Fiber (lazy-loaded). Scroll animations powered by GSAP ScrollTrigger + Lenis smooth scroll. Contact form posts to API route with Resend email dispatch. Data-driven content from TypeScript modules. Deployed on Vercel.
Next Project