Solarquack — Classical Marble Dossier

Most personal engineering websites follow generic templates: identical flat layouts, hardcoded skill percentage meters with no basis in reality, and disconnected UI elements that lack depth.

I set out to engineer a portfolio that demonstrates both technical systems mastery and uncompromising visual craft:

1. 01.
   Reconcile classical Greco-Roman marble sculpture art with the tactical precision of UNIX command dossiers.
2. 02.
   Build an immersive 3D depth-parallax hero scene that runs at 60 FPS without heavy 3D mesh overhead.
3. 03.
   Establish live telemetry synchronization that pulls real contribution statistics from GitHub without exposing private tokens or blowing rate limits.
4. 04.
   Integrate responsive tactile sound and keyboard command palettes for power users.

I architected the portfolio around a Chiaroscuro visual philosophy:

1. 01.
   Orthographic Depth-Parallax Shader: Created a custom Three.js GLSL fragment shader utilizing camera-space depth textures to simulate full 3D statue volume. Applied cursor-reactive torch lighting, zero-tolerance alpha cutout thresholding to discard dark halos, and Bayer 8x8 ordered dithering matrices for authentic bone-toned grain.
2. 02.
   24-Hour Incremental Static Regeneration (ISR): Configured Next.js 14 server components to cache GitHub GraphQL telemetry for 86,400 seconds, combined with dynamic API endpoints and custom client-side event emitters for instantaneous on-demand refresh.
3. 03.
   Harmonic Typography System: Layered the Fraunces variable display font, GFS Didot Greek stone inscriptions, Geist body text, and JetBrains Mono dossier tables. Implemented real-time in-place character scrambling between English and ancient Greek glyphs.

The portfolio codebase incorporates specialized architectural modules:

• ―
  Web Audio Sound Synthesizer: Built procedural metallic slicing sounds, navigation bubbles, and toast chimes directly using the browser Web Audio API, circumventing external audio file asset latencies.
• ―
  Dynamic Case Study Engine: Gray-matter parsed MDX project dossier system rendering rich architecture topologies, technology rationale lists, and real metric callouts.
• ―
  Interactive Command HUD (Cmd+K): A centralized command palette allowing keyboard-driven site exploration, project jumping, and instant transmission copying.

Crafting high-fidelity interactive web systems provided deep insights:

• ―
  Orthographic projection prevents perspective distortion at viewport edges, ensuring statues remain harmoniously positioned regardless of window aspect ratios.
• ―
  Separating high-frequency cursor animations into dedicated RAF loops while keeping heavy layout changes tied to GSAP scroll scrubbers prevents main-thread frame drops.