Roles & Stack
Impact
- Real-time GPU-based theme switching
- Interactive 3D folder navigation system
- Zero-flash theme persistence using sessionStorage
- Sub-100ms interaction latency across all WebGL nodes
Year
2025
Category
UI/UX
Deliverables
- Custom WebGL 2.0 Loader
- Theme-Interpolating Fragment Shader
- MacOS Control Center Mobile UI
- Dynamic Case Study Engine
The Vision: Beyond the Grid
Standard portfolios are grids. This is an environment. I wanted to build a digital workspace that felt like an extension of the MacOS philosophy—clean, functional, and imbued with 'silent chaos.'
The core challenge was balancing heavy WebGL processing with SEO-optimized React content. I utilized Next.js 16's server-first approach to ensure the 'editorial' content remains crawlable, while layering client-side interactive nodes for the visual flare.
The Visuals: GPU-Native Storytelling
The Hero section isn't just an image—it's a real-time GPU calculation. I wrote an Adaptive Wave Shader that doesn't just change color when you toggle Light/Dark mode; it interpolates the noise vectors and lighting values within the fragment shader to ensure a seamless transition.
The LightSpeed loader (created by @atzedent and refined for this project) utilizes WebGL 2.0 to create a warp-speed entrance, setting the tone for a high-performance visit.
The Interaction: Physics & Tactility
Navigation is handled by a custom MacOS-style menu bar, complete with a functional Clock and a mobile-exclusive Control Center. I replaced traditional buttons with high-end glass nodes that respond to user mouse movements via a global Canvas mouse-trail system.
The 'Projects' loading state is a custom Particle Field. It's not just a spinner; it's a playground. By holding the Spacebar (or long-pressing on mobile), users can pause the progress and manipulate the particles, turning a moment of 'waiting' into a moment of 'play.'
The Stack: 2026 Ready
Technically, the site is a powerhouse. It uses React 19 for the UI, Framer Motion for the physics, and GSAP for the timeline orchestration. Every asset is optimized via Next.js Image, and every interaction is monitored by Error Boundaries to ensure resilience against GPU failures.
This website serves as a living document of my capabilities—merging code-driven engineering with designer-grade artistry.
Shader Specifications
LightSpeed Loader
Matthias Hurrle (@atzedent) • Custom fragment shader integration
A high-performance WebGL 2.0 shader creating a 'warp speed' entrance effect. Features custom hue-shifting particle systems.
MeshGradient & Dithering
Paper Design • @paper-design/shaders-react
Dynamic multi-color mesh gradients combined with an overlay dithering pass to create a unique 'Pixel-Art editorial' aesthetic.
Adaptive Wave Shader
Community Open Source • GLSL Fragment Shader
A noise-based wave system used for the hero background, dynamically interpolating between light and dark modes.
Gallery Distortion Shader
OGL Library Community • OGL Pipeline
Interactive wave distortions implemented via the Object-Oriented Graphics Library for high-performance 3D gallery effects.
Core Technology Stack
Next.js 16
16.1.0 • MIT
Framework for performance-critical routing and efficient server-side rendering.
Three.js & R3F
0.182.0 • MIT
Engine for complex 3D visual logic and fragment shader execution.
Framer Motion
12.23.26 • MIT
Declarative orchestration of physics-based UI interaction.
GSAP
3.14.2 • Standard
Advanced timeline management for precisely sequenced motion paths.
Architecture of Gian Aibo 2026
This website is not just a showcase—it is the evidence. By merging code-driven engineering with designer-grade artistry, I've created a platform that lives and breathes in the GPU, ensuring every interaction is as visceral as it is functional.
Gallery
Process visuals
Explore next
Medical Transcriptions with OpenAI API
A Python-based data pipeline that leverages OpenAI's GPT-4o-mini model to extract structured medical information—including patient age, specialty, treatment plans, and ICD-10 diagnostic codes—from raw clinical transcriptions. This project demonstrates production-grade AI engineering with JSON schema enforcement, achieving automated extraction of 4+ clinical data fields per transcription with high accuracy.