3D Room Portfolio
Solo
Overview
An interactive 3D room portfolio. The visitor orbits a modeled space and clicks objects to trigger things: change the lighting and theme, play music, launch a game of Mario, open a project. It is an exploratory take on the classic portfolio, where the navigation is furniture.
The room and the portfolio inside it are separate projects: the 3D environment renders the portfolio site live in its screens. Both are deployed and playable.
Day and night: same room, two lighting passes
A lamp in the room acts as the theme switch. Clicking it re-lights the whole scene. Same geometry, two moods: a warm daylight pass where the window becomes the key light, and a night pass where the emissive materials take over, monitor, poster and LED strip.
The screens are the site
This is the part I would rebuild the same way. The monitor and the phone carry no texture. They render the second site, live: the desktop layout on the monitor, the responsive layout on the phone. Click one and the camera flies in (GSAP), then hands scrolling over to the page. Two codebases, two deployments, one continuous experience. And the portfolio stays readable on its own, for anyone who would rather not walk around a bedroom to find my CV.
Tech
- React Three Fiber and Three.js, with drei for the helpers and @react-three/postprocessing for the bloom that makes emissive materials read as light.
- Zustand for state, GSAP for the theme transition and the camera fly-to, Howler for audio, leva as the control panel while tuning the scene.
- Every model authored in Blender.
Inspiration
Three rooms I studied before building mine: Bruno Simon’s My Room in 3D, Henry Heffernan’s CRT-desk portfolio, and Jesse Zhou’s ramen shop. All three answer the same question in different ways. How much exploration will a visitor tolerate before they just want the information?
The direct predecessor of this site. It looked good and it loaded slowly. The portfolio you are reading now is my answer to that trade-off.
Überblick
Ein Portfolio in einem interaktiven 3D-Raum. Die Besucherin umkreist einen modellierten Raum und klickt Objekte an, um etwas auszulösen: Licht und Thema wechseln, Musik abspielen, eine Runde Mario starten, ein Projekt öffnen. Eine erkundende Variante des klassischen Portfolios, in der die Navigation aus Möbeln besteht.
Der Raum und das Portfolio darin sind getrennte Projekte: die 3D-Umgebung rendert die Portfolio-Seite live in ihren Bildschirmen. Beide sind deployt und spielbar.
Tag und Nacht: derselbe Raum, zwei Lichtdurchgänge
Eine Lampe im Raum dient als Themenschalter. Ein Klick beleuchtet die ganze Szene neu. Gleiche Geometrie, zwei Stimmungen: ein warmer Tagdurchgang, in dem das Fenster zum Hauptlicht wird, und ein Nachtdurchgang, in dem die emissiven Materialien übernehmen, Monitor, Poster und LED-Streifen.
Die Bildschirme sind die Seite
Das ist der Teil, den ich genauso wieder bauen würde. Monitor und Telefon tragen keine Textur, sie rendern live die zweite Seite: das Desktop-Layout auf dem Monitor, das responsive Layout auf dem Telefon. Ein Klick, die Kamera fliegt hinein (GSAP) und übergibt das Scrollen an die Seite. Zwei Codebasen, zwei Deployments, eine durchgehende Erfahrung. Und das Portfolio bleibt für sich lesbar, für alle, die nicht erst durch ein Schlafzimmer laufen wollen, um meinen Lebenslauf zu finden.
Technik
- React Three Fiber und Three.js, mit drei für die Helfer und @react-three/postprocessing für das Bloom, das emissive Materialien wie Licht wirken lässt.
- Zustand für den State, GSAP für Themenwechsel und Kameraflug, Howler für Audio, leva als Reglerpanel beim Feintuning.
- Alle Modelle in Blender gebaut.
Inspiration
Drei Räume, die ich vor meinem eigenen studiert habe: Bruno Simons My Room in 3D, das Röhrenmonitor-Portfolio von Henry Heffernan und der Ramen-Laden von Jesse Zhou. Alle drei beantworten dieselbe Frage unterschiedlich: wie viel Erkundung erträgt eine Besucherin, bevor sie einfach die Information will?
Der direkte Vorgänger dieser Seite. Sie sah gut aus und lud langsam. Das Portfolio, das du gerade liest, ist meine Antwort auf diesen Kompromiss.
Vue d’ensemble
Un portfolio dans une pièce 3D interactive. Le visiteur tourne autour d’un espace modélisé et clique sur les objets pour déclencher des choses : changer l’éclairage et le thème, lancer de la musique, jouer à Mario, ouvrir un projet. Une version exploratoire du portfolio classique, où la navigation est du mobilier.
La pièce et le portfolio qu'elle contient sont deux projets distincts : l'environnement 3D affiche le site portfolio en direct dans ses écrans. Les deux sont déployés et jouables.
Jour et nuit : même pièce, deux passes d’éclairage
Une lampe de la pièce sert d’interrupteur de thème. Un clic ré-éclaire toute la scène. Même géométrie, deux ambiances : une passe de jour chaude où la fenêtre devient la lumière principale, et une passe de nuit où les matériaux émissifs prennent le relais, écran, poster et ruban LED.
Les écrans sont le site
C’est la partie que je referais à l’identique. L’écran et le téléphone ne portent aucune texture : ils affichent le second site, en direct. La mise en page desktop sur le moniteur, la version responsive sur le téléphone. Un clic et la caméra plonge (GSAP), puis rend le scroll à la page. Deux bases de code, deux déploiements, une seule expérience continue. Et le portfolio reste lisible tout seul, pour qui n’a pas envie de faire le tour d’une chambre pour trouver mon CV.
Technique
- React Three Fiber et Three.js, avec drei pour les helpers et @react-three/postprocessing pour le bloom qui fait lire les matériaux émissifs comme de la lumière.
- Zustand pour l’état, GSAP pour la transition de thème et le vol de caméra, Howler pour l’audio, leva comme panneau de réglages pendant la mise au point.
- Tous les modèles réalisés sous Blender.
Inspirations
Trois pièces que j’ai étudiées avant de construire la mienne : My Room in 3D de Bruno Simon, le portfolio au bureau à écran cathodique de Henry Heffernan, et le restaurant de ramen de Jesse Zhou. Les trois répondent différemment à la même question : combien d’exploration un visiteur accepte-t-il avant de simplement vouloir l’information ?
Le prédécesseur direct de ce site. Il était beau et il chargeait lentement. Le portfolio que tu lis maintenant est ma réponse à ce compromis.
概要
インタラクティブな3D部屋のポートフォリオです。モデリングされた空間のまわりを回りながらオブジェクトをクリックすると、照明とテーマを変えたり、音楽を鳴らしたり、マリオを起動したり、プロジェクトを開いたりできます。ナビゲーションが家具になっている、探索型のポートフォリオです。
部屋と、その中のポートフォリオは別プロジェクトです。3D環境が画面の中にポートフォリオサイトをライブで描画しています。どちらも公開済みで実際に触れます。
昼と夜：同じ部屋、2つのライティング
部屋のランプがテーマの切り替えスイッチです。クリックするとシーン全体が照らし直されます。ジオメトリは同じで、雰囲気が2通り。窓がキーライトになる暖かい昼のパスと、モニター・ポスター・LED テープといった自己発光マテリアルが主役になる夜のパスです。
画面そのものがサイト
ここは同じやり方でもう一度作ると思います。モニターとスマートフォンにテクスチャは貼っていません。もう一つのサイトをライブで描画しています。モニターにはデスクトップ版、スマートフォンにはレスポンシブ版。クリックするとカメラが寄り（GSAP）、そこからスクロールの主導権をページ側へ渡します。コードベース2つ、デプロイ2つで、体験としては地続きです。しかもポートフォリオ単体でも読めるので、履歴書を見るのに寝室を歩き回りたくない人でも大丈夫です。
技術
- React Three Fiber と Three.js。ヘルパーに drei、自己発光マテリアルを光として見せるブルームに @react-three/postprocessing。
- 状態管理に Zustand、テーマ遷移とカメラの移動に GSAP、音に Howler、調整中のコントロールパネルに leva。
- モデルはすべて Blender で制作。
参考にしたもの
自分のものを作る前に研究した3つの部屋です。Bruno Simon の My Room in 3D、Henry Heffernan のブラウン管デスクのポートフォリオ、そして Jesse Zhou のラーメン店。3つとも同じ問いに別々の答えを出しています。訪問者は「早く情報が欲しい」と思うまでに、どれだけの探索に付き合ってくれるのか。
このサイトの直接の前身です。見た目は良く、読み込みは遅いものでした。いま読んでいるポートフォリオは、そのトレードオフに対する私の答えです。
概览
一个放在交互式 3D 房间里的作品集。访客围绕一个建模空间转动视角，点击物件触发各种事情：切换灯光与主题、播放音乐、来一局马力欧、打开某个项目。这是作品集的探索式版本，导航就是家具本身。
房间和里面的作品集是两个独立项目：3D 环境把作品集网站实时渲染在它的屏幕里。两者都已部署，可以直接体验。
白天与夜晚：同一间房，两套灯光
房间里的一盏灯就是主题开关。点一下，整个场景重新打光。几何体不变，氛围有两种：暖调的白天，窗户成为主光；以及夜晚，自发光材质接手——显示器、海报和 LED 灯带。
屏幕就是网站
这部分我会用完全一样的方式再做一遍。显示器和手机上没有贴任何贴图，它们实时渲染的是第二个网站：显示器上是桌面版布局，手机上是响应式布局。点击其中之一，镜头就会飞进去（GSAP），然后把滚动交给页面。两套代码、两次部署，体验却是连贯的。而且作品集本身依然可以独立阅读，给那些不想为了找我的简历而在卧室里绕一圈的人。
技术
- React Three Fiber 与 Three.js，用 drei 提供辅助工具，用 @react-three/postprocessing 做泛光，让自发光材质真的读起来像光。
- Zustand 管状态，GSAP 负责主题过渡和镜头飞入，Howler 处理音频，调场景时用 leva 当控制面板。
- 所有模型都在 Blender 里制作。
灵感来源
在动手之前我研究过三个房间：Bruno Simon 的 My Room in 3D、Henry Heffernan 的显像管书桌作品集，以及 Jesse Zhou 的拉面店。三者用不同方式回答了同一个问题：访客在只想要信息之前，究竟能容忍多少探索？
这是本站的直接前身。它好看，但加载很慢。你现在读的这份作品集，就是我对这个取舍给出的答案。