Skip to content

Case study

Previous portfolio

The Astro portfolio before this one, built with Umer Farooq and kept live because it is the site that won the contract to move a commercial WordPress site to Astro.

Overview

The portfolio that ran before the current one, built in Astro with Umer Farooq. It is still deployed, on its own subdomain, rather than deleted.

Why it is still online

It earned its keep. A client looking for someone to move a thirty page Elementor site off WordPress and onto Astro needed evidence that the person quoting had actually shipped an Astro site. This was that evidence, and the contract followed. Taking it down to make room for a newer design would have removed the thing that did the work.

Keeping it also makes the newer site legible. Two versions of the same person’s portfolio, side by side, say more about how the thinking changed than either says alone.

What I own

Not most of it. Umer led the design and wrote the larger share of the code; I built alongside him. The site that replaced it is mine, and this one is not, which is the honest split and the reason he is credited here rather than thanked in a footnote.

Complexities tackled

Three locales from the start, including a right to left one. English, German and Arabic, with routing, hreflang and the sitemap all derived from the locale config rather than maintained by hand. Arabic is the one that tells you whether the layout was built properly, because it exercises every place a hardcoded left or right would have been easier to write.

Static rendering with real content modelling. Projects, companies, certificates, education and testimonials each as their own collection with their own schema, so a missing field fails the build rather than rendering as a blank space.

Generated share images. Social cards rendered at build time from the same frontmatter the pages use, so a card cannot describe something the page does not say.

Guards, in their first form. Content rules, contrast, coverage, i18n completeness and search metadata each had a script that read the built output. The current site’s ten guards grew out of these five.

Stack

Astro with content collections and i18n routing, TypeScript, Vue for the interactive pieces, Tailwind CSS, Satori and resvg for build-time social images, and a set of Node and Python scripts checking the built output.

Working on something similar?

Tell me what you are building and what is in the way. I will tell you honestly whether I am the right person for it.

Start a conversation

Last updated: