How this site was put together

← Back to CoolFlow home

The concept

Most independent radiator and cooling-system shops either don't have a website at all, or share one with a general auto-repair listing that buries what actually makes them different. The brief here was to build a site for a shop that does one thing — cooling systems only — and let that specialization show in every part of the design, not just the copy.

That decision shaped the whole visual language. The palette is ice blue, steel gray, and white — literally the color of "cool" — instead of the reds and oranges most repair shops default to. The type pairing splits duty deliberately: a geometric display sans (Space Grotesk) carries headlines with a precise, engineering feel, while a monospace face (JetBrains Mono) is reserved for anything that reads like a spec sheet — turnaround times, diagnostic methods, part standards. That contrast is what gives the site its "data-sheet" texture without tipping into a cold, over-technical read.

Tone-wise, the copy leans into professional urgency without fear-mongering: overheating is framed as a symptom with a knowable cause, not a catastrophe. Warning signs are presented plainly — a rising gauge, a smell, a puddle, cold air from the vents — because a specialist shop's whole value proposition is catching the obvious signs before they become expensive ones.

Why four pages, not one

A single scrolling landing page works for a product pitch, but it undersells a service business. Splitting into Home, Services, About, and Contact as real, separate HTML files does two things a one-pager can't: each page gets its own URL a customer can bookmark or share directly (a mechanic saying "check out their services page" is a real thing), and each page gets room to go deep — the services page alone covers seven distinct repairs with symptom-first framing, which would be exhausting stacked into one scroll.

The structure stayed disciplined about what belongs where. Home sells the specialist positioning and gives a taste of everything. Services is the full reference — symptom, explanation, and a small spec table for each of the seven repairs. About makes the case for choosing a specialist at all, introduces the team, and walks through the diagnostic process step by step. Contact keeps the request form to the essentials a shop actually needs up front: vehicle info and a symptom description, not a novel.

Every page shares one navigation bar and one footer, generated from the same markup pattern with relative paths adjusted per folder depth (services/, about/, and contact/ all reach back to the shared assets/ folder with ../assets/). That consistency is what makes a multi-page site feel like one site instead of four disconnected documents.

The flow-line technique

The signature motion idea follows directly from the brand metaphor: coolant moves through a sealed loop, so the site's key visual moments are literal flow lines — thin SVG paths that trace a route across the hero image, the map card, and other visual anchors, with a glowing dot that travels the same path on a loop once the line has drawn in.

Mechanically, it's a two-stage GSAP effect built on the SVG "draw-on" technique: each path's total length is measured with getTotalLength(), then a matching stroke-dasharray/stroke-dashoffset pair hides the whole stroke until a ScrollTrigger fires, at which point the dash offset animates to zero so the line appears to draw itself in as the section scrolls into view. Once drawn, a small circle is looped along the same path using getPointAtLength() inside a GSAP ticker, which is what produces the traveling "pulse" — a stand-in for coolant moving through the system rather than a static decoration. Because it's driven off actual path geometry rather than a canned animation, the same technique reuses cleanly across a wide hero shot, a tall portrait, or a small map card just by swapping the path's d attribute.

Everything else on the site — card reveals, the hero entrance sequence, the trust-strip numbers — is deliberately simpler: fade-and-rise triggers on scroll, staggered slightly by index so grids feel sequenced rather than popping in all at once. The flow line stays the one moment of real signature motion so it doesn't get diluted by competing with itself.

Images

All photography on the site — the radiator macro shot, the technician hands, the engine bay, the pressure-test gauge, the facility interior and exterior, and the two technician portraits — was generated rather than sourced, then art-directed toward the same cool, precise lighting throughout so the photography and the UI feel like one consistent world instead of stock imagery bolted onto a design system.

Deploying it

There's no build step by design — every page is plain HTML, CSS, and JS, loading GSAP and Google Fonts from a CDN. That makes deployment close to the simplest case a static host supports:

1. Point a Netlify site (or any static host) at the coolflow-radiator/ folder as the publish directory.
2. No build command is needed — set it to none, or a no-op, since there's nothing to compile.
3. Confirm the four page routes resolve as folders with an index.html inside (/services/, /about/, /contact/, /guide/) — most static hosts serve these as clean URLs automatically.
4. Push again any time a file changes; there's no cache to invalidate beyond the host's own CDN.

This particular copy of the site is a portfolio demo and hasn't been deployed — but the folder is deploy-ready as-is.

← Back to CoolFlow home