AN INTERACTIVE PERSONAL SPACE
An explorable bilingual room for a life, its work, and everything in between.
The Living Index turns a personal homepage into a small world: part portfolio, part archive, and part living self-portrait. Instead of navigating a stack of conventional pages, visitors move through a room where meaningful objects become entrances into music, research, photography, making, daily rituals, and future plans.
The 3D room is never the only way in. Every spatial interaction is mirrored by a complete semantic content index, so the same story remains accessible without WebGL, precise pointer control, or motion.
| 🌗 Time-aware | 🧭 Object-led | 🛠️ Studio-built |
|---|---|---|
| The author’s timezone moves the sun, changes the atmosphere, and turns on the night lights. | Objects are more than navigation icons: each one carries a chapter, memory, practice, or unfinished question. | Content, custom assets, object placement, photography, links, and modular cards can be shaped visually. |
🌙 A time-aware room with navigable objects and ambient night lighting. |
📖 The complete English content index, with Chinese available from the same view. |
Content Studio keeps the portfolio editable without flattening it into a generic CMS. It supports bilingual profile content, composable text/media/link cards, personal photography, social links, custom GLB assets, and live scene arrangement.
Objects can be positioned through numeric controls or confirmed drag sessions across floor movement, height, and heading modes. Imported assets may remain purely decorative or become interactive entrances with their own page content.
- 🌐 Bilingual by design — Chinese and English share one spatial system while keeping independent editorial content.
- ☀️ Author-local lighting — fixed GMT offsets and IANA timezones drive the clock, sun arc, twilight, and artificial lights.
- 🪞 Object-shaped storytelling — twelve built-in room objects open distinct chapters and visual modules.
- 📷 Photography with focus — every image remains visible, while spotlight images receive a dedicated editorial treatment.
- 🧱 Composable content — text, media, and link cards can be combined into standard, wide, or full-width layouts.
- 🧭 Direct scene editing — move, raise, rotate, scale, and confirm object placement without leaving the visual editor.
- 📦 Bring your own assets — validated self-contained GLB models can be added as decoration or interactive content.
- ♿ An equal non-3D route — semantic navigation, keyboard support, reduced motion, and graceful WebGL fallback are part of the core experience.
Three.js · React 19 · TypeScript · vinext · Vite · Cloudflare Workers
The room uses a deliberately direct Three.js runtime for scene lifecycle, raycasting, camera motion, lighting, object manipulation, and GPU cleanup, while React owns the editorial UI and accessible content layers.
This README is the visual overview. Setup, local development, Content Studio workflows, content modeling, custom assets, scene placement, validation, deployment, and troubleshooting all live in the Mintlify guide:
The source code is available under the MIT License. Third-party assets, if added, remain under their respective licenses and are documented in ASSET_CREDITS.md.
© ACondawayUNo · Congsheng Xu