Hi everyone! 
I wanted to share the latest release (v4.0 “Imoto”) of my interactive portfolio, HekTek City.
As a Software Architect, I wanted to move away from the traditional static resume and build something that demonstrates full-stack engineering and creative coding. The result is a persistent open-world city built with React Three Fiber.
Live Demo: https://www.hectortechno.com
Video Tour (4K): [Here]
GitHub: [Here]
![Preview]
Key Features & Tech Stack
This isn’t just a scene; it’s a structured application.
-
Autonomous Navigation (“Imoto” System): I implemented a cinematic camera rig using
useFrameand Bezier curves that guides the user through the experience automatically. It calculates optimal paths between “buildings” (sections) based on the user’s current state. -
Runtime Material System (No KHR_materials_variants): Instead of bloating the GLB files with texture variants, I built a custom hook (
useDynamicMaterials) that swaps textures and material properties at runtime based on a JSON configuration. This allows switching between Cyberpunk, Mars, and Pandora themes instantly without reloading the geometry. -
Unified Design System in WebGL: Integrating 2D UI with 3D depth is always tricky. I used Ant Design components heavily customized with Tailwind CSS, wrapped in HTML overlays that react to the 3D camera focus state.
-
Infrastructure: Assets are served via Cloudflare R2 to bypass Vercel’s bandwidth limits and ensure low latency for heavy GLB/Texture streaming.
What’s Next?
I am currently working on v5.0, which will integrate a Generative AI agent directly into the environment (RAG over my documentation), allowing visitors to “chat” with the architecture.
I’d love to hear your feedback on performance (especially on mobile) and the transition smoothness!
Thanks!