Två delar: tekniken i sidan, och metoden vi faktiskt använde för att ta fram den. Inget påhittat, bara det som är sant.
Ren HTML/CSS/JavaScript, inga bibliotek eller byggsteg. Samma teknikval som de flesta av projekten som visas här.
?hastighet=rapp/lagom/serios styr sekunder per bild. Samma projects.js för alla tre — ingen duplicerad innehållsfil.
Varje fakta i årskorten har en tier (1–3). Rapp visar bara tier 1, Seriös visar allt. Inget nytt påfund tekniskt sett — ett vanligt filter (tier ≤ vald nivå) som körs om varje gång hastigheten byts — men ett ovanligt sätt att använda det: de flesta sajter anpassar innehåll efter skärmstorlek, den här anpassar efter vald uppspelningstakt.
En post i projects.js — antingen kind:"screenshot" (bild i images/) eller kind:"code" (kodkort, ingen bildfil behövs).
De flesta skärmdumpar använder object-fit: cover (fyller rutan, kan beskära kanter olika mycket beroende på fönsterbredd). Ett enskilt projekt (Fullkostnadskalkylen) har i stället ett eget, valfritt fält imageFit: "contain" i projects.js — hela bilden garanteras alltid synlig, oavsett skärmstorlek, i stället för att förlita sig på att beskärningen råkar bli rätt.
En delad ordlista (glossary.js) länkar varje AI-modell/AI-verktyg diskret vid dess första förekomst i presentationens egen ordning — aldrig fler gånger, oavsett hur en besökare bläddrar.
Sidan pratar inte med någon server. Allt körs lokalt i din webbläsare — inget spåras, inget sparas.
Pilar, svep på mobil eller piltangenter byter bild manuellt. Play/paus-knappen (eller mellanslag) stoppar bildspelet utan att tappa var du var.
Innehållet i årskorten kommer inte direkt ur huvudet — det byggdes först upp i tre separata bakgrundsfiler (Claude_familjen.md, Kents_work_with_AI.md, AI_branschen_brett.md), medvetet med mer material än vad som visas, innan en delmängd curerades in i själva presentationen.
Varje datum och källa i årskorten kontrollerades mot primärkällor innan den fick synas — det hände flera gånger under arbetet att det avslöjade och rättade faktiska fel (bl.a. att en tidigare slide påstod fel AI-verktyg för ett projekt, och att en AI-genererad startlista hade fel årtal för en händelse).
Beslut med verkligt genomslag — som hur mycket presentationen bör referera en verklig, allvarlig händelse — togs som ett uttryckligt samtal innan något skrevs, inte som en tyst avvägning i efterhand.
Varje beslut, även de som senare ändrades, loggat versionerat i en enda PRD — inte bara i en chatthistorik som glöms bort.
Ett första försök att beskära Fullkostnadskalkyl-bilden tog bort en inställning i tron att webbläsarens standardläge (centrerat) skulle ta över — men stilmallens egen basregel (object-position: top center) låg kvar och gjorde exakt samma sak som innan. Kent rapporterade "jag ser ingen förbättring" två gånger, med hårda omladdningar i både Chrome och Firefox, innan grundorsaken hittades genom att faktiskt läsa ut webbläsarens beräknade CSS-värde i stället för att gissa.