Frontend & WebGL Performance Center

Engineering Telemetry & Performance Proof

Every feature on this portfolio is engineered with strict performance budgets: Next.js SSR instant first paint, decoupled background Web Workers, and persistent GPU mode controls.

[Beta Mode · Telemetry Sandbox]Real-time WebGL memory telemetry, frame-rate probing, and adaptive low-bandwidth switching algorithms are currently in Beta testing and undergoing continuous enhancement.

Live Client Hardware & WebGL Runtime Diagnostics

GPU Device / Renderer

Probing client GPU...

Graphics Vendor

Generic WebGL

Max Texture Texture Dimension

4096 × 4096 px

Runtime Experience & Performance Selector

Control GPU acceleration and data usage across the entire portfolio in real time.

Active: IMMERSIVE

📊 Measured Core Web Vitals & Production Budgets

core-web-vitalsPass (< 1.8s)

0.8s

First Contentful Paint (FCP)

Instant static SSR shell paint delivered via Cloudflare Pages Anycast CDN.

Source: Lighthouse Desktop Audit (Cloudflare Edge)

core-web-vitalsPass (< 2.5s)

1.4s

Largest Contentful Paint (LCP)

Optimized typography and deferred heavy 3D WebGL hydration ensure rapid LCP.

Source: Lighthouse Desktop Audit (Cloudflare Edge)

core-web-vitalsPass (< 0.1)

0.002

Cumulative Layout Shift (CLS)

Fixed-height canvas aspect-ratios prevent layout reflow during client-side hydration.

Source: Chrome User Experience Report (CrUX)

core-web-vitalsPass (< 200ms)

38ms

Interaction to Next Paint (INP)

All 3D computation isolated from primary UI thread; instantaneous button reaction.

Source: Synthetic Profile (V8 DevTools)

core-web-vitalsPass (> 90)

96 / 100

Lighthouse Accessibility

WCAG 2.1 AA compliant color contrast, skip-links, ARIA landmarks, and focus rings.

Source: Lighthouse v12 Audit

core-web-vitalsPass (> 90)

100 / 100

Lighthouse Best Practices

Modern doctype, HTTPS HSTS headers, secure noopener external links, and CSP.

Source: Lighthouse v12 Audit

payloadPass (< 100 kB)

70.8 kB

Initial HTML Payload

Next.js 14 static route export with Brotli compression on Cloudflare Edge.

Source: Next.js Build Analyzer

payloadPass (< 120 kB)

87.4 kB

Shared First-Load JS

Critical chunks loaded upfront; Three.js and heavy canvas libraries dynamically code-split.

Source: Next.js Build Traces

renderingPass (60 FPS)

60 FPS (Stable)

WebGL Framerate (Desktop)

Hardware-accelerated R3F animation with delta-clamped requestAnimationFrame.

Source: In-Engine FPS Telemetry

Engineering Mode Matrix & Resource Allocation

Subsystem Feature	Immersive Mode	Balanced Mode	Low-Bandwidth Mode
3D Neural Core & Starfield	5,001 active WebGL particles (2.0 DPR)	1,200 WebGL particles (1.0 DPR clamped)	Disabled (Pure lightweight CSS glow mesh)
3D CyberBot Companion	Full 3D WebGL chassis, ion physics & gaze	Low-poly mode with reduced shadow passes	Disabled (Instant static HUD avatar)
Audio Chimes & Sound Synthesis	Web Audio API cyber chimes active	Muted by default (opt-in on click)	Disabled completely
Initial Data Payload	~380 KB (with 3D WebGL bundle)	~220 KB (optimized assets)	< 80 KB (instant content-first delivery)
Device Target	Modern Desktop & GPUs (M1+, RTX, Core i5+)	Tablets, Laptops on battery saver	Mobile data, 3G connections, low-power phones