I built my first personal website with theme of a Japanese-inspired three.js scene. There are many cool features on my website, but I’ll just list a few here. A katana unsheathes and resheathes as you scroll, set against Hokusai-style waves, a torii gate, cherry blossoms, a stone lantern, and falling sakura petals. Plain HTML/CSS/JS was used with no framework. The hardest parts were choreographing the six-phase katana animation across seven scroll-synced camera keyframes, and keeping the scene performant given the custom wave/moon shaders, five streamed 3D models, and DOM-based petals all running together. I’m proud of the clip-plane solution, the performance optimizations, and accessibility (touch handling, reduced motion, etc). Additionally, a fun learning experience was when I was scavenging the internet (sketchfab) for high quality 3d .glb models and using blender to make minor adjustments. When testing it, users should know it must be served over HTTP (cannot be opened as a file). Give the website a few moments to load the 3d models, and scroll slowly to catch the choreography.
