When I set out to build my portfolio, I wanted something that showcased not just my projects, but my frontend engineering skills. Here's how I approached it.
The Tech Stack
I chose Next.js 15 with the App Router for its excellent developer experience and built-in optimizations. Paired with Tailwind CSS v4 and its new CSS-first configuration, styling became a breeze.
For animations, I used the Motion library (formerly Framer Motion) to add purposeful micro-interactions — scroll reveals, staggered entrances, and magnetic button effects.
Key Design Decisions
Dark Mode Done Right
Rather than bolting on dark mode as an afterthought, I designed the entire color system using CSS custom properties from the start. The next-themes library handles persistence and system preference detection.
Performance First
Every section component is a Server Component by default. Only the interactive parts — the navbar, theme toggle, and animation wrappers — are Client Components. This keeps the JavaScript bundle minimal.
What I Learned
Building a portfolio is a great exercise in making decisions. Every design choice, from color palette to animation timing, reflects your taste and attention to detail. The key is intentionality — every element should earn its place on the page.