How I built my portfolio website
When it comes to developer portfolios, the bar has been raised. A simple list of links and a PDF resume doesn't cut it anymore. As a frontend engineer passionate about 3D graphics, I wanted my portfolio to be a direct reflection of my skills—not just text saying "I know Three.js," but a live demonstration of it.
In this article, I'll walk you through the technical journey of building the site you're looking at right now.
1. The Tech Stack
Choosing the right tools is 50% of the work. I needed a stack that allowed for component-based logic but also gave me low-level access to the GPU.
- React.js: For state management and UI overlay.
- React Three Fiber (R3F): A React renderer for Three.js. This is crucial because it allows us to express a 3D scene graph using declarative JSX.
- Tailwind CSS: For styling the DOM elements that sit on top of the canvas.
- Vite: For lightning-fast build times.
2. Designing in Blender
Every good 3D site starts outside the browser. I modeled the workspace scene in Blender. The goal was "stylized realism"—low poly counts but with realistic lighting.
The Secret Sauce: Baking. Real-time shadows calculate every frame and kill performance on mobile. To solve this, I "baked" the lighting into the textures. This means the shadows you see on the desk aren't real; they are painted onto the image texture of the desk. This allows the scene to look ray-traced while running on a mobile GPU.
3. From Blender to Browser
Exporting the model is tricky. I used the `.glb` format, which is the standard for the web. I then ran the model through glTF-Pipeline to apply Draco compression. This reduced the file size from 25MB to 3MB, ensuring the site loads instantly even on 4G networks.
npx gltf-pipeline -i scene.glb -o scene-draco.glb -d4. Interaction Logic
In R3F, interaction is handled via Raycasting. I didn't want standard generic controls. I wanted the camera to feel like a movie director was controlling it.
I implemented a custom camera controller that interpolates (lerps) the camera position based on the scroll percentage. This creates the effect of "diving" into the screen as you scroll down.
5. The SEO Challenge
The biggest downside of WebGL sites is that they initially appear as empty canvases to Google. To fix this, I adopted a Hybrid Strategy.
I noticed you might be reading this on a static HTML page right now. That's intentional. The core application runs on `app.html`, but for SEO, I generated static HTML versions of every page (`index.html`, `about.html`, etc.) with rich text content. This gives me the best of both worlds: the "wow" factor of a 3D app for users, and the crawlability of a blog for search engines.
Conclusion
Building a 3D portfolio is a massive undertaking, but the ROI is undeniable. It sets you apart from the sea of Bootstrap templates and shows clients that you can handle complex, performance-critical engineering tasks.