Gordon Family Day Care

Family day care · Sydney upper north shore

WEBSITE BUILD · 2026

Gordon Family Day Care home page — Meet Vera section with the educator's introduction and three certifications: Diploma in Early Childhood Education, Safe Food Handling, First Aid

THE PROBLEM

Looks finished.
Ships nothing.

A Figma Make export had given Vera something that looked like a site — forty-eight shadcn components in the scaffold, a long dependency tree, and client-side rendering only. Crawlers and social cards saw an empty shell on first byte. The brand was warm and personal; the build was a generic single-page React app.

48 Scaffold components

CSR Empty shell on first byte

2 Domains, no canonical

Gordon Family Day Care 'My Program' section — Quicksand heading, plain-language copy describing the Early Years Learning Framework and Outside School Hours Care

THE APPROACH

From scaffold
to small site.

WK 01 TRIM THE SCAFFOLD MONFigma Make handoff · full audit TUEdependency graph · what actually runs WED48 shadcn → 1 (Button) + utils THUruntime deps → ~8 total FRIbundle baseline locked

WK 02 PRERENDER THE PAGES MONvite-react-ssg eval · over CSR TUEsingle-route shell · / → App WEDbrowser-only APIs into useEffect THUdist/index.html SSR check FRICSS inlining · render-blocking gone

WK 03+ DRESS THE PAGES ▸Quicksand throughout · brand orange #ff6b35 ▸art-directed hero · landscape + portrait `picture` ▸six environment photos · WebP-only ▸seven anchored sections · Reveal fade-in

ONGOING HOST & CARE ▸Firebase Hosting · SPA fallback ▸legacy domain 301 → canonical ▸prefers-reduced-motion honoured throughout ▸care retainer · content + photo refreshes

01 · TRIM

Strip the scaffolding to what actually ships.

Forty-eight shadcn components down to one Button and a single utils file. The Figma Make scaffold's runtime dependency tree pruned to roughly eight production deps. A bundle baseline locked before any visual work began — every later choice would be measured against it.

02 · PRERENDER

Crawlers and social cards see real content, not an empty shell.

vite-react-ssg renders the full DOM into dist/index.html at build time; React hydrates over it on the client. Browser-only APIs (window, IntersectionObserver, matchMedia) confined to useEffect and event handlers so they never run during prerender. A custom Vite plugin inlines the CSS bundle into the HTML and drops the external <link>.

03 · DRESS

Type-led warmth. No stock photography.

Quicksand throughout, brand orange anchoring buttons and accents, an art-directed hero with landscape and portrait <picture> sources for tall mobile crops. Six commissioned environment photos shipped WebP-only — format support is well past the point of needing JPG fallbacks. Seven anchored sections, IntersectionObserver-driven Reveal fade-ins, smooth-scroll utility that honours prefers-reduced-motion.

04 · HOST

One canonical home, the legacy redirected.

Firebase Hosting serves the prerendered HTML; an SPA-fallback rewrite catches deep links. gordonfamilydaycare.com.au 301-redirects to the canonical gordonchildcare.com.au — link equity preserved, indexing collapsed to one host. Care retainer carries content updates, environment-photo refreshes, and the running pruning of any dependency that stops earning its keep.

THE RESULT

48→1 Components in production

~8 Runtime dependencies

100% HTML on first byte

A small, fast, honest site for a sole-trader childcare educator. No CMS, no client-side router, no rendered shell — the page Google sees is the page parents see. The brand stayed warm: Quicksand, brand orange, the educator's own photographs of the day-to-day environment. The build stayed light: every dependency added is one we plan to later remove.

“The site does the talking. I run the day care.”

— Vera Cheng, Gordon Family Day Care

Gordon Family Day Care is a one-educator business serving families across Sydney's upper north shore. The brief was simple to say and easy to get wrong: a site that feels personal without becoming hand-made, that loads instantly on a parent's phone between school pick-ups, and that disappears once the conversation moves to the phone. We built it static-first so the marketing site never gets in the way of the work.

OUTCOMES

Static, light,
indexed.

The site is live at gordonchildcare.com.au. What changed against the Figma Make starting point:

TIME-TO-CONTENT

Prerendered HTML on first byte. Bots, crawlers, and link-preview unfurlers see the real DOM without waiting for JavaScript — a hard requirement before any of this site's words could rank or share well.

BUNDLE WEIGHT

One runtime UI component, around eight production dependencies, CSS inlined into the HTML at build time. The render-blocking-CSS Lighthouse audit closes itself.

DOMAIN MIGRATION

The legacy gordonfamilydaycare.com.au 301-redirects to the canonical gordonchildcare.com.au. Two old hostnames consolidated into one, with link equity carried across.

ART DIRECTION

Art-directed hero <picture> swaps between landscape and portrait crops at the right viewport. Six environment photographs commissioned and shipped WebP-only — lighter than the JPG-plus-fallback pattern still common in 2026.

ACCESSIBILITY

Smooth-scroll and Reveal fade-in both honour prefers-reduced-motion — users who opt out of motion get a fully static site, not motion-with-reduced-amplitude.

ONGOING

Quiet site,
busy day.

Gordon Family Day Care continues under a care retainer — Firebase monitoring, environment-photo refreshes as the cohort changes, and the running discipline of removing any dependency that stops earning its place. The build tooling stays simple by design.