Building a Modern Portfolio with Next.js
A deep dive into building a fast, SEO-friendly portfolio using Next.js App Router, Tailwind CSS v4, and MDX for content management.
Building a personal portfolio website is one of the best investments you can make in your career. It serves as a living resume, a showcase of your work, and a platform for sharing your ideas.
Why Next.js?
Next.js has become the go-to framework for modern web development, and for good reason. With the App Router, you get:
- Server Components by default for better performance
- Built-in SEO through the Metadata API
- Static generation for blog posts with
generateStaticParams - Image optimization out of the box
The Tech Stack
For this portfolio, I chose a stack that prioritizes performance and developer experience:
- Next.js 15 with the App Router
- Tailwind CSS v4 for utility-first styling
- Velite for type-safe MDX content processing
- Framer Motion for smooth animations
Key Design Decisions
Content as Code
Instead of using a headless CMS, all content lives in the repository as TypeScript data files and MDX posts. This gives us:
- Version control for all content changes
- Type safety with TypeScript interfaces
- Zero runtime cost — everything is pre-rendered at build time
Server Components First
Every page is a Server Component by default. Only interactive elements like the navigation menu and animation wrappers use "use client". This keeps the JavaScript bundle small.
What I Learned
Building this portfolio reinforced a key principle: start simple, iterate often. The first version doesn't need to be perfect — it needs to ship. You can always refine the design, add features, and improve content over time.
The most important thing is having a professional web presence that accurately represents your skills and experience.