個人ポートフォリオサイト
私の個人ポートフォリオサイトへようこそ！このプロジェクトは、フロントエンド開発者としてのスキルを紹介しています。React.js、Next.js、Tailwind CSS、CSS、Nodemailerなどの最新のWeb技術を使用して構築された、完全にレスポンシブなマルチページデザインを特徴としています。 さらに、next-intl を統合し、サイト全体を英語と日本語に対応するよう国際化しました。これにより、ユーザーは言語を切り替えて、英語・日本語どちらでも快適にサイトを閲覧できるようになりました。サイトのナビゲーションやコンテンツ、プロジェクトの詳細まですべてが、選択された言語で表示されます。 このポートフォリオはすべての画面サイズに対応しており、以下の解像度に最適化されています。 • 1920x1080 • 1600x900 • 1440x900 • 1366x768 • 1280x780 • 1024x768 • 820x1180 • 768x1024 • 430x932 • 393x932 • 375x667 ✨ 機能 • 📱 レスポンシブデザイン: モバイル、タブレット、デスクトップビューに完全対応。メディアクエリ対応。 • ⚛️ React.js & Next.js: 国際化(i18n)対応のダイナミックなUIを実現するため、Next.jsを使用して最適化されたパフォーマンスを提供。 • 🎡 スライダーカルーセル: react-slick とカスタム設定を使用した、スムーズで無限のカルーセル表示。 • ✉️ コンタクトフォーム: Nodemailerを使用したリアルタイムのバリデーションと送信を実装したコンタクトフォーム。 • 🔍 SEO最適化: SNSでのシェアや検索エンジンでの可視性を高めるためのメタタグ。 • 📜 ドロワーメニュー: 小さな画面でのナビゲーションを容易にするためのカスタム対角ドロワーメニュー。 • 🌐 ソーシャルリンク: GitHub、LinkedIn、Instagramなどのプロフィールへのリンク付きソーシャルアイコン。 • 🎨 スムーズなトランジション: ボタン、リンク、要素全体でスムーズなホバーエフェクトとアニメーション。 • 🔝 スクロールトップボタン: ページをスクロールした際にトップに戻るためのボタンが表示。 🛠️ 使用技術 • ⚛️ React.js: ユーザーインターフェイスの構築に使用。 • ⚡ Next.js: サーバーサイドレンダリング、ルーティング、および国際化(i18n)に対応。 • 💨 Tailwind CSS: ユーティリティファーストのスタイリングとレスポンシブデザイン。 • 🚀 Vercel: Next.jsとのシームレスな統合と簡単なデプロイ。 • 📧 Nodemailer: コンタクトフォームの送信処理を担当。 • 🛎️ React Toastify: CTAボタンでのトップページに戻る機能。 • 🎡 React Slick: ダイナミックでレスポンシブなスライダーコンポーネントと無限スライダー。 • ✍️ Googleフォント: Hindなどのカスタムフォントで、クリーンで一貫性のあるタイポグラフィを実現。 • 🖼️ 画像最適化: Next.js の Image コンポーネントを使用して、画像の読み込みを最適化。 📋 主なコンポーネント 🌍 国際化 (i18n) 対応 Webサイトは、next-intl を使用して英語と日本語の多言語対応になりました。 • 言語切替スイッチ: ユーザーが英語と日本語の間で簡単に切り替えできるスイッチを導入。 • 動的コンテンツ: ナビゲーション、セクションタイトル、ラベルを含むすべてのハードコードされた文字列を翻訳キーに置き換えました。 • 翻訳ファイル: en.json および ja.json 言語ファイルを使用して、簡単に拡張可能な翻訳システムを構築。 https://github.com/yutaasakura96/personal-portfolio-website-v1