Building My Portfolio with Next.js

When I set out to build my personal portfolio, I wanted more than a simple landing page. I needed an architecture that could grow — a foundation capable of supporting AI experiments, backend services, dashboards, and custom APIs.

Why Next.js?

Next.js with the App Router gave me exactly what I needed:

• Server Components for optimal performance
• File-based routing with route groups for clean separation
• API routes ready for future backend services
• Built-in optimization for images, fonts, and metadata

Architecture Decisions

The key insight was treating this portfolio as a platform, not a page. The folder structure separates concerns cleanly:

app/
  (marketing)/   → Public-facing pages
  api/           → Future API endpoints
  dashboard/     → Future admin panel

This means I can add a PostgreSQL database, authentication, or AI inference endpoints without restructuring anything.

The Content Layer

Blog posts are loaded dynamically from Markdown files using gray-matter for frontmatter parsing and remark for HTML rendering. This keeps content decoupled from the application logic — I can write posts in any text editor and they appear automatically.

What's Next

The foundation is set. Next steps include:

• Integrating a database for dynamic project data
• Adding authentication for the dashboard
• Building AI model inference endpoints
• Creating interactive data visualizations

The best portfolio is one that evolves with you.