Demo project (self-initiated): designed and built by me, not client work.
Migration · Speed (Demo project)
Everline Advisory: Framer to Astro Rebuild
- Client
- Everline Advisory, a concept site for a fractional CFO
- Design
- View the Figma file ↗
- From → To
- Framer site → Astro site in a GitHub repo
- Stack
- Astro, TypeScript, CSS design tokens, Netlify, GitHub
- Key result
- Mobile PageSpeed 78 → 99, desktop 98 → 100, same design
01 / The brief
Everline Advisory is a concept site for a fractional CFO who works with pre-seed to Series A founders. I designed it in Figma and first built it in Framer. It looked right, but mobile PageSpeed sat at 78, the site depended on a Framer plan to stay live, and the code couldn't be moved, versioned or edited outside the builder.
The goal: keep the design exactly as it is, make it load fast on phones, and put the code in a repo the owner controls.
02 / What I did
- Rebuilt every section as an Astro component in TypeScript, one component per section.
- Matched the Framer design: colours, type scale and spacing copied into design tokens.
- Shipped static HTML with no framework runtime, so the browser has almost no JavaScript to run.
- Self-hosted the fonts as Latin-subset variable fonts, about 83 KB in total.
- Served the hero image as AVIF and WebP with high fetch priority.
- Replaced Framer's scroll animations with one small script that respects reduced-motion settings.
- Kept the service illustrations as inline SVG with live text, so they stay sharp and readable by search engines.
- Wired the contact form to Netlify Forms with spam protection and a thank-you page.
- Set long-cache and security headers in netlify.toml.
03 / The result
| Before | After | |
|---|---|---|
| Mobile performance | 78 | 99 |
| Desktop performance | 98 | 100 |
| Accessibility (mobile / desktop) | 96 / 94 | 100 / 100 |
| Best Practices | 100 | 100 |
| SEO | 100 | 100 |
Google PageSpeed Insights, same design before and after.
04 / Easy to edit, easy to own
All site copy lives in one typed file, and each FAQ is its own Markdown file. Changing a headline, adding a service or opening new booking days takes minutes, by hand or with an AI coding tool like Claude Code or Cursor. The site is a GitHub repo that deploys on every push, so there's no builder subscription and no lock-in.
What I'd do for you
Have a Framer site that's slow on phones or tied to a plan? Send me the link and I'll tell you what a move to Astro would take.
Send me your site