All work

CrossFit Onen · Event microsite

1,282 photographs, one page, one weekend to sell.

The Dairy Grind is a two-day team fitness competition on a working dairy farm in North Cornwall. The site had one job: convince a team captain to commit six people, a weekend, and an entry fee — without ever leaving the page.

1,282 → 24
Photos sifted to the ones that sell
1
Page, everything on it
0
JavaScript dependencies

1. The problem

Entering a team competition is a high-friction decision. A captain has to persuade five other people, book time off, sort travel and camping, and hand over an entry fee — usually while scrolling on a phone, in a gym, between sets.

Most grassroots events answer this with a linktree and an Instagram post. The information a captain actually needs — what the workouts look like, where it is, what it costs, whether there is somewhere to sleep, whether spectators pay — is scattered across a dozen stories that expired last week.

The raw material for something better already existed: 1,282 photographs from the 2025 event, shot by @unearthedcreative_. Nobody had done anything with them.

2. What we built

One page. Everything a captain needs, in the order they need it, with a call to action at every point where a decision gets made.

The editorial work mattered more than the code. 1,282 images were sifted down to 24 — the ones that convey mud, weather, effort and a genuinely good weekend, rather than the ones that are technically the sharpest. A live countdown runs to the start line. Structured event data is embedded so search engines list it as the real event it is, with dates and a venue, instead of as a generic web page.

Sections run in decision order: what the grind is, the events, the workouts, the vibe, the gallery, FAQs, contact. A team captain can answer every objection their teammates will raise without opening a second tab.

3. How it’s built

Static HTML with a bespoke farmyard theme — no CMS, no framework, and zero JavaScript dependencies. The reveal-on-scroll, the sticky nav, the countdown and the gallery lightbox are all hand-written in one small file.

That is not minimalism for its own sake. The audience is on mobile data in rural Cornwall, where coverage is patchy and a heavy page simply doesn’t load. Images are served at two sizes, the hero is responsive, and there is nothing to block rendering.

  1. Photos processed into thumbnail and large variants, plus a social share card.
  2. Single self-contained page, root-relative paths, one stylesheet, one script.
  3. Deployed to a bind-mounted directory — a file copy is a live update.
  4. Themed 404 so a mistyped URL still looks like the event.
flowchart LR
    classDef extern fill:#fdfcfb,stroke:#c4873b,stroke-width:1.5px,color:#0a0f0f
    classDef hub fill:#0a0f0f,stroke:#c4873b,stroke-width:1.5px,color:#fdfcfb
    classDef out fill:#f3f2f1,stroke:#9a9a96,color:#0a0f0f

    P["1,282 photos
from 2025"]:::extern E["Event details,
pricing, logistics"]:::extern S["Single static page
no dependencies"]:::hub C["Countdown +
entry CTAs"]:::out G["24-photo gallery
+ lightbox"]:::out SEO["Structured event
data for search"]:::out P --> S E --> S S --> C S --> G S --> SEO

Built for a phone on rural mobile data. Nothing loads that doesn’t need to.

Built as a free favour for CrossFit Onen, who run the event. Photography by @unearthedcreative_, credited in the gallery and the footer — the pictures are the reason the page works, and the credit stays.

Running an event? One good page beats a linktree and a dozen expired stories. We design, build and look after sites like this — see how that works →