このサイトについて — ポートフォリオ兼ブログを自作した理由と機能紹介
- #お知らせ
- #サイト紹介
- #ポートフォリオ
はじめまして、jugem です。Web アプリケーションと AI エージェント開発を軸に、Python / TypeScript を中心としてフロントエンドからバックエンド・データ基盤までを横断して開発しているソフトウェアエンジニアです。
このサイトの最初の記事として、「なぜこのサイトを作ったのか」と「どんなことができるサイトなのか」を紹介します。
なぜポートフォリオサイトを自作したのか
エンジニアの経歴やスキルを載せる場所なら、既製のプロフィールサービスや SNS でも事足ります。それでもこのサイトをフルスクラッチで作ったのには、大きく 3 つの理由があります。
1. サイトそのものを実績にするため
職務経歴書に「Next.js が書けます」「クリーンアーキテクチャで設計できます」と書くのは簡単ですが、文字だけでは伝わりにくいものです。このサイトは、私が普段どういう技術選定をして、どういう設計・実装をするのかを 動くかたちで示すサンプル でもあります。ソースコードの設計方針や実装の工夫は、今後このブログで少しずつ紹介していく予定です。
2. 経歴と発信を 1 か所に集約するため
これまで携わってきた案件の紹介、技術的な学びのアウトプット、趣味のデータ分析。これらを別々のサービスに散らばせるのではなく、自分がコントロールできる 1 つの場所にまとめたいと考えました。掲載する内容・見せ方・データの扱いまで、すべて自分の裁量で決められるのは自作ならではです。
3. 実験場（ラボ）として使うため
新しいライブラリや設計パターンを試すとき、業務のコードでいきなり試すわけにはいきません。このサイトは、気になった技術を実際に組み込んで運用まで回してみる 個人の実験場 です。リポジトリ名に「lab」と付けているのもそのためです。
各ページでできること
サイトの主なページと機能を紹介します。
トップページ — ポートフォリオ
トップページは自己紹介・経歴・スキル・注目プロジェクトを 1 ページに縦積みしたポートフォリオです。上から順に読めば、私がどんなエンジニアかをひととおり把握できる構成にしています。より詳しいプロフィールは /me にまとめています。
実績一覧（/projects）
実績一覧では、これまで携わってきた案件・プロダクトを 1 件ずつ詳細ページ付きで紹介しています。担当した役割・期間・技術スタック・取り組んだ課題を、案件ごとに整理して読めるようにしました。HR 系 SaaS 向けの AI エージェント開発から、勤怠システムの内製化、データ分析基盤の構築まで、幅広い領域の実績を掲載しています。
ブログ（/blog）
まさに今読んでいただいているこのブログです。記事は MDX で管理しており、技術的な学び・開発の記録・サイト自体の改善記録などを発信していきます。記事にはタグを付けているので、興味のあるテーマから辿ることもできます。
ショット統計（/stats）
少し変わり種のページとして、ショット統計があります。ゴルフ練習で TrackMan により計測したショットデータを蓄積し、クラブ別の平均値テーブルとキャリー距離の分布図として公開しているページです。直近 1 年のフルスイングを対象に、外れ値を除外した上で集計しています。
「趣味の練習データを、自分の技術でどこまで活用できるか」という実験を兼ねたページで、集計の裏側では Python の分析処理が動いています。データが溜まってきたら、分析の切り口もこのブログで紹介したいと思っています。
そのほかの機能
- ライト / ダークテーマの切り替え — ヘッダーから切り替えられます。OS の設定にも追従し、ページ表示時のちらつき（FOUC）が出ないように実装しています。
- PWA 対応 — スマートフォンやデスクトップにアプリとしてインストールできます。
- 連絡先（/contact） — お仕事のご相談・お問い合わせの窓口は Contact ページにまとめています。
技術的なこだわり（さわりだけ）
このサイトの技術スタックと設計方針を簡単に挙げておきます。
- Next.js（App Router）+ TypeScript — Server Components を基本にした SSR 優先の構成で、React Compiler も有効化しています。
- oRPC + クリーンアーキテクチャ — サーバとの通信は型安全な oRPC に一本化し、サーバ内部は domain / application / infrastructure / presentation の厳密な 4 層で設計しています。
- Prisma + PostgreSQL — ショットデータなどの永続化を担います。日時は UTC で保存し、表示の境界で JST に変換する規約で統一しています。
- HeroUI + Tailwind CSS — UI はセマンティックなデザイントークンに一本化し、テーマ切り替えに追従させています。
- Python / FastAPI — ショット統計の集計・分析はクリーンアーキテクチャで設計した専用の分析サービスが担います。
- Bun + Biome — ランタイム・ツールチェーンはモダンな構成に寄せています。
それぞれの設計判断には理由があるので、深掘りは今後の記事で 1 テーマずつ書いていく予定です。
おわりに
このサイトは「完成品」ではなく、実績・発信・実験を積み重ねていく場所として育てていくつもりです。まずは実績ページとショット統計を眺めていただき、気になることがあれば Contact からお気軽にご連絡ください。
今後の記事もどうぞよろしくお願いします。