Building My Portfolio with Next.js and Framer Motion

I've rebuilt my portfolio more times than I'd like to admit. But this time, I had a clear vision: make it fast, make it look different from the typical dev portfolio, and make it easy to update. Next.js + Tailwind + Framer Motion turned out to be the perfect combo. And yeah, this is the site you're looking at right now.

The biggest design decision was going with a bento grid layout instead of the usual "scroll down through sections" approach. I used CSS Grid to create card-based sections where things have different sizes - the hero spans full width, projects take half each, about and contact share a row. It sounds simple, but getting it to look good on mobile, tablet, AND desktop? That took a lot of tweaking with Tailwind's responsive classes. Lots of trial and error.

Framer Motion handles all the animations, and I tried to keep them subtle. Each card fades in and slides up when it scrolls into view. There's a slight stagger so they don't all pop in at once - it feels more intentional that way. I kept everything between 300-500ms because anything slower feels laggy. The rule I follow: animations should make things feel polished, not make people wait.

Each project has its own case study page with the full story - problem, solution, tech decisions, challenges. I used Next.js dynamic routes with generateStaticParams to pre-build all those pages. The project data is just a TypeScript file - no CMS, no database. When I want to add a project, I just add an object to an array. Simple and it works.

The dark theme uses a gradient background (gray-950 to gray-800) with a dot grid pattern and a noise texture overlay. Those three layers together create depth without being distracting. Orange accents for highlights. It's a look I really like - professional but not corporate boring. Tailwind made it easy to keep the colors consistent everywhere.

Performance was something I cared about from day one. Next.js auto code-splits everything, so pages only load what they need. The site hits 95+ on Lighthouse. One thing I learned: keep client-side JS to a minimum. Most pages work fine as Server Components - I only use 'use client' where I actually need interactivity.

There's also a map dialog that shows my location using Leaflet, loaded dynamically with ssr: false since map libraries don't work server-side. It's got a satellite/map toggle and Ctrl+scroll zoom. Small details, but they make it feel polished.

If you're thinking about building your own portfolio, here's my honest advice: start with what you want to say, not how it looks. Write your about section, describe your projects, figure out your story. Then design around that. The prettiest site in the world won't matter if there's nothing worth reading on it.