Field Atlas: interactive production-pathway guide

_context

Field Atlas is an interactive guide to what animal products require. A reader picks something they eat or wear and the site walks them through the production pathway one step at a time, pairing a photograph of the real equipment with an explanation and a source for every claim. It began as a single 13 MB HTML file with 75 photographs inlined as base64 and every stylesheet in the same document. It is now a structured content model that builds to 561 static pages in seven languages, and it is publicly available.

_contribution

I built it solo: the content architecture that separates structure from prose, the seven-locale system with a fallback chain, the walkthrough state machine, the responsive image pipeline, and the tooling that keeps translations in sync.

_what-I-built

• A guided walkthrough that advances one step at a time, with a photograph and a source for each step.
• A searchable catalogue of 50 documented tools, and small puzzles generated from that same data.
• A seven-locale content system with a fallback chain and tooling to report drift between languages.

_what-it-demonstrates

• Source material was one 13 MB HTML file with 75 photographs inlined as base64 and every stylesheet in the same document; it is now a structured content model that builds to 561 static pages.
• Structure and prose are stored separately, so adding a locale never touches layout and a layout change never invalidates a translation.
• Every factual claim carries a citation link, and the walkthrough step logic is a pure function of reader state rather than DOM state.