ポートフォリオサイトは以下からアクセスできます。
開発構成図を、HTMLインフォグラフィックで表現しました。
- node v22.14.0
- pnpm v10.11.1
- Next.js：v14.2.20
- React：v18.3.1
- TypeScript：v5
- Tailwind CSS：v4.1.8
- shadcn/ui
- GSAP：v3.12.5
- Motion：v11.12.0
- next-view-transitions：v0.3.4（View Transitions API）
- React Three Fiber：v8.17.10
- Drei：v9.117.3
- React Spring：v9.7.5
- Howler.js：v2.2.4
- React Hook Form：v7.54.0（フォーム）
- Zod：v3.23.8（スキーマバリデーション）
- Resend：v4.0.1
portfolio/
├── public/ # 静的ファイル
│ ├── audio/ # 音声ファイル
│ └── images/ # 画像ファイル
│ ├── about/ # アバウトページ用画像
│ ├── contact/ # お問い合わせページ用画像
│ ├── gifs/ # アニメーション画像ファイル
│ ├── skills/ # スキル一覧ページ用画像
│ └── works/ # 制作実績ページ用画像
├── src/
│ ├── app/ # ルートディレクトリ（ルーティング管理）
│ │ ├── about/ # アバウトページ
│ │ ├── api/ # API Routes
│ │ │ └── send/ # メール送信用APIエンドポイント
│ │ ├── components/ # コンポーネント
│ │ │ ├── 3D/ # 3Dコンテンツ
│ │ │ ├── Animation/ # アニメーション
│ │ │ ├── AudioPlayer/ # サイトのBGM
│ │ │ ├── elements/ # 基本的なUI要素
│ │ │ ├── layouts/ # レイアウトコンポーネント
│ │ │ └── MouseStalker/ # マウスストーカー
│ │ ├── contact/ # お問い合わせページ
│ │ ├── features/ # componentsでは共通化が難しい、特定の機能やドメイン固有のコンポーネントを管理するディレクトリ
│ │ │ ├── about/ # アバウトページ機能
│ │ │ ├── AudioPlayer/ # サイトのBGM機能
│ │ │ ├── contact/ # お問い合わせページ機能
│ │ │ ├── skills/ # スキル一覧ページ機能
│ │ │ └── works/ # 制作実績ページ機能
│ │ ├── skills/ # スキル一覧ページ
│ │ ├── works/ # 制作実績ページ
│ │ ├── favicon.ico # ファビコン
│ │ ├── globals.css # アプリケーション全体のグローバルスタイルシート
│ │ ├── layout.tsx # アプリケーション全体のルートレイアウトコンポーネント
│ │ └── page.tsx # ルートページ（トップページ）
│ ├── components/ # 再利用可能なUIコンポーネント
│ │ └── ui/ # shadcn/ui コンポーネント
│ ├── lib/ # ライブラリ・ユーティリティ
│ └── utils/ # ユーティリティ関数
├── .cursorrules # Cursor Rules
├── .depcheckrc.json # 依存関係チェックツール depcheck の設定ファイル
├── .env # 環境変数の設定ファイル
├── .eslintrc.json # ESLint設定ファイル
├── .gitignore # GitHubの差分に含まないものを格納
├── .npmrc # pnpmの設定ファイル
├── .prettierrc.json # Prettierの設定ファイル
├── components.json # shadcn/ui設定ファイル
├── next-env.d.ts # Next.js の型定義補完ファイル（自動生成）
├── next.config.mjs # Next.js設定ファイル
├── package.json # プロジェクトの依存関係・スクリプト定義
├── pnpm-lock.yaml # pnpmの依存関係ロックファイル
├── postcss.config.mjs # PostCSS設定ファイル
├── README.md # プロジェクトの説明ドキュメント
└── tsconfig.json # TypeScript設定ファイル
私のポートフォリオサイトになります。サイトデザインを自ら考え、コーディングまで行いました。
Next.js + CSS Modules + Tailwind CSS + TypeScriptで制作し、デプロイはVercelで行いました。
トップページには、キューブ型の3Dコンテンツを配置。散らばるキューブは「創造性」「アイデア」「感情」「学び」といった記憶の断片を表しており、学習初期から今までの私の「プロセス」と「ストーリー」を視覚的に表現しています。
top-page.mp4
私のプロフィール、Web開発やAIへの関心、そしてモノづくりに対する想いやビジョンを紹介しています。
about-page.mp4
私が独学で培ったWeb開発に必要なスキルセットを一覧形式で紹介しています。
skills-page.mp4
私がこれまでに制作した作品を一覧で紹介しています。
作品カードをクリックすることで、作品の詳細を確認できます。
works-page.mp4
contact-page.mp4
このページでは、「React Hook Form」でパフォーマンスを最適化したフォームを実装しました。「Zod」による入力値検証（バリデーション）で堅牢性を高め、メール送信機能には「Resend」を利用しています。
-
背景アニメーション
- GSAPを使用したドットパターンの動的な背景アニメーションを実装
- パーティクルが浮遊し、視差効果を生み出すことで奥行きのある空間を演出
-
要素の出現アニメーション
- GSAPのTimelineを活用した複雑なアニメーションシーケンスの構築
- カードやテキストがstagger効果で順番に出現し、リズミカルな視覚体験を提供
- イージング関数を細かく調整し、自然で心地よい動きを追求
- View Transitions API
- ブラウザネイティブのView Transitions APIを採用し、JavaScriptライブラリに依存しない軽量な実装
- カード型UIからの詳細ページへの遷移時に、要素が流れるようにモーフィングする演出
- フェードイン・フェードアウトではなく、要素の連続性を保った遷移で没入感を向上
-
クリックフィードバック
- プロダクトが「反応」し「対話」しているような、レスポンシブなアニメーション設計
-
ホバーエフェクト
- ボタンやリンクのホバー時に、スケールアニメーションと色の変化で視覚的フィードバックを提供
- マウスの動きに追従するグラデーション効果で、動的な体験を演出
- BGMシステム
- Howler.jsを使用したオーディオ再生システムの構築
- ミュート/アンミュートが分かる直感的なUI、ページ遷移時のも途切れない自然な音楽体験を提供
- React Three Fiber
- トップページのキューブ型3Dコンテンツで、創造性をビジュアルに表現
- WebGLを活用した軽量で高性能な3Dレンダリング
- マウスの動きに反応するインタラクティブな3Dオブジェクトで、没入感のある体験を創出
-
マウスストーカー
- カーソルを追従するカスタムマウスストーカーで、ブランディングを強化
- ホバー対象によって変化するカーソルアニメーションで、操作性を向上
-
レスポンシブデザイン
- レスポンシブ対応。全デバイスで最適な表示を実現
- ハンバーガーメニューやタッチ操作に最適化されたUIコンポーネント
-
フォームバリデーション
- React Hook FormとZodによる堅牢な入力値検証システム
- リアルタイムエラー表示で、ユーザーが迷わない親切な設計
- Resend APIとの連携による確実なメール送信機能