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
-
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 setpreload="none". Bandwidth per bounced visit dropped from ~8.6 MB to ~1.2 MB. -
Manual chunking in Vite: split
react-vendor,icons, andnoiseinto separate hashed bundles so that updates to my own code don't bust the React cache. -
Cloudflare edge caching: hashed
/assets/*files set toCache-Control: public, max-age=31536000, immutable. HTML revalidates every load so deploys ship instantly. -
SEO landing pages: I generated a static HTML page per project under
/projects/:idso Google can index every case study, then deep-linked them into the SPA viahistory.pushState. -
GA4 events: added
section_view,resume_download, andoutbound_clickevents 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)