blaiseab.com

What It Is

This site — the one you're reading right now. A personal website that runs five completely distinct visual skins simultaneously, switchable at runtime without a page reload.

The skins aren't just CSS swaps. Each theme renders meaningfully different UI patterns: Windows 95 gets popup windows and a taskbar, Mac OS 9 gets a menu bar and Finder-style panels, Game Boy Color gets a pixel-font monochrome display, Palm OS gets a compact handheld form factor, and iOS 1.0 gets a frosted-glass springboard.

Technical Approach

• Theme system built as a shared package (@blaise-website/theme) that exports CSS variables, token maps, and TypeScript types consumed by every component
• Skin-specific layout logic — components use a useTheme() hook and branch on skin name to render the right structure, not just different colors
• Content via Velite — portfolio, resume, and publications are managed as MDX/YAML files compiled at build time; no CMS or API calls at runtime
• Browser arcade — 6 games (Pong, Snake, Tetris, Memory, Tic-Tac-Toe, RuneBlaise) each implemented as self-contained React components

Testing

Playwright E2E tests screenshot every route across all 5 skins to catch visual regressions. The test suite runs side-by-side skin comparisons.

[TODO: How many Playwright test cases are there? Any specific interesting failures you've caught with them?]

What's Next

[TODO: Any planned additions — new skins, new games, features you're actively working on?]