このポートフォリオサイトは、見ての通り桜をテーマに作成しています。タイトルなどの文字の動きは桜のはなびらが落ちる動きを連想させるような、上から下へ動くアニメーションをGSAPで実装しました。
毎年趣味で撮影している桜のギャラリーはおまけです。飽き性で仕事以外物事があまり続かない自分が唯一毎年欠かさず続けていることが桜の撮影だったので、桜をテーマに決めました。
構成は下記で作成しています。
フレームワークはAstroを使用しましたが、ビルドして静的作成したものを手動でWordPressへ組み込んでいます。
最近流行りのAstroを使ったヘッドレス化にしようか迷いましたが、個人的にPHPであれこれカスタマイズすることが好きなこともあり、作り自体は以前と同じWordPressをオリジナルテーマで普通にカスタマイズして作成しました。
パフォーマンスを落とさないように、アニメーションは最小限にしています。
WordPressのローカル環境はwp-envとDockerで構築しました。動的環境は今までVirtualboxを仮想環境にvagrantで起動していましたが、 Apple SiliconのMacBookに買い替えた影響でVirtualboxを使えなくなったので、vagrantを使うことが面倒になりDockerに切り替えました。

・デザインについて
普段仕事ではデザインはやっていませんが、ポートフォリオなので一からFigmaでデザインを引いて制作しました。
暖かい印象を与える桜のようなベビーピンクのふわっとした色合いに、メリハリをつけるために黒色とグレーを組み合わせています。フォントはNoto Sans、Poppinsを使用。
トップページは、日の丸構図を意識して、Cの文字をセンタリングしてデザインしました。ハンバーガーメニューに視線誘導するために、右上から桜が落ちるアニメーションをCSSで入れています。
ヘッダーメニューはあえて今流行りのレスポンシブファーストなデザインにしました。
プロフィールは、GSAPで背景がスクロールで左からスライドインする動きを入れて、左側の写真を固定にして右側のみスクロールするようにしています。
左下のトップへ戻るボタンとなっているハリネズミの影は、GSAPで歩いている動きを入れています。
GSAPを利用してお遊び的な動きを入れたかったので、トップへ戻るボタンをこのように実装しました。昔ボカロのとある曲で動画画面下に固定でずっと猫が歩いているMVがあって可愛かったので、そこから着想を得ました。
Worksの画像や、Contactの背景画像は、パララックスの動きを入れています。
Blogのページだけ他ページと差別化を図るため水色も使用しています。ブログ機能自体アプローチにも繋がるので、カスタマイズで実装しています。
このAboutページは自分にとってウェブに触れる大きなきっかけとなったタイ・バンコクの風景を入れています。生活していた時に馴染みのある場所の写真にしました。
Galleryページはサイトのテーマに説得力をつけるためにおまけで入れました。Muuriライブラリを使用してカテゴリーごとにタブ遷移で切り替えできるようになっています。
また、全体的に慣性スクロールのlenisを使用しています。他のアニメーションライブラリとバッティングしなかったのでこちらを選定しました。