COLOPHON
How this site is built
A portfolio is a project too, so I built and tested this one the way I would a product.
Stack
React 18 and TypeScript, bundled with Vite, with React Router for the case-study pages. No UI framework: the layout, type scale, and both colour themes are hand-written CSS with custom properties.
Every page is real HTML
At build time each route (home, resume, and one page per project) is rendered to static HTML, then React attaches to it in the browser. Pages load with content before any JavaScript runs, each has its own title, description, canonical URL, and share image, and search engines and link previews see the full text.
Tested like a product
Playwright drives a real browser through the site on desktop and mobile sizes: the skill filter, case-study pages, the resume, theme persistence, and the absence of horizontal scrolling. Each run also scans pages with axe-core and fails on any accessibility violation.
Accessibility
Keyboard focus is always visible, interactive targets are at least 44 pixels, and the site respects reduced motion, increased contrast, and Windows high-contrast mode. Colour pairs are checked for WCAG AA contrast in both themes.
Performance
Each page loads only its own JavaScript: pages are split into separate chunks, and the prerendered HTML preloads exactly the chunk it needs, then fetches the rest in the background so navigating is instant. One hashed stylesheet is cached once and reused on every page. Fonts are self-hosted, subset to Latin, and the three used above the fold are preloaded. Screenshots carry their real width and height to avoid layout shift, and phones get a smaller copy through srcset.
Honest content
Every claim in a case study points to code you can open. Command-line projects show sessions recorded from the real program, and code excerpts are copied from the linked repositories.