概要
ビジョンと経歴を伝えるためのポートフォリオサイト(このサイト)。Homeはスクロールで進む3Dのミニチュア都市
課題
解決したい課題
- 職務経歴書だけでは伝わりにくいビジョンを、短い時間で伝える
- 経歴やプロジェクトの内容を、自分で手早く更新できる状態を保つ
技術課題
- スクロールに連動する3Dシーンを、スマートフォンや低性能の端末でも破綻させない
- 多数の3Dモデルを軽く読み込む
設計のポイント
| 論点 | 選択肢 | 採用 | 理由・トレードオフ |
|---|---|---|---|
| コンテンツの管理 | CMS / リポジトリ内のTypeScriptとMDX | リポジトリ内のTypeScriptとMDX | 外部サービスが不要で、型によって入力の抜けを検出でき、変更履歴もGitで追えるため |
| 3Dが使えない環境への対応 | 3Dを必須にする / 静止画に切り替える | 静止画に切り替える | 動きを減らす設定の利用者や、WebGLが使えない環境でも内容が伝わるようにするため |
技術スタック
- TypeScript
- Next.js
- React
- Tailwind CSS
- Three.js
- React Three Fiber
- MDX