Course
Create a Stunning 3D Animated Portfolio Website with Next.js, Three.js, GSAP, and Prismic
A 5-hour course on designing and building a 3D animated developer portfolio in Next.js with react-three-fiber, GSAP letter-by-letter hero animations, a scrolling tech marquee, sound-effect navigation, and a Prismic-driven job experience section.
I designed a distinctive developer portfolio, not the usual template, and taught the build from blank canvas to deployment. The hero uses a letter-by-letter reveal synced to GSAP, a 3D scene sits behind it via react-three-fiber, and subtle sound effects give navigation some personality.
The rest of the site extends that tone: a scrolling tech-stack marquee, hover and scroll animations tuned to feel responsive rather than showy, and a Job Experience slice driven by Prismic so anyone can edit it. I focus on the design choices as much as the code: the timing, easing, and restraint that separate a portfolio that feels polished from one that feels busy.