Building a Personal Site with Next.js

Building a Personal Site with Next.js

Over the past few months, I kept coming back to one question: what should an indie developer's personal site look like?

Not a frosted-glass pill nav. Not a centered hero headline. Not a row of rounded cards. I chose a more classical path — the International Typographic Style: paper-white background, 1px hairlines, monospace-indexed numbering, and asymmetrical left-aligned compositions. Typography is the design; color is only a signal.

Tech Stack

The whole site runs on four core pieces:

• Next.js 16 (App Router + SSG static export)
• Tailwind CSS v4
• framer-motion (restrained, fast micro-interactions)
• gray-matter + remark (local Markdown content pipeline)

No database, no CMS. Content lives as plain index.md files under /content, read with node:fs at build time and prerendered into fully static files that get pushed straight to Cloudflare Pages.

SSG Static Export

next.config.ts needs only three key lines:

const nextConfig: NextConfig = {
  output: "export",
  trailingSlash: true,
  images: { unoptimized: true },
};

With output: 'export', every page is prerendered at build time. The output is plain static HTML — zero server cost, natively edge-friendly.

Design System: Rules First, Taste Second

The tricky part of any design spec is degree. So I wrote down a few non-negotiable red lines first:

1. No element may exceed a border-radius of 2px
2. No box-shadow, backdrop-filter, or gradients
3. The brick-orange accent stays under 5% coverage, used only as a signal color

These rules are enforced directly in the global stylesheet with !important — not by discipline. Any component that tries to sneak in a rounded card gets rejected by the style layer itself.