A desktop operating system in a browser tab: draggable windows, GPU glass, a Three.js lock screen, a command palette and client-side routing. Vanilla JS, Vite as the only build step. Live demo.
저장소 README에서 가져옴
README
README 전체를 불러오는 중입니다. 아래는 저장된 발췌입니다.
A Desktop Operating System in the Browser — Zero Frameworks, Pure Web Standards
A fully interactive desktop environment — draggable windows, GPU-composited glass UI, Three.js cyberspace, Spotlight-style command palette — running entirely in the browser. No UI framework: the DOM is built by hand. The browser bundle carries one dependency, @vercel/analytics; the two serverless routes under api/ use @anthropic-ai/sdk.
Built by James Olusoga — AI Solutions Engineer & Creative Technologist, Toronto.
Every number below is reproducible from a clean clone. No figure in this README is typed by hand.
A fully interactive desktop environment — draggable windows, GPU-composited glass UI, Three.js cyberspace, Spotlight-style command palette — running entirely in the browser. No UI framework: the DOM is built by hand. The browser bundle carries one dependency, @vercel/analytics; the two serverless routes under api/ use @anthropic-ai/sdk.
Built by James Olusoga — AI Solutions Engineer & Creative Technologist, Toronto.
Every number below is reproducible from a clean clone. No figure in this README is typed by hand.
This repository builds three independent pages from one Vite config. Count them
yourself with grep -c "resolve(import.meta.dirname" vite.config.js, or read
build.rollupOptions.input in that file:
Route
Entry
What it is
/
index.html + css/system.css
THE SYSTEM — the hiring surface. A static scrolling page: status panel, Passion Agent snapshot, cleared gates, contact. No framework, no OS code.
/os
os/index.html + js/main.js
Passion OS — the desktop environment this README documents. Everything below describes this surface.
The three are deliberately kept apart in type, palette, layout skeleton and motion
signature; css/system.css carries the divergence record at the top of the file.
Client services and the client roster live on
tdotssolutionsz.com, not here.
Generated figures
Every public number on / comes from public/data/figures.json, written by
npm run figures (tools/build-figures.mjs) and committed. Sources: GitHub, PyPI,
the MediaWiki API, the system snapshot, and, since 4.60.0, the Bodies In Boxes game
counters (read from ~/.local/state/passion-cron/panels/bib.json, which
passion-cron/bib-panel.py writes from the game's database). The generator refuses a
missing, failed or day-old bib panel. The page prints an "as of" stamp beside those counts
and adds the age once they are 3 days old. Re-run bib-panel.py, then npm run figures,
then commit the data files and deploy.
A gate can be deep linked by its template name, for example /#bodies-in-boxes.
Quick Start
Prerequisites: Node.js 18+ and npm 9+.
git clone https://github.com/DareDev256/portfolio-os.git
cd portfolio-os
npm install
npm run dev
Open http://localhost:5173 for the hiring surface, or http://localhost:5173/os/ for the desktop. Click the lock screen to enter the OS.
What You're Looking At
Desktop Environment
Window Manager — Drag, resize, minimize, maximize, z-index focus management with ceiling-bounded normalization. Animated open/close with glass shimmer effects.
Desktop Icons — Custom SVG icons in a recruiter-optimized 4-column grid. Right-click context menus on each. Includes 3 external deployed-project links (Vibe Coder, IMG_GEN.ai, TypeMaster) and a curated Portfolio showcase.
Purple Reign Showcase — Opens with the "Amethyst Aperture" — a cinematic camera-iris reveal (clip-path: circle()) that opens from center to reveal the creative director's identity. James Olusoga's name appears in muted gold Playfair Display serif with staggered letter-spacing animation, a gold divider line draws itself, and the role tagline fades in amethyst. Below, the "Ascending Core" — a rotating CSS 3D obsidian crystal with internal amethyst glow — fractures apart on scroll. The "Amethyst Code" glitch effect resolves to unveil the section title. An "Obsidian Veil" monolith overlay fractures into six polygon shards with amethyst edge-glow before scattering apart. Featured projects display as cinematic scroll-snap chapters with forcefield reveal, gilded gold shimmer on titles, staggered animations, dot navigation, and syntax-highlighted code snippets with copy-to-clipboard. CTA buttons feature "Opulent Interface" micro-interactions: embossed depth, animated gold border trace, and letter-spacing breathe on hover. Each chapter has a "Catalyst Aura" — a mouse-reactive amethyst-gold glow with hexagonal crystal lens that follows the cursor.
Command Palette — Cmd+K / Ctrl+K opens a Spotlight-style fuzzy-search launcher across all apps and system toggles.
Dock — macOS-style magnetic magnification (icons swell on cursor proximity with Gaussian falloff), active window indicators, minimize-to-dock animation, hover tooltips.
Client-Side Routing — Deep-linkable URLs (/about, /work, /resume, /terminal) via History API.
Themes — Dark/light toggle with wallpaper cycling. State persists in localStorage.
Ambient System Telemetry — Live CPU/RAM metrics in the top bar fluctuate via weighted random walks, session uptime counter, visit tracking with welcome toasts, and periodic contextual tips.
Visual Effects Stack
MMBN Cyberspace Background — Three.js perspective grid with cobalt data streams, glowing network nodes, and a deep blue-purple void sky.
3D Mahoraga Wheel — Three.js lock screen centerpiece. 60fps + antialiasing on desktop, 30fps lean mode on mobile.
Glass UI — backdrop-filter frosted panels on windows, top bar, dock, and desktop icons — GPU-optimized with reduced blur radii.
3D Icon Tilt — Desktop icons respond to cursor position with gyroscopic 3D perspective tilt (±18°) and an inner light bloom that shifts to simulate overhead lighting. Mouse-tracked via CSS custom properties, MutationObserver for dynamic icons. Respects prefers-reduced-motion.
Tokenized Motion System — All transitions use design tokens (--transition-fast/medium/slow, --ease-decel/accel/spring) instead of hardcoded values. Entry animations decelerate, exits accelerate, emphasis bounces — no generic ease defaults.
Catalyst Pulse — Ambient breathing energy field behind the lock screen hero. A gold-core radial glow with an amethyst outer halo pulsates in a 4s/6s dual-rhythm breath cycle, with geometric crosshair lines and corner brackets framing the wheel. Moving the cursor toward screen center intensifies the glow — a proximity-driven reveal that makes the lock screen feel alive before the user interacts. CSS-animated with GPU-composited will-change, JS mouse tracking for intensity. Respects prefers-reduced-motion.
Parallax Depth Engine — Mouse-driven lock screen layers + wheel-driven cinematic depth separation + ambient drift + scroll-driven desktop background shifts. 4-layer depth with lerp smoothing, scroll momentum decay, sine-wave ambient oscillation, MutationObserver for dynamic windows, will-change GPU compositing. Scroll the hero to pull layers apart at different rates. Respects prefers-reduced-motion.
Holographic Blueprint Reveal — Project cards in the Applications window enter with a tech-blueprint animation: gold corner crosshairs lock on, edge-trace lines draw themselves (gold → amethyst gradient), a scan line sweeps, then content resolves from blur to clarity. Overlay fades out after completion. CSS-only, zero JS overhead. Respects prefers-reduced-motion.
Signature Accents — Gold HUD corner brackets materialize on active windows like Stark Industries targeting overlays. A gold focus-flash briefly warms the border on window activation, and the titlebar line shifts to a breathing gold-amethyst heartbeat pulse. Active window titles gain a faint gold text-shadow. Pure CSS, zero JS overhead. Respects .
Desktop Icons (21)
Icon
Type
What It Does
ABOUT_ME.exe
Window
Bio, role, location, color-coded skills grid
RESUME
Window
PDF viewer
CONNECT
Window
Contact form with validation
LINKEDIN
External
Opens LinkedIn profile
SKILLS_MATRIX
Window
Interactive skills visualization
GITHUB_OPS
Window
Live GitHub API integration
PORTFOLIO
Window
Curated 5-project featured showcase with tech badges, live demo links, and rich cards
APPLICATIONS
Window
33 real projects across 7 categories with DEPLOYED/SOURCE badges, Lab Notes click-to-reveal diagnostics, and classified dossier declassification reveals (scan-line sweep + ACCESS GRANTED stamp). Top category surfaces hackathon submissions and other selected credentials.
DEV_TERMINAL
Window
Fake terminal with 18 sass commands (neofetch, cowsay, matrix...)
Vibe_Coder.exe
External
Browser-based game — deployed project link
IMG_GEN.ai
External
AI image generation tool — deployed project link
TYPEMASTER
External
Typing speed game — deployed project link
SHOWCASE.mp4
Lightbox
Featured video showcase
MUSIC_VIDEOS
External
Music video portfolio
SETTINGS
Window
Theme, wallpaper, sound, cursor trail toggles
NOTES
Window
Sticky notes with 5 color themes, localStorage persistence, auto-save
State.setWallpaper() validates URLs through Sanitize.url() before localStorage persistence — prevents stored CSS injection via localStorage poisoning; gradient tokens validated against an explicit allowlist; data:image/ URIs restricted to safe MIME types (png, jpeg, gif, webp)
Sanitize.attr() allowlists only safe raster data:image/ MIMEs (png, jpeg, gif, webp) — blocks svg+xml, Flash, and all non-image data: URIs; returns control-char-stripped output to prevent validation/output mismatch (CWE-116)
Sanitize.url() enforced on all href/src attributes sourced from external data (project links, media posters, GitHub avatars, lightbox images) — blocks blob:, ftp:, and other dangerous URI schemes
Sanitize.cssUrl() strips CSS-breaking characters (', ", (, ), ;, \) from URLs embedded in CSS url('...') contexts — prevents stored CSS injection via crafted backup imports
Prototype pollution protection on all localStorage reads — loadJSON() strips __proto__/constructor/prototype + legacy mutation methods (__defineGetter__, __defineSetter__, __lookupGetter__, __lookupSetter__) from every parsed value; depth-limited to 20 levels to prevent stack overflow DoS (CWE-674)
Admin Dashboard renders all tab content through Sanitize.setHTML() (defense-in-depth against future template injection)
CSP connect-src allowlists only known API origins (GitHub, Open-Meteo, Passion API) — stale wildcards removed
All external API fetches protected by AbortController timeout (8s) via shared fetchWithTimeout — prevents frozen interfaces on slow/unreachable APIs
localStorage JSON.parse wrapped in try/catch with fallbacks
SVG content sanitized before DOM insertion
CSP img-src locked to explicit GitHub asset domains
YouTube/Vimeo video ID regex validation — blocks injection via crafted embed URLs
Accessibility (WCAG)
aria-live regions for screen reader announcements
Focus trapping in modals, lightbox, login, welcome, and tour overlays
Animation loops auto-pause when tab is hidden (visibilitychange API)
State decoupled from FX via CustomEvent observer pattern
Lazy-loaded modules (terminal, GitHub, skills, galaxy background — only fetched when needed)
InteractionEngine throttled to 30fps; Aurora to ~24fps
Zero backdrop-filter on desktop icons (pure GPU cost, zero visual payoff on dark backgrounds)
Clean timer/RAF lifecycle — clock intervals, taskbar clocks, ambient timers, drag-inertia frames, and lightbox pan state properly cleared on teardown and re-init
Keyboard Shortcuts
Shortcut
Action
?
Show keyboard shortcuts overlay
Cmd+K / Ctrl+K
Open command palette
ESC
Close active overlay (priority: modal > lightbox > tour > window)
←→
Navigate lightbox images
Tab / Shift+Tab
Cycle focus within trapped overlays
↑↓Enter
Navigate and select in command palette
Ctrl+Shift+V
System info easter egg
↑↑↓↓←→←→BA
Konami code easter egg
Triple-click desktop
Glitch pulse effect
Type 418
I'm a teapot
Project Health
Metric
Value
Test Coverage
607 tests across 33 files (vitest + jsdom)
Security
DOMPurify on all innerHTML, 10 HTTP headers, CSP, SRI
Lazy-loaded modules, RAF pausing, 30fps-throttled FX
Lint
0 ESLint warnings, Prettier-formatted
Bundle
132 kB main chunk, code-split lazy modules
Deep Dive: 3D Icon Tilt (icon-tilt.js)
The desktop icons respond to cursor proximity with a gyroscopic 3D perspective tilt — a small module (83 LOC) that punches well above its weight in perceived polish. Here's how it works under the hood.
The Math
Every icon tracks its center relative to the viewport. On mousemove, the cursor position is normalized to a −1…1 coordinate space:
Tilt angles — rotateY(nx × 18°) and rotateX(−ny × 18°). The Y-axis tracks horizontal movement, X-axis tracks vertical (inverted so the icon tilts toward the cursor, not away).
Light bloom position — The ::before pseudo-element renders a radial-gradient spotlight. Its center shifts opposite to the tilt (50% + n × 30%), simulating overhead lighting — when the icon tilts left, the light appears to come from the right. This sells the 3D illusion.
CSS Architecture
The JS never touches transform directly. Instead it writes four CSS custom properties:
Property
Default
Range
Purpose
--tilt-x
0deg
±18°
X-axis rotation
--tilt-y
0deg
±18°
Y-axis rotation
--bloom-x
50%
20–80%
Light bloom horizontal
--bloom-y
50%
20–80%
Light bloom vertical
CSS consumes them via transform: perspective(600px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) on .desktop-icon-box, and radial-gradient(circle at var(--bloom-x) var(--bloom-y), ...) on the ::before pseudo-element. This separation means the effect is entirely CSS-removable — delete the custom properties and the icons fall back to flat, zero-breakage.
Why It Feels Right
perspective(600px) — Close enough to create visible depth without fisheye distortion. Values below 400px warp aggressively; above 800px the tilt becomes imperceptible.
will-change: transform — Promotes the element to its own compositor layer. The GPU handles the 3D transform instead of triggering layout/paint cycles.
ease-out transition on transform — The icon follows the cursor with slight inertia on the way in, then springs back smoothly on mouseleave when all properties reset to defaults.
MutationObserver — Auto-wires icons added dynamically to the DOM, so no manual re-init is needed when the desktop grid changes.
Accessibility
The module checks prefers-reduced-motion: reduce at init and listens for live changes via matchMedia.addEventListener('change'). When reduced motion is active, handleMove early-returns — icons remain static. The bloom and tilt custom properties stay at their defaults, so the frosted glass appearance is preserved without any motion.
Glass system integration (tilt vars in glass transforms)
Why No Frameworks?
Not ideology. Proof of depth.
Routing, state management, component lifecycle, lazy loading, accessibility — everything you'd expect from a React/Next.js build — implemented against the raw DOM API. 76 hand-written modules that prove understanding of what frameworks abstract away.
The constraint is the point. Anyone can npx create-next-app. Building a desktop OS with draggable windows, GPU-composited glass, and WebGL backgrounds from scratch is a different conversation.
Zero framework dependencies. Vanilla JavaScript core — Three.js for 3D, DOMPurify for XSS protection.
Browser Support
Chrome 61+ · Firefox 60+ · Safari 11+ · Edge 79+
Development
npm run dev # Vite dev server (localhost:5173)
npm run build # Production build to dist/
npm run preview # Preview production build
npm run test # Run vitest (607 tests / 33 files)
npm run lint # ESLint
npm run format # Prettier
The project uses Vite for dev/build, Vitest + jsdom for testing, and ESLint + Prettier for code quality. package.json lists two runtime dependencies: @vercel/analytics, imported by js/main.js into the browser bundle, and @anthropic-ai/sdk, used only by the serverless routes in api/. Everything else is dev tooling.
Deployment
Passion OS is deployed on Vercel at jamesdare.com. Every push to main triggers an automatic production deployment.
Vercel (Production)
# Install the Vercel CLI
npm i -g vercel
# Link to the project (first time only)
vercel link
# Deploy to preview
vercel
# Deploy to production
vercel --prod
The project ships with a vercel.json that configures:
Scoped rewrites — /os and /os/* fall through to os/index.html for the OS router; everything except /resume/* falls through to the landing page at index.html
Sonar Pulse — Click anywhere on the desktop surface and concentric gold/amethyst rings radiate outward from the impact point like a Stark Industries targeting ping. A crosshair flashes at the origin while a JetBrains Mono HUD readout floats upward showing click coordinates and a randomized sector status tag (SECTOR CLEAR, SIGNAL NOMINAL, etc.). Three staggered rings alternate gold/amethyst with decreasing opacity. Debounced to prevent spam. Desktop-only, respects prefers-reduced-motion.
Glimmer Sweep — Diagonal gold-to-amethyst light sweep on hover for portfolio cards, project cards, portfolio links, and dock icons. GPU-composited translateX animation with ease-decel fade-out. Respects prefers-reduced-motion.
Golden Cadence — Mouse-reactive metallic sheen on the top bar and dock. A gold/holographic radial gradient tracks the cursor, simulating light catching on brushed metal. CSS custom properties bridge JS cursor tracking to GPU-composited radial gradients. Dock border warms to gold on proximity. Respects prefers-reduced-motion.
Purple Haze Reveal Curtain — Cinematic lock-to-desktop transition. Two amethyst velvet panels (CSS noise texture) cover the screen during boot, a golden seam draws across the divide, an atmospheric bloom radiates from center, then the panels part vertically to reveal the desktop. Inspired by Prince's Purple Rain staging. Uses design system motion tokens. Respects prefers-reduced-motion.
Black Mirror Signal Acquisition — Cinematic "Act 0" pre-intro on the lock screen. Three staggered interference bars sweep vertically with gold-amethyst gradients, edge glows pulse from screen boundaries, and a "SIGNAL ACQUIRED" data flash flickers in stepped keyframes before dissolving into the existing boot sequence.
Cursor Aurora — Lock screen tracks mouse position via CSS custom properties, rendering a dual-layer amethyst/gold radial glow that follows the cursor. GPU-composited, zero layout thrash. INITIALIZE button shifts to amethyst hover state to match.
Scroll-Triggered Reveals — Elements inside window content animate into view as they scroll into the viewport. IntersectionObserver-driven with five variants (fade-up, fade-left, fade-right, scale, clip-up), staggered delay cascades, amethyst accent-line on project cards, gold accent sweep on service cards. Applied across Portfolio, About, Contact, Services, Applications, and Media windows. MutationObserver auto-wires new windows. Respects prefers-reduced-motion.
Unveiling Gauntlet — The About Me window is a cinematic multi-stage scroll experience. Three full-height stages (Identity, Mission, Arsenal) reveal progressively with CSS perspective-based depth transforms (translateZ), staggered child animations, gold divider sweeps with spring easing, and an SVG "auric signature" monogram that draws itself via stroke-dashoffset as each stage enters view. Built on a dedicated Gauntlet IntersectionObserver module that auto-wires new windows via MutationObserver.
System Whispers — Ambient floating HUD data fragments that drift across the desktop at low opacity. Monospace text snippets (cipher hashes, neural-link telemetry, system diagnostics) spawn at random positions and float upward in gold/cyan, creating a "data-in-the-air" holographic lab atmosphere. Max 6 concurrent, auto-pauses when tab hidden. Respects prefers-reduced-motion.
Glitch Text — Hover over any window title and watch controlled chromatic aberration fire: amethyst and gold ghost layers slice through the text via clip-path insets, shifting left/right in stepped keyframes before resolving cleanly. MutationObserver auto-wires new windows, keeps data-text synced on breadcrumb navigation. Pure CSS animation, JS only for attribute wiring. Respects prefers-reduced-motion.
Spectral Echo — Window materialization burst. When a window opens, a gold border outline expands outward from the window bounds with amethyst corner crosshairs and a scanning light band, then fades — like a holographic interface powering up in Stark's lab. Complements the glitch-close animation symmetrically (open = energy burst, close = glitch disintegration). MutationObserver auto-wires to all windows. One-shot CSS animation, single disposable div, zero JS overhead after spawn. Respects prefers-reduced-motion.
Phantom Reticle — A spring-physics HUD targeting reticle that follows the cursor with elastic easing. A dashed gold ring with crosshairs smoothly tracks movement, then "locks on" to interactive elements (dock items, icons, buttons) by snapping to their center, scaling proportionally, and shifting from gold to amethyst. Clicks trigger an expanding pulse ring. DOM-light (5 elements), GPU-composited with mix-blend-mode: screen. Respects prefers-reduced-motion.
Cipher Decode — Code-viewer panels don't just appear — they materialize. When a .cv-panel scrolls into view, every syntax token scrambles through hex/glyph noise before resolving left-to-right in a wavefront pattern, while a gold scan line sweeps across the code block. Characters flash gold on resolve before settling to their syntax color. IntersectionObserver-triggered, MutationObserver auto-wires dynamically added panels. Respects prefers-reduced-motion.
Neural Link — Hover over a desktop icon and watch luminous energy lines trace to its nearest neighbors — like neural pathways firing in a cybernetic brain. Lines draw themselves with a gold→amethyst gradient using stroke-dashoffset animation, glow with dual drop-shadow halos (gold + amethyst), and fade smoothly on hover end. SVG overlay layer, MutationObserver for dynamic icons. Respects prefers-reduced-motion.
Pulse Grid — A reactive ambient floor grid overlays the desktop surface. Faint geometric lines become visible as the cursor approaches — nearby cells illuminate with a gold→amethyst radial glow using quadratic distance falloff. Like walking through Stark's lab with a light-up floor. Canvas-based (zero layout thrash), redraws only on cursor movement via single requestAnimationFrame. Pauses when tab hidden. Desktop-only, respects prefers-reduced-motion.
Ambient Drift — Luminous floating orbs drift across the desktop in slow organic paths driven by smoothed noise. 7 gold & amethyst spheres pulse gently in brightness and repel from the cursor — like dust motes catching light in a darkened lab. Canvas-based with additive screen blend mode, edge-fade for seamless wrapping. Pauses when tab hidden. Desktop-only, respects prefers-reduced-motion.
Cosmic Dust — Faint twinkling star-field of 50 tiny particles drifting across the desktop. Particles twinkle via smooth oscillation with rare stochastic flares — brief gold/amethyst radial glows that decay exponentially, like distant starlight through darkened glass. Deepest ambient layer (z:1), no cursor interaction by design. Canvas-based, additive blend, edge-fade wrapping. Desktop-only, respects prefers-reduced-motion.
Obsidian Veil — Full-viewport monolith overlay that fractures to reveal project chapters in the Purple Reign showcase. Six irregular polygon shards tile the viewport as a solid black surface. As the user scrolls past the hero, amethyst glow traces the fracture lines via drop-shadow on clip-path shapes, then shards fly apart with staggered delays and directional rotation while gold/amethyst scatter particles bloom from the fracture intersection points. Two-phase scroll-driven choreography (glow at 50%, shatter at 70%) sequences after the crystal fracture for layered dramatic impact. CSS-only animation, zero extra JS modules. Respects prefers-reduced-motion.
Amethyst Aperture — Cinematic camera-iris reveal on the portfolio hero. A clip-path: circle() animation opens from center to reveal the creative director's identity — gold serif name, self-drawing divider, amethyst role tagline — with 6-stage staggered timing that layers with the existing glitch animations. Brushed-metal texture overlay. Respects prefers-reduced-motion.
Void Scroll — Global cyberpunk scrollbar theme (6px neon-cyan thumb, amethyst on active) replaces all default browser scrollbars. Every window gains a 2px scroll-progress indicator at its top edge — a luminous bar that fills left-to-right with a radial glow at the leading tip. MutationObserver detects dynamically spawned windows; ResizeObserver handles async content. rAF-throttled. Respects prefers-reduced-motion.
Arc Reactor — Active window focus effect inspired by Stark Industries circuitry. A racing energy trace (gold→amethyst→cyan conic gradient) orbits the active window's titlebar border via CSS @property animated rotation, while four corner energy nodes pulse at staggered intervals. The effect activates on window focus and deactivates on blur, making window switching feel like powering up terminals in a sci-fi command center. CSS mask-composite: exclude carves the gradient into a thin border ring — zero JS animation loops. MutationObserver for dynamic windows. Respects prefers-reduced-motion.
Phantom Keys — Holographic keystroke projections. Typing on the desktop surface spawns brief, glowing characters that float upward and dissolve — like Tony Stark's projected holographic keyboard. Characters materialize at the viewport's bottom center with horizontal jitter, rise 120px with lateral drift via CSS custom properties (--drift-x), and fade through blur. Gold/amethyst two-tone palette, JetBrains Mono font, 60ms cooldown with a 6-element pool cap to prevent GPU saturation. Only fires on printable keys outside inputs/textareas/contentEditable regions. Respects prefers-reduced-motion.
Holographic Card Tilt — Project cards respond to the cursor with 3D perspective tilt (±8°) and a holographic light sweep. A gold-to-amethyst radial gradient follows the cursor across the card surface via mix-blend-mode: screen, blueprint corner markers illuminate with gold glow, and cards spring back with --ease-decel on leave. Uses relatedTarget-aware mouseleave handling to prevent flicker when crossing internal child element boundaries. Event-delegation-based for dynamic cards. Desktop-only, respects prefers-reduced-motion.
Cursor Trails — Particle effects with PlayStation/chakra symbols. Lazy-initialized, throttled to 30fps.
Toast Notifications — Non-blocking notification queue with success/error/warning/info types, auto-dismiss progress bar, hover-to-pause, and aria-live screen reader support.
Easter Eggs — Konami code, triple-click glitch pulse, type "418" for teapot, Ctrl+Shift+V for system info, 18 terminal sass commands.
CALC.exe
Window
Cyberpunk calculator with keyboard input, expression chaining, glass UI
WEATHER
Window
Live weather with geolocation, current conditions, 3-day forecast via Open-Meteo
SYS_MONITOR
Window
Live FPS graph, heap usage, DOM count, network info, uptime
TROPHIES.exe
Window
Achievement system — 10 unlockable trophies for exploring the OS (explorer, speed demon, night owl, completionist...)
Direct <video> sources validated through Sanitize.url() — blocks javascript:, data:, blob: URI schemes from admin-editable media entries
Iframe sandbox="allow-scripts allow-same-origin allow-presentation" on all video embeds — blocks top-navigation, form submission, and popups
Navigator API values HTML-escaped before innerHTML interpolation (defense-in-depth against extension/polyfill mutation)
Weather widget validates API response shape and coordinate inputs
GitHub API response shape validation — rejects malformed cache/API data before rendering
rel="noopener noreferrer" on all target="_blank" links — prevents tabnapping
Contact form input length limits (name 100, email 254, message 2000) — prevents mailto URI abuse
All Sanitize.*() inputs capped at 500KB (MAX_INPUT_LENGTH) — prevents ReDoS and algorithmic-complexity attacks on sanitization functions (CWE-400)
Terminal command history bounded at 100 entries — prevents unbounded memory growth in long sessions (CWE-770)
Desktop icon, dock icon, and properties window rendering sanitized at point-of-use — Sanitize.hexColor() for colors, Sanitize.text() for labels/IDs, Sanitize.url() for SVG icon paths (defense-in-depth against stored XSS via localStorage-backed desktop items)
Cursor poached Claude Code's leads; Anthropic hired them back in 14 days
