All Work
/work/pixel-workspaceWorkspace ↗
CASE STUDYCREATIVE TECHNOLOGYIn Development

Arifen's Pixel Workspace

The Pixel Workspace explores how a portfolio can behave like a place rather than a stack of sections while preserving a direct, accessible route to projects and contact information.

ROLECreator, Art Director & Interaction Engineer
TYPEInteractive Portfolio & Procedural Audio Lab
FOCUSInteger Pixel Scaling, Procedural Audio & Dual-Mode UI
STATUSActive in Production
STACK:React · TypeScript · HTML5 Canvas · Web Audio API · CSS Blend Modes · Vite
/?view=workspace
Arifen's Pixel Workspace Interface Preview
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 DECISION

Allows independent CSS blend-mode execution, canvas particle rendering, and DOM hotspot hitboxes without full-scene re-renders.

TRADE-OFF ACCEPTED

Requires 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 DECISION

Eliminates ~10MB of audio file downloads, enables infinite non-repeating acoustic textures, and allows real-time low-pass filtering based on weather state.

TRADE-OFF ACCEPTED

Requires 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 DECISION

Ensures work experience, projects, skills, and case studies remain 100% consistent across both the immersive pixel room and executive profile.

TRADE-OFF ACCEPTED

Data 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

Building something technically demanding?

I work on complex SaaS platforms, interactive systems, and high-performance web experiences.