Construction Website Template

About this construction website template

The 14 pages you get

Home /

The plumb line, the contractor’s position, the services, day rates and the quote close.

Services /services/

Extensions, masonry, groundworks and repair. What is actually offered, to whom.

Projects /projects/

Recent building and masonry work — the index that wins the next job.

Four project case studies /projects/…

A stone threshing barn made into a house, a segmental brick arch over a widened opening, a failed chimney taken down and rebuilt, a rear extension and knocked-through kitchen. Each a written route, not a photo caption.

About /about/

A working builder since 1974. Longevity is the trust signal in this trade.

Get a quote /enquire/

A working form plus a live tel: — with a free first visit as the offer.

From the yard /blog/

A wired content collection — add an .mdx file and it appears here and in the sitemap.

Three worked articles /blog/…

Why an arch needs a keystone and a wall does not; lime or cement, knowing which wall you have; what a structural opening actually costs. Homeowner questions, answered by someone who knows.

404 /404

Designed, not default. Keeps the navigation.

What is in the build

• A plumb bob on a fixed gutter rail that rides scroll, sways with scroll velocity and settles to true vertical at rest — the only motion on the page
• Published day rates as typed data, which is rare in building and enormously effective
• Four written project case studies rather than a photo gallery, because a homeowner choosing a builder reads rather than browses
• Full-bleed amber and navy colour fields with gold restricted to active nav, numerals, price and CTA
• Services, projects and rates as typed arrays in src/data
• Archivo Black with IBM Plex Sans via Fontsource, served from your own domain; a working quote form plus a live tel:
• Vitest and Playwright suites included in the repository

The design decision

Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 62 different worlds reading as one design system in different paint.

The world

Amber and navy hoarding blocks — a builder's site in full-bleed colour fields with heavy black display type, navy panels, and gold spent on active nav, numerals, price and CTA. A contractor's site: services, projects, rates, enquiry.

The mechanic

"The Plumb Line": one fixed gutter rail carries a plumb bob that rides scroll and sways with scroll velocity, settling to true vertical at rest — gravity finding vertical, the only motion on the page.

Loud channel

Palette

Imagery. Navy shadow to paper

Type & palette

Archivo Black · IBM Plex Sans

#f5b942 #14110a #14213a

Who it is for

Built for building contractors, masonry and stonework firms, extension specialists and general builders — and the agencies that build for them. It suits a contractor who wants to look established rather than trendy. For landscaping and garden build, the landscaping build is the design-led sibling; for fabrication, metal-fabrication.

Under the hood

• Astro 7 · static output, zero client framework
• Tailwind 4 · one @theme block holds the palette
• MDX content collections for the blog
• GSAP + Lenis for the scroll work, reduced-motion aware
• Self-hosted woff2 — no Google Fonts request
• Sitemap, canonicals and per-route meta wired
• Vitest + Playwright suites in the repository
• Zero third-party requests · strict CSP-ready

How to get started

1. 01 Accept the repository invite and clone it.
2. 02 Run npm install, then npm run dev.
3. 03 Replace the content in src/data/ with your own — that is where the brand, the copy and every list live.
4. 04 Swap the images in public/images/ and the palette in the @theme block.
5. 05 Run npm run build and deploy dist/ anywhere static.

Questions