How to Escape Framer Without Rebuilding an Entire Portfolio from Scratch

The goal was never to win an ideological fight between no-code and code. The goal was to own the parts of the site that power future work, without pretending a full rewrite is the only honest move. The path that worked was deliberately unglamorous. Teardown the existing site for structure first, rebuild priority pages in a real codebase, then use Figma as a comparison surface for the gaps the eye catches but screenshots miss. Ship what matters through GitHub and Cloudflare Pages, and let lower-value sections live on the old platform until there is a reason to move them.

A portfolio on Framer can be fast to iterate early, then slowly become the ceiling. The pain point here was not "Framer bad." It was the gap between what the site needed to become and what a closed builder makes easy. Case studies, structured content, tighter QA, and local workflows all lean toward a codebase you control.

The scary version of migration is the all-at-once rewrite. That version stalls because it is huge, risky, and easy to postpone forever. Meanwhile, the first naive attempt to "recreate it in code" often looks close until you start comparing spacing, type rhythm, responsive behavior, and the small decisions that make a page feel intentional instead of approximate.

So the real problem was scoping and fidelity at the same time. How do you move without stopping the world, and how do you stop fooling yourself with a first pass that only looks right from far away?

The site lived in a no-code platform that was fine for publishing, but awkward for the next layer of systems work. Migration stayed in the "someday" bucket because the imagined project was the entire property, not a slice of it.

Migration is a sequencing problem. You do not need a perfect replica on day one. You need a honest pipeline that turns unknowns into a checklist.

Teardown exists because screenshots lie. The useful output is not a moodboard. It is an understanding of how sections nest, what repeats, what is bespoke, and where the CSS is doing quiet work.

Figma enters as a correction layer, not as the source of truth forever. Import the live HTML, compare section by section, and turn "make it closer" into specific deltas. That is the difference between wandering and editing.

Selective migration is a feature. If case studies are the engine, move case studies. If an archive is rarely touched, it can wait on a subdomain or the old host until it earns attention.

Phase one is teardown with intent. The agent reads structure, styles, and builder patterns instead of guessing from visuals alone. That context is what makes the first code version start from comprehension, not vibes.

Phase two is the first coded rebuild in a stack that is easy to own, in this case Vite with React and TypeScript and Tailwind for styling. Expect imperfection. That is normal. The mistake is treating imperfection as failure instead of input for the next pass.

Phase three is HTML-to-Figma import of the source site, then a comparison pass against the coded implementation. When something is off, you can point to a frame, not narrate a feeling.

Phase four is shipping the high-value routes through GitHub to Cloudflare Pages, while less important sections remain on Framer or a subdomain. The outcome is hybrid architecture on purpose, not because the job was left half done.

Migration became a sequence of shippable moves instead of a mythical weekend where the entire site teleports.

The pages that needed a real component model finally had one, which makes case study publishing and future automation plausible instead of heroic.

Visual quality improved because "match the source" stopped being a vibe and became a set of comparable artifacts.

The hybrid setup is honest tradecraft. Not every page deserves the same maintenance cost. The architecture can say that out loud.

Works best for portfolios and small marketing sites where page value is uneven and a full migration is hard to justify in one step.

The stack names are interchangeable within reason. The durable parts are teardown, rebuild, compare, ship, and defer.

Weak fit when the organization cannot tolerate two hosting realities for a while. Hybrid migration needs a calm attitude toward temporary complexity.