DEV Community

Kunal Gautam
Kunal Gautam

Posted on • Originally published at portfolio.kunal-gautam-570.workers.dev

How I Built a 3D Interactive Portfolio with React, Three.js, and Cloudflare Workers

How I Built a 3D Interactive Portfolio with React, Three.js, and Cloudflare Workers

I rebuilt my portfolio as a full WebGL solar system. Here is what I learned about shipping it as a real product instead of a demo.

The constraints

  • Has to feel 60 FPS even on mid-range devices
  • Total payload under 2 MB on first load
  • Zero 4xx errors in production
  • Indexable by Google despite being a SPA

What worked

  1. Lazy audio: a 13 MB ambient track was the single biggest bandwidth drain. I deferred loading it until a real user gesture (click/keydown/touch) and set preload="none". Bandwidth per bounced visit dropped from ~8.6 MB to ~1.2 MB.
  2. Manual chunking in Vite: split react-vendor, icons, and noise into separate hashed bundles so that updates to my own code don't bust the React cache.
  3. Cloudflare edge caching: hashed /assets/* files set to Cache-Control: public, max-age=31536000, immutable. HTML revalidates every load so deploys ship instantly.
  4. SEO landing pages: I generated a static HTML page per project under /projects/:id so Google can index every case study, then deep-linked them into the SPA via history.pushState.
  5. GA4 events: added section_view, resume_download, and outbound_click events to actually understand engagement instead of guessing from page views.

What I would do differently next time

  • Pre-bake the WebGL shader compile path off the main thread to drop first-frame stutter.
  • Switch ambient audio from MP3 to Opus — half the size at the same quality.
  • Build the project page generator as a Vite plugin so all routes share the same head/meta logic.

If you want to dig deeper into the codebase or see the live build, the full source and demo are linked from my portfolio.

Top comments (0)