Directing the Build

From 2020, I coded and maintained my portfolio site with Gatsby, React and Netlify. The more I built, the heavier the upkeep got. Constant package updates, breaking changes and new React features made it hard to focus on the work I wanted to show.

I wanted to focus on content and design with minimal coding, so in 2026 I started a rebuild in Framer. But after building the design system, page layouts and site functionality, I missed the control and flexibility of a hand-coded site.

That friction pushed me to stress-test Claude Code and see whether it could ease the load of self-maintained code.

With a fully functional Framer site and tons of context around my personal brand and design system, I scoped the rebuild like any other client project:

• A highly detailed brief with specific technical requirements. A living CLAUDE.md defines the stack, conventions and hard rules before a line of code is written, and Claude Code reads it at the start of every session.
• Scoped access. The AI got read-only tools: Framer through an MCP bridge, and the current Astro, React and site-package docs through another. Nothing could write to the source design, and the code written was always to framework standards and best-practices.
• The design system is fundamental and uniform across the site. Colors, type and content structure were pulled from the existing Framer project, not reinvented. I provided Lottie animations and additional images, videos and motion content as needed.
• Every change reviewed. Small commits, each one checked in a browser before it moved forward. For the initial commits, I reviewed most of the code and site structure, noting any issues or preferences to Claude.

With the Framer Model Context Protocol, I connected Claude Code directly to the Framer rebuild itself. It read the real color styles, text styles, fonts and CMS fields, and those became the site's global design tokens. CMS fields became a typed content schema, so every case study follows the same contract, and data can be passed programmatically to things like SEO metadata, image alt text, and build-time OpenGraph share images.

• Systems over pages. Two content collections drive every route. Adding a project is one folder and one file.
• Motion for emphasis (and a little showing off). Interactivity ships as small React islands: the lightbox, the filterable masonry grid, the nav menu and a Lottie hero. Everything else is static HTML.
• Always current with official documentation, even with breaking changes. Model knowledge of a framework goes stale fast. The brief tells Claude Code to check the current Astro docs instead of relying on memory.
• Crafting accessibility and reducing copywriting fatigue. I built a small tool on Claude's API to expand my shorthand descriptions into full alt text for every project image, then refined each one before it shipped.