# SIMO NXE Portfolio v346 SIMO NXE is a static HTML/CSS/JavaScript portfolio inspired by the Xbox 360 NXE interface. It presents Simo’s work as a navigable player profile, project map, field guide and set of interactive archive experiences rather than a conventional scrolling portfolio. ## v346 mobile Field Guide and performance stabilization This phase keeps the approved desktop experience unchanged while refining sustained phone use. Every unicore Field Guide page now resets to the top when opened, all mobile Start Quest actions are centered, VistaPort module artwork is centered inside its icon stage, and the Digital Realms map uses a stable static mobile backdrop without the previous flicker. The mobile runtime now avoids several sources of long-session heat and lag: Digital Realms is no longer prewarmed on phones, hidden map hit-zone geometry is not recalculated during touch gestures, map transforms are limited to one update per animation frame, inactive Field Guide page listeners are removed immediately, the blurred Field Guide home is not rendered behind open pages, mobile controller polling remains dormant until a controller is actually connected, and the Core Breaker easter egg renders at a phone-appropriate frame rate. Desktop controller polling, presentation and interaction remain unchanged. ## Main systems - NXE home dashboard with mouse, keyboard and controller support - Player/Profile modal with avatar, achievements, badges and themes - unicore.cc Field Guide and quest progression - Digital Realms interactive website map and journal - Digital Footprint archive - X Server, Toolbox, Side Quests and Contact ## Digital Footprint The selector contains seven categories: 1. My Footprint — standard layered project deck 2. Logos — identity deck with single and paired logo assets 3. Books — Biblioskop cover and pre-print archive 4. Prints — certificates, flyers, menus and posters 5. Photography — draggable rectangular spatial gallery 6. Web + UI — NXE Browser with Metro start page, project rail and iframe/external fallback 7. Socials / Assets — campaign graphics and wallpapers Visual categories share a universal full-screen NXE Asset Viewer with previous/next navigation, ESC/B close, focus trapping, exact focus restoration and deterministic contain sizing. ## Media delivery pipeline v339 separates each source-backed visual into three delivery levels: - **Thumbnail** — compact WebP used by Photography and other small previews - **Preview** — optimized WebP used inside project cards - **Full asset** — production-quality WebP loaded only by the full-screen viewer `digital-footprint-media.js` contains the generated media manifest and the lightweight hydration/preload manager. The original project records remain in `digital-footprint-data.js`; media derivatives are resolved from their canonical original path. Standard project decks hydrate only the active card and its immediate neighbours. Distant cards stay unhydrated until they approach the active position. Photography loads only thumbnail derivatives in its spatial field. The NXE Browser uses compact tile-specific logo derivatives. The Asset Viewer opens immediately with the optimized preview, reports a restrained NXE loading state, then swaps to the full asset after it loads. When a full asset fails, the preview remains visible. The next and previous full assets are prefetched only after the current asset is ready and only when the browser is not in data-saving mode. When `navigator.connection.saveData` is enabled, adjacent card hydration is reduced and adjacent original prefetching is disabled. ## Controls ### General - Mouse/touch: point, click, scroll and drag where supported - Arrow keys / controller directions: navigate supported NXE menus and decks - Enter / A: select or open the active asset - B / ESC: return or close ### Photography - Drag from empty space or directly on a photo to move the field - Click a photo to open it - Arrow keys/controller directions move between focused photos ### NXE Browser - Point to a tile to update its project rail - Click a tile to attempt embedded viewing - Address bar accepts HTTP/HTTPS addresses - Browser controls provide back, forward, start, reload and external opening - Some websites prohibit iframe embedding; the browser provides an external-view fallback and never attempts to bypass site security policy ## File structure - `index.html` — static application shell - `styles.css` — global dashboard, profile, realms, field guide and shared UI - `script.js` — global application behavior - `digital-footprint.css` — authoritative Digital Footprint presentation - `digital-footprint-data.js` — canonical category and Web + UI project data - `digital-footprint-media.js` — media manifest, lazy hydration, progressive viewer loading and reduced-data handling - `digital-footprint.js` — Digital Footprint interaction logic - `assets/digital-footprint/media/` — generated thumbnails, card previews and browser-tile derivatives - `assets/.../real/` — production-quality WebP artwork used by the full-screen viewer - `PROJECT_STATE.md` — current architecture, limitations and handoff notes ## Adding future media 1. Keep the production-quality full asset under the relevant `assets/` category. 2. Generate a thumbnail and preview derivative without overwriting the original. 3. Add the derivative paths and source dimensions to the manifest in `digital-footprint-media.js`. 4. Keep project copy and the original canonical path in `digital-footprint-data.js`. 5. Verify the card uses the preview and the Asset Viewer upgrades to the full asset. ## Development constraints - Plain HTML, CSS and JavaScript only - No npm, bundler, framework, TypeScript or server dependency - Preserve local portability - Do not introduce runtime libraries without explicit approval - Do not visually redesign stable systems during performance-only phases ## Protected systems The following are stable and should not be broadly refactored or restyled without an explicit request: - Main dashboard and cards - Player/Profile modal - Digital Realms - Field Guide - X Server - Toolbox - Side Quests - Contact - Core modal and global navigation systems ## Known limitation External websites control whether they may be displayed in an iframe through `X-Frame-Options` and Content Security Policy. The NXE Browser respects those controls and retains an external-open path. ## v342 interaction hotfix Adjacent project cards are full-card click targets again. Asset-viewer affordances are active only on the focused card. ## v343 navigation fixes Subsection X and the faded selector both mirror the Digital Footprint back action. The back chevron is vertically aligned with its label. ## v344 mobile-first stabilization - Lifted the mobile home counter and kept the green X action fully visible above browser chrome. - Locked the Player/Profile Card shell so only its inner content box scrolls. - Rebuilt the unicore.cc Field Guide home as a touch-first card carousel with a compact progress panel. - Reflowed Welcome, VistaPort, WebCore, codicom and wwCORE field pages into contained mobile layouts. - Rebuilt Digital Realms as a vertical mobile composition with a sticky header, dedicated map stage, selected-realm panel and swipeable Featured Realms. - Added safe-area viewport handling and removed global mobile horizontal overflow.