Launching Payload Portfolio
How I designed, engineered and hosted it.
Time to Launch
I launched my Payload CMS Portfolio and Blog today, and I'm glad that it's finally live.
I picked Payload CMS because it's a NextJS stack, and I was comfortable with React so I figured it would be a great platform for this product. And since Payload was acquired by Figma, it's gaining more traction.
Initially this was built as a repo that would encourage engineers to build their own portfolio site, but spun as a business, and not a traditional portfolio, which is more of an elaborate resume. This solved a problem that I noticed where an engineering portfolio didn't add much value to understanding how the engineer solves problems and works with a team.
The goal was to create an affordable solution to develop and host an engineering portfolio, saving time and money.
How I did it
1. Hosting
After spinning up the Payload app, I decided to host the site on Vercel, and the Postgres database on Neon, which had very a reasonable free tier, and it was suggested by the Vercel documentation. Blob storage is done in Vercel Blob storage, and was easy to setup.
2. Engineering
I engineered the site with Claude Code, using the Payload Website Starter template.
It's helpful to use that, since you get your Posts collection setup automatically, and some great content blocks to start with.
Claude Code
I extended Claude Code with several skills and mcp servers including:
- Vercel MCP Server - to interact with deployments
- Neon MCP Server - to work with the database
- Penpot MCP Server - to read and write to the UI/UX Designs
- Impeccable Skill - to do an initial design them pass to the site.
Impeccable Skill
The Payload Website Starter Template works well to hook up everything that you would need, but it's pretty soul-less. And I wanted to get started engineering before creating all of the UI/UX layouts.
The Impeccable Skill in Claude Code was crucial to gaining momentum with the product, and get an initial pass of the designs for it.
The skill goes through a prompt creation wizard flow, asking you about the goals of the design, and inspirations behind it. After the flow, it creates several markdown files including Design.md, which is the basis for the design.
Then you prompt Claude Code to start working on the designs.
It's pretty simple.
3. Design
Of course, I could have used Figma to create the UI/UX designs for this site, but I wanted a free solution where I owned my designs and could hook up the platform to Claude Code. That's where Penpot came in.
With Penpot, you can use their platform to create your designs, and work with them. It's a free service, that has subscription tiers. I wanted to avoid all of that.
So the solution was to self-host Penpot in a Docker container.
Brilliant Self-Hosting solution to UI/UX Design
After spinning up the Docker Container in Orbstack, my Container Manager of choice, I connected Claude Code to Penpot through the MCP server, and instructed it to build out the layout of the Homepage. And it did.
This was a bit of engineering magic that is so rare these days when working with Agentic Systems. Most of the nitty-gritty code craft has been lifted off our plates. But this time the LLM showed me something unexpected, a somewhat complete layout of the Homepage; built directly from the Payload Components.
It wasn't complete, and took a lot of liberties with the text, but it was there for me to work with in Penpot.
Phase 2 - Looking Ahead
Now that I have the site up, and I have Penpot running reliably in Orbstack, I have everything that I need to completely make my portfolio my own.
I'm building my design system, my UI/UX Component Library, and my Payload Blocks and Page Layouts.
Then I'm going to slowly integrate them after I'm done with the designs.
Some of the things that I'm looking out for is breathing room and whitespace in designs.
So I'm using the technique where I zoom out on the design board, and look at the entire layout of the page from a distant perspective. If the layout looks cramped, then I add more padding and margin to the elements.
It feels great to be back in UI/UX design software again, since I was employed as a Designer before leaning into Engineering.
I'm currently going through the entire software production process myself, not having to rely on feedback or permission from anyone else, and it feels great knowing I can do all of this without fear of failure.