I rebuilt my dad’s owner-operated HVAC and heat pump website, moving it from Framer to a custom Next.js build on Vercel.
Framer → custom Next.js PageSpeed desktop 66 → 100, mobile 60 → 90
In 2018, my dad gave me the chance to take my first web development course. Eight years later, I used those skills to rebuild his business website.
He quotes every job, does every install and answers the phone himself. “Owner Operated” is written on the side of his van. The old site didn’t show any of that, so my goal was to make the real person behind the business visible.
The site exists to bring in quote requests and calls from Greater Boston homeowners, most of them on mobile.
The constraint: the owner’s copy stays as written. Every line was approved by him, and the design adapted to the text, not the other way around.
I reviewed and committed every phase before starting the next, so any step could be rolled back.
Scaffolded Next.js, wrote a CLAUDE.md with project rules and created a private GitHub repo with the gh CLI.
Crawled the Framer site into typed TypeScript files, renamed every image and listed each broken link and SEO issue.
Explored three directions in Claude Design and chose “Clean & technical”, with reference research on Behance, Dribbble and Land-book.
Generated product images and animated videos. Real photos for anything showing people.
Handed the design to Claude Code and implemented it in Cursor, following the CLAUDE.md rules.
Quote form, Mass Save checker, Google reviews and service pages.
Deployed to Vercel, fixed DNS at GoDaddy and checked that email still worked.
Compared Google PageSpeed before and after.
A dark navy and charcoal palette, a clean sans-serif, monospaced uppercase eyebrow labels and pill buttons. I took inspiration from clean-energy and solar sites rather than typical HVAC templates, to position heat pumps as modern clean-tech.
Design system. Colors, type scale, spacing and radii are defined once as tokens, with a small component set reused on every page: buttons, cards, section headers, stat cards and form fields.
The hero pairs a real photo with quote and call CTAs and three stat cards: $8,500 in rebates, 0% financing and 1 owner.
Service pages. One reusable template serves three services: a hero with video, feature cards, a page-specific block (Mass Save on the heat pump page), then the shared how it works, reviews, FAQ and CTA sections.
Homeowners enter their ZIP code, heating type and utility, and get one of three results: likely qualifies, may qualify for local municipal rebates, or not eligible for Mass Save. Eligibility depends mainly on whether the utility is a Mass Save sponsor and what heating system the home has now, so a ZIP code alone isn’t enough. Every result says that Mass Save confirms final eligibility.
Four steps (Service, Your home, Details, Contact) with a progress bar and validation at each step, so leads arrive complete. Submissions are emailed with Resend.
A segmented toggle switches between three services. Each shows a looping product video on a dark stage and a spec card. It’s built as accessible tabs, with all panels rendered in the HTML for SEO.
I replaced a third-party widget that broke on client-side navigation with a custom section designed to match the site.
The final call to action shows a manifold gauge set suspended into the section from a line above the card, with a gentle CSS sway.
Every photo of my dad, his van and his jobs is real. I used AI only for equipment renders and animations.
Generated a clean studio still in Gemini (white unit, navy background, blue glow, no logos or text), then reused it as a style reference so every asset matched.
Animated the still in Higgsfield with Kling 3.0: image-to-video, 1080p, with audio and prompt enhancement off.
Ran each clip through a reusable ffmpeg script (reverse, hold, ping-pong or crossfade loop) and exported MP4, WebM and a poster image, each under about 3 MB.
A Next.js App Router site in strict TypeScript, so copy updates never touch UI code.
/content. Components stay presentational./services/[slug], renders all three service pages from services.ts and keeps the original URLs for SEO.next/font.sitemap.ts and robots.ts.HVACBusiness on the home page and Service on each service page.next/image for all images. Videos lazy-load with IntersectionObserver, posters first.prefers-reduced-motion and have pause controls.The site went live on Vercel with DNS kept at GoDaddy, so my dad’s Google Workspace email was never at risk.
www.airsupp.org pointed to Vercel through a CNAME and verified immediately.
The root domain failed verification. GoDaddy still held two A records for Framer’s IPs next to Vercel’s, so traffic was split between the old and new sites.
GoDaddy’s bulk delete threw a DNSZoneExternalNameserver error. Deleting the two old records one at a time was the fix path.
All MX, SPF, DKIM and verification records stayed untouched. I avoided switching to Vercel nameservers on purpose.
The Framer plan stays active until the new site is stable.
Desktop reached 100 across the board, and Total Blocking Time dropped from seconds to 30 ms.
| Score | Mobile, before → after | Desktop, before → after |
|---|---|---|
| Performance | 60 → 90 | 66 → 100 |
| Accessibility | 86 → 100 | 92 → 100 |
| Best Practices | 92 → 100 | 92 → 100 |
| SEO | 69 → 100 | 69 → 100 |
| Total Blocking Time | 2,300 ms → 30 ms | 3,270 ms → 30 ms |
| Speed Index | 5.5 s → 2.3 s | 1.8 s → 0.8 s |
Google PageSpeed Insights, Lighthouse 13.5, measured Sep 28, 2026.
AI sped up nearly every phase, but the decisions that made the site trustworthy were human ones.
| Decision | Why |
|---|---|
| Real photos of the owner, AI only for equipment | A fake technician would undercut an “owner-operated” brand. |
| Owner’s copy kept verbatim | He knows his customers. AI tools repeatedly tried to rewrite it, so I checked every section. |
| Rebuild, not export from Framer | Exported Framer code is unmaintainable, so I migrated the content instead. |
| Phased prompts with commits between them | Reviewable steps and easy rollbacks beat one giant prompt. |
| Eligibility checker phrased as an estimate | Mass Save makes the final call, so results never promise approval. |
| DNS kept at GoDaddy | It protected my dad’s email during the cutover. |
| Higgsfield Starter, monthly | Enough credits for the job. I ignored the repeated upsell timers. |
What I’d do differently: lock the copy and the asset style reference before designing, and add layout-shift checks to the review of every section, not just at the end.
Tell me what you’re building. If I’m not the right fit, I’ll tell you that too.
or email hi@klep.dev