Design + Development • Personal • 2025–2026
Building This Website
4–6 hrs
active build time
11 days
start to finish
20+
feedback sessions
6
page templates built
Project Overview
My previous portfolio wasn’t telling the full story. I needed something that could hold three very different bodies of work (product management, design, and fine art) and still feel cohesive and distinctly mine.
Rather than defaulting to Squarespace or Framer, I decided to build it myself using Claude Code. I’d been watching vibe-coding become a real workflow in design and product environments. Using AI tools fluently isn’t a shortcut anymore, it’s a skill. I wanted to prove to myself that I could lead a full technical build end-to-end, even without an extensive engineering background.
The result is a fully custom, self-hosted website that I designed, directed, and shipped solo, over 11 days.
What I Built
The result is a fully custom Next.js site. No templates, no drag-and-drop builders, just clean code I understand and can maintain. Every page, interaction, and visual detail was a deliberate choice.
The Challenge
Communicating design intent without code vocabulary:
I don’t write CSS. So I had to get precise in other ways. I referenced sites I liked, describing the feeling of an interaction, explaining what was wrong with what I was seeing in the browser. This pushed me to develop a much sharper design vocabulary. “The yellow isn’t readable” became “match the header yellow to the gold in the page body hover states.”
Debugging as a non-developer:
When something broke, I couldn’t read the error and fix it directly. I had to describe symptoms clearly, share screenshots, and trust the iteration process. This was frustrating at times, but it taught me a lot about how design decisions translate (or don’t) into code. I got faster at identifying root causes by the end.
Staying the creative director:
The biggest challenge wasn’t technical, it was staying in the driver’s seat rather than reacting to whatever the AI produced. The best outputs came when I arrived with strong opinions. The weakest moments were when I asked Claude to “make it look better” without knowing what better meant to me. The tool is only as good as the direction behind it.
Approach
Phase 1, Foundation & Creative Direction:
Before writing any code, I had to figure out what I wanted the site to feel like. I gathered reference sites, prepared my content, and came into the build with a clear creative vision: warm tones pulled from my artwork, a clean editorial layout for the projects section, and interactions with genuine personality. I used my existing project case studies as context documents so Claude always had a full picture of my work and voice.
Phase 2, Page by Page:
I worked through the site section by section — home, projects, art, about, contact — iterating on each until it felt right before moving forward. The projects pages needed structured case study formatting with enough visual breathing room to let the work speak. The art pages needed a gallery experience that felt more like a museum than a portfolio grid. This phase was the most iterative. I would describe what I wanted, see the result in the browser, and redirect with precision. Every detail went through multiple rounds, from cursor behavior to scroll animations and hover states. I logged 20+ distinct feedback sessions across the 11 days.
Phase 3, Polish & the Details:
The last stretch was the hardest and the most satisfying. Getting scroll animations to trigger correctly at all scroll speeds. Making the lightbox image expansion feel seamless. Matching the exact yellow across the header and page body. Ensuring the contact page read cleanly on mobile. These aren’t glamorous problems, but solving them is the difference between a rough prototype and something I am proud to share.
Impact & Outcomes
Strong opinions make better AI outputs. The more specific and directional I was, the better the results. Vague prompts produced generic designs. Clear creative conviction produced something that felt like mine.
AI doesn’t eliminate iteration, it makes each iteration faster. I still went through dozens of rounds on the scroll animations, the nav header, the contact page. The difference is that each round took minutes instead of days.
Shipping teaches you things planning can’t. Seeing the site in a real browser, on my phone, at different screen sizes is where the real design work happened. No amount of planning would have surfaced the issues I found by actually using the thing.
This is the future of building. Not because AI replaces designers or developers, but because the gap between “I have an idea” and “I have a website” is getting shorter. Knowing how to close that gap — with taste, direction, and persistence — is a real and growing skill.