このサイトについて
このポートフォリオサイトは、私のスキルと経験を紹介するために作成しました。
モダンなWeb技術を活用し、パフォーマンスとユーザー体験を重視した設計になっています。
AI駆動開発をスムーズに行うためcursor/rules/*.mdcを自動生成、更新する仕組みを実装しています。
使用技術
Next.js & React
モダンなUIとシームレスなユーザー体験を実現するフレームワーク
TypeScript
型安全性を確保し、開発効率と保守性を向上
Tailwind CSS & Shadcn UI
美しく一貫性のあるデザインシステムを構築
アトミックデザイン
再利用可能で保守性の高いコンポーネント設計
テスト実装
Jest & React Testing Libraryによる堅牢なテスト
CI/CD対応
効率的な開発フローと安定したデプロイを実現
実装詳細
- •App Router: Next.jsの最新機能を活用したルーティングシステム
- •サーバーコンポーネント: パフォーマンスを最適化するためのReactサーバーコンポーネント
- •レスポンシブデザイン: あらゆるデバイスで最適な表示を実現
- •アニメーション: Framer Motionを使用した滑らかなアニメーション
- •アクセシビリティ: Radix UIの機能とprefers-reduced-motionに対応した高いアクセシビリティ
実装ポイント
Next.js App Router
最新のNext.js App Routerを使用して、効率的なルーティングとレンダリングを実現しています。
Shadcn UI + Tailwind CSS
美しく機能的なUIコンポーネントを、Tailwind CSSによるカスタマイズ性の高いスタイリングで実装しています。
ダークモード対応
ユーザー設定に応じたダークモード/ライトモードの切り替えに対応しています。
アトミックデザインの厳格な適用
UIコンポーネントをatoms、molecules、organisms、templates、pagesの5階層に分類し、再利用性と保守性を高めています。
高度な実装ポイント
.cursorrules自動生成システム
Gitのpre-commitフックを活用して.cursorrulesを自動生成・更新するシステムを実装し、AIアシスタントとの効率的な協業を実現しています。
アクセシビリティ対応のアニメーション
prefers-reduced-motionメディアクエリに対応したアニメーションを実装し、モーションに敏感なユーザーに配慮しています。
このポートフォリオサイトのソースコードはGitHubで公開しています。
コーディングガイドラインに基づいた一貫性のある実装を確認できます。