Grain Construction

Grain Construction built its reputation on Salt Spring Island the traditional way: good work, word of mouth, and an Instagram account. No website, ever. When the owners reached out there was already a deadline: they were printing stickers for the company vehicles, so the domain had to be locked in before anything else. grainconstruction.ca was still available, and it was theirs within days.

The real problem was 300 photos

Construction clients evaluate a builder one way: they want to see finished work. Years of it existed, but as a raw photo library of over three hundred shots (resort cabins, residential builds, renovations) with no organization at all.

I curated that down to 291 web-ready images across thirteen distinct projects, each with its own gallery page, so a visitor can walk through a single build start to finish instead of scrolling a wall of unrelated photos.

The build

A four-page Next.js site in TypeScript, deployed on Vercel, using the company's real branding: their logo, their copper-and-black palette, their fonts. Every gallery is a Keystatic collection entry, so the owners add a project, drop in photos, and reorder them without touching code.

Two engineering details from this one that I keep reusing:

• Keystatic image paths have a shape, and getting it wrong fails silently. For collections, images store under directory/<entry-slug>/<file> and the JSON value must include the slug segment. Seed it flat and the site renders perfectly while the CMS editor shows every image field empty. A working site proves nothing here. Now I open the CMS editor and check the collection before any delivery.
• Honest empty states. The testimonial section stayed hidden until real client reviews existed, rather than padding the launch with fakes. Real reviews came in after launch, and it's filled in now.

The result

grainconstruction.ca went live about a month after the go-ahead: the company's first website, on a domain they own outright, matching the stickers on their trucks. The owners manage projects and photos themselves through the CMS.

"The entire experience was outstanding from start to finish. The process was seamless, his communication was excellent, and the attention to detail he put into every aspect of the site was exceptional."

— Dan Smith, Grain Construction