ABOUT
このサイトについて
自己紹介・実績・執筆記事・個人開発のまとめとして制作したポートフォリオサイトです。
目的
ポートフォリオはWantedlyなどのサービスに任せていましたが、今回開発したいのも相まって、ポートフォリオサイトを作成してみることにしました。
また、サイト自体を個人開発の作例と位置付け、 「なぜその技術を選んだか」を透明にしておくことで、 将来自分が振り返る時にも他の人が参考にする時にも読める形を意識しています。
使用している技術
このサイトそのものが個人開発の作例なので、選定理由を添えて記録しています。
フレームワーク
Nuxt 4
Vue ベースで SSR/SSG/SPA を柔軟に切り替えでき、ファイルベースルーティングやモジュール生態系が強力なため採用
Vue 3
Composition API による記述の見通しやコンポーネント指向の相性が良く、Nuxt との組み合わせで自然に使える
言語
TypeScript
型安全性を担保することで、リファクタや将来的な拡張時の不安を減らす
スタイリング
Tailwind CSS
ユーティリティファーストで一貫したデザインを高速に組めるうえ、命名疲れが起きにくい
ライブラリ
typed.js
ヒーローセクションのタイプライター演出。フレームワーク非依存で軽量
@nuxt/image
画像の WebP 自動変換・遅延読み込み・レスポンシブ配信
@nuxt/content
Markdown ベースで記事コンテンツを扱えるようにするため
開発ツール・CI
ESLint + Prettier
コードスタイルの統一と静的解析。CI で自動チェック
Vitest + @nuxt/test-utils
Vite ネイティブの高速テストランナー。Nuxt 環境で単体テストを回せる
GitHub Actions
PR 作成・main への push で Lint / Format / 型 / テスト / ビルドを自動検証