ArcadeOS
A browser operating system hidden inside a custom arcade cabinet, engineered as the interactive centerpiece of this portfolio.
A portfolio feature built like a product.
Challenge
Build a memorable interactive system without turning the portfolio into an inaccessible demo, loading a large framework, trapping users, or letting game state and listeners leak between routes.
Solution
A small platform layer coordinates storage, routing, app lifecycle, audio, hardware feedback, and unified input. Games and system tools mount into one controlled screen and are destroyed when the user returns home.
One shell, isolated feature engines.
- Module loading: system tools are dynamically imported and cached after first use.
- Game lifecycle: every app receives a shared event bus, mounts into one view, and tears down timers, listeners, and animation frames on exit.
- Input model: all hardware and browser inputs emit normalized Arcade events, so routes and games do not depend on a specific device.
- Persistence: settings, saves, stats, achievements, profile, sound, and customizer presets live in explicit local storage domains with migration and backup safety.
Play, create, inspect, customize.
Restraint over dependency weight.
Vanilla platform
Native modules, Custom Events, Canvas, Web Audio, Gamepad API, and browser storage keep the runtime inspectable and small.
Owned listeners
Route and app listeners are tagged by owner, then removed as a group when their screen closes.
Safe resets
Backup export and domain-specific resets prevent one settings action from deleting credits, saves, profiles, or customization presets unexpectedly.
Progressive capability
Audio, gamepad, service worker, and offline features report unsupported or waiting states without blocking core navigation.
Performance and access are part of the system.
Accessibility
- Semantic controls and visible focus states.
- Keyboard, cabinet, touch, and gamepad parity.
- Route and game announcements.
- Reduced motion and reduced audio support.
- Explicit Home and Exit actions prevent navigation traps.
Performance
- Lazy system modules and no giant UI dependency.
- Animation frames stop when the cabinet is idle or off-screen.
- Games cancel loops and listeners on destroy.
- Optimized WebP screenshots and stable media ratios.
- Mobile effects are reduced without removing the product identity.
Regression coverage follows the user journey.
Automated browser tests cover boot, entry, launcher focus, every system route, all games and creative tools, module recovery, keyboard and gamepad mapping, storage safety, repeated route teardown, portfolio links, and responsive overflow. Manual QA runs across desktop, tablet, and mobile viewports.
A technical proof piece visitors can actually use.
ArcadeOS turns the portfolio itself into evidence: interaction design, state management, performance engineering, game loops, accessibility, persistence, testing, and product storytelling operate together in one shipped experience.