Everything that went into the rebuild.
Patrick James Bathrooms has 32 years of clients who come back and bring their friends. They needed a website that matched that standard. Here is a full account of what I designed, how I built it, and every decision along the way.
A site as good as the work.
Patrick James Bathrooms has renovated bathrooms across Sydney since 1994, with more than 2,000 projects to their name. Their reputation was built on word of mouth, but the old website did not reflect the quality of the work. It was slow, awkward on a phone, and gave a new customer no easy way to gauge cost or get in touch.
The goal: a website that looks as premium as the bathrooms, earns trust instantly, and makes it effortless for a homeowner to picture the project and request a quote. Everything below is custom. No plugins, no themes, no templates. Here is what that actually amounts to.
Built by hand, hour by hour.
A builder site is dragged together in an afternoon. This was not. Every page was written, every feature coded, every detail decided on purpose. Here is the scale of it.
Where the hours went
Roughly, across the project. Close to 200 hours of real work.
The full inventory.
Eleven interactive features on the homepage alone, each built by hand and each there to answer a real question a client has.
Six choices that
shaped the rebuild.
Good design is mostly the absence of bad decisions. Here is where the thinking went.
An editorial type pairing
Playfair Display at 900 weight carries the headlines, with italic applied deliberately to the key phrase in every heading and never by default. DM Sans handles all UI and body text. Tight tracking at display sizes, loose on eyebrows. The pairing reads like a magazine spread before it reads like a tradie website. That order matters.
A palette that restrains itself
Navy (#0a1628) as the primary ink. Blue (#1d4ed8) for interactive elements only. Champagne gold (#c9a84c) as the single accent that earns its place rather than repeating freely. Paper (#fafaf7) replaces cold white. Everything structural lives in hairlines and shadows. The colour does not do the heavy lifting.
Animation that holds back
A slow Ken Burns on the hero. A reading-progress bar in the brand gradient. Scroll-triggered fade-ups via IntersectionObserver. The easing curve is custom: cubic-bezier(0.22, 1, 0.36, 1), which overshoots slightly then settles. Nothing bounces, nothing loops indefinitely, nothing demands attention. prefers-reduced-motion is respected throughout.
Every feature earns its place
The calculator, lightbox, before/after slider, FAQ, style picker, and contact forms all run without a backend. Everything is client-side JS or a well-formed mailto link. Zero server dependency, zero hosting lock-in. Patrick can move this site to any host tomorrow and nothing breaks. Features were added because they answer real questions, not to pad the page.
Honest, durable markup
Static HTML throughout. No framework, no build pipeline, no CMS. Markup you can read top to bottom and understand in a sitting. AVIF and WebP images with JPEG fallback. Compiled Tailwind rather than a 3 MB CDN script. Far-future cache headers in .htaccess. The goal was a site that loads fast on the first visit in a Mosman kitchen with mediocre NBN.
Local presence, built in
Twenty-four suburb landing pages covering the Northern Beaches, North Shore, Eastern Suburbs, Inner West, Hills District, and more. Each has unique written copy and its own structured data. Eight blog articles on renovation topics people actually search for. The authority signals are built into the site structure, not bolted on with a plugin after launch.
The colour palette.
Seven tokens. Every colour decision on the site traces back here. Click any swatch to copy the hex code.
The fonts that carry it.
Two typefaces. One rule: if Playfair and DM Sans feel incongruent, the design is not working.
built to last.
What it runs on.
Plain web. The kind that does not need maintenance. The kind that lasts ten years and still works.
Engineered to score.
A heavy template can look fine and still fail where it counts: speed and search. Because this build ships almost nothing the browser does not need, it is made to ace the audits Google actually uses. The best part is you can run it through Lighthouse and check for yourself.
Real figures move a little with network and device, which is exactly why the site is engineered with this much headroom. A generic builder site rarely gets close.
This build versus a generic site.
The same business, two very different websites. This is what hand-coding buys that a template never will.
A generic site
Template or builder- Loads a heavy theme and scripts the visitor never asked for.
- One generic page or two, and maybe a contact form.
- Thin or duplicated location text that Google quietly ignores.
- SEO limited to whatever a plugin will let you change.
- A monthly fee, and you never actually own it.
- Looks like a thousand other businesses.
This build
Hand-coded for PJ- Ships only the code each page needs, so it loads in under a second.
- 40 pages, 24 written suburb pages, a cost calculator and more.
- Unique copy on every page, the way Google actually rewards.
- Structured data hand-written for rich results in search.
- Paid once, owned outright, hosted anywhere.
- A custom identity that looks like nobody else.
From first
conversation to live.
Six chapters. No agency overhead, no compromise by committee, no one else to blame if it was wrong.
Listening before drawing
Sat with Patrick. Read every review. Understood what kind of clients the business actually attracts and what they care about: no-surprises pricing, clean communication, showing up when they say they will. That became the brief. Not aesthetics: character.
Editorial, not tradie generic
The benchmark for this site was not other bathroom renovation websites. It was architecture magazines, high-end property listings, and luxury hospitality. The layout language, the type hierarchy, the photography treatment, the way the page breathes, all of it aimed at that register. Because Patrick's work lives in homes at that level.
Tokens first, screens second
Seven colour tokens. Two typefaces. One easing curve. A spacing scale and an elevation scale. All defined in CSS custom properties before a single page section was designed. Every downstream decision (buttons, cards, dividers, form inputs) flows from those choices rather than being made up each time.
Vanilla, deliberate, nothing wasted
Static HTML, compiled Tailwind for utility classes, custom CSS for the design system, hand-written vanilla JS for every interactive feature. No framework. No bundler. No CMS. The homepage alone is a complete, considered document. The suburb pages and blog articles were each written individually, not generated.
The work nobody notices
Reduced-motion paths for every animation. Focus rings on every interactive element. Descender breathing room on italic Playfair headings so letters like y and g never clip. Schema markup on every page type. AVIF images for every photograph. Keyboard navigation for the lightbox, the FAQ, the mobile menu, the send modal. The last twenty percent of effort that separates finished from done.
A site Patrick owns outright
No vendor lock-in. No monthly platform fee. No CMS account to manage or subscription to maintain. Files in a folder. Hosted anywhere. Editable by anyone who can open a text editor. The before/after slider pulls its content from a separate data file so new project pairs can be added without touching the main HTML. In ten years, it will still work exactly as built.
The feature that does the selling.
The finished bathrooms are the client's craft. The website is mine. So instead of more photos of tiling, here is the work that actually earns its keep: a custom cost calculator, structured data for search, and a build tuned to load in under a second.
Patrick and the crew own the work.
The website is a wrapper around 32 years of bathrooms.
Patrick and his crew own the bathrooms. The website is mine. If you want one built with the same care for your trade, your practice, or any small business where the online presence does not yet match the actual work, write to me at zac@zacwebsites.com.au or call 0461 519 696.
Want a site that works this hard?
I take on a handful of projects at a time. If you have something in mind, let's talk.