ポートフォリオサイト
2025年1月 - 現在
趣味
プロジェクト概要
App Router ベースの Next.js 14 と TypeScript/Tailwind CSS を用いて、このポートフォリオサイトを構築しています。プロジェクト・技術・経歴などのデータは `lib/data` 以下の型付きデータとして管理し、セクションごとにコンポーネント分割することで、デザインの一貫性と拡張性を両立しています。3D 背景には React Three Fiber と drei を使用し、UI コンポーネントには Radix UI や自作コンポーネントを組み合わせています。GitHub Actions を使って、Lint やビルドなどの基本的なチェックを自動化しています。
アーキテクチャ
Next.js の App Router を用いてページとセクションを構成し、`app` ディレクトリ配下でレイアウト・ページ・ルートを管理しています。UI は Tailwind CSS と Radix UI ベースのコンポーネントで構成し、3D 表現は React Three Fiber / drei / three.js による背景コンポーネントとして分離しました。プロジェクトや技術のメタデータは `lib/data` の型付きオブジェクトとして定義し、表示側からはデータ駆動でカードや詳細ページを生成できるようにしています。
技術的挑戦
- App Routerベースでのページ構成・セクション分割と、型付きデータ構造の設計
- Tailwind CSS とコンポーネントライブラリを組み合わせた再利用可能なUI設計
- React Three Fiber / drei / three.js を用いた3D背景表現と、通常のUIコンポーネントとのレイヤー分離