Building the 'before' on purpose: a website refresh you can flip through

A demo where the same fictional plumbing company gets two complete sites — a deliberately dated 2010-era build and its modern rebuild — with hash routes so either is directly linkable.

Kowalski Plumbing & Heating is a demo build — a fictional Ann Arbor plumbing company that exists so I could build its website twice. Telling an owner "your site looks dated" lands better when you can show the same business done both ways, so this project is a comparison view, a complete 2010-era "before" site, and a complete modern "after".

Stack: React 19, TypeScript, Vite, Tailwind CSS v4, static deploy on a Cloudflare Worker.

The before is a real build, not a strawman

The dated version is built with genuine period details — cluttered table-ish layout, tiny text, walls of copy, no responsive behavior — but the same honest content as the modern one. Both render from one shared data module:

1export const BUSINESS_DATA: BusinessInfo = {2  name: "Kowalski Plumbing & Heating",3  tagline: "Honest plumbing and heating services in Ann Arbor and Washtenaw County since 1989.",4  established: 1989,5  phone: "(734) 555-0189",6  // … email, address, city, zip7  serviceArea: ["Ann Arbor", "Ypsilanti", "Saline", "Dexter", "Chelsea", "Milan"],8  hours: "Monday - Friday: 7:00 AM - 6:00 PM | 24/7 Emergency Service",9  licenseNumber: "MI-PLUMB-1989-42819",10};

Sharing the data keeps the comparison fair — the refresh argument is about presentation and conversion paths, not about the new site having better content.

Hash routes so static hosting can't break it

Old, new, and compare views are hash-routed, which survives refresh and deep-linking on any static host with zero server configuration:

1useEffect(() => {2  const handleHashChange = () => {3    const hash = window.location.hash;4    if (hash === "#/old" || hash === "#old") {5      setCurrentRoute("old");6    } else if (hash === "#/new" || hash === "#new") {7      setCurrentRoute("new");8    } else {9      setCurrentRoute("compare");10    }11  };12  handleHashChange();13  window.addEventListener("hashchange", handleHashChange);14  return () => window.removeEventListener("hashchange", handleHashChange);15}, []);

That means I can send an owner straight to #/old ("recognize this?") or #/new ("this is the refresh") in a message.

What I'd improve

• A side-by-side scroll-synced view would make the comparison even more direct than tab-flipping.
• Real refresh pitches deserve real numbers — a Lighthouse before/after panel would ground it beyond aesthetics.

One of eight small-business demos on this site. Projects · Get a quote