This portfolio is also an engineering project: its reading experience, navigation, and failure states need the same care as the tools it describes. Building it has been a way to practice React while making my automation work easier to inspect.
Keep article discovery small
The React and Vite application loads article metadata separately from article bodies. Each body is generated into its own JSON module and imported when its route is opened. A visitor searching the index does not need to download every code example in the archive.
Be precise about offline behavior
The production service worker caches the app shell and can retain article chunks a visitor has already opened. That is useful for repeat reading, but it does not make every unvisited article available offline. Cache behavior also differs from the development server.
Combine checks with visual judgment
Vitest covers selected component and interaction behavior; browser checks exercise navigation and rendering. Mobile review adds things a passing assertion can miss: cramped titles, clipped tables, unreadable code, and overlays covering the article. Neither automated checks nor a screenshot alone establishes complete quality.
Make the reader resilient
- Show the title and summary before the cover image.
- Give long articles a table of contents with direct section links.
- Keep wide code and tables inside their own scroll regions.
- Show loading and retry states when an article chunk cannot be fetched.
- Preserve published dates while identifying substantive content updates.
The useful performance measure is what a reader waits for on a real route and device. Bundle inspection helps explain that experience; it does not replace observing it. Keeping the content modules separate also makes the cost of a new article easier to control.
