AGM Studios Alexander G. Myers

Work · Front-end engineering

A browser desktop I built to production standards

A windowed desktop in plain JavaScript, with no framework. It has deep links, lazy-loaded apps, accessibility fallbacks, 735 automated checks, and a benchmark of 18 open windows at 60 fps.

Context My own creative portfolio: a browser desktop with windows, a start menu, a terminal and playable courses My role Everything: architecture, code, tests and performance work Tools JavaScript (ES modules), Hugo, Web Audio, Canvas, H5P, dev-browser

What it is

I built my creative portfolio as a small operating system: draggable windows, a taskbar, a start menu with descriptions, a terminal with a fixed command list, a music player, playable training courses and a gallery. It uses plain ES modules on top of a static site generator, with no framework.

The look belongs to the creative side. What carries over to client work is how the site is built.

Architecture

View diagram full sizeScroll sideways to see all of it
URL/projects/x/Route tablepath → app +canonical routeWindow storeone per app · z-order ·focus · capLazy app moduleloaded on first openFrame schedulerpauses hidden canvases,steps down when slowServer-rendered pagereadable with JS offHistorypush · replace · back/forwardPreference storeallow-listed ·local → session → memory735 automated checks · 9 suites in a headless browser + package checksno JS
Every window has a real URL. With JavaScript off, the same URL is a readable page.
made with draw.io last committed 2026-10-25 source file ↓
  • Deep links both ways. Opening a window updates the address; pasting an address opens the window. Back and forward restore windows instead of leaving the site.
  • Apps load on first use. Each app is a module with one mount function, so the first paint carries only the shell. A window closed while loading never mounts, so there are no orphaned apps.
  • A frame budget. Animated pieces pause when hidden or covered, and step down when frames run long.
  • Preferences in one place. Text size, contrast, motion, sound and keyboard shortcuts go through one allow-listed store. It falls back from local storage to session storage to memory, so blocked storage never breaks the site.
  • A safe terminal. A fixed table of commands, no evaluation of input, length limits and text-only output.

Testing

SuiteChecksWhat it covers
Edge cases265deep links, reduced motion, storage blocked or offline, slow network, phone layouts, terminal safety
Course packages231archive integrity, manifests, licences, no stray files
Course playback135every course loads, plays and scores in its window
Shell49open, close, focus, routes, history
Smaller suites55answer paths, lifecycle, audio never starting on its own

All of them run in a headless browser against a frozen snapshot of the site, so a file saved mid-run can’t produce a false failure.

Performance

016.733.350p95 frame time, ms (lower is smoother; 16.7 = 60 fps)0369121518open windows1x CPU4x slower6x slower
Eleven app windows, then eight animated canvas windows, opened one at a time at three CPU speeds. The three lines lie on top of each other: they stay flat at 60 fps up to 18 windows; the only long task was the first course load (70 ms at 4x). Headless software rendering, so GPU cost is not part of this measurement.
measured with a scripted browser benchmark (CPU throttling, frame sampling, long-task observer)date 2026-10-25data real

What it proves

ArchitectureA complex front end with no framework, still readable as plain pages.
QualityI run hundreds of automated checks on a frozen build before anything ships.
JudgementI set limits by measurement, and state plainly what the measurement cannot show.