Journey to Enlightenment

The problem

In 2026 Harvard CAMLab and the Tzu Chi Foundation put on an immersive exhibition on Buddhist cultural art. It opened in Hualien on 10 May and added a second venue in Kaohsiung on 1 August, with both running in parallel. It needed a public site: eight exhibition topics, venue guides, a video section and FAQ. The design lived in Figma and was revised for months. Ticket windows, guided-tour times and venue notes kept changing after the exhibition opened.

What I built

A static site of 11 pages: a homepage, two venue guides and eight topic pages, each rebuilt by hand from its own Figma frame. It is plain HTML, CSS and vanilla JavaScript, with no framework, no package.json and no build step. One stylesheet holds the Figma colour and type tokens. A GitLab pipeline copies the files and deploys them to Cloudflare Pages.

How it works

• Pages carry no chrome. Each HTML file has only <head> and <main>. One 218-line script, components.js, reads the URL path and injects the navbar, topic dropdown, mobile bubble menu, breadcrumb, footer and floating buttons. Changing the navbar dropdown, bubble menu or breadcrumb means editing one array, not 11 files.
• Hero video streams over HLS. The homepage plays a Cloudflare Stream manifest through hls.js and jumps to the top quality level once the manifest is parsed. Safari uses native HLS instead.
• Cache-busting without a bundler. CI stamps version query strings onto assets, and a _headers file sends no-cache so copy fixes show up at once.

Decisions

• No build step. The site is mostly copy that tracks Figma. Plain files keep each edit to one small diff, with no dependencies to upgrade.
• Chrome injected at runtime, not templated. Without a build tool, a single script keyed on the URL path was the simplest way to keep the navigation in one place. I extracted it from markup that had been copied into every page.
• Write down the traps instead of refactoring mid-run. Topic pages rely on 64 CSS rules that match inline style strings, and exhibition dates appear in four places with three different dash characters. Rewriting that while the exhibition was open was riskier than writing it down. A CLAUDE.md records each trap I found, and a Stop hook saves it to git whenever it changes.

Outcome

Live at 60immex.tzuchi.org.tw since spring 2026 and still maintained. I built the site; the exhibition itself belongs to Harvard CAMLab and the Tzu Chi Foundation. I built it with Claude Code, using a spec → plan → implement loop for the homepage and topic pages, then small copy and layout changes as the Figma file and venue details changed.