Architecture · Browser Mini-Games
Browser Mini-Games — one arcade hub, ten build-free SVG games
Browser Mini-Games — one arcade hub, ten build-free SVG games
Architecture of the Browser Mini-Games portfolio piece: a visitor opens one Astro arcade hub, which links ten self-contained SVG games — three arcade classics and seven analytics games — each a single dependency-free file with no build step; the only thing shared is a convention of localStorage keys and PostHog events, and the build ships to GitHub Pages with a synced copy under the portfolio's /games/ path.
HTTP GET
COMPOSES
10 GAME CARDS
3 OF 10
7 OF 10
LOADS ALL 10
9 EVENTS
BUILD + PUSH
SYNC /games/
CLIENT
Visitor
phone · desktop
swipe · drag · tap
HUB
Arcade hub
src/pages/index.astro · Astro v7
static · data-theme + localStorage
GAME
Self-contained SVG games ×10
public/*.svg — one file = the whole game
HTML + CSS + JS inline · zero deps · no build step
HUB
Shared hub components
GameCard · DailyStrip · ThemeToggle
ContactCTA · Base layout · PostHogInit
GAME
Classic arcade ×3
Snake · Pong · 2048
keys · swipe · drag
GAME
Analytics games ×7
A/B Test · Funnel Drop · Cohort Catch
SQL · Metric Match · Retention · Bottleneck
CONTRACT
Shared contract
arcade_best_<game> · arcade_streak
never imported — same keys in all 11 files
EVENTS
PostHog events
9 events · no cookies
IS_LOCAL skips localhost
TEST
Playwright suite
test_games_smoke.py · per game
test_games_contract.py · CI-style
DEPLOY
Build & deploy
npm run build → dist/
deploy.yml on push to main
DEPLOY
Portfolio copy
/games/ on Personal_Projects.github.io
sync_games.py --check · drift gate
LEGEND
CLIENT
HUB
GAME
CONTRACT
EVENTS
TEST
DEPLOY