PROBLEM & BOUNDARIES
The Challenge & Constraints
Web portfolios typically oscillate between boring resume templates and inaccessible 3D experiments that frustrate recruiters. Arifen's Pixel Workspace was designed as a dual-mode creative engineering showcase: an atmospheric, retro pixel-art room with time-of-day environmental lighting, procedural audio synthesis, and interactive CRT terminals, seamlessly paired with an executive minimal editorial profile for quick scanning and accessibility.
CORE CONSTRAINTS
- #01Maintaining pixel-perfect integer raster scaling (480×270) across ultra-wide, 4K, and mobile screens without blur or letterbox gaps
- #02Zero external audio file payload—all ambient rain, wind, lamp switches, and keyboard clicks synthesized purely via code
- #03Accessible keyboard navigation, focus trapping, and screen-reader fallbacks for spatial hotspot interactions
- #04Instant dual-mode switching preserving audio, environment, and navigation state
ENGINEERING ARCHITECTURE
Virtual Coordinate Strata & Real-Time DSP Audio Synthesis
Deliberate technical choices evaluated against operational realities, performance budgets, and long-term maintainability.
01 /Decouple the scene into 6 discrete visual strata (Backdrop → City Lights → Weather Canvas → CRT Viewport → Foreground → Ambient Lighting)
WHY THIS DECISIONAllows independent CSS blend-mode execution, canvas particle rendering, and DOM hotspot hitboxes without full-scene re-renders.
TRADE-OFF ACCEPTEDRequires meticulous z-index coordinate calibration and careful handling of CSS blend-mode clipping boundaries.
02 /Synthesize all environmental soundscapes (rain, wind, clicks) on-the-fly using the Web Audio API
WHY THIS DECISIONEliminates ~10MB of audio file downloads, enables infinite non-repeating acoustic textures, and allows real-time low-pass filtering based on weather state.
TRADE-OFF ACCEPTEDRequires understanding audio DSP graphs, BiquadFilterNodes, and browser autoplay audio context unlocking.
03 /Build a single unified data source (portfolioData.ts) powering both the retro terminal and the minimal editorial profile
WHY THIS DECISIONEnsures work experience, projects, skills, and case studies remain 100% consistent across both the immersive pixel room and executive profile.
TRADE-OFF ACCEPTEDData schemas must be rich enough to support both monospace CLI output and full editorial typography.
VERIFIED IMPACT
Measurable Outcomes
Observable metrics and verified deliverables achieved in production.
0 KBAudio Asset Payload100% synthesized in real time via Web Audio API
480×270Virtual Canvas ResolutionInteger scaled with crisp-edges CSS
Dual ModeInterface ModesInteractive pixel room + editorial minimal profile
- —Delivered a memorable, authored developer portfolio that stands out in technical recruiting and engineering leadership reviews
- —Zero kilobyte audio assets with rich, procedural rain, thunder, and tactile sound effects
- —Universal accessibility with instantaneous dual-mode switching between interactive workspace and editorial profile
- —Maintained 60 FPS performance and passed strict TypeScript typecheck and production bundling