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.
Where It Started
The portfolio had lived on Format — a polished visual platform built for creatives, at $200 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.
Added custom CSS directly to WordPress pages. Result: styles overrode each other unpredictably. Layout broke in ways that were difficult to trace.
Proper approach, wrong outcome. Some pages updated correctly. Others didn't. The site ended up with two navigation bars and two fonts running simultaneously.
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.
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.
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
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
Browser-based AI editing, long sessions, multi-page scope — these combinations produced hallucinated content, phantom pages, and compounding errors. Real risks, not theoretical ones.
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.
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.
Sometimes the most productive decision is the one that looks like going backward. Recognizing a broken foundation early is a skill, not a failure.
Same principle, bigger scope: AI handles the velocity. Product judgment stays human.
From Personal CRM to AI-Native Command Center
A full-stack application built production-ready in eight days — deployed to Vercel, actively in use, and expanding with each session.
A Problem Worth Solving
After Boulder Startup Week 2026, the problem was concrete: 40+ meaningful new contacts, context about each person scattered across notes, follow-up commitments made in conversation, and no tool shaped for the actual arc of professional networking.
Off-the-shelf CRMs optimize for sales pipelines — not for the nuanced history of a real professional relationship. For instance "I met Chuck at VentureX Denver in 2024, then again at BSW 2026, and I want to introduce him to someone" — that's the kind of layered context that needed a different model. And the CRM was only part of what was needed. Managing active projects, tracking job applications, setting weekly priorities, running automated calendar generation — one tool to hold all of it.
The decision: Build the tool I actually wanted, and use the process as a forcing function for developing real fluency with AI-native product development.
Technical Stack
My AI Development Process
The most important thing learned from this build: AI coding tools are only as good as the context you give them. The process is built around making that context excellent — and maintaining it rigorously across sessions.
Before writing any code, build the project's brain. Every project has a structured CLAUDE.md brief — full stack, domain model, route structure, design system rules, naming conventions, architecture decisions. This documentation isn't overhead; it's what makes every new conversation immediately productive.
AI coding tools degrade with broad scope. Keeping each session to one coherent piece of work — "build the contact detail page," "add effort levels to follow-ups" — consistently produces production-quality output. The discipline also forces product clarity.
Nothing ships without review. Every migration gets checked for proper RLS policies. Every component is verified for TypeScript correctness. Every API route is checked for auth guards. When bugs surface, gather evidence first, form a hypothesis, then have a focused debugging conversation.
The shift from "ask the AI to write code" to "design the feature together, then build it" changes everything. Think through the architecture, the data model, and the edge cases first. AI handles velocity. You bring the product judgment. The combination is genuinely different from either alone.
What Was Shipped — Session by Session
Four focused sessions, May 13–21, 2026. Each feature production-deployed to Vercel at the end of its session.
Next.js 16 scaffold with Supabase Google OAuth, protected routes, and middleware auth guard. Semantic CSS variable design system for light/dark theming. Contacts page (server-fetched grid, search, full CRUD), Interactions timeline with 9 type-filter pills, CRM Dashboard with stat cards and follow-ups panel, AI Insights panel via Anthropic Haiku. Deployed to Vercel.
Full follow-ups CRUD with overdue/upcoming/completed sections and contact search picker. Extended contact profiles with typed resource links (JSONB) and networking groups. Seeded 40 real Boulder Startup Week contacts with interactions and 21 follow-ups — making the CRM immediately useful, not just functional.
DB enum for follow-up effort levels (Quick Win / Medium / Big) with By Status / By Effort view toggle and color-coded effort picker. Diagnosed and fixed a production 403 caused by missing GRANT permissions on SQL-migrated tables — not covered by RLS alone. Resolved a Vercel build conflict between middleware.ts and proxy.ts (Next.js 16 uses proxy.ts with a named export).
Full contact detail page at /crm/contacts/[id] — two-column layout with profile sidebar (email, phone, LinkedIn, tags, groups, notes, open follow-ups) and a visual interaction timeline (chronological, grouped by month, 10 interaction types). Quick-add interaction and follow-up modals pre-filled from contact context. Card-to-detail navigation with stopPropagation on action links.
See It in Action
A walkthrough of the Atlas Command Center — covering the CRM dashboard, contact detail pages, follow-ups with effort levels, and the interaction timeline.
Key Insights
Investing in the project brief and session log before writing code — not during — is the single highest-leverage action. A well-maintained CLAUDE.md turns a 4-hour session into what would have taken a full engineering sprint.
Starting with proper auth, RLS, and TypeScript — even on a personal tool — meant no retrofitting security as the codebase grew. The cost is low early; the payoff is high later.
AI executes at speed, but it can't make product decisions. Knowing which features to build, how they should feel, and what the interaction model should be — that's the human contribution. AI handles the velocity.
When you can test a real deployed feature within hours of conceiving it, intuitions get calibrated fast. Eight days of building taught more about what actually works in a productivity tool than months of thinking about it would have.