react · typescript · tailwind css · react router

the problem

The projects page stacked identical cards, so every project carried the same weight and the site read like a document. I wanted the work to be quick to scan on a phone, memorable on a desktop, and easy for search engines to understand.

what I decided

1. 01

   an index instead of cards

   Projects became numbered rows. With a mouse, hovering a row floats its screenshot beside the cursor; on touch, rows open in place as native details elements. Pointer media queries decide which, rather than guessing from the device.

2. 02

   every page prerendered

   React Router renders each page to static HTML at build time, each with its own title, canonical URL and share card, plus schema.org data on the home page describing who I am and where I work.

3. 03

   navigation that never waits

   The phone menu's open state is tied to the current location, so any navigation closes it the moment the next page appears, and the pages it links to are prefetched before you tap.

4. 04

   lighter screenshots

   The 2880px PNG screenshots became 1440px WebP, still sharper than any size they're shown at.

the outcome

Screenshots dropped from 741 KB to 73 KB. In testing on a CPU slowed to phone speed, tapping a menu link shows the next page in under 50 ms with nothing left to download.