Show HN: I spent 2.5 years developing my 3D portfolio website, all under 5 MB

sheesdev2 pts1 comments

Hi HN! For the past 2.5 years I ve been developing my portfolio website using Blender and Three.js and I m glad to announce that it s finally completed! I d love for it to be viewed and critiques by HN, since even though it was deployed last month, I ve spent a lot of time since then into polishing every little detail since I know the bar of quality is so high among us developers.https://shees.dev – Desktop Recommended first, then on mobile which has a fully different UI!Some cool things about it:1. Everything ships in under 5.0 MB total.2. It s optimized to run at really high FPS even on low-end devices. (The biggest time sink. I have a low-end laptop, so I know the pain.). ~60 FPS on an i3 and UHD i-gpu.3. Loads under 7 seconds!4. Entirely separate Desktop and Mobile UIs! It was originally made for the 16:9 ratio, so I had to be creative and designed an entirely new Mobile UI for it (inspired by the Nintendo DS!)5. Custom GLSL shaders for grass, road, clouds, and wind.6. Dozens of optimizations ranging from culling, LOD (Level of Detail), Shader language tuning for GPU efficiency, many mesh geometry optimizations, pregenerating data, chunking grass and using a lookup table for rendering. A custom algorithm for the navbar transition from any point to another without clipping through the model, and *so much more*!I d love it if you try both the desktop and mobile UIs!It s entirely designed as a 3D website that you navigate by scrolling (and occasionally clicking), with cool points of interests, nice animations, and custom Modals for content! I spent around 1400-1800 hours on this entire project, from the modelling, the creative blocks, to the coding, the optimizations. There s also an optional soundscape for even more immersion!Some Limitations:It s not fully tested on devices like iPads, which have a device px ratio between desktop and mobile. I had to use a strict cutoff for desktop otherwise some content is not visible. Which means unfortunately, less-wide devices will suffer from having to use the mobile UI in a wide screen. I have a new UI layout in my mind for these devices, which I will attempt to incorporate in the coming weeks.Use of LLMs: All of the designing is done by me in Blender (with very few free assets used), all the design choices were taken by me. LLMs at this stage are incapable of understanding any 3D website. I coded and architected it fully, utilizing AI for learning about more optimization algorithms, research, auditing code, and help in writing CSS for the some of the graphics seen in the modals as well as project summarization text. It significantly improved the level of my code along with a faster speed in development.

mobile desktop website devices from spent

Related Articles