Building a Modern Portfolio with Next.js 15

Building a portfolio website seems simple, but doing it right requires careful architectural decisions. Here's how I approached it.

Architecture Decisions

Static First

Every page is statically generated at build time. This means:

• Zero server costs — Hosted on Vercel's free tier
• Instant page loads — Pre-rendered HTML served from CDN
• Perfect SEO — Search engines see full HTML

Content Layer

Instead of a CMS, I use a file-based content system:

content/
├── blog/*.mdx       # Blog posts
├── projects/*.mdx   # Project descriptions
└── resume.json      # Structured resume data

Type Safety

Every piece of content is typed end-to-end:

interface BlogFrontmatter {
  title: string
  date: string
  description: string
  tags: string[]
  category: BlogCategory
}

Development Process

I used a multi-agent development approach with Claude Code:

1. scaffold-agent — Set up the project skeleton
2. content-agent — Created all content files
3. blog-agent — Built the blog module
4. projects-agent — Built the projects module
5. resume-agent — Built the resume module
6. integration-agent — Integrated everything

This parallel workflow reduced development time significantly.

Performance

The site achieves:

• Lighthouse Performance: 98
• First Contentful Paint: 0.8s
• Time to Interactive: 1.2s

Lessons Learned

1. Start with contracts — Define your types first
2. Own your content — File-based > CMS for personal sites
3. Static is king — SSG beats SSR for portfolios