2026

Portfolio + CMS

A personal portfolio site and the admin CMS that fills it. Every word on the public site — copy, projects, skills, notes, section order, even the accent colour — is a row in a database I edit through a CMS I also built. Two Next.js apps on Cloudflare Workers, over D1 and R2.

Live site Source

Two apps in one pnpm monorepo. apps/web is the public site; apps/admin is the CMS that fills it. They share a repository layer, a set of Zod schemas and a design-token package, and they run on the same Cloudflare Worker platform against one D1 database and one R2 bucket.

The rule the whole thing is built around is that content is data. There is no string of portfolio copy hardcoded in a component — the hero's headline, the robot's dialogue, the lines the console prints, which sections appear and in what order, the accent colour of an individual note: all of it is editable, and the public site is a rendering of whatever the database currently says.

The CMS has 19 areas and its own authentication: a password, then a six-digit code by email, with rate limiting in the database, a forgotten-password flow and a change-password page. It replaced Cloudflare Access, which had been guarding the app until the new login was built and verified.

The problem

I wanted a portfolio I could actually keep current. The version before this one was a static site: changing a job title or reordering a section meant editing a component, running a build and deploying — so in practice it went stale, because updating it was a development task rather than a five-minute one.

I also wanted the portfolio itself to be worth reading as work. A site that only lists projects says less about how someone builds than a site that is visibly one.

What I built

Everything the public site renders comes from D1, reached only through a repository layer in packages/database — no page or component builds a query. Every external input is parsed by a Zod schema from packages/schemas before it reaches storage. Both seams fail closed: with nothing registered, the database and R2 bindings refuse rather than guessing.

The admin covers 19 areas, from projects and skills through to media, the contact inbox and page-view analytics. Authentication is its own: PBKDF2 password hashing, a six-digit emailed second factor with a hard attempt cap, and rate limits stored in D1 rather than the per-colo Workers binding, so an attacker reaching a different data centre does not get a fresh allowance.

Accessibility is enforced rather than intended — the Playwright suite fails on a focus indicator below 3:1 or a tap target under 24px, and the site is measured at 320px as well as desktop. Both apps deploy to Cloudflare Workers through OpenNext.

Built with

Cloudflare D1
React
React Three Fiber
Cloudflare R2
Cloudflare Workers
Next.js
OpenNext
Playwright
Tailwind CSS
TypeScript
Three.js
Zod
pnpm

What I learned

Three things cost me a production incident each, and all three were invisible locally.

Cloudflare's runtime refuses PBKDF2 above 100,000 iterations. I had set 600,000 — OWASP's current recommendation — and every password operation returned a 500 in production while passing every local check, because Node has no such cap. A limit that exists only in the deployment target cannot be caught by running the operation locally; it has to be written down as a number and asserted.

Deploying before applying a database migration takes the whole site down, not just the new feature, and `wrangler rollback` is unavailable. The order is now the first thing in the README.

A CSS grid item will not shrink below its contents' min-content width. That let a skill card force a 358px column inside a 270px container, and the page scrolled sideways on any phone under 375px. The test suite ran at 412px and passed through it for weeks — so the fix was as much about sweeping widths as about adding min-w-0.

The broader lesson is that "it works locally" is a weaker claim than it feels like, and the useful test is usually the one that asserts a fact about the environment you do not develop in.

Gallery

Portfolio - Project Cards
Portfolio - Project Case Study
Portfolio - Skill Cards
Portfolio - Interactive Terminal
Portfolio - Contact Form
Admin - Dashboard
Admin - Project Section
Admin - Project Form
Admin - Skill Section