ポートフォリオ

GSAP HTML/CSS JavaScript Three.js WordPress

ポートフォリオサイトです。
既存のポートフォリオサイトをWordPress化し、作品の追加などの管理をしやすいようにしました。

WEB SITE

POINT: ・静的サイトからCMSへの完全移行（CPT UI × ACF）
既存の静的ポートフォリオサイトのデザインやレイアウトを一切崩すことなく、WordPressによる動的なコンテンツ管理システムへと移行しました。「Custom Post Type UI」で独自の投稿タイプを作成し、「Advanced Custom Fields (ACF)」を用いてフォントの制御や表示順、トップページでの表示可否など、多様な入力フィールドを構築。これにより、コードを直接編集することなく、管理画面からの直感的な操作だけで実績の追加・更新が可能な、保守性の高いサイトを実現しています。

・プラグインに依存しない、フォーム実装（Contact Form 7）
お問い合わせフォームには定番の「Contact Form 7」を導入しつつ、デフォルトで出力されるCSSや自動整形（pタグやbrタグの挿入）を functions.php のフックで完全に無効化。既存サイトに合わせたオリジナルデザインをSCSSで一から再現しています。また、エラーメッセージの表示制御や、送信成功時にJavaScriptを用いてシームレスにサンクスページへリダイレクトさせる処理など、ユーザー体験とデザイン性を損なわないようにカスタマイズを行っています。
ページ数: 4 ページ
使用技術: WordPress / GSAP / Three.js / JavaScript / HTML/CSS
URL: https://portfolio.mikanbako.jp/
Github: https://github.com/y-nagai0725/portfolio-wordpress
デザイン: Figmaページ（閲覧のみ可能です）