Skip to content

kaijutale/portfolio-site

BranchesTags

Repository files navigation

kaishu｜AI Engineer

top-page.mp4

ポートフォリオサイトは以下からアクセスできます。

https://aoyamadev.com

目次

プロジェクト概要

私のポートフォリオサイトになります。サイトデザインを自ら考え、コーディングまで行いました。

視覚的に見ていて楽しいUIを目指し、Motion・GSAPによるアニメーションとReact Three Fiberで3Dコンテンツを実装。View Transitions API による遷移アニメーションで、ユーザーに適切な視線誘導をもたらし操作を助ける演出でUX向上を目指しました。

Next.js + Tailwind CSS + TypeScriptで開発し、Vercelにデプロイしました。

各ページ紹介

トップページ

トップページには、キューブ型の3Dコンテンツを配置。散らばるキューブは「創造性」「アイデア」「感情」「学び」といった記憶の断片を表しており、学習初期から今までの私の「プロセス」と「ストーリー」を視覚的に表現しています。

top-page.mp4

アバウトページ

私のプロフィールを紹介しています。趣味（Web開発、音楽/映像鑑賞、読書）、AIへの注力、自分の特徴や得意/苦手なこと、価値観、モノづくりに対する想いを綴っています。

about-page.mp4

スキルページ

私が独学で培ったWeb開発に必要なスキルセットを一覧形式で紹介しています。

skills-page.mp4

制作実績ページ

私がこれまでに制作した作品を一覧で紹介しています。
作品カードをクリックすることで、作品の詳細を確認できます。

works-page.mp4

お問い合わせページ

お問い合わせフォームは「React Hook Form」でパフォーマンスを最適化し、「Zod」による入力値検証（バリデーション）で堅牢性を高めています。メール送信機能には「Resend」を利用しています。

contact-page.mp4

機能紹介

アニメーション機能

  • 背景アニメーション

    • GSAPを使用したドットパターンの動的な背景アニメーションを実装
    • パーティクルが浮遊し、視差効果を生み出すことで奥行きのある空間を演出

  • 要素の出現アニメーション

    • GSAPのTimelineを活用した複雑なアニメーションシーケンスの構築
    • カードやテキストがstagger効果で順番に出現し、リズミカルな視覚体験を提供
    • イージング関数を細かく調整し、自然で心地よい動きを追求

ページ遷移機能

  • View Transitions API
    • ブラウザネイティブのView Transitions APIを採用し、JavaScriptライブラリに依存しない軽量な実装
    • カード型UIからの詳細ページへの遷移時に、要素が流れるようにモーフィングする演出
    • フェードイン・フェードアウトではなく、要素の連続性を保った遷移で没入感を向上

インタラクティブ機能

  • クリックフィードバック

    • プロダクトが「反応」し「対話」しているような、レスポンシブなアニメーション設計

  • ホバーエフェクト

    • ボタンやリンクのホバー時に、スケールアニメーションと色の変化で視覚的フィードバックを提供
    • マウスの動きに追従するグラデーション効果で、動的な体験を演出

オーディオ機能

  • BGMシステム
    • Howler.jsを使用したオーディオ再生システムの構築
    • ミュート/アンミュートが分かる直感的なUI、ページ遷移時も途切れない自然な音楽体験を提供

3Dビジュアル機能

  • React Three Fiber
    • トップページのキューブ型3Dコンテンツで、創造性をビジュアルに表現
    • WebGLを活用した軽量で高性能な3Dレンダリング
    • マウスの動きに反応するインタラクティブな3Dオブジェクトで、没入感のある体験を創出

その他の機能

  • マウスストーカー

    • カーソルを追従するカスタムマウスストーカーで、ブランディングを強化
    • ホバー対象によって変化するカーソルアニメーションで、操作性を向上

  • レスポンシブデザイン

    • レスポンシブ対応。全デバイスで最適な表示を実現
    • ハンバーガーメニューやタッチ操作に最適化されたUIコンポーネント

  • フォームバリデーション

    • React Hook FormとZodによる堅牢な入力値検証システム
    • リアルタイムエラー表示で、ユーザーが迷わない親切な設計
    • Resend APIとの連携による確実なメール送信機能

使用技術

nodeバージョン

フロント

スタイル・UI

アニメーション

3Dコンテンツ

オーディオ

フォーム・スキーマバリデーション

  • React Hook Form：v7.71.1（フォーム）
  • Zod：v4.3.5（スキーマバリデーション）

メール送信サービス

ホスティング

開発構成図

開発構成図はHTMLインフォグラフィックで表現しました。

ディレクトリ構造

portfolio/
├── public/                         # 静的ファイル
│   ├── audio/                      # BGMファイル
│   └── images/                     # 画像ファイル
│       ├── about/                  # アバウトページ用画像
│       ├── 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/              # アバウトページ機能
│   │   │   │   └── components/     # アバウト用コンポーネント
│   │   │   ├── contact/            # お問い合わせページ機能
│   │   │   │   ├── components/     # コンタクト用コンポーネント
│   │   │   │   └── hooks/          # コンタクト用カスタムフック
│   │   │   ├── skills/             # スキル一覧ページ機能
│   │   │   │   ├── components/     # スキル用コンポーネント
│   │   │   │   ├── data/           # スキルデータ
│   │   │   │   └── hooks/          # スキル用カスタムフック
│   │   │   └── works/              # 制作実績ページ機能
│   │   │       ├── components/     # 制作実績用コンポーネント
│   │   │       ├── data/           # 制作実績データ
│   │   │       └── hooks/          # 制作実績用カスタムフック
│   │   ├── skills/                 # スキル一覧ページ
│   │   │   └── [skill]/            # スキル詳細ページ（動的ルート）
│   │   ├── works/                  # 制作実績ページ
│   │   │   └── [id]/               # 制作実績詳細ページ（動的ルート）
│   │   ├── favicon.ico             # ファビコン
│   │   ├── globals.css             # アプリケーション全体のグローバルスタイルシート
│   │   ├── layout.tsx              # アプリケーション全体のルートレイアウトコンポーネント
│   │   └── page.tsx                # ルートページ（トップページ）
│   ├── components/                 # 再利用可能なUIコンポーネント
│   │   └── ui/                     # shadcn/ui コンポーネント
│   ├── lib/                        # ライブラリ・ユーティリティ
│   └── utils/                      # ユーティリティ関数
├── .claude/                        # Claude Code 設定（CLAUDE.md + settings.local.json）
├── .depcheckrc.json                # 依存関係チェックツール depcheckの設定ファイル
├── .docs/                          # プロジェクトドキュメント（conventions / plans / security / templates）
├── .eslintrc.json                  # ESLint設定ファイル
├── .github/                        # GitHub設定（dependabot.yml + workflows/ci.yml）
├── .gitignore                      # GitHubの差分に含まないものを格納
├── .mcp.json                       # MCP (Model Context Protocol) サーバー設定
├── .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設定ファイル

About

Portfolio Site.

aoyamadev.com

Topics

portfolio typescript animation nextjs motion gsap howlerjs 3d resend tailwindcss drei react-spring zod react-hook-form vercel view-transitions-api threefiber

Resources

Readme
Activity

Stars

4 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages