I Rebuilt My Personal Site with Claude AI and Claude Code. Here's Exactly How.

I'd been on Hashnode for years. It was fine. But "fine" started to bother me.

My site had no space for my newsletter archive, my podcast, my projects, or my talks. It was just a blog with a custom domain. My content was scattered across Hashnode, Buttondown, Transistor, and a few other places with no unified home. I wanted a single hub for everything I publish, built with the tools I know: Laravel, Filament, Blade, Tailwind. So I rebuilt chrisgmyr.dev from scratch as a self-hosted Laravel application.

The whole thing, from first conversation to deployed on Laravel Cloud, took about 24 hours (not working the whole time, of course). I used Claude AI for design and Claude Code for implementation. This is how I approached it.

Step 1: Design First, In Chat

Before touching code, I spent time in the Claude chat interface talking through the design. Most people skip this step. It's the most valuable one.

I didn't show up with a spec. I showed up with a handful of personal sites from other developers I respect, plus a vibe: dark-first, clean but distinctive, personality through typography and subtle interactions.

Before Claude made any recommendations, it ran a research pass, reviewing 14 developer blogs, dark mode design systems, typography pairings, and multi-content architecture patterns. That's not something I asked for explicitly. It's just what happened when I treated the conversation as a design session rather than a prompt. From that research, we worked through specifics together.

Colors. We landed on amber (#F59E0B) as the accent instead of the blue or green you see on every developer site. Amber is warm, pairs well with dark backgrounds, and clears accessibility contrast requirements. We mapped out a full palette for dark and light modes.

Typography. Space Grotesk for headings, Inter for body text, JetBrains Mono for code and metadata. Using a monospace font for dates, tags, and reading times gives the site a subtle technical feel without needing custom illustrations.

Layout. A bento grid homepage that shows all content types at once: blog posts, latest podcast episode, newsletter signup, featured project, and recent talks, all in one responsive grid. Plus /now and /uses pages for the personal context stuff I always end up wanting to reference.

Interactions. A cursor-following amber glow on the background, a reading progress bar on blog posts, cards that scale on hover with border color shifts, and animated link underlines. Small details that make the site feel alive without being distracting.

The key was treating Claude as a design collaborator, not a search engine. I pushed back on suggestions. I asked "why amber over teal?" and refined based on the reasoning. The conversation naturally produced a complete design system.

Step 2: Write the Plan Document

After the design conversations, I compiled everything into a single markdown file: chrisgmyr-dev-project-plan.md. Think of it as a detailed project plan and design spec combined.

The document covered:

• Design system: every color value, typography choice, spacing rule, and interactive detail
• Site architecture: routes, page layouts with ASCII wireframes, navigation structure
• Data models: migration schemas for posts, tags, newsletters, episodes, projects, talks, and pages
• Filament admin setup: resources to create, Block Builder blocks, dashboard widgets, and Unsplash integration (a dedicated UnsplashService, a custom picker modal inside Filament, attribution rendering on the frontend, and responsive image delivery via Unsplash CDN URL params)
• File structure: every controller, model, service, and view mapped out
• Implementation phases: six phases with specific tasks and acceptance criteria
• Package recommendations: what to install and why

The document ran about 800 lines of markdown. That might sound like overkill. It saved days of back-and-forth during the build.

When Claude Code had a question about how something should work, the answer was already in the plan. The quality of AI output is directly tied to the quality of your input. A vague "build me a blog" gets you a generic blog. A plan with wireframes, color values, and acceptance criteria gets you something that matches your vision.

Step 3: Build Phase by Phase with Claude Code

With the plan in place, I opened Claude Code and worked through the phases one at a time. Each phase had a clear scope and acceptance criteria, so I knew when to move on.

Phase 1: Foundation

Scaffolding: Laravel 12, Filament 5, Tailwind CSS 4, all migrations and models, the layout with nav and footer, and the theme toggle. Claude Code generated the initial structure based on the plan. I reviewed every file before committing.

Phase 2: Filament Admin

Seven Filament resources (Posts, Tags, Newsletters, Episodes, Projects, Talks, Pages), the Block Builder, an Unsplash picker modal for hero images, and dashboard widgets. This phase was the most Filament-heavy. Having the correct namespaces and patterns in the plan kept things on track.

Phase 3: Public Pages

Controllers and Blade views for every page. Blog rendering with markdown-to-HTML conversion, syntax highlighting with Prism.js, newsletter signup forms that post to Buttondown, and RSS feed generation.

Phase 4: Homepage Bento Grid

The responsive CSS Grid homepage pulling real data from all content types. This was the page I was most excited about. Seeing it come together with live data was satisfying.

Phase 5: Visual Polish

The cursor-following glow effect, reading progress bar, scroll-triggered animations, Open Graph meta tags, a custom 404 page, and the sitemap. The details that tell visitors you cared.

Phase 6: Content Migration

Importing blog posts from Hashnode, newsletter archive from Buttondown, podcast episodes from Transistor's API, and setting up 301 redirects so old URLs kept working.

The Simplify Pass

Here's a workflow I want to highlight separately, because it changed how I think about building with AI.

After Claude Code finished each phase, I'd review the output, then ask it to simplify. Look at the git history:

d1bbcb4 Phase 1: Foundation - models, migrations, layout, design system, routes
198d00e Phase 2: Filament admin - all content resources, dashboard, Unsplash picker
d2ed096 Simplify Phase 2: extract SlugHelper, fix duplicate labels, remove dead code
b8c72fa Phase 3: Wire up markdown rendering, prose styles, syntax highlighting
aba807a Simplify Phase 3: remove duplicate CSS, fix Prism timing, clean deps
50f9ec7 Phase 4: Homepage bento grid with all content types
8fa343d Simplify Phase 4: fix YouTube ID extraction, replace inline JS hover
ae9d3ab Phase 5: Visual polish, OG images, 404 page, sitemap
4b6e2a4 Simplify Phase 5: cache sitemap, add Project screenshot accessor
b052095 Phase 6: Content migration tooling and Hashnode redirects
331c4c9 Simplify Phase 6: fix cover images, canonical URLs, route structure

The first pass gets the functionality right. The second pass cleans it up: removes dead code, extracts shared helpers, fixes edge cases, tightens the CSS. This two-pass approach works well with AI code generation. Let it build fast, then review and refine.

Building Away from My Desk with Claude Code Remote Sessions

One feature I used a lot that I haven't seen written about much: Claude Code remote sessions.

The workflow: start a Claude Code session locally on my Mac, then connect to that same session from the Claude mobile app. This let me review progress, answer Claude's questions, and steer the implementation while away from my desk, during a lunch break, sitting on the couch after the kids went to bed, or waiting somewhere.

Claude Code will pause and ask for input when it hits a decision point or needs clarification. Without remote sessions, those pauses meant coming back to a stalled terminal. With remote sessions, I could respond from my phone, keep the session moving, and come back to a desk with more work done.

If you're running longer Claude Code sessions on a personal project, set up remote access. The async nature of the workflow fits evening-and-weekend building well.

What Worked

The plan document was the most important investment. Claude Code referenced it for architectural decisions, design values, and implementation details. No ambiguity. If you take one thing from this post, spend time on the plan before touching code.

Phase-based builds kept scope manageable. Each phase had clear acceptance criteria. I knew when something was "done enough" to move on.

The simplify pass caught real problems. Duplicate CSS selectors, dead code from refactoring, a timing bug with Prism.js initialization, inline JavaScript that should have been Alpine.js directives. A second review pass always finds something worth fixing.

Reviewing every commit mattered. I didn't rubber-stamp the AI output. I pushed back on approaches I didn't like and made manual tweaks where my taste differed from what was generated. The AI wrote the bulk of the code. I steered the architecture and design decisions.

What I'd Do Differently

Tests earlier. I added the test suite after most of the building was done. Writing tests alongside each phase would have caught bugs sooner.

Smaller phases. Phase 2 (Filament admin) and Phase 3 (public pages) were both large. Smaller chunks would have made the simplify passes more focused.

Screenshot-driven iteration. For visual polish, I should have captured screenshots after each change to track the progression. It would make this post more visual too.

Try It Yourself

If you want to take a similar approach on your own project:

1. Chat first, code later. Spend time in Claude AI talking through your design, architecture, and content strategy. Push back. Ask why. Refine until you have a clear vision.

2. Write the plan. Compile the conversation into a structured document with color values, wireframes, data models, file structure, and phased tasks. Be specific. "Dark mode" isn't a plan. "#0E0E10 background, #18181B surface, #F59E0B accent" is.

3. Phase your build. Break the work into chunks with acceptance criteria. Two to four days per phase. Commit after each one.

4. Simplify after each phase. Review the output, then run a cleanup pass. Remove dead code, extract shared logic, fix edge cases.

5. Use remote sessions. If you're building in short windows of time, connect your local Claude Code session to the mobile app. You can keep things moving without being at your desk.

6. Own the decisions. The AI writes the code. You own the taste, the architecture, and the tradeoffs. If something doesn't feel right, change it.

The site is live at chrisgmyr.dev. It's fast (server-rendered Blade, minimal JavaScript), looks distinctive, and gives me a single home for everything I publish.

Claude AI for design conversations and Claude Code for implementation felt like having a design partner and a senior engineer available at odd hours. The plan document was the bridge between the two. Writing it was the best time investment of the whole project.

If you try this approach, I'd love to hear about it. Find me on Bluesky or X.