Portfolio Website

Overview

This portfolio site is the central hub for my work and professional presence. I wanted a fast, minimal site that I fully own and can customise, with no templates and no CMS lock-in. Everything is statically generated at build time from Markdown files, so publishing new content is as simple as pushing a commit.

Key Features

• Markdown-driven content. Projects and structured profile data are authored as .md files with YAML frontmatter. No database, no admin panel.
• Static generation. Every page is pre-rendered at build time for instant load times and zero server costs.
• Responsive design. A compact, typographically consistent layout that works from mobile to desktop.
• Image optimization. Vercel's built-in image pipeline handles WebP/AVIF conversion and responsive sizing automatically.

Technical Details

The site is built with Next.js 16 using the App Router and Tailwind CSS v4's CSS-first configuration. Content flows through a pipeline: Markdown files are parsed with gray-matter for frontmatter extraction, then the body is processed through a unified/remark/rehype chain that handles GFM syntax, heading slugs, and autolinked headings.

Typography uses Space Grotesk for headings and Inter for body text, both loaded through next/font/google to avoid layout shift.

The profile data takes a different approach: everything structured (experience, education, skills, music) lives as YAML arrays in a single frontmatter file, with no markdown body. That keeps the data easy to update without touching component code.

Challenges & Learnings

The migration to Tailwind v4 required rethinking how theme configuration works, moving from a JS config to CSS-first @theme blocks.

Building the content pipeline from scratch (rather than using a CMS like Contentlayer or MDX) was a deliberate choice. It's more manual but gives complete control over how content is parsed, transformed, and rendered. The tradeoff is worth it for a site this size.