Building a Modern Portfolio with Next.js

Building a Modern Portfolio with Next.js

Building a Modern Portfolio

When I decided to rebuild my portfolio, I wanted something that was fast, maintainable, and easy to update. After exploring various options, I settled on Next.js with TypeScript and Tailwind CSS.

Why Next.js?

Next.js provides an excellent developer experience with features like:

  • Server-side rendering for better SEO
  • Static site generation for blazing fast performance
  • File-based routing that makes organizing pages intuitive
  • Built-in image optimization

The Tech Stack

Here's what powers this site:

const stack = {
  framework: 'Next.js 15',
  styling: 'Tailwind CSS',
  content: 'MDX files',
  deployment: 'Vercel'
};

Key Features

Dark Mode

The site supports both light and dark modes, automatically detecting your system preference and allowing manual toggling.

Markdown-Based Blog

All blog posts are written in Markdown (MDX), which makes writing and maintaining content straightforward. No CMS needed!

Performance

By using static generation, the site achieves excellent Core Web Vitals scores.

Lessons Learned

Building this portfolio taught me several valuable lessons:

  1. Keep it simple - Don't overcomplicate things
  2. Performance matters - Every millisecond counts
  3. Content is king - Focus on what you're showcasing

The source code is available on GitHub if you want to explore the implementation details.