Portfolio Site Rebuild

From WordPress Chaos to Hand-Built HTML. What started as a platform cost decision became a masterclass in constraints, priorities, and knowing when to scrap and restart.

Stack
Full-Stack + HTML/CSS
Time to Ship
<6 Days
Status
Live in Production

Where It Started

The first iteration of my portfolio site originally lived on Format — a polished visual platform built for creatives, at $250 per year. The decision was made to migrate to WordPress, which promised flexibility at lower cost. What WordPress delivered instead was a familiar trap: infinite configuration options and approximately zero of the ones actually needed.

After several rounds of tweaks and screen-share reviews, it was looking decent — not great, but serviceable. Then an offhand comment from a friend changed everything: "I bet Claude could just make you a better one anyway." Famous last words.

The Five-Step Unraveling

What followed was a systematic escalation through every available tool, each one solving part of the problem while introducing a new one.

Step 01
Custom Code Blocks in WordPress

Added custom CSS directly to WordPress pages. Result: styles overrode each other unpredictably. Layout broke in ways that were difficult to trace.

Step 02
Built a Child Theme

Proper approach, wrong outcome. Some pages updated correctly. Others didn't. The site ended up with two navigation bars and two fonts running simultaneously.

Step 03
Claude in Chrome (Opus Model)

Used the browser AI extension to edit the live site directly. With 9 case studies in scope and Opus running by mistake, credits ran out in a single session.

Step 04
Switched to Sonnet — Hit the Wall

Continued with Sonnet. Hit usage limits, then hit them again. Pages started losing sections. One footer became two. A case study vanished. A new one appeared — one that had never existed. Content was being hallucinated.

Step 5: The Decision Point

At the end of week two. Staring at the screen. The site was a patchwork of conflicting styles, phantom content, and AI-generated placeholders. Two weeks of iteration on a broken foundation, is still a broken foundation. The choice was simple: revert to where it started, or scrap it entirely and start over.

It was time to scrap it.

The Pivot: Build It by Hand

WordPress was abandoned entirely. The site was rebuilt from scratch — in VS Code, with version control in GitHub, deployed for free on Netlify. Pure HTML, CSS, and vanilla JavaScript. Every pixel, fully controlled.

The rebuild took under a week. But the more interesting outcome was what the constraint forced: a harder question about scope. With every page carrying a real cost in time and effort, content had to earn its place. Nine case studies became six — not because the others weren't worth telling, but because getting six done well mattered more than having nine done poorly. The remaining three are in progress and will be added as they're completed.

Supporting content was cut or deliberately deferred with placeholder pages written to communicate enough that a reader could form a real impression — not encounter a gap.

Portfolio Site Stack

Frontend
HTML CSS & Shared Stylesheet Vanilla Javascript
Backend / Data
Static Site - no backend required Google Analytics
Deploy
Netlify - auto-deploy on push GitHub Desktop
Dev Tools
VS Code + Live Preview extension Claude Cowork (Sonnet) - paired programming

What Actually Mattered

After launch, the measure of success wasn't analytics. It was screen shares — watching real people navigate the site, hearing what landed immediately and what required explanation. That signal is harder to collect and worth far more than any bounce rate dashboard.

Lessons Learned

01
Early Adoption Has Real Failure Modes

Browser-based AI editing, long sessions, multi-page scope — these combinations produced hallucinated content, phantom pages, and compounding errors. Real risks, not theoretical ones.

02
Constraints Clarify Scope

Building by hand forced prioritization that drag-and-drop never would. Every page had to earn its place. The result was a leaner, cleaner site that communicated more clearly.

03
Technical Refresher with Purpose

A hands-on revisit of HTML, CSS, JavaScript, VS Code, and GitHub — from the developer's side, not the "someone else set this up" side. That perspective changes how you think about product work.

04
Know When to Scrap and Restart

Sometimes the most productive decision is the one that looks like going backward. Recognizing a broken foundation early is a skill, not a failure.

The Progression
In just under three weeks, I went from hand-coding this portfolio site as a technical refresher, to using agentic coding workflows to build and deploy a full-stack personal CRM — with a real database, authentication flows, and AI-powered features live online in 2 days.

Same principle, bigger scope: AI handles the velocity. Product judgment stays human.