How this site is made.
No template, no page builder, no analytics dashboard. A static site written by hand, with the decisions written down here.
Type & colour
01- Display
- Plus Jakarta Sans 700, tight leading and negative tracking. Sizes are fluid, from 38px on a phone to 118px on a wide screen.
- Mono
- JetBrains Mono for labels, clocks, file names and the small print. Never for body copy.
- Palette
- A warm near-black canvas (#11100d) and a cream ink (#d0c5ab). One accent: the same cream, at lower opacity. No gradients used as decoration.
- Imagery
- Real project screenshots, desaturated slightly so they sit inside the palette. No stock photography and no generated mockups pretending to be products.
Build
02- HTML
- Hand-written, one file per page. No framework and no client-side router.
- CSS
- One stylesheet with custom-property tokens. Grid and flexbox only; no utility framework.
- JavaScript
- About 500 lines of vanilla JS for the loader, character reveals, scrubbed sections, sticky cases, cursor and page transitions. Every effect is progressive enhancement.
- Smooth scroll
- Lenis, loaded locally. If it fails, native scrolling is unchanged.
- Fonts
- Served by Google Fonts with preconnect. Fallbacks are system UI fonts.
- Hosting
- Static files on GitHub Pages. No server, no database, no build step required to view the site.
Motion
03The motion is deliberately narrow: a loader that shrinks into the wordmark, character-masked headings, a scroll-scrubbed statement, three sticky case records, floating project stills and a custom cursor. There is no scroll-jacking, no autoplay video and no animation that carries information on its own.
Reduced-motion preferences remove the loader, parallax, cursor and character transforms. The scrub sections become fully legible. With JavaScript disabled, every word is visible and every link works.
Accessibility & privacy
04- Keyboard
- Visible focus states, a skip link, real buttons and links, and no keyboard traps.
- Motion
prefers-reduced-motionis respected throughout.- Contrast
- Cream on near-black for body copy; dimmed labels are used only for secondary metadata.
- Privacy
- No cookies, no analytics, no tracking pixels, no third-party scripts beyond the font files. The clock is computed in the browser.
Sources & research
05The design research, content rules and QA checklist behind this rebuild are kept in the repository, not hidden in a Figma file:
- 01Design research — Apple, Google, OpenAI, Anthropic, Microsoft
- 02Anti-AI-slop rules and rejection tests
- 03Portfolio standards 2026
- 04Visual system
- 05QA checklist
- 06Reference motion study
- 07Full source list
The reference study records what was borrowed — pacing, sticky stacking, type scale — and what was deliberately not copied.