AOYAMA｜Creative Developer

使用技術：

担当：

概要

私のポートフォリオサイトになります。サイトデザインを自ら考え、コーディングまで行いました。

　このサイトはNext.js + CSS Modules + Tailwind CSS + TypeScriptで制作し、デプロイはVercelで行いました。

　トップページ：トップページには、キューブ型の3Dコンテンツを配置。散らばるキューブは「創造性」「アイデア」「感情」「これまでの学び」といった記憶の断片を表しており、学習初期から今までの私の「プロセス」や「ストーリー」を視覚的に表現しています。

　アバウトページ：私のプロフィール、Web開発やAIへの関心、そしてモノづくりに対する想いやビジョンを紹介しています。

　スキルページ：サイト制作やアプリ開発をする上で学び、活用してきたスキルセットを一覧でまとめています。

　制作実績ページ：これまでに制作した作品を一覧で紹介しています。

　お問い合わせページ：このページでは、「React Hook Form」でパフォーマンスを最適化したフォームを実装しました。「Zod」による入力値検証（バリデーション）で堅牢性を高め、メール送信機能には「Resend」を利用しています。

　ドットパターンで表現した背景のアニメーションや、カードの出現アニメーションは「GSAP」で実装しています。

　カード型UIには「View Transitions API」を利用し、スムーズに流れるような遷移アニメーションを実装しています。

　ホバーアニメーションでは、こちらの動作に対してプロダクトが反応を返してくれるような「対話」を意識したアニメーションを実装しています。

　オーディオライブラリ「Howler.js」を使用し、BGMを再生できるようにしています。

本サイトは転職活動用のポートフォリオとして制作しており、意図した環境で作品を見ていただくため、noindexとnofollowを設定し、検索エンジンのインデックスから除外しています。