ポートフォリオを刷新するにあたり、デザインはPOPIN design様に依頼させていただきました。和風かつスタイリッシュなものを、と依頼させていただいたものがこちらになります。

CSS 設計の方針

• 命名: Sass（SCSS）による効率的なCSS管理、コンポーネント・プロジェクト・ファンデーション構造
• レスポンシブ: 768px でブレーク（PC/SP の2段階）、モバイルファースト設計
• カラーシステム: theme.json による統一されたカラーパレット（9色のブランドカラー）
• ファイル構成: foundation/component/project に分割したSass構造
• 変数管理: CSS カスタムプロパティとSass変数の連携、Fluid Typography対応
• アニメーション: GSAP + ScrollTrigger による高品質なスクロール連動アニメーション

JavaScript で実装した機能

• ドロワーメニュー: ハンバーガーとドロワーの連動、ESCキー・オーバーレイクリック対応
• スムーススクロール: jQuery によるページ内アンカーリンク、ヘッダー高さ自動調整
• Swiper連携: 作品スライダー、レスポンシブ対応とループ制御
  
• アニメーション制御: GSAP による要素出現アニメーション（フェードイン・スライドイン・回転・文字アニメーション）
• 外部API連携: noteのRSSフィード取得・表示、文字数制限機能

Block Theme（FSE）対応

• theme.json: デザインシステムの中核、カラー・タイポグラフィ・レイアウトを統合管理
• カスタムブロックバリエーション: 作品用の専用ボタン・画像・テキストブロック
• ブロックバインディング: カスタムフィールドとブロックの自動連携
• カスタムフィールド: 作品情報（URL・ID・パスワード・制作期間・ツール・料金など）を体系的に管理

アニメーション システム

• ScrollTrigger: 要素の70%〜85%位置で発火する細かい制御
• 多彩なパターン: フェードイン・スライドイン・文字アニメーション・カラーボックス・回転
• パフォーマンス最適化: 条件付き読み込み、CDN活用

このコーディングで特に工夫した点

• 最新WordPress技術: Block Theme（FSE）の積極的採用
• パフォーマンス重視: 条件付きリソース読み込み、CDN活用
• ドロワーメニューを確実に閉じる: ページ内リンクの際にドロワーが閉じない問題をクリア
• 外部サービス連携: noteのRSSフィード自動取得・表示機能