Summary

Originally a hastily set up WordPress template site, I rebuilt a fully customized portfolio site using Claude Code and Claude Design.

🤖AI Transparency Statement: This article was fully written by me, then went through basic grammar checks and a non-editing feedback loop on clarity with Claude Sonnet 4.6.

About the PaulsForge Creation Series

This is the first in a series showing how I’m using AI-assisted tools to create a basic website. These articles aren’t intended to be a step-by-step guide, and they almost definitely do not contain best practices! The idea is to demonstrate how I can use these tools to bring high-quality results to life quickly, and what I’m learning along the way.

Background

The goal of the site is a fairly simple portfolio site to share a little more about me, and showcase my work for potential employers through writings and projects. Before Spring 2026, the last time I had a personal website was easily over 20 years ago. In fact, my first website was on GeoCities! I’d done other basic web page editing and creation over the years, but they were typically WYSIWYGs that allowed a code editing functionality as an option. Now I wanted to stand up a proper website, with my own domain, with my own hosting.

Fast forwarding through a lot of decisions this year, I decided to buy my domain through Cloudflare, and also set it up as the firewall in front of the domain. I chose WordPress as my platform, and ended up selecting Bluehost to be the host.

I actually had my sights aimed on my first Claude Code project, an unnecessarily complex sub-site for my wife and me to host a series of pizza parties this spring. I may come back with a short write-up on that and/or stub out a publicly viewable version of it under the projects for this site.

To support the sub-site, I quickly stood up the WordPress site. Plugins? Sure! Templates? Those look really cool, add a few. An AI editor? That didn’t work out great – at one point I had 2 competing headers, one on the page, one from the theme. Abandoned! Basically, I wiped the boilerplate content, made the most basic changes, then parked the main part of the site. There wasn’t much thought or intentionality put into it. Which brings us up to present!

The Setup

• VS Code as the editor
• git as version-control
• LocalWP to host the site locally
• Claude Pro Subscription
  • Claude Code plugin for VS Code – running in chat mode
    • Used Opus 4.8 set to high effort for most tasks in hopes to skip problems due to complexity of the project
  • Claude Design – Using Sonnet 4.6

Pause: Is this portfolio site overkill?

Could I create a portfolio site with WordPress stock themes, or hosts and editors? Absolutely, and I could probably get 95% of what I wanted out of them, which isn’t even the reason for going full custom. Although this approach does carry risk of breakage in the future by adding a lot of complexity through customization, I think it’s very much worth it for the experience and learnings.

Timeline of Creation Work

Early Planning

I started to jot out some notes, first in the Second Brain OS, but then in dedicated files about the site. I copied the requirements doc we’d generated for the pizza-party. This defined some basic things like the purpose of the site or the page, tool stack, audience, goals of the page, design notes, etc.

Designing with Claude Design

I’ve previously used Uizard, Google Stitch and Figma Make (as well as plenty of pre-AI design tools), but I have this Claude subscription and figured it should integrate nicely with Claude Code. My main learning from working with AI design tools previously was being overly prescriptive, so I entered an initial prompt giving a high-level of the site, the goals and to create some rough wireframes. It gave 4 high-level directions, 2 were okay, 1 was definitely out and I liked a couple of things from the other. We iterated through a couple of other decisions, and decided to move onto high-fidelity concepts. With a few tweaks we built the homepage, then the other pages. The ‘About’ page was the most interesting as I wanted to take more advantage of the web-format to give more than just a resume document recreation. I kept a simpler version as the MVP, and noted another for our north-star.

The challenge came in the export (or share as Claude Design calls it). First, there was no way to export all the pages together. Then I tried the export to Claude Code, which came complete with a prompt to copy then paste. Claude Code told me this was a prompt injection attempt and that Claude Design didn’t exist. After some finagling with MCP servers in VS Code, I was able to create the connection, and suddenly Claude Code could speak to and understand Claude Design to import the design files directly.

Kicking off the Project Planning

Armed with design files, I went back to the Second Brain OS to flesh out a few more plans. The overall plan is that it would help keep track of this project work (and my other projects), but the coding on the site would happen in a different folder and in separate Claude Code sessions that would focus just on this. It also helped with some basics of getting things like LocalWP set back up and how to properly initialize the new project.

Starting the new project, we actually were inheriting the messy old pizza-party project mentioned. It had its own CLAUDE.md file, roadmap documents and more.

I put Claude Code into planning mode (really important to keep it from jumping into action, and also has a neat way to comment in-line on its plans), and we kicked off an initialization effort. That led to a tentative roadmap and some basic roadmapping to get us ready for what came next.

What I noticed in the roadmap was a lack of smaller steps, and a lack of validation points. We spent the next morning digging into that, and only got about halfway through the project. I made the executive decision to start the project, as later requirements were likely to change.

Getting to Work

We kicked off the work, and immediately ran into a roadblock when it broke the pizza-party subsite. Turns out there was a misunderstanding of its implementation, despite the documentation and ability to otherwise review the code. Thankfully, the recommended option to move it to a plugin only seemed to take a few minutes compared to the 1-2 hours it projected. Maybe it does its time projections in human-hours? Or it was just made up?

After we got past this, Claude Code started moving at a breakneck pace again. But, one thing I noticed was it was making big structural changes that would be hard to roll back with git commits. I had to remind and request this, which it then codified into our plan.

We finished the rest of the first milestone of code cleanup successfully, and were full speed in the 2nd milestone to build out the styling system for the custom template when we hit another unexpected snag. I noticed that the bottom of the ‘g’ would be cut off in the heading font. I figured this would be an easy fix, and in fact it was not. After a lot of spinning and attempts, Claude Code realized this was actually a known issue and I verified it on the Google Fonts page itself. I’m condensing this story down, but suffice to say we burned a lot of time and tokens on what seemed very trivial, which unfortunately does reflect the pareto (80/20) rule in the real world.

We ended the day with scaffolding for the parts that would run on the backend, plus the 4 pages of the site.

Key Learnings

Working with AI coding tools is a crazy time dilation that simultaneously feels like rapid progress, but then you realize hours have passed. Tasks take minutes to complete, which is fast enough that you can’t really commit to a side task (like writing this article…) without slowing it down. All of a sudden, the day is gone. And on top of that, it’s really easy to become fatigued and mentally worn out even on a side project. Siddhant Khare wrote a great article on this that’s been widely circulated.

Learning: I need to work on my own workflow and cadence when vibe coding. I need to force more context switches and mental breaks to keep things fresh.

Planning and intentionality win out, even if I have to force it. I’m not the first to note this, but in both of these projects, it’s really apparent the value that this pays out later in the project.

Learning: I think a tool like Get Shit Done (GSD) might be able to both make this more efficient and thorough.

I’m lucky to have what little background I do have in software and web development. Claude Code + Opus 4.8 is overly ambitious to get to work at times, even with extensive planning. I keep trying to instruct it to either be very cognizant of architectural and other best practices, or help guide me, but things get missed. This speaks to both the background knowledge and experience needed to properly wield these tools, especially on a higher-stakes project, and my need to continue to learn these workflows and how to avoid some of these pitfalls.

I’ve had to stay on top of it also to make more regular git commits, force validation steps, and most importantly to me: update documentation. Not only is documentation a memory problem within this stretch of the project, it’s a bigger problem for me, other AIs or other humans in the future when this stuff isn’t so fresh. Maybe there are ways to force this further than in the CLAUDE.md and other reference files. It’s something I could look up later.

Learning: There have to be better skills, CLAUDE.md instructions or other best practices out there to better guide both of these things.