The brief
3rd Coast Cruising runs lessons, season memberships, private cruises, team outings and certification courses from Monroe Harbor — seven days a week, May through October. They needed a site that could sell all of it clearly, load fast on phones at the dock, and — critically — be updated by non-technical staff: new schedules, photos, prices and policies, without ever touching code or paying for a heavyweight platform.
The existing site was a template that fought every change. The new one had to be built around how the club actually works: a season that changes weekly, prices that shift, and staff who need to publish from a dockside laptop.
The build
I designed and hand-built the full site — nine pages covering every way to get on the water — then wired it to a git-based CMS pipeline built from scratch: a Node build script that scans the markup for content markers, extracts them into structured JSON, and auto-generates the Decap CMS config so staff get clean, named fields for every headline, image and link on every page.
- Nine-page custom site — home, lessons, membership, private cruises, groups, certification, plan-your-visit, contact and policies. Every page carries the Lake Michigan identity without stock-photo sameness.
- Custom Decap CMS pipeline — the Node script extracts data-cms markers into structured JSON and generates the admin config automatically; edits flow back into the pages at deploy. Adding a CMS field to any page is a markup attribute, not a config rewrite.
- Staff-friendly admin — editors change text, photos and links from a visual panel; no git knowledge, no code, no way to break the layout.
- Edge hosting — Cloudflare Workers serving static assets from locations close to the visitor, with an authenticated API guarding the admin panel.
- Booking integration — every CTA deep-links into the live Mindbody schedule, so "Book a sail" is one tap from anywhere on the site.
- SEO & structured data — schema.org JSON-LD, Open Graph cards, sitemap and canonical URLs for local and seasonal search.
- Performance & accessibility — preloaded webfonts, lazy-loaded imagery, skip links, semantic landmarks and keyboard paths throughout.
HTML/CSS/JS
Node build pipeline
Decap CMS
Cloudflare Workers
JSON-LD
Mindbody API
data-cms markers
Edge hosting
Open Graph
Lazy images
Skip links
Reduced motion
What's real vs. demo
Real in this build
- Nine fully built pages, live on the preview stack
- CMS pipeline — markers, JSON extraction, generated config
- Cloudflare edge delivery and guarded admin route
- Mindbody deep links throughout
- Structured data, OG cards, sitemap, canonicals
Mocked / not connected
- Staff accounts — not provisioned until cutover
- Schedules, prices and photos reflect the preview, not live operations
- Live domain still points at the current template site
- Some photography is placeholder pending the club's own library
What the launch adds
DNS cutover to the new build, staff accounts provisioned with roles, a one-hour CMS walkthrough for the club's editors, and the retainer that keeps the pipeline healthy while staff publish. The code itself doesn't change at launch — that's the point of the pipeline.
The design system
Palette
Paper
Ocean
Ink navy
Coral
Mist
Lake colors: deep ocean teal, dark-water navy, a coral signal for the actions that matter. Sand-warm paper keeps it from feeling corporate.
Type
Learn to sail this summer.
Instrument Serif for display · Manrope for body · JetBrains Mono for labels in the case study.
