React + Tailwind CSSで作るモダンなポートフォリオサイト
はじめに
こんにちは！今回は、React + Tailwind CSSを使用して、モダンなポートフォリオサイトを作成した経験を共有したいと思います。このプロジェクトでは、アニメーションやレスポンシブデザインを取り入れながら、使いやすく見やすいUIを実現しています。
技術スタック
- React 19.0.0
- TypeScript 4.4.2
- Tailwind CSS 3.4.17
- React Text Transition 3.1.0
- Lucide React 0.474.0
プロジェクトの特徴
- モダンなUI/UXデザイン
- スムーズなスクロールアニメーション
- レスポンシブ対応
- タイプセーフな実装（TypeScript）
- コンポーネントベースのアーキテクチャ
プロジェクト構造
src/
├── components/
│ ├── layout/
│ │ ├── Header.tsx
│ │ ├── Footer.tsx
│ │ └── Navigation.tsx
│ └── sections/
│ ├── About.tsx
│ ├── Skills.tsx
│ ├── Experience.tsx
│ └── Portfolio.tsx
├── types/
│ └── index.ts
└── App.tsx
主要コンポーネントの解説
1. ヘッダーセクション
ヘッダーセクションでは、Typewriterライクなテキストアニメーションを実装しています。react-text-transitionを使用することで、スムーズな文字の切り替えを実現しています。
const TEXTS = ["Frontend Developer", "Backend Developer", "Full Stack Engineer"];
const [index, setIndex] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => {
setIndex((prev) => (prev + 1) % TEXTS.length);
}, 3000);
return () => clearInterval(intervalId);
}, []);
2. スキルセクション
スキルセクションでは、インタラクティブなスキルカードを実装しています。カードをクリックすると、アニメーション付きでスキルレベルが表示されます。
const SkillCategory: React.FC<SkillCategoryProps> = ({
title,
icon: Icon,
skills,
isActive,
onClick
}) => {
return (
<div
onClick={onClick}
className={`cursor-pointer p-6 rounded-xl transition-all duration-300 ${
isActive
? 'bg-lime-100 shadow-xl scale-105'
: 'bg-white hover:bg-lime-50'
}`}
>
// ...スキル表示のコード
</div>
);
};
3. 経験セクション
経験セクションでは、SVGを使用したインタラクティブなタイムラインを実装しています。
const generatePath = () => {
const startX = 80;
const endX = 280;
const startY = 120;
const segmentHeight = 100;
let path = '';
timeline.forEach((_, index) => {
const y = startY + (index * segmentHeight);
if (index < timeline.length - 1) {
const nextY = startY + ((index + 1) * segmentHeight);
if (index % 2 === 0) {
path += `${index === 0 ? 'M' : 'L'} ${startX} ${y} L ${endX} ${nextY}`;
} else {
path += `L ${startX} ${nextY}`;
}
}
});
return path;
};
Tailwind CSSの活用
このプロジェクトでは、Tailwind CSSを最大限に活用しています。以下に主要な使用例を示します：
1. レスポンシブデザイン
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
2. アニメーション
<div className="transition-all duration-300 hover:scale-105">
3. カスタムカラーとグラデーション
<div className="bg-gradient-to-b from-gray-50 to-white">
パフォーマンス最適化
- コンポーネントの適切な分割
- メモ化による不要な再レンダリングの防止
- 画像の最適化
- CSS-in-JSの回避によるバンドルサイズの削減
実装時の工夫点
1. スクロールトラッキング
ナビゲーションの現在位置を追跡するために、Intersection Observerを使用しています：
React.useEffect(() => {
const handleScroll = () => {
const sections = ['header', 'about', 'skills', 'experience', 'portfolio'];
const current = sections.find(section => {
const element = document.getElementById(section);
if (element) {
const rect = element.getBoundingClientRect();
return rect.top <= 100 && rect.bottom >= 100;
}
return false;
});
if (current) {
setActiveSection(current);
}
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
2. アニメーションの最適化
パフォーマンスを考慮し、CSSアニメーションを優先的に使用：
<div className="h-full bg-lime-500 rounded-full transition-all duration-1000 ease-out">
まとめ
React + Tailwind CSSの組み合わせは、モダンなWebサイトを構築する上で非常に強力なツールセットとなります。特に以下の点が有効でした：
- Tailwind CSSによる迅速なスタイリング
- Reactのコンポーネントベース設計による保守性の向上
- TypeScriptによる型安全性の確保
おわりに
このプロジェクトのソースコードはGitHubで公開しています。ぜひ参考にしていただければと思います。また、質問やフィードバックがありましたら、コメントでお願いします！