This siteLive
belalembaby.com
A React and Vite portfolio with four interfaces over one set of content: a Persona-inspired menu that greets first-time visitors, a fast, plain dossier for reading and sharing, a playable 1996 homepage, and Cobalt, a printmaker's version with a small working desktop.
- Who it helps
- Hiring teams and prospective clients, plus anyone who wants to play.
- What I owned
- Design, development, content and deployment.
- When
- 2026
- Stack
- React, Vite, React Router, CSS, Canvas / WebGL, Playwright, Vercel
The problem
The first version was only a Persona-style game. It was memorable, but a recruiter on a phone had to sit through an intro and a menu before seeing any work, and direct links to pages returned a 404.
My scope
Everything: design, React code, content, tests and deployment.
Constraints
- Essential information can't depend on animation, sound, WebGL or a game.
- Four different interfaces must never disagree about a date, a link or a number.
- Static hosting with no server: direct links and refreshes still have to work.
Approach
- First visits open in the Persona menu. The intro lasts about four seconds, any key skips it, and the menu leads with a card holding the résumé, email and a switch to the dossier.
- Every route is prerendered as its own HTML file with its own title, description and canonical URL. Shared case-study links open straight in the dossier, and crawlers and visitors without JavaScript get the full content.
- Persona's fonts, art and code load only when Persona is shown, and the prerendered dossier stays hidden underneath it so its images never download.
- One content module feeds all four worlds, and tests fail if a world drifts or shows a metric that hasn't been approved.
- Contribution counts come from a dated GitHub snapshot with written-down search queries, and reviews are never counted as authored pull requests.
Key decision
Prerender routes instead of a catch-all rewrite
A single rewrite of every URL to index.html would have fixed the 404s in one line, but it would also have answered every mistyped URL with a 200 and given crawlers the same empty page for every route. Generating a file per real route, rewriting only those paths and serving a real 404 page for everything else keeps unknown URLs honest.
Validation
- Unit tests for content integrity, route and rewrite parity, and the GitHub snapshot invariants.
- Playwright end-to-end tests for direct visits, refreshes, back/forward, unknown routes, world switching and keyboard use, with automated axe checks.
Result
Live at belalembaby.com.
Limitations
- The creative worlds trade some reading speed for personality. The dossier is the plain reference version of every page.
- The repository is private, so the code isn't linked here.