Building a Cinematic Portfolio with Next.js, Three.js & Framer Motion

January 1, 19705 min read

How I built a dark-theme glassmorphism developer portfolio with 3D liquid metal visuals, canvas particle effects, and smooth scroll animations — all with Next.js 16, React 19, and zero compromises on performance.

Why Build a Custom Portfolio?

Why Build a Custom Portfolio?
3. Select "Heading 2" again → type:
The Tech Stack
Press Enter.

4. Normal paragraph:
This portfolio runs on Next.js 16 with the App Router, React 19, Tailwind CSS 4, Framer Motion for animations, and Three.js with React Three Fiber for 3D
scenes. The blog you're reading right now is powered by Sanity CMS.
Press Enter.

5. Heading 2:
3D Liquid Metal Hero
Press Enter.

6. Normal:
The hero section features a liquid metal sculpture built with MeshDistortMaterial and iridescent physical materials. Background particles (4000 on desktop)
rotate in a sphere with additive blending. Post-processing adds bloom, chromatic aberration, and vignette for that cinematic feel.
Press Enter.

7. Heading 2:
Canvas Floating Icons with Ripple Wave
Press Enter.

8. Normal:
Over 150 tech stack icons float across the hero background, rendered on HTML5 Canvas for 60fps performance. Moving the mouse spawns expanding ripple waves —
like dropping a stone in water — that push icons outward as the wavefront passes through them.
Press Enter.

9. Heading 2:
Performance Matters
Press Enter.

10. Normal:
Despite the heavy visuals, the site scores well on Core Web Vitals. Three.js scenes are lazy-loaded with next/dynamic and SSR disabled. Mobile devices get a
CSS gradient-mesh fallback instead of 3D. All images use next/image with proper sizing.
Press Enter.

11. Heading 2:
What I Learned
Press Enter.

12. Normal:
Building this taught me that great animations are about restraint. Every motion should have a purpose. The glassmorphism, the glow orbs, the metallic dividers
— they all serve the dark-theme aesthetic without overwhelming the content.