Portfolio Website
The site you are on now: a Next.js portfolio that builds itself from plain Markdown files.

The story
You are, right now, standing inside the project. This page, the typeface you are reading it in, the red accents, the menu you tapped to get here: all of that is the project. There is no demo to link to and no screenshot to squint at, because you are already in it. Reviewing this one is a little like being asked to admire a house while sitting in its living room.
Here is the embarrassing bit. A portfolio is meant to be the one place you prove you are meticulous. Mine was quietly held together with good intentions and dead code. It named a handsome font in its stylesheet and then never actually loaded it, so it walked around in the system default font, thoroughly convinced it looked sharp. It ran a CSS rule that carefully hid a header which did not exist. And somewhere in there sat a 3D spinning coin that no page ever displayed, a small monument to an idea I abandoned, apparently, mid flip.
Knowing my own limits (my HTML and CSS are, let's say, aspirational), I hit up an old friend. Let's randomly call him Claude. Between us we loaded the font, buried the ghost header, retired the coin, and generally tidied the place up.
So the honest pitch is this: a Next.js site that builds itself from plain Markdown files, and a slow, public exercise in cleaning up after myself, with a little help. That this page exists at all, for the one project I kept forgetting to document, feels like a quiet milestone.
What it is
The site turns a folder of Markdown files into a browsable body of work. Every project is a single MDX file: a little frontmatter at the top (title, category, year, summary, cover), and the write-up underneath. Drop in a new file and it shows up in the grid, under its category, and as its own page. No database, no CMS. The content is just the filesystem.
Under the hood
- File-based content: each project is an
.mdxfile parsed with gray-matter and rendered with next-mdx-remote, so a write-up can mix prose with small React pieces like the image gallery. - Category browsing: work is grouped into Creative, Research and Products, with tab filtering on the home page and dedicated section pages.
- Galleries: images open in a full-screen lightbox built purely in CSS (the
:targettrick), no JavaScript needed. - Follow along: per-section RSS feeds and a subscribe page let a reader track one category or the whole site.
- Phone first: a responsive layout with a collapsing mobile menu, since most visitors arrive on a phone.
- Static by default: project pages are generated ahead of time, so the site stays fast and cheap to host.
Stack
- Framework: Next.js 16 (App Router), React 19, TypeScript
- Styling: Tailwind CSS 4, with Fraunces and Geist loaded through next/font
- Content: MDX via next-mdx-remote, frontmatter parsed with gray-matter
- Palette: a deliberately narrow red and black, so the project covers carry the colour