The latest articles on DEV Community by Kunal Gautam (@kgautam). https://dev.to/kgautam https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3901210%2Fdcbd81ab-ccc3-426c-ac12-1064a86e387b.JPG https://dev.to/kgautam en Kunal Gautam Mon, 27 Apr 2026 21:17:01 +0000 https://dev.to/kgautam/how-i-built-a-3d-interactive-portfolio-with-react-threejs-and-cloudflare-workers-3f9m https://dev.to/kgautam/how-i-built-a-3d-interactive-portfolio-with-react-threejs-and-cloudflare-workers-3f9m <h1> How I Built a 3D Interactive Portfolio with React, Three.js, and Cloudflare Workers </h1> <p>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.</p> <h2> The constraints </h2> <ul> <li>Has to feel 60 FPS even on mid-range devices</li> <li>Total payload under 2 MB on first load</li> <li>Zero 4xx errors in production</li> <li>Indexable by Google despite being a SPA</li> </ul> <h2> What worked </h2> <ol> <li> <strong>Lazy audio</strong>: a 13 MB ambient track was the single biggest bandwidth drain. I deferred loading it until a real user gesture (<code>click</code>/<code>keydown</code>/<code>touch</code>) and set <code>preload="none"</code>. Bandwidth per bounced visit dropped from ~8.6 MB to ~1.2 MB.</li> <li> <strong>Manual chunking in Vite</strong>: split <code>react-vendor</code>, <code>icons</code>, and <code>noise</code> into separate hashed bundles so that updates to my own code don't bust the React cache.</li> <li> <strong>Cloudflare edge caching</strong>: hashed <code>/assets/*</code> files set to <code>Cache-Control: public, max-age=31536000, immutable</code>. HTML revalidates every load so deploys ship instantly.</li> <li> <strong>SEO landing pages</strong>: I generated a static HTML page per project under <code>/projects/:id</code> so Google can index every case study, then deep-linked them into the SPA via <code>history.pushState</code>.</li> <li> <strong>GA4 events</strong>: added <code>section_view</code>, <code>resume_download</code>, and <code>outbound_click</code> events to actually understand engagement instead of guessing from page views.</li> </ol> <h2> What I would do differently next time </h2> <ul> <li>Pre-bake the WebGL shader compile path off the main thread to drop first-frame stutter.</li> <li>Switch ambient audio from MP3 to Opus — half the size at the same quality.</li> <li>Build the project page generator as a Vite plugin so all routes share the same head/meta logic.</li> </ul> <p>If you want to dig deeper into the codebase or see the live build, the full source and demo are linked from my <a href="https://portfolio.kunal-gautam-570.workers.dev/" rel="noopener noreferrer">portfolio</a>.</p> react threejs webgl cloudflare