01
概要
本サイトは、Webコーダーとしての技術力を伝えるために制作したポートフォリオサイトです。レスポンシブ対応を前提とし、実案件を想定した構成・実装を意識しています。
02
デザインコンセプト
北欧テイストを意識し、落ち着いた配色と丸みのあるフォントを採用しました。情報量が多くなりすぎないよう、セクションごとに余白を十分に確保しています。
03
実装ポイント
クラス名は役割が分かるよう命名し、スタイルの再利用を意識しました。レイアウトはFlexboxを中心に構築し、スマートフォンでは縦並びになるよう調整しています。レスポンシブ対応については、767pxをブレイクポイントとしています。
04
JavaScript実装部分
- ハンバーガーメニュー
- スムーススクロール
- WORKSとSKILL部分のスクロールアニメーション
ユーザーの操作性の向上とデザインとの調和を意識し、スムーススクロールやアニメーションの実装を行いました。
05
使用技術
HTML / CSS / JavaScript / Figma