Tunnel Hill 100

The Tunnel Hill 100 is an ultramarathon in Southern Illinois whose course has produced five world records. It is also one of my favourite races. The website serves two audiences, first-time ultrarunners and elite athletes, and sends both to registration. It also holds the race-weekend logistics, course data, records and results history.

How it started

I was about to recommend the race to a friend, so I searched for it, and realised Tunnel Hill had no website. The only information was on UltraSignup, as part of the race registration.

The race director, Steve Durbin, is more than a race director to me: we have been friends for more than two decades. I registered a domain, reached out to Steve and told him I wanted to build the site from scratch.

The content came first

Getting the written content is often the hardest part of a client project. Steve responded straight away and sent everything about the race, in detail. That made the build easy.

Simple and fast

Tunnel Hill is a simple, fast race, and I wanted the website to be the same: easy to find your way around and quick to load. That shaped every decision below.

Designed around the tunnel

Running through the tunnel is the highlight of the Tunnel Hill 100. It’s a long, dark stretch: however bright the day is outside, it goes dark the moment you step in. It’s an iconic milestone in the race, and a great landmark to run through.

That feeling was my starting point for the design. I wanted the homepage to show, as an animation, what it’s like to run inside the tunnel, and the whole site follows it with a dark theme.

Stack

• Front end: hand-written HTML, CSS and JavaScript across 8 pages, with no framework or dependencies.
• Design: a custom token-based design system with a cinematic hero video, scroll-driven animations and self-hosted fonts (League Gothic, Instrument Sans, Instrument Serif).
• Interactive course explorer: a Leaflet and OpenStreetMap map linked to a custom SVG elevation profile, built from the course GPX file.
• Performance: responsive WebP images and adaptive video (format, resolution and data-saver aware), about 21 KB of gzipped CSS, and no tracking.
• Accessibility: support for reduced motion and keyboard navigation, plus automated axe checks on every page.
• Quality and deployment: html-validate, stylelint and ESLint, Playwright browser tests across screen widths, link checking, GitHub Actions CI, and Vercel hosting.