ENGINEERING NOTE
About this site
A quick first load, with room to explore.
This portfolio is a small product in its own right. I wanted it to be easy to browse on a phone, with enough depth to explore the work through screenshots, interactive demos and source code.
A measured snapshot
| Metric | Desktop report ↗ | Mobile report ↗ |
|---|---|---|
| Performance score | 100/100 | 97/100 |
| Largest Contentful Paint | 0.4 s | 1.7 s |
| Cumulative Layout Shift | 0 | 0 |
These are Lighthouse lab measurements from a single PageSpeed Insights run. The mobile test used an emulated phone and a slow 4G connection. Scores can vary between runs, and this report had no real-user data; it does not establish real-world Core Web Vitals performance.
Content available from the first load
Every page is prerendered to HTML, so the project descriptions, navigation and images are available before React takes over. Each page also has a Markdown version, generated from the same content, for people and tools that prefer plain text.
Load the extras when you explore
The homepage previews the demos with images. Interactive demos and the source-code viewer load when requested, keeping their heavier assets out of the initial page load. Screenshots use responsive WebP variants so a small screen can receive a smaller image.
Keep performance part of the build
The build checks the initial JavaScript against a 150 KiB gzip budget and fails if it exceeds it. That gives future additions a concrete constraint: the portfolio should stay quick to open as more work and demos are added.