Colophon

How this site is built.

A portfolio for an engineer should be a piece of engineering. Here is what is under the hood.

Aa Inter Tight

أب IBM Plex Sans Arabic

{ } JetBrains Mono

Stack

Astro, rendered on the server with Node. Public pages ship no framework, only a little vanilla TypeScript for the scroll stories, the command menu and the terminal.
PostgreSQL with Drizzle for content, messages and media. Pages are cached in memory and refresh the moment something is saved.
A custom dashboard where every word, image and section can be edited, hidden, reordered and restored to an earlier version.
Hand-written CSS on design tokens, with logical properties so Arabic and English mirror correctly.
Images converted to AVIF and WebP on upload, and share images drawn on the server for every page in both languages.
One Docker image on a self-hosted server, deployed with Dokploy.

Black is the stage. One signal colour, the green of a heart monitor, used on less than 5% of any screen.
Inter Tight and Inter for English, IBM Plex Sans Arabic for Arabic, JetBrains Mono for labels.
Motion explains rather than decorates, and it switches off with “reduce motion”.
The pulse that turns into a click is the whole idea: medicine becoming technology.

No trackers, no analytics and no third-party scripts. The only cookies belong to the dashboard sign-in.
The dashboard requires two-factor authentication, and supports passkeys.
A Content Security Policy that only runs scripts with known hashes.
HSTS, a strict referrer policy, a locked-down permissions policy and no framing.
Fonts are self-hosted, so your visit doesn’t touch another company’s server.

Semantic HTML, a skip link, visible focus and full keyboard support, including the command menu.
Colour contrast checked against WCAG 2.2 AA.
Every animation has a still version.
Complete Arabic and English versions, each with the right direction and typography.