How I built this: The story of my journey designing and developing my website

Every developer needs their own corner of the internet, right? Somewhere to show off their work, share thoughts on the industry, or document a feature they're proud of. This has been on my to-do list for a while, but like a lot of personal projects, it kept getting pushed back. This time, some new tools made the decision easy enough to finally silence my analysis paralysis demons. Why not now? Here's how I built this site, and why I made the choices I did.

Why I Built It This Way

There are plenty of great ways to get a portfolio site up quickly, and nothing wrong with them, but I wanted this to be a project in itself. Choosing Payload CMS, Next.js, and Vercel was about building something scalable and maintainable, the kind of foundation you'd use in a professional setting. The site had to be worth talking about, not just something to link to.

For employers and clients, I wanted something that looked polished and professional the moment they landed on it, a site that felt like it was built by someone who cares about design, not just code. The layout, the dark mode, the avatar – every visual decision was intentional.

But I also had a more technical audience in mind. For developers and hiring managers who know what to look for under the hood, I wanted the site to hold up on that level too. It had to have fast load times, a solid architecture, and modern tooling that signals I'm keeping up with where the industry is heading.

Designing It

One of the biggest obstacles I always imagined when thinking about starting this project was design. I wanted a clear vision of what the site would look like before writing a single line of code, but when something is this personal, the options can be overwhelming. What colors should I choose? Do these fonts go together? Corner radius or no? The decisions are endless. So when I heard about Figma Make, I thought it was the perfect opportunity to try out this new tool for a personal project.

If you haven't heard of Figma Make yet, it's an AI-powered design tool that lets you describe what you want and generates a real design concept from it. And the file it gives you back isn't just a static mockup — it's fully editable! That gave me a strong starting point for the look and feel of jkirkwood.dev without the daunting task of starting from a blank canvas.

The initial design concept generated by Figma Make — a starting point I then customized.

Once I had the initial concept, I brought it into Figma to make it my own. One thing I knew I wanted from the start was dark mode, not just because it looks great, but because it's something a lot of users (myself included — I'm a developer after all, IYKYK) genuinely prefer. Getting both versions to feel cohesive took some iteration, but it was honestly one of the more enjoyable parts of the process.

For the avatar on the homepage, I used ChatGPT to generate an illustrated version of myself from a headshot I provided. It gave me something polished and consistent with the overall aesthetic of the site — and a lot more personal than a cropped stock photo of someone sitting behind a laptop.

The Tools, in Plain English

Building a website involves a lot of moving parts, and I was intentional about every tool I chose. Here's a quick breakdown of what's powering this site and what each piece actually does:

Payload CMS is the content management system. Think of it as the behind-the-scenes dashboard where I can write and update posts without touching any code. What drew me to it beyond its features is that it was founded right here in Grand Rapids, MI, and it's a tool several local agencies are already using. Supporting local tech while building something modern felt like a natural fit.

Next.js is the framework the site is built on. It's what makes the site fast, responsive, and ready to scale as I add more content over time.

MongoDB is the database, essentially where all the content lives. When I write a new post, it gets stored here and pulled onto the page when you visit.

Vercel is where the site is hosted and deployed. Every time I make an update to the code, Vercel takes care of publishing it to the web automatically.

Resend powers the contact form. When you reach out through the site, Resend handles delivering that message reliably to my inbox.

The Messy Middle

No build goes exactly as planned, and this one was no exception.

I started the project the straightforward way, by running npx create-payload-app to get everything scaffolded and set up. It worked great locally. But when it came time to deploy, I discovered that Payload has a specific template designed for launching on Vercel. I hadn't started with that template, which meant I needed to migrate my existing code into it before I could get the site live.

Once I discovered the template, I deployed it to Vercel and began migrating my existing code into it, which introduced some inconsistencies that took a while to track down. What followed was a few hours of methodical problem-solving. What do these error messages mean? Where do I add Environment Variables in Vercel? I had to track things down and re-deploy and solve each error one-by-one.

I leaned heavily on Payload's documentation and used ChatGPT to help me interpret error messages that I was unfamiliar with. It wasn't glamorous work, but it's the kind of work that actually matters. Debugging, reading docs, and piecing together why something isn't working the way you expected is a huge part of being a developer — and getting through it is what separates a finished project from an abandoned one.

By the end, the site was live and everything was talking to everything else the way it should be.

What I'd Do Differently / What's Next

If I were starting over, I'd begin with the Vercel deployment template from the beginning. It would have saved me a few hours of migration work and a lot of error messages. That said, I don't entirely regret the path I took. Working through those issues gave me a much deeper understanding of how Payload CMS is structured under the hood — the kind of understanding you don't get from following a tutorial that goes perfectly. Sometimes the longer road teaches you more.

As for what's next, this site is very much a living project. I'm planning to build out a proper portfolio section to showcase past work, publish more posts like this one, and experiment with interactive code snippets — small embedded examples that let you see code in action right on the page. The goal is for this site to grow alongside my skills, and to be something I'm genuinely proud to send to anyone.