ポートフォリオ

ポートフォリオサイト

WEBサイトへ
Pet Commons Desktop

開発の流れ

設計

目的(実績・強みを素早く伝える)を軸に、情報設計とナビゲーション動線を整理

開発・実装

Next.js / React / TypeScript / Tailwind CSS を用いた実装

公開

Vercel でプレビュー & 本番デプロイ

ターゲット

自身の活動やスキルを伝えるポートフォリオとして設計。クライアントに直感的に内容が伝わるUIを重視。

課題

情報量が多くなると閲覧者が迷子になりやすい。カテゴリー分けと視覚的な導線が必要。

目的

制作物や経歴を整理して見せることで、自分のスキルセットを効果的にアピールする。
レスポンシブ対応で、PC/スマホどちらでも快適に閲覧できるよう設計。

使用言語 / 技術

Next.js / React / TypeScript / Tailwind CSS / Vercel

デザイン・実装上の工夫

スクロール時のアニメーションを実装。
再利用可能なUI片をコンポーネント化し、スケールしても保守しやすい構造に。