Works

コーダーポートフォリオサイト

課題・背景

就職活動に向けて、自分の技術力を正直に伝えられるポートフォリオサイトを一から作る必要があった。既存テーマを使わず、自分が保守できる自作テーマで作ることにこだわった。「何を作れるか」だけでなく「どう考えて作ったか」を見せられる構成にすることが課題だった。

設計・実装のポイント

FLOCSSを設計思想として採用し、SCSSの構造を厳格に管理した。FV背景は和紙テクスチャをSVGフィルターで表現し、「CODE & CRAFT」の装飾はCSSだけで実装。ACFでWorks情報を構造化管理し、CPT UIでカスタム投稿タイプを定義。テーマのすべてのコードを自分で書き、保守性・拡張性を意識した設計にした。

振り返り・学び

企画から実装まですべてを一人でこなすことで、設計判断の積み重ねがどれだけ最終的な品質に影響するかを実感した。FLOCSS設計の恩恵でSCSSの見通しが良く、後半の機能追加もスムーズだった。次回はJavaScriptの構造化にも同レベルの設計意識を持ち込みたい。