Scene 01Case file
Portfolio v2
This site: a portfolio told as a short film, running on a Payload CMS with live draft preview and an MCP server that lets my coding agents draft project entries for me to review and publish.
Overview
The second version of my portfolio started as a Framer Motion site backed by a separate Express/MongoDB API and admin app.
It's now a single Next.js 16 app with Payload CMS 3 built in: Postgres for content, UploadThing for media, and Resend for email.
The public side is told as a film, one question answered chapter by chapter, rather than a grid of cards. Behind it, the backstage is where the real engineering went. Publishing a change revalidates exactly the pages it touches. Live preview shows the latest draft beside the editing form through Next draft mode, gated to signed-in admins. And the site speaks MCP: an API-key-gated endpoint gives my coding agents tools to draft projects and ventures, upload screenshots, and see exactly which fields a draft still needs, but nothing an agent writes goes public until I press Publish.
Lab ventures graduate on their own: publish one at 100% and it flips to live and drafts its project twin.
What I built
- 01Next.js 16 with Payload CMS 3 built in
- 02Narrative "film" homepage instead of a card grid
- 03Live draft preview via Next draft mode
- 04MCP server: agents draft, the owner publishes
- 05Event-driven revalidation on publish
- 06Lab ventures auto-graduate into projects
- 07llms.txt for AI search engines
Stack
Next.js 16 · React 19 · TypeScript · Payload CMS 3 · PostgreSQL · UploadThing · Resend · Model Context Protocol · Tailwind CSS · Vercel