Inspiration
Most developer portfolios exist at two extremes: either static, two-dimensional resume templates that fail to convey creative problem-solving, or bloated 3D experiments that demand multi-megabyte downloads, stutter on mobile devices, and obscure the engineering beneath heavy loading spinners.
As a backend and systems engineer passionate about computer graphics and AI tooling, I wanted to shatter that false dichotomy. I was inspired by the tactile, analog industrial design of late-20th-century hardware—specifically Braun instruments and 1980s cathode-ray tube (CRT) monitors with tactile dials and phosphor scanlines.
My vision was to construct a unified digital experience: an ultra-fast, editorial landing page delivering instantaneous First Contentful Paint ($< 200\,\text{ms}$) that seamlessly morphs into an immersive, mathematically rendered 3D WebGL spatial archive without sacrificing performance or accessibility.
What it does
Interactive Portfolio using WebGL (shreyasn.dev) is a dual-tier portfolio and interactive 3D archive I created to showcase my backend architectures, distributed systems, and creative technology:
- Editorial Architecture & Micro-Interactions: Built with React 19, Vite, and Tailwind CSS v4, the core interface balances high-contrast typography (Fraunces variable serif alongside Space Grotesk) with interactive technical chips, terminal previews, and a zero-layout-shift cipher text decryption engine.
- The Retro CRT Monitor (
SN·60): A custom-styled cathode-ray tube viewport I designed with procedural scanlines, phosphor glow vignettes, and physical control dials. When activated, the screen uses spring-damped layout morphing to expand smoothly from an embedded TV screen into a high-fidelity modal viewport. - The 3D WebGL Archive Chest: An interactive Three.js 3D environment allowing visitors to orbit, inspect, and interact with procedural 3D elements, halftone portrait shaders, and architectural milestones.
- Perspective 3D Stage Carousel: A spatial navigation stage where project chapter cards dynamically project across a signed distance field, supporting mouse drag, mouse-wheel cycling, and keyboard navigation.
How I built it
I built the project by uniting modern frontend engineering with low-level computer graphics and edge deployment:
- Frontend & UI Layer: React 19, Vite 8, Tailwind CSS v4, Phosphor Icons, and
motion/reactfor physics-based spring transitions. - 3D Graphics & Shaders: Three.js, WebGL 2.0, GLSL fragment and vertex shaders, and
OffscreenCanvas. - Concurrency & Offloading: Dedicated Web Workers performing procedural noise calculations off the main UI thread.
- Edge Infrastructure: Deployed globally via Cloudflare Pages with automated GitHub CI/CD, custom edge headers, and Schema.org structured semantic graphs.
Mathematical & Physics Foundation
1. Procedural Surface Perturbations (GLSL)
To eliminate multi-megabyte 4K texture downloads, I synthesized materials procedurally via fractional Brownian motion (fBm). Surface normals $\mathbf{n}$ are perturbed using the gradient of a procedural height field $h(u, v)$:
$$\mathbf{n}' = \frac{\mathbf{n} - \left( \frac{\partial h}{\partial u}\mathbf{t} + \frac{\partial h}{\partial v}\mathbf{b} \right)}{\left| \mathbf{n} - \left( \frac{\partial h}{\partial u}\mathbf{t} + \frac{\partial h}{\partial v}\mathbf{b} \right) \right|}$$
where $\mathbf{t}$ and $\mathbf{b}$ represent the orthonormal tangent and bitangent vectors in tangent space.
2. Damped Harmonic Oscillator (Spring Dynamics)
The morphing expansion between the CRT television and the full-screen modal, as well as card flick momentum, is driven by a second-order linear differential equation:
$$m \frac{d^2 x}{dt^2} + c \frac{dx}{dt} + k (x - x_{\text{target}}) = 0$$
By tuning mass $m = 0.9$, stiffness $k = 210$, and damping coefficient $c = 30$, I gave transitions an organic, physical weight without relying on synthetic ease-in-out curves.
3. Spatial Card Perspective Transform
For a card positioned at signed distance $d = i - i_{\text{active}}$ from the currently focused chapter, its projective spatial coordinates are computed in real time:
$$\begin{aligned} x(d) &= 56\% \cdot d \ z(d) &= -|d| \cdot 170\,\text{px} \ \theta_Y(d) &= -26^\circ \cdot d \ s(d) &= \max\left(0.62,\, 1 - 0.12|d|\right) \end{aligned}$$
with dynamic Gaussian depth-of-field blur:
$$\sigma(d) = \max\left(0,\, (|d| - 1) \cdot 2.2\right)\,\text{px}$$
Challenges I ran into
- Off-Main-Thread Texture Generation: Computing complex procedural Perlin/Simplex gradient noise during runtime initially caused micro-stutters in the browser's main render loop. I decoupled generation by delegating texture rasterization to Web Workers using
OffscreenCanvasand transferringImageBitmapbuffers via zero-copy transferable objects. - Preventing Cumulative Layout Shift (CLS) on Decryption: Scrambling and unscrambling alphanumeric strings with variable-width fonts caused surrounding elements to shift erratically. I engineered a frequency-matched replacement cipher that preserves exact glyph advance widths, locking CLS strictly to $0.00$.
- Bridging Independent WebGL Bundles into Vite: Unifying a standalone static WebGL bundle with a modern Vite SPA required resolving asset resolution discrepancies and asset lifecycle hooks under Cloudflare Pages routing without running an auxiliary Node server. I solved this by structuring a dedicated static routing bridge with asset preloads.
- Cross-Platform Favicon & Browser SQLite Caches: Overcoming aggressive desktop favicon caching across Google Chrome and Safari required me to engineer dual-density binary ICO containers (16x16, 32x32, and 48x48) combined with SVG halftones and automated cache-busting queries.
Accomplishments that I'm proud of
- Sustained 60 FPS Graphic Performance: Silky-smooth rendering and camera movements across standard and high-refresh displays with virtually zero initial download penalty.
- Zero Layout Shift ($0.00$ CLS): Complete layout stability across viewport resizes and transitions.
- Authentic Retro-Industrial Polish: Seamless harmony between mid-century tactile aesthetics (grooved dials, cathode scanlines, phosphor bloom) and cutting-edge typography.
- Lighthouse Performance & SEO: Perfect SEO audits with clean XML sitemaps, JSON-LD
Personmetadata schemas for Google indexing, and sub-second global Time to First Byte (TTFB) via Cloudflare edge routing.
What I learned
- Decoupling Compute from the Render Pipeline: I learned that in high-end WebGL experiences, math-heavy geometry and texture generation must never compete with DOM layout or the main
requestAnimationFramethread. - The Power of Mathematical Physics: Mechanical spring equations create an organic haptic feel that pre-baked cubic bezier curves simply cannot match.
- Full-Stack Creative Engineering: As a solo developer, building this taught me that backend reliability, low-level graphics shaders, and typography are deeply interconnected parts of a single unified craft.
What's next for Interactive Portfolio using WebGL
- WebGPU Shader Migration: Upgrading my WebGL 2.0 pipeline to WebGPU compute shaders for real-time client-side particle simulations and volumetric ray marching.
- Synthesized Web Audio Engine: Adding analog auditory feedback—tactile relay clicks, CRT power hums, and cathode flyback oscillator tones synthesized entirely mathematically via the Web Audio API without audio file bloat.
- Interactive 3D System Sandboxes: Enabling visitors to inject input nodes into interactive 3D architecture diagrams inside the archive chest to visualize live data flows and backend queuing mechanics.
- Mobile Gyroscope Parallax: Incorporating device orientation angles ($\alpha, \beta, \gamma$) so mobile visitors can tilt their device to inspect 3D objects with natural physical parallax.
Log in or sign up for Devpost to join the conversation.