This little website
A responsive, multi-page React portfolio with static rendering, accessible navigation, local fonts, and a few details tucked beneath the surface.
Carry-on evidence
- Blank repo
- Starting point
- 11 static
- Routes
- HTML
- Output
01 / Context
The first version made visitors work too hard.
The site began from a blank repository and went through two complete visual directions. The first was expressive, but too editorial and difficult to navigate for a recruiter moving quickly.
The redesign started by making the information hierarchy explicit: identity, target roles, work, evidence, and contact first; personality in the details around them.
02 / Information architecture
One content world, several clear destinations.
The work index, About page, logs, visitor pass, and case studies each have a distinct job. A persistent profile shell keeps the routes understandable without turning every page into the same long scroll.
Project cards lead to dedicated case studies, so the homepage stays concise while deeper technical and product decisions remain available.
03 / Delivery
React when useful, static HTML by default.
Each route is prerendered during the Vite build, then hydrated in the browser for interactions. Core identity, project, and contact content remains present before client-side JavaScript runs.
The implementation also accounts for keyboard navigation, touch, reduced motion, responsive layout, and direct static URLs.
04 / Reflection
Simple is an outcome, not a lack of detail.
The finished interface is quieter than the first version, but the build is more complete: dedicated routes, scoped evidence, responsive navigation, and a machine-readable twin.
The playful layer still exists. It just waits until the useful layer has done its job.
A live map for discovering place-based short-form media as it happens.
Read next →