Hearthstone Home Studio

Hearthstone Home Studio is a fictional luxury renovation company I designed and built as a showcase piece. The brief was to take an Elementor construction template, keep its layout, spacing and hierarchy, and rebrand it with new copy, photography and colours, as a fast static site.

• A single-page Astro site with an overlapping stats card, service grid, full-bleed project tiles, quote form and FAQ
• Responsive AVIF and WebP images in several sizes, sourced from the Pexels API by a small fetch script
• Scroll-in animations with Motion's 4.6 KB vanilla build, without shipping a React runtime
• A Tailwind CSS v4 and shadcn/ui theme where navy sections switch colours through one scoped token set
• Basic SEO: title, description, Open Graph image, sitemap and robots.txt

• shadcn/ui components render to static HTML at build time, so buttons and the quote form ship no framework JavaScript
• Tailwind only scans the shadcn components the page uses, which cut the inlined CSS from 209 KB to 49 KB
• CSS is inlined into the page to remove the render-blocking stylesheet request
• Animated content is hidden only once JavaScript runs, so the page stays fully visible without it and for reduced-motion users

• Lighthouse flagged the hero and panel photos as larger than displayed; adding intermediate srcset widths lets the browser pick files close to the rendered size
• The quote form's mailto: action triggered an insecure-form warning, so the email is now composed in a small submit handler instead
• A two-step script chain delayed the animations; loading the Motion bundle directly removed the extra request

PageSpeed Insights (September 2026) scores the live site 100 for performance, accessibility, best practices and SEO on desktop. On mobile it scores 99 for performance and 100 for the other three.