How I built this site

A portfolio is a product with one job: let someone judge the work, fast. I design AI products, so the site has an assistant in it, it is built in code, and it holds itself to the standards I hold the products I ship.

I started in Figma and Paper, then wrote the rules down: a DESIGN.md with the tokens, type and spacing, and one content file with every fact I am allowed to claim. Claude Code builds against both, so it works inside my system instead of inventing one.

--color-ink: #f4f4f5;
/* Both greys clear WCAG AAA (7:1) on every dark ground the site
   uses: muted is 11.2:1 on the page and 7.2:1 on the strongest
   hover wash, faint is 9.4:1 on the page and 7.4:1 on surface-2.
   Don't darken either, they carry small text. */
--color-ink-muted: #b9bebc;
--color-ink-faint: #a7afab;

Most of the design happened in the browser. I reviewed every change on a laptop and a phone, then pushed it further or threw it out. Here is Home at each turn.

1. Sept 2026First version: a pixel-art hero of Dubai, with greetings in five languages floating over it.
   Click to enlarge

   

   Close
2. Late SeptA hiring-manager review. I cut every claim the work could not back up, and gave each case a thirty-second read.
3. OctRebuilt around a left rail, like documentation, so every case is one click away.
   Click to enlarge

   

   Close
4. Early NovHome, the nav and the case pages reworked, and the site went dark only.
   Click to enlarge

   

   Close
5. NovBojji arrived, Home became his landing, and a light mode went in.
   Click to enlarge

   

   Close

Bojji is my real cat, a lynx-point Siamese. On the site he is the way in: ask him about the work instead of hunting through pages.

Every frame is generated from code on a 41 by 45 pixel grid. His answers are scripted from facts already on the site, so he cannot make anything up. A live model comes next, held to the same facts.

Home fits on one screen. Each project leads with its impact. One button copies my email. There is no contact form, no splash screen and nothing that hijacks the scroll.

Both themes meet WCAG AAA contrast. These are the site's own colours, with the ratios worked out from the same values the CSS uses.

A script also reads every built page before it ships. It fails the build on an em dash or a placeholder number, and a missing fact shows up as a visible gap rather than something made up.

check-content: 12 pages, 0 errors, 52 open markers.

This is not the final version. I am still building it, and this page will change with it.