Timeline Build guide — Variation 24

Guide route

How the Timeline archive was built.

This variation treats JD Workshop as a century-scale chronology. Projects are dated documents, provenance is public, and truth labels are never mixed.

Brief

Build variation 24 as a distinct static site with a vertical timeline, archive-style document cards, proof labels, and a first-class `/guide` route. Do not repeat prior sites.

Use archival textures, minimal motion, scroll-driven navigation, and temporal authority as the dominant model.

Evidence labels

All outputs follow the same truth rules. These states are never combined.

Real

Actual build artifacts: styles, scripts, static markup, responsive behavior tests, and verified assets.

Built demo

Working surfaces meant for inspection, such as live timeline interaction or animated controls.

Concept

Speculative extensions or proposed features explicitly labeled and clearly separated.

First-use controls

This guide is also a lightweight control reference so first-time visitors can navigate the archive without guessing.

  • Skip link: Use the top-left skip link to jump straight to the timeline content.
  • Jump to era: Use the era jump buttons in the archive header to move without scrolling the whole document.
  • Inspect provenance: Each event card has an inspect link that opens a provenanve panel with date, source type, verification status, and preservation method.
  • Compare eras: On wide monitors, archive helpers remain visible in the right rail. On narrow screens they become section blocks above the timeline.
  • Motion: This variation favors slow archive reveals over complex motion. If motion is not wanted, reduced-motion mode is always available.

Responsive behavior

The archive uses a single responsive stack with sticky archive helper panels on wide layouts.

  • Wide layout: archive helper stays visible alongside timeline content.
  • Tablet layout: archive helper moves above content, timeline cards keep full document surfaces.
  • Narrow layout: full-width cards, single-column actions, and no horizontal overflow.

Media and optimization

This build keeps media fully static and optimized without heavier media assets:

  • Document texture is expressed in CSS gradients rather than raster media.
  • Archive cards use inline document surfaces to avoid image requests.
  • Motion uses lightweight scroll and hover transitions.
  • If future illustrations are needed, prefer optimized SVG over rasters.

Technical stack

  • Static HTML/CSS build with one home page and one `/guide` route
  • Vanilla JS for minimal interactive controls: timeline jump, provenance panel
  • Responsive behavior with a single CSS layer and a reduced-motion path
  • No external runtime dependencies

Implementation choices

  • Events are ordered by year with a visual tape. Dots mark transitions only.
  • Proof labels are injected directly into markup to avoid runtime label drift.
  • The guide route is first class and answers first-use questions before deployment.
  • No fake testimonials, awards, or invented evidence is presented as fact.

Critique passes

  1. Pass 1: Establish distinct identity: chronology-first, archive texture, dated documents, and scholarly pacing.
  2. Pass 2: Verify proof labels, responsive layout, reduced-motion behavior, and one H1 per route.
  3. Pass 3: Run static verification across home and guide; confirm no horizontal overflow at narrow widths.