Skip to content

this website · 2026 · personal project

ismailsafwat.com — this website

This site: one page that zooms from a name down to a piece of code, built on Astro and served from Cloudflare's edge.

Layers
interface, application, services, data
Built with
Astro · TypeScript · CSS · Cloudflare Pages · Cloudflare Workers
Ismail Safwat 1× Ismail Safwat 4× Wexiödisk, 2023 → 20× Wexiödisk · 2023 → Mjukvaruingenjör a piece of the code ↓ 80× s = target.w / next.w k = 1 / s MAGNIFICATION AGAINST SCROLL · log 1× 10× 100× 1000× 0 1 2 3 4 · depth ≈ 330× out: translate((cx−tx)·p, (cy−ty)·p) scale(k^p) in: translate((tx−cx)·(1−p), …) scale(s^(1−p)) surroundings fade 0.03–0.28 · target 0.28–0.50 · next 0.44–0.66 prefers-reduced-motion → same document, flat 1 2 3 4 5
Fig. 01 — The home page as five nested frames. Each one is the next, enlarged; the graph is the magnification you see in the corner.
  1. 1Target · the box the next depth fits into
  2. 2Incoming content · measured once per layout
  3. 3Hand-over · surroundings fade first, the target survives
  4. 4Scale readout · the product of the measured ratios
  5. 5Flat fallback · the same document without the zoom

The idea

Most personal sites are a header, a grid of cards and a footer. This one is a single object. You arrive looking at a name. Scrolling does not move the page down, it moves you closer: into a sentence, into a phrase of that sentence, into the project behind the phrase, and finally into a small piece of its code.

How it is built

  • Astro 5, static output. Every depth is ordinary HTML in one document, so search engines and screen readers get a plain page with real headings.
  • One script of about two hundred lines measures each depth’s target and drives two CSS transforms from the scroll position. There is no animation library.
  • Reduced motion turns the zoom off and leaves the same document, laid out flat. The arrow keys step between depths.
  • Cloudflare Pages serves it. A Pages Function handles the contact form with rate limiting and an optional Turnstile check.

What it replaced

The previous version was styled as an IDE and a git repository. It was fun to build, and it said “developer” loudly. This version tries to say less and mean more.