ポートフォリオサイト
Next.jsTypeScriptTailwind CSSVercel
01.概要
個人のスキルと経歴を紹介するポートフォリオサイト。工場系エンジニアの経歴を活かした PLC/制御系デザインをアクセントとして取り入れた。
02.背景・動機
今後のキャリアに備えて自己のスキルの開示と棚卸を目的に作成。更新しやすさを重視し、継続的に育てていくことを意識した。
03.技術スタック
Next.js (App Router)
静的生成とファイルベースルーティングによる高パフォーマンスと開発体験の両立
TypeScript
型安全性による保守性の向上とエディタ補完による開発効率化
Tailwind CSS v4
CSS変数ベースのデザイントークン管理とユーティリティファーストによる高速スタイリング
Vercel
Next.js との親和性が高く、無料枠で十分な機能を提供
04.工夫した点・苦労した点
<Highlights />
- ポートフォリオとして必要な情報を絞って読み手にわかりやすいシンプルな構成を意識した
- PLC のラダー図や HMI 画面を想起させるデザイン要素を控えめに取り入れた
- CSS 変数 + Tailwind v4 の @theme inline で一元管理されたデザイントークン
<Challenges />
- 制御系デザイン要素の「やりすぎない」バランス調整
- ポートフォリオとして初めて自己の保有スキルを外部へ開示
05.成果・学び
- Tailwind CSS v4 の新しいテーマ設定方式の理解と実践
- デザインの統一感を保ちながら独自性を出すバランス感覚