A small, carefully engineered frontend
This Portfolio
The site you're on: a typed, data-driven React application with its own design system, an accessible interactive component, hand-built SVG diagrams and an automated test suite.
- Context
- Independent · Personal project
- Role
- Design and development
- Period
- 2026
- Stack
- React 19, TypeScript, Vite, CSS, React Router
The problem
A portfolio is a frontend project people judge in seconds, on any device. It has to load fast, read clearly, work without a mouse, respect reduced-motion settings, and still be easy for me to update.
Architecture
Approach
Content lives in typed data files, separate from the components that render it, so text, projects and images change without touching layout code.
The design system is a single stylesheet built on CSS custom properties: a fluid type scale, a spacing scale and a small set of components. The 'lane lines' motif comes from competitive swimming.
Diagrams are React components that draw SVG, so they stay sharp at any size and can animate without a charting library. The 'Interface to infrastructure' explorer follows the WAI-ARIA tabs pattern, with arrow-key navigation.
Every route is pre-rendered at build time and hydrated in the browser, so search engines and link previews get the real page. Photos go through a Python pipeline that crops and converts them to responsive WebP. A Playwright suite checks every route, horizontal overflow from 320 px up, links, the mobile menu and axe accessibility rules on desktop and mobile.
What was built
- 01Typed content model, separated from components
- 02Design tokens and fluid typography
- 03Accessible tabbed explorer with keyboard support
- 04SVG diagrams and one-time signature animation
- 05Reduced-motion support throughout
- 06Responsive images in WebP
- 07Pre-rendered HTML with per-page metadata and share images
- 08Light and dark themes, chosen per visitor
- 09Structured data (Person, ProfilePage, TechArticle), sitemap
- 10Playwright + axe test suite
The hard parts
Motion that never hides content
Everything is readable with JavaScript or animation off. Reveal effects only add polish on top.
Static hosting, real pages
The build renders every route to HTML with React's prerender API, including the lazily loaded demos, and writes each page's own title, canonical, share image and structured data. React then hydrates the page instead of building it from nothing.
Two themes, one set of consoles
Light mode flips the page's design tokens but keeps diagrams, code and demos dark, so the technical visuals read the same in both themes. A tiny inline script applies the stored choice before first paint.
Outcome
- Every page readable without JavaScript, with its own metadata
- About 120 KB of compressed JavaScript; demos load only where they're used
- Automated checks at six viewport widths, in both themes