Hoppa till innehållet

den här sidan · 2026 · eget projekt

ismailsafwat.com – den här webbplatsen

Den här sidan: en enda sida som zoomar från ett namn ner till en bit kod, byggd på Astro och serverad från Cloudflares kant.

Lager
gränssnitt, applikation, tjänster, data
Byggt med
Astro · TypeScript · CSS · Cloudflare Pages · Cloudflare Workers
Ismail Safwat 1× Ismail Safwat 4× Wexiödisk, 2023 → 20× Wexiödisk · 2023 → Mjukvaruingenjör en bit av koden ↓ 80× s = mål.w / nästa.w k = 1 / s FÖRSTORING MOT SCROLL · log 1× 10× 100× 1000× 0 1 2 3 4 · djup ≈ 330× out: translate((cx−tx)·p, (cy−ty)·p) scale(k^p) in: translate((tx−cx)·(1−p), …) scale(s^(1−p)) omgivningen tonar 0.03–0.28 · målet 0.28–0.50 · nästa 0.44–0.66 prefers-reduced-motion → samma dokument, platt 1 2 3 4 5
Fig. 01 — Startsidan som fem ramar i varandra. Var och en är nästa, förstorad; grafen är förstoringen du ser i hörnet.
  1. 1Mål · rutan nästa djup ryms i
  2. 2Inkommande innehåll · mätt en gång per layout
  3. 3Överlämning · omgivningen tonar först, målet överlever
  4. 4Skalavläsning · produkten av de uppmätta förhållandena
  5. 5Platt reserv · samma dokument utan zoomen

Idén

De flesta personliga webbplatser är en sidhuvudsrad, ett rutnät av kort och en sidfot. Den här är ett enda föremål. Du kommer fram och ser ett namn. Att scrolla flyttar inte sidan nedåt, det tar dig närmare: in i en mening, in i en fras i den meningen, in i projektet bakom frasen, och till sist in i en liten bit av dess kod.

Hur den är byggd

  • Astro 5, statiskt byggd. Varje djup är vanlig HTML i ett och samma dokument, så sökmotorer och skärmläsare får en vanlig sida med riktiga rubriker.
  • Ett skript på ungefär tvåhundra rader mäter varje djups mål och driver två CSS-transformer utifrån scrollpositionen. Inget animationsbibliotek.
  • Reducerad rörelse stänger av zoomen och lämnar samma dokument, platt. Piltangenterna stegar mellan djupen.
  • Cloudflare Pages serverar den. En Pages Function hanterar kontaktformuläret med hastighetsbegränsning och Turnstile.

Vad den ersatte

Den förra versionen var stylad som en IDE och ett git-repo. Den var rolig att bygga, och den sa ”utvecklare” med hög röst. Den här versionen försöker säga mindre och mena mer.