From 5b1dce237fc8e42a09066c69bc298afafa2687ec Mon Sep 17 00:00:00 2001 From: Jose Cruz Date: Wed, 5 Aug 2026 09:08:22 -0700 Subject: [PATCH] feat(#220): give the resource cards their artwork MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes #220. The card body already had the slot — a gradient box with the section icon blown up to 2.2x sitting in the middle of it — waiting for art that had never been supplied. Four clips now fill it. Which clip went where. The four are single-word pieces in the site's own VHS/ember register: "WHAT IF ___", a wireframe globe, "BUILD", and "CREATE" over a tape-deck readout. None of them names a resource stage, so the mapping is read from the stage copy: 01 Getting started WHAT IF ___ the copy is "show up curious"; this is the question that starts everything 02 Finding your people globe the only wordless clip, and the one that reads as a worldwide community 03 Leveling up BUILD "choose on purpose and reuse what works" 04 Tools & templates CREATE its readout literally says DECK 1 / DECK 2 / SOURCE, against copy about "pitch decks and the tooling" 01 and 04 are the confident ones. BUILD and WHAT IF could reasonably swap between 01 and 03 — "a hackathon is a build sprint" is also in the 01 copy — and that is a one-line change if it reads better the other way round. NOT in filename order. hack_1..hack_4 would put "WHAT IF" on Tools & templates, which is the one pairing that clearly does not work. Performance, since the issue asks for it. Re-encoded to 600px wide, CRF 30, audio stripped, +faststart: 3.4MB of source became 1.28MB. More importantly `preload="none"` means the clips cost ZERO bytes on first paint — only the poster is fetched — and only the open panel ever plays, so at most one decodes at a time. Mobile gets the poster, not the clip. Four autoplaying videos stacked down a phone would spend data and battery on decoration when only one can be on screen anyway; `loading="lazy"` defers even that. It also fills a real gap: the mobile cards had no media slot at all. prefers-reduced-motion is honoured through the useReducedMotion hook this file already imports — the video is never started, so the poster is what those visitors see. That is why each clip needs a still that reads on its own. On the alt-text requirement: these are decorative and carry alt="" with aria-hidden. Each panel is already a labelled link ("Open {title} resources") above a visible heading and description, so narrating "VHS titling reading BUILD" would add noise rather than information. Empty alt is the correct treatment for decorative imagery; the requirement guards against unlabelled *meaningful* images, which these are not. eslint 0, tsc 0, 151 tests, production build exit 0. All eight assets verified served, and all four