How this site was designed and put together.

The concept

Auto shops are usually stuck between two bad defaults: a generic "trades" template in slate blue and safety orange, or no real site at all. Trueline goes a different direction — vintage-garage-meets-modern-shop. The idea is a business that's been doing honest, skilled work for decades and isn't shy about it: a badge-style emblem, a slab-serif signage feel, and a charcoal-and-brass palette that reads more like a workshop patch than a corporate brochure.

Every piece of copy reinforces the name — "Trueline" is a wheel-alignment term as much as a promise of honesty, so the language throughout leans on straightness, precision, and plain talk rather than sales-speak.

Typography and color

Three typefaces do all the work. Bitter, a slab serif, carries headlines and the shop story — it has enough weight and character to read like signage without tipping into novelty. Staatliches, a condensed industrial display face, handles the badge lettering, kickers, buttons, and navigation — anywhere the site needs to feel stamped rather than typed. Work Sans is the body workhorse, chosen for being clean and easy to scan at length without competing with the two display faces.

The palette stays deliberately narrow: near-black charcoal for structure, a single brass/amber accent used sparingly so it still means something when it appears, and a warm off-white for text and highlights instead of a stark white — it keeps the whole site feeling lit by work-light rather than a screen.

Structure — four real pages

This is a genuine multi-page site, not a one-pager with anchor links pretending to be pages. Each of the four sections lives at its own address:

• index.html — the home page: hero, trust strip, a services teaser, why-us, testimonials, and a booking call to action.
• services/index.html — the full service menu, broken into seven clearly scoped categories instead of one long wall of text, plus a simple four-step process explainer.
• about/index.html — the shop's story, its values, the team, and a small photo gallery of the space itself.
• contact/index.html — shop hours, address, a large tap-to-call phone number, and a stubbed service-request form.

Every page shares the same header and footer, and the nav paths are relative to each page's folder depth — pages one level down (like services/) reach the homepage with ../index.html and reach each other as siblings. It's a detail that's easy to get wrong when a site grows past a single file, so it's worth calling out explicitly.

The imagery

Every photograph on the site — the shop bay, the technician portraits, the tool wall, the engine and brake detail shots, the shopfront — was generated rather than sourced from a real business, since Trueline itself isn't real. The direction was consistent across the whole set: warm practical work-light instead of cold fluorescent, honest hands-on moments instead of glossy stock-photo energy, and nothing that reads as a specific real shop's signage or branding.

The signature motion

Two techniques carry the site's motion identity. First, the badge emblem — visible on the home hero and the about page — draws itself in on scroll: the outer rings stroke on, the lettering fades up, and a small gauge needle swings into place with an elastic ease, like a dial settling after a reading. Second, every service card gets a hover state modeled on a torque wrench: the card lifts slightly and its icon rotates into place with a snap, rather than a generic fade or scale.

Everything else — section reveals, staggered card entrances, the sticky header's shadow on scroll — runs through GSAP's ScrollTrigger, loaded from a CDN with no build step required. prefers-reduced-motion is respected: visitors who've asked for less motion get the finished layout instantly, with no animation gating content.

Responsiveness and craft details

The layout was checked from a 375px phone width up through large desktop screens. The nav collapses to a slide-in panel below 860px, the multi-column grids step down to two and then one column as space tightens, and overflow-x: clip is set on both html and body so nothing — including the full-bleed hero image and footer — can force horizontal scroll on a narrow screen. Contact information, especially the phone number, stays a real tel: link everywhere it appears, sized large enough to tap comfortably on mobile.

The contact page's service-request form is intentionally a visual demo: it validates and shows a confirmation state on submit, but doesn't send anything anywhere. That's disclosed directly on the page rather than left ambiguous.

Deploying a site like this

Because there's no build step — plain HTML, CSS, and a small JavaScript file, with fonts and animation libraries loaded from CDNs — deployment is just a matter of hosting static files. The most common path is Netlify: drag the project folder onto Netlify's deploy target, or connect a Git repository and let it deploy on every push, and the site is live on a Netlify subdomain within a minute or two, with a custom domain attachable afterward under Site Settings. Because every internal link in this project is relative rather than absolute, the whole folder can also be dropped into any other static host — GitHub Pages, an S3 bucket with static hosting enabled, or a traditional shared host — without changing a single link.