/* ---------- Load JSON & Build Cards ---------- */ async function init() const response = await fetch(jsonURL); const cards = await response.json(); buildTimeline(cards); attachNav();
/* Responsive – Mobile */ @media (max-width:600px) .timeline-card flex:0 0 140px; .fact-box font-size:.9rem;
| Component | What it does | Why it’s useful | |-----------|--------------|-----------------| | | Horizontal scrollable timeline with milestone “cards” (origin, first appearance, major story arcs, solo titles). | Readers instantly see the narrative arc and can jump to the part they care about. | | Dynamic Fact‑Box | When a timeline card is hovered/clicked, a side panel shows a short write‑up, cover art, and a “Read More” link. | Gives context without leaving the page, boosting time‑on‑page & SEO. | | Mini‑Quiz | 4‑question multiple‑choice quiz (“Which Harley moment defines her rise?”). | Engages fans, creates shareable content, and can collect optional email opt‑ins. | | Share‑Bar | Auto‑generated tweet/FB/Reddit snippets that embed the timeline’s current card (e.g., “Just discovered Harley’s first solo title – Harley Quinn #1 (2000)”). | Increases organic reach. | | Responsive Design | Mobile‑first layout with swipe gestures for the timeline. | Guarantees a smooth experience on all devices. | | Analytics Hook | Fires a Google‑Analytics/GA4 event each time a card is opened. | Lets you see which parts of Harley’s evolution intrigue readers most. |
: Explores the consequences of her new-found authority and the "weight of power" as she establishes herself as a top-tier villain.
