Why I'm Building My Portfolio Like a Product

Most developer portfolios are brochures: a headshot, a skills grid, three screenshots of projects you can't touch. I'm taking a different bet with this site — the portfolio is the product. Every claim on the homepage gets backed by something you can actually use.

The plan

Three phases, each shipping something interactive:

1. This blog — MDX-powered write-ups of how each piece gets built.
2. An AI model comparison dashboard — live pricing from OpenRouter, curated intelligence scores, and honest "N/A"s where real data doesn't exist.
3. A node-based workflow visualizer — the agent architectures I build for clients, rendered as an interactive n8n-style canvas.

The stack, and why

The site runs on Next.js 15 with the App Router. One detail that bites people upgrading: route params are now async, so every dynamic page awaits them:

export default async function BlogPostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params; // Next 15: params is a Promise
  const post = getPostBySlug(slug);
  // ...
}

Styling is Tailwind CSS v4 with the new CSS-first configuration — no tailwind.config.js at all. The design tokens live directly in globals.css:

@theme {
  --color-ink-950: #0b0e14;
  --color-signal-500: #f59e0b;
}

Content is plain MDX files in /content/blog. No CMS, no database — a post is a file, a deploy is a git push, and the whole blog is statically generated at build time.

Deployment without the magic

This site deploys to plain Node.js hosting, not a serverless platform. That means output: "standalone" and a postbuild script that copies static assets into the standalone folder — because Next.js deliberately doesn't do that for you. I'll write up the full Hostinger deployment checklist once Phase 2 is live.

If you're building something similar, the blog index will collect every post in this series. Next up: fetching live model pricing without fabricating a single benchmark number.