Aoyama｜Creative Web Developer
使用技術：
- Next.js
- TypeScript
- Tailwind CSS
- shadcn/ui
- React Three Fiber
- GSAP
- Motion
- Howler.js
- React Hook Form
- Zod
- Vercel
担当：
- Design
- Coding
概要
私のポートフォリオサイトになります。サイトデザインを自ら考え、コーディングまで行いました。
このサイトはNext.js + CSS Modules + Tailwind CSS + TypeScriptで制作し、デプロイはVercelで行いました。
トップページの3Dコンテンツは「React Tree Fiber」で実装しています。
ドットパターンで表現した背景のアニメーションや、カードの出現アニメーションは「GSAP」で実装しています。
カード型UIには「View Transitions API」を利用し、スムーズに流れるような遷移アニメーションを実装しています。
ホバーアニメーションでは、こちらの動作に対してプロダクトが反応を返してくれるような「対話」を意識したアニメーションを実装しています。
オーディオライブラリ「Howler.js」を使用し、BGMを再生できるようにしています。
お問い合わせフォームは、「React Hook Form」でフォームのパフォーマンス化を行い、「Zod」で入力値の検証（バリデーション）を行うことで堅牢なフォームを実装しました。また、メール送信機能につきましては「Resend」を利用して実装しました。
本サイトは転職活動用のポートフォリオとして制作しており、意図した環境で作品を見ていただくため、noindexとnofollowを設定し、検索エンジンのインデックスから除外しています。