hello@kootenaymade.ca
Castlegar, BC. Serving the Kootenays and beyond.Scotties Marina
A marina's front page that reads the wind at its own dock.
23
Prices on one rate sheet
8
Pages
60 s
Between wind readings
0
Critical or serious axe issues
Before the drive, the questions are about the lake.
The lake changes every day.
Wind decides whether a kayak goes out, and a reservoir that can move by 20 metres changes the water through the year.
And it costs the businessEach of those questions lands on the store phone.
Past Sandy Beach there is no cell service.
The safety details have to be read before the boat leaves the dock, because nobody can look them up out on the water.
A marina changes with the season.
Rentals stop, hours shorten and the derby starts. A site that someone has to remember to update is out of date by October.
And it costs the businessOut-of-date hours send people up the road to a closed store.
Built to answer them before anyone calls.
The lake first.
Dock wind and today's lake level sit on the front page, each with its source and the time it was read.
One source for every price.
One rates file feeds the rate board, the services page and the printed sheet, so a price changes in one place.
The site keeps its own calendar.
Hours, notices and the winter headline switch on their dates, with no one logging in.
Safety on one printable page.
Emergency steps, local numbers and a float plan to leave with family.
The thinking behind the build
Scotties Marina sits on the north shore of the Lower Arrow Lake, 12 km up Broadwater Road from the Robson exit at Castlegar. Dave and Tasha took it over in July 2025. They sell fuel from the dock and run the store, rent kayaks, paddleboards and two boats, rent out a floating cabin, run nine campsites and moorage, and host a winter fishing derby. Their customers read the site on a phone, often outside in the sun. The lake they are heading for is a reservoir that can move by as much as 20 metres. The site answers the questions they ask before they come.
A marina's customers ask the same few things before they drive out. Is it windy, where is the water, is the store open, and what does it cost. On the Lower Arrow Lake the water question matters more than most places, because the lake is a BC Hydro reservoir that can move by as much as 20 metres. The new site answers all four on its front page, before anyone has to call.
The wind comes from the marina's own weather station and refreshes every minute. The lake level comes from Environment Canada's gauge at Fauquier, with how far it sits below full and which way it is moving. Each reading carries its source and the time it was taken. When a station goes quiet, the board says so and shows no number at all.
The look came from the marina itself: bleached dock planks and glare off the water. That makes a cool, light ground, where my other light builds all run warm. Orange appears only on the things that are orange at a marina: the windsock, a life jacket, a kayak, and the buttons. Everything was set for reading on a phone in bright sun.
Every photograph on the site is the marina's own: the cabin, the campsites, the boats, a wall of customers' catches, and Dave, Tasha and Dexter the marina dog. The short film behind the headline is generated. It shows only hands, water and gear, never the docks, the buildings or a face, and the real marina is in the photos further down the page.
Every sentence was checked against the old site, Tasha's questionnaire and her emails before launch. Two separate checks corrected 35 claims. A sentence that could not be sourced became a question for Tasha, never a guess.
The site went live on scottiesmarina.com on September 29, 2026. The code sits in the marina's own GitHub account and runs on its own Vercel account, and the domain is in Tasha's own account. The pages were built toward WCAG 2.2 AA, and an automated axe check before launch found no critical or serious problems on any of the eight pages. For another marina, campground or rental business, the same approach puts today's conditions and the full price list where customers look first.
What a customer can count on.
Nothing invented
Every statement on the site traces to the old site, Tasha's answers or a named public source.
Real photographs
Every photo is the marina's own. The film behind the headline is generated and shows no one's face.
Theirs to keep
The code, the hosting and the domain are all in the marina's own accounts.
Everything that shipped.
I built an eight-page site from scratch in Next.js, with no template. The front page carries a live board: the wind, gusts and temperature from the marina's own weather station, today's lake level from Environment Canada's gauge at Fauquier, whether the store is open, and a three-day forecast. One rates file feeds 23 prices across the site and a printable one-page rate sheet. A safety page covers what to do past Sandy Beach, where the lake has no cell service, with a float plan to print and leave with family. The site also changes itself for winter, with new hours from October 1 and a winter headline from October 15.
Highlights
- A live board on the front page: dock wind, gusts and temperature from the marina's own weather station, and the lake level from Environment Canada's gauge at Fauquier
- A windsock that flies on the real wind reading, with the number written beside it
- Open or closed, the season's notices and the hours, worked out from one calendar file so nobody has to remember to change them
- One rates file behind 23 prices, the rate board on the home page and a printable one-page rate sheet
- A safety page with emergency steps, public numbers, the reservoir's hazards and a printable float plan
- Winter hours from October 1 and a winter headline from October 15, switched by date
- A contact form that takes up to four photos, with spam limits, and that still works with JavaScript off
- A /review address for the printed review cards at the store, so the cards never need reprinting
Pages and surfaces
- Home
- Rates and services
- Before you go out
- About
- Contact
- Accessibility
- Privacy
- Terms
Real code. Real routes. Production ready.
- Next.js 16 and React 19 with Tailwind CSS 4, and nothing else running in the browser
- Weather and lake readings fetched on the server and cached for a minute, with keys that never reach the browser
- Lake data from Environment Canada's live feed, with its 30-day history file as the fallback
- The windsock is an SVG rope simulation, with no WebGL
- A print stylesheet that turns the rates page into a one-page rate sheet
- Security headers including a content security policy and HSTS
- The film behind the headline loads after the page, on desktop and tablet only, and remembers when it has been paused
Stack
How it was built
Scotties Marina is a real business and a paying client, owned by Dave and Tasha. Every photograph on the site is the marina's own. The short film behind the headline is generated and shows only hands, water and gear. The wind comes from the marina's own station and the lake level from Environment Canada. Facts read from the live site on September 30, 2026.
Your customers ask the same questions every day.
Scotties is the proof. If people check the weather, the water or the hours before they come to you, the answers can sit on your front page. Start with the free check-up, or if you have no website yet, tell me about your business and I will show you where to begin.
No website yet? Start your first one here
Built as The Trailhead, $2,000. Own It Monthly can spread the build over 12 payments, yours outright at the end.
More work
11 / 22