I built my résumé as a 3D hotel you can walk through

Description and use

The portfolio was transformed into an interactive 3D hotel without external models, featuring optimized rendering and multilingual support.

Problem

Traditional portfolios are static scrollable pages; the author wanted an interactive, immersive experience to showcase résumé content.

Outcome

The portfolio became an interactive 3D hotel with reduced download size, optimized rendering (down to 1,045 draw calls on lobby), and multilingual support, all delivered as a single-page application.

Workflow

• Design hotel layout and map résumé sections to floors
• Generate geometry procedurally with Three.js primitives
• Paint materials on canvases at load time
• Synthesize music with Web Audio API
• Implement performance optimizations: merge static meshes, vertex‑shader traffic, shared light layout, adaptive resolution, no bundler
• Add multilingual support with pre‑rendered URLs and Arabic canvas patch
• Deploy as plain ES modules with import map and modulepreload

Evidence

There are no 3D models, image textures or audio files. Geometry is built from Three.js primitives, the marble, wood, carpets, wallpaper and city windows are painted on canvases at load time, and the lounge music is synthesized live with the Web Audio API.

Source

The lobby went from 1,906 to 1,045 draw calls, and the rooftop from 673 to 303.

Source

The site is plain ES modules and an import map. The build writes every module into the map with a content hash, so they're cached for a year and a deploy only re-downloads what changed.

Source