ポートフォリオサイト

このプロジェクトは、私のスキルと経験を紹介するために作成した個人ポートフォリオサイトです。Astro、Tailwind CSS、Framer Motionを使用して構築され、ダークモードを実装しています。

技術スタック

• フレームワーク: Astro
• スタイリング: Tailwind CSS + Geist UI
• アニメーション: Framer Motion
• 開発ツール: TypeScript, pnpm, biome

主な機能

• レスポンシブデザイン
• ダークモード/ライトモード切替
• コンテンツコレクションを使用したコンテンツ管理
• アニメーションによる視覚的な魅力の向上

開発プロセス

このサイトは、モダンなウェブ開発技術を活用して構築されました。Astroフレームワークを選択したのは、そのパフォーマンスの高さと柔軟性が理由です。Tailwind CSSとGeist UIを組み合わせることで、一貫性のあるデザインシステムを実現しました。

Framer Motionを使用して、ページ遷移やUI要素にアニメーションを追加し、ユーザー体験を向上させています。また、Astroのコンテンツコレクション機能を活用して、プロジェクト情報や自己紹介などのコンテンツを効率的に管理しています。

学んだこと

このプロジェクトを通じて、Astroフレームワークの使用方法や、コンテンツコレクションを活用したコンテンツ管理の方法を学びました。また、Tailwind CSSとGeist UIを組み合わせたデザインシステムの構築や、Framer Motionを使用したアニメーションの実装についても理解を深めることができました。