Design notes

How this site was designed, and how it was checked.

A short record for the curious: the idea behind the site, the decisions that shaped it, and what has been measured so far. Only real results, with the date they were taken.

Last updated October 2026

The idea

My Lumi study found that trust in an AI system builds slowly and can break in one moment. That shape became the mark next to my name: a slow climb, a sudden fall, and the climb back.

The rest follows from it. A portfolio asks you to trust what it says, so the claims in my case studies are marked and numbered, and each one says where it comes from.

Decisions

Type: Newsreader for headings, Schibsted Grotesk for reading, and IBM Plex Mono for labels and evidence. All three are free and served from this site.
Color: Paper for reading, night for the work, and a highlighter yellow that marks evidence. The yellow always sits behind dark text and never carries meaning on its own.
Motion: In story moments, things rise slowly and break fast, the way trust moved in the study. Everyday responses stay quick. One switch in the footer pauses every film.
Real screens only: Every film and close-up is cut from real project screens. No screen state was made up for a better shot.
Evidence: Numbered claims in the featured case studies each come with a note saying where they come from.
Ask the portfolio: Questions are answered only with passages from this site, quoted as written, or with “I don't know”.

Built in, not added on

Keyboard, screen readers, reduced motion and printing are part of every page, not a last pass. Case studies print as clean documents, with the sources for their numbered claims at the end.

I'm colorblind, so the View control in the footer is partly for me. It shows the whole site in grayscale, or as people with common color-vision deficiencies might see it, so anyone can check that no meaning depends on color alone.

What was measured

Measured results, with how and when each was taken
Check	Result	How and when
AccessibilityLighthouse, on the homepage, Work, Convay AI, Convay Mobile, Lumi and aRENEWberg. October 2026.	100	Lighthouse, on the homepage, Work, Convay AI, Convay Mobile, Lumi and aRENEWberg. October 2026.
Layout shiftCumulative layout shift before and after the rebuild's layout pass. October 2026.	0.48 → 0	Cumulative layout shift before and after the rebuild's layout pass. October 2026.
FilmsFive 35 to 47 MB GIFs replaced by short MP4 loops. Every card film and the homepage trailer now weigh 9 MB together.	GIFs → MP4	Five 35 to 47 MB GIFs replaced by short MP4 loops. Every card film and the homepage trailer now weigh 9 MB together.
Work pageHTML size of the Work index after it stopped sending every case study's full text to the browser. October 2026.	200 → 84 KB	HTML size of the Work index after it stopped sending every case study's full text to the browser. October 2026.
Screen widthsEvery page checked across this range with no sideways scrolling. October 2026.	360–1440 px	Every page checked across this range with no sideways scrolling. October 2026.

Not tested yet

The plan includes tests with people: a five-second test, a first-click test and a find-it test. They haven't been run yet, so there are no results to show. They will appear here when they exist.

Built with

Next.js, React and Tailwind CSS, hosted on Vercel. Fonts, images and films are served from the site itself, and it sets no cookies.

Ask the portfolio a question