Building My Personal Website with Next.js and Three.js

Every software engineer eventually gets around to building their personal website. After years of putting it off, I finally sat down and built something I'm proud of. Here's how it came together.

The Tech Stack

I chose Next.js 14 with the App Router for its excellent developer experience, built-in optimization, and seamless Vercel deployment. For styling, Tailwind CSS was the obvious choice — utility-first CSS lets me move fast without context-switching to separate stylesheet files.

The fun part was the animation layer:

• —Framer Motion handles all scroll-triggered animations, text reveals, and micro-interactions
• —React Three Fiber powers the 3D background in the hero section
• —Lenis provides buttery-smooth scrolling across the entire page

Design Philosophy

I wanted a site that felt modern and polished without being overwhelming. The dark theme with carefully chosen accent colors (indigo to purple gradient) gives it personality while maintaining readability.

Every animation serves a purpose — nothing moves just for the sake of moving. Scroll-triggered reveals guide the eye, hover effects provide feedback, and the 3D scene adds depth without distracting from the content.

Performance Considerations

A common pitfall with animated sites is poor performance. Here's how I kept things snappy:

1. —Lazy-loaded 3D scene — The Three.js canvas only loads on desktop devices
2. —Intersection Observer — Animations only trigger when elements enter the viewport
3. —Reduced motion — All animations respect the prefers-reduced-motion media query
4. —Optimized fonts — Using next/font for automatic subsetting and preloading

What I Learned

Building a personal site is a great exercise in making design decisions independently. Without a designer to hand you a Figma file, you're forced to develop your own eye for spacing, typography, and color.

The biggest takeaway? Ship something. A live imperfect site beats a perfect design that never sees the light of day.