Structural Systems

A full-height section on the home page pins to the viewport while vertical scroll drives a horizontal track of project cards sideways. Below 1024px, and for anyone who prefers reduced motion, the same cards become a native scroll-snap carousel instead.

The projects are the entire sales argument, and a contractor's prospect will not click into seven of them. Turning the scroll they were already doing into a pass through the whole portfolio puts every job in front of them without asking for a decision.

Every photo in a case study carries a room tag from a fixed vocabulary. On desktop, clicking a tile promotes that photo to a large anchor and refills the grid with every other photo of the same room, including ones the overview never showed; a back control returns to the collage. Below 1024px a tap simply enlarges.

A buyer looking at a renovation wants to see one room properly, not scroll a flat wall of twenty photographs. The room tag turns a gallery into a tour, and it lets the page hold far more photography than it displays at rest.

One view renders every project page. Which sections appear is decided by what the project data contains: narrative blocks for a story-led job, a dated frame-by-frame sequence plus a row of vertical clips for a photo-led one, full-bleed drone interludes and a status chip for a job still under construction.

The evidence available differs job to job. Some projects came with a written story, one came as 633 jobsite photographs and no copy, and one is half-built. Letting the data choose the layout means a thin project does not have to pretend to be a thick one, and a new project never needs a new page built for it.

Two photographs of the same room stacked and clipped to a handle the visitor drags across, with arrow-key control and labelled Before and After chips.

Renovation is the hardest thing for a contractor to sell in a photograph, because the finished room looks like it was always that way. The slider makes the visitor do the reveal themselves.

The index reads two sources: hand-written case studies held in the codebase, and published project rows from the owner's CMS. Editorial studies lead, CMS projects that are not already covered follow, and both render as the same card. The page is statically generated and revalidates hourly.

The owner needed to add a job without waiting on a developer, but the flagship case studies needed the care of hand-written editorial. Merging the two sources into one route means neither is a second-class citizen and the nav click stays instant.

On a visitor's first page view of the session, a construction title block draws over the page while a counter runs to 100, then dissolves as the hero settles out of a slight scale-up so the hand-off reads as one move. It shows once per session and is skipped entirely under reduced motion; the page content sits underneath it in the DOM the whole time.

The whole site is built on a drawing-set metaphor, and this is where it is stated. Gating it to once a session keeps it from becoming a toll booth on the second visit.

A five-field form validated in the browser with the same schema the server uses, posting to an API route that rate-limits by IP, checks a honeypot, revalidates, strips HTML from every free-text field, writes the row with the service role, and then sends the notification email. The anonymous role's direct insert is revoked at the database, so that gauntlet cannot be walked around.

It is the only place on the site where a stranger can write to the client's database, and the only thing on the site that makes money. It also feeds the same admin the owner publishes projects from, so a lead and its reply live in one place.