Ako som postavil CRT arkádové portfólio v Astre

Každé vývojárske portfólio vyzerá rovnako: hero, mriežka kariet, kontaktný formulár. Ja som chcel, aby to moje niečím bolo — konkrétne čiernobielym arkádovým automatom, akými sa celé toto odvetvie začalo. Tento článok je prehliadka toho, ako tá ilúzia funguje.

Obmedzenie, ktoré robí najviac práce

Celá stránka poslúcha jedno pravidlo: biely fosfor na čiernom skle. Žiadne akcentové farby, žiadne gradienty, žiadne fotky. To jediné obmedzenie odvedie viac dizajnérskej práce než hocijaký framework — každý prvok si musí miesto zaslúžiť tvarom a pohybom, nie farbou.

Stack je zámerne nudný tam, kde môže byť: Astro vyrenderuje všetko do statického HTML, React ostrovy hydratujú len interaktívne časti a Tailwind drží štýly na jednom mieste. Exotické kusy — PixiJS, Kaplay, typed.js — sa načítavajú lenivo v ostrovoch, ktoré ich potrebujú.

Pixel sprity ako dáta

Každý sprite na stránke — votrelci, lode, UFO, ikonky sociálnych sietí, môj avatar — je malé pole reťazcov:

export const CRAB_A: PixelMap = [
  "..X.....X..",
  "...X...X...",
  "..XXXXXXX..",
  ".XX.XXX.XX.",
  "XXXXXXXXXXX",
  "X.XXXXXXX.X",
  "X.X.....X.X",
  "...XX.XX...",
];

Jeden helper mapToPixels() premení X-ká na súradnice a odtiaľ sa tá istá mapa renderuje ako inline SVG (<rect> na pixel), ako PixiJS textúra alebo ako data-URL pre Kaplay hru. Nakresliť nový sprite znamená editovať text — presne tak, ako sa to robilo na 8-bitovom hardvéri.

Falošné CRT v CSS

Efekt monitora sú tri vrstvy nad sebou, všetky pointer-events: none:

  1. Statická vrstva — scanlines, tieňová maska a vinetácia, zlúčené do jedného elementu s tromi background-image gradientmi.
  2. Flicker vrstva — takmer priehľadná biela, skáče medzi opacitami na ~8 Hz.
  3. Interferenčný pás — mäkký horizontálny pruh, ktorý každých deväť sekúnd prejde obrazovkou ako pri zle tienenej obrazovke.

Fosforové témy (biela, jantárová, zelená) sú jedna CSS premenná a overlay s mix-blend-mode: multiply — celá stránka sa prefarbí naraz, bez práce v komponentoch.

Detaily, ktoré to predajú

  • Boot sekvencia. Prvá návšteva prehrá memory check a čaká na STLAČ ŠTART; ako attract mode skutočného automatu sa po chvíli nečinnosti spustí sama. (To zároveň zabráni tomu, aby crawlery vyhľadávačov — ktoré nikdy neklikajú — videli prázdnu stránku.)
  • Zvuk. Každé pípnutie je surový Web Audio oscilátor — štvorcové a pílové vlny s kĺzaním výšky. Žiadne audio súbory, defaultne vypnuté.
  • Terminál. Stlač ` a otvorí sa DOS-ový prompt: navigácia, prepínanie tém, alebo rm na veci, ktoré sa odmietajú zmazať.
  • Hry. Pozadie hera je PixiJS — votrelci po kliknutí uhýbajú, utekajú a strieľajú naspäť. Bonusový level je plnohodnotné Space Invaders v Kaplay s power-upmi naviazanými na moje skutočné zručnosti, plus arkádové top-5 s iniciálami.

Jeden kód, dva jazyky, každý na vlastnej URL

Každý zmysluplný text sa renderuje dvakrát — <span data-l="en"> a <span data-l="sk"> — a CSS ukáže ten aktívny. Angličtina žije na /, slovenčina na /sk/, každá s viditeľným textom už v builde a s hreflang pármi, takže obe verzie sú poctivo indexovateľné. Prepínač jazyka len naviguje na dvojičku aktuálnej stránky.

CV, ktoré sa tlačí samo

Stránka /cv je ten istý dizajn s jedným trikom: všetky farby sú CSS premenné a print stylesheet ich preklopí z fosforu-na-čiernom na atrament-na-papieri. Malý skript poženie headless Chrome s --print-to-pdf nad zbuildovanou stránkou, takže stiahnuteľné PDF-ká sú na pixel rovnaké ako to, čo by vytlačil prehliadač — bez jedinej PDF knižnice.

Stálo to za to?

Stránka je stále statické HTML, ktoré sa načíta rýchlo a dá sa čítať aj bez JavaScriptu. Všetko navrch — žiara, hry, pípanie — je progressive enhancement v kostýme z roku 1978. Pri stavbe som sa o CSS blend modes, Web Audio a tlačových enginoch prehliadačov naučil viac než z hocijakého tutoriálu.

Vhoď mincu a pokračuj.

SLIVOTRON-2000 · DEV LOG