05 This portfolio

Role: Design & development
Year: 2026
Stack: Astro, JavaScript
Live: dina-mostafa.se

My own site, designed and built from scratch. No template and no theme. I wanted it to feel calm and precise, and to show what I care about in the details instead of listing it.

Lighthouse — Desktop, Oct 2026

Performance: 100
Accessibility: 98
Best practices: 96
SEO: 100

Measured

The whole home page, fonts and images included: 280 KB
All of the JavaScript, compressed: 3.7 KB
Total blocking time: 0 ms
Animation or scroll libraries: 0

It sits on a twelve-column grid, and the grid is part of the look: the columns are drawn behind my name on the first screen. There is one typeface for words, Archivo, and one for facts like dates and labels, IBM Plex Mono. The only colour is a Prussian blue, taken from old cyanotype prints.

Archivo can get narrower and wider, so my name is set very narrow and the letters stretch when your cursor comes close. The counter in the intro shows how long I have been working, to the minute, and flips over like an old clock. On a phone, tap it.

The story section is one line that draws itself as you scroll and turns into a small picture for each chapter. At the end the page turns blue, like a print being developed. If you would rather not scroll through it, there is a skip link.

It is built with Astro and a little plain JavaScript, with no frameworks or animation libraries, so it loads fast. If your device is set to reduce motion, everything still works. It just stays still.

The first screen on desktop: 'Dina Mostafa' set very large in a narrow typeface over twelve faint column lines, with the intro and its live minute counter below. — The first screen. The grid is drawn behind the name.

Close-up of the name with the cursor resting on it: the letters nearest the cursor are wider and heavier than the rest. — The letters stretch toward the cursor.

Close-up of the intro sentence, with the minutes shown on a small black split-flap tile. — The live counter. It flips over every minute.

The Selected work rail: project cards of different sizes on one bottom-aligned row, the fourth card cut off at the right edge. — The work rail. Different sizes on one line, running off the edge.

The Story section mid-scroll: a blue line drawing a phone outline on a dashed path, with the chapter 'My first real product.' above it. — The story, part way through.

The end of the Story section: the finished line in white on Prussian blue, like a cyanotype print. — The end of the story.

Three phone screens side by side: the hero with the name and counter, a story chapter with its drawing, and the stacked project cards. — On a phone.

The Experience and education section: ruled rows with roles on the left and dates in a monospace column on the right. — Experience and education.