The project started with a simple idea: document the process of selling exactly 10 bridges. Not a business website, not a portfolio — a public record of a finite challenge with a clear end goal.

The site needed to be simple. Pure HTML, CSS, and JavaScript — no frameworks, no build steps. Something that could be edited directly and deployed instantly via GitHub to Netlify.

The first version established the core sections:

1. Hero — Title "10 Bridge Challenge" with a days-elapsed counter and navigation buttons
2. The Challenge (01) — Four horizontal callout boxes: Objective, Definition of "Sold", Compensation, and Context
3. The Bridges (02) — Description of what the bridges are, plus an image slider
4. Latest (03) — A grid of expandable post cards for documenting progress
5. Footer — Simple centered text

The design language was established early: warm off-white background, subtle borders, Inter for body text, IBM Plex Mono for accents and numbers. Clean and understated.

The image slider went through several iterations:

• Started with subtle, full-height arrow buttons with gradient scrims
• Changed to circular arrow buttons (white background, border, centered on the image) for better visibility
• Added dot indicators below the slider — count and jump between images
• Added auto-advance (5 seconds) that pauses on hover or keyboard focus
• Reduced corner rounding from 1rem to 2px for a sharper look

Tried adding a floating animated emoji (🌉) inspired by another site, but emoji rendering was inconsistent. Switched to an SVG bridge icon, but it didn't feel right. Ultimately removed — the hero was better without the visual clutter.

There was also a progress bar with numbered pips (1–10) that would fill as bridges sold. This was later replaced with the punch card concept.

Originally had five callout boxes including an "End Condition" box. Removed that one to keep things tighter — four boxes felt right.

One of the more distinctive additions. Instead of a generic progress bar, the hero now features a punch card — 10 numbered squares arranged horizontally, like a loyalty card from a pizza place.

Each square is:

• A rounded rectangle with a dashed border (empty/unsold)
• Numbered 1–10 in monospace font
• When a bridge sells: solid green border and green background

Sits between the "Days Elapsed" counter and the navigation buttons. Visually distinct from slider dots by being larger, numbered, and having a card-like container.

The bridges section text was rewritten to be more specific, replacing generic placeholder copy about "steel-and-timber vehicle bridges."

"These are pre-engineered, prefabricated stress-laminated timber bridges. Each bridge is built as two deck panels (modules) that are delivered to the site and then set side-by-side and bolted together…"

The subheading went through several iterations:

• Started as something about a "finite experiment"
• Changed to "One goal: sell 10 bridges." — direct and clear
• Second line kept: "A record of what's learned between start and finish."

The slider started with placeholder references. Real images were added, ordered deliberately to tell a story: action shot first, then fabrication, delivery, details, and finished products.

An intro video was embedded in the Challenge section — a ~3:30 YouTube video of the creator talking directly to camera about the challenge.

Sits between the "01 The Challenge" header and the four detail boxes. Uses a responsive 16:9 wrapper with rounded corners to match the site's style.

A new section added: "03 Resources & Links" between The Bridges and Latest. This is where external links live. First resource: eandhbridges.com with a short description.

This moved the eandhbridges.com callout out of the Bridges section, keeping that section focused purely on describing what the bridges are. Latest was renumbered to 04.

A custom SVG favicon: dark rounded square with "10" in white. Font size had to be adjusted so both digits would render clearly at small sizes.

Added Open Graph and Twitter Card meta tags for social sharing:

• Title: "10 Bridge Challenge"
• Description about selling 10 bridges and documenting the process
• Image reference for social previews

Originally hosted at 10-bridge-challenge.netlify.app. Upgraded to the custom domain 10bridgechallenge.com — cleaner to say out loud and easier to share.

• The "SCROLL" indicator in the hero was overlapping with nav buttons on mobile — now hidden on screens under 640px
• Punch card squares shrink slightly on mobile so all 10 fit comfortably

Simple and minimal:

• "10 Bridge Challenge"
• "Website built with Claude Code!" (with link)

The site is version-controlled with commits for each meaningful change. The repository lives on GitHub and auto-deploys to Netlify on push.