Overview
日々の開発・発信・経歴を一つの場所に集め、技術を軸に相互に辿れるようにしたポートフォリオ。完成させて終わりではなく、開発を続けることでサイト自体が育っていく。
Architecture
- Static-first：常時稼働のサーバーやデータベースを持たず、ビルド時にすべて生成する
- Git を唯一の正とし、コンテンツは Markdown / YAML で管理する
- Engineering Graph：各コンテンツの Tech をビルド時に逆引きし、関連を生成する
- GitHub Actions で公開リポジトリの活動を取得し、Activity として反映する
Tech
Development Timeline51
HTML 編の記事で、CSS を書かなくても HTML が表示される理由を正しく説明
「HTML ってなんで描画されるの？」HTML 編で、「DOM だけでは画面に何も描かれない」としていた不正確な説明を直した。CSS を書かなくても表示されるのはブラウザ標準のスタイルシートがあるからで、JavaScript は描画に必須ではないことが分かるようにした。
HTML がブラウザで DOM になるまでを追う記事を公開
ブラウザが HTML を受け取ってから DOM という木構造を組み立てるまでを、スクリーンショットと図で追う記事（3回シリーズの HTML 編）を Zenn に公開した。あわせて Tech に HTML を加え、HTML のページから記事をたどれるようにした。
Notes の惑星の模様が回って見えるようにし、Works の輪を見えやすくする
Home の Notes の惑星に、球に沿って流れる文章の行を描き、模様が見えて自転していることが分かるようにした。あわせて、Works の惑星の輪が途切れずに見えるようにした。
ねこエージェントの紹介記事を追加し、Works にサムネイルを付ける
Claude Code のサブエージェントを猫に見立てて見守るツール「ねこエージェント」の紹介記事を Zenn に公開し、Works の一覧に各作品のサムネイル画像を表示するようにした。
Works に my-claude-tools を追加
Claude Code の自作 Mod とツールをまとめた my-claude-tools を Works に加え、エージェントの動きを猫の部屋として描く「ねこ部屋」の機能と構成を紹介するようにした。
Tech 一覧に添える作品・記事名の並びを、ビルドごとに変わらないようにする
Tech 一覧の各行に添える関連コンテンツ名（作品名・記事タイトル・所属）は、コンテンツの読み込み順のままで、ビルドごとに並びが変わりうる状態だった。Tech 詳細と同じ順（作品はタイトル順、記事・職歴は新しい順）に並べ直すようにした。
PR の本文が署名だけのとき、署名が Activity の要約に出る問題を修正
PR の本文に要約がなく署名（Co-Authored-By: … など）だけがあると、その署名が Activity の要約としてサイトに出ていた。署名だけの段落は要約にせず、PR のタイトルを使うようにした。
同じ見た目のリンクを部品にまとめ、画面ごとの細かな違いをなくす
同じ見た目のリンク（一覧の末尾の「すべて見る」、丸い枠のリンク、外部リンク）を各画面で手書きしていたため、部品にまとめた。見た目の揃え漏れや、外部リンクの rel="noopener" の付け忘れが起きにくくなる。
複数の画面で使う URL・並び順・表示条件を1か所にまとめる
作品・Tech へのリンクの URL、記事・職歴の並び順、「実績のある Tech」の判定が画面ごとに別々に書かれていたため、lib にまとめた。どの画面でも同じものが同じ順に並び、Tech タグが詳細ページのない Tech へリンクするといった食い違いが起きなくなる。
惑星の並びや演出の計算の定義を1か所にまとめ、食い違いを防ぐ
Home の惑星の公転順や演出の計算が複数のファイルに別々に書かれていたため、1か所にまとめた。片方だけ変えたときに、セクションを閉じる演出の行き先と惑星の位置がずれるといった食い違いが起きなくなる。
時刻付きの公開日で、記事の日付が1日ずれることがある問題を修正
記事の公開日を Zenn の書式どおり時刻付き（"2026-01-01 08:00"）で書くと、ビルドする環境のタイムゾーンによって Notes の日付が前日になることがあった。公開日を日本時間の日付として読むようにし、どの環境でも同じ日付が出るようにした。
入場演出を飛ばしたあと、次のクリックが効かないことがある問題を修正
Home の入場演出を右クリックやスワイプで飛ばすと、その後の最初のクリックが効かず、ページを移動しても残っていた。飛ばしたクリックだけを打ち消すようにした。あわせて、JavaScript が無効なときも惑星の更新の印が出るようにした。
キーボードで「もっと見る」を押すと続きを読めなくなる問題を修正
Activity 一覧で「もっと見る」をキーボードで押すと、ボタンが消えてフォーカスの位置が失われ、展開した Activity を読み飛ばしていた。展開した最初の日付へフォーカスを移すようにした。
設計書がなくてもコードから仕様をたどれるようにルールを整える
非公開の設計書の置き場所とルールの記述を揃え、設計書が手元になくても、コードのコメント・テスト・ルールから仕様と判断の理由をたどれるようにする方針を明文化した。
初回の入場演出が終わる瞬間に背景が跳ぶ問題を修正
初めてサイトを開いたとき、入場の演出が終わる瞬間に背景の星が一斉にずれて見える問題を直した。演出の最後まで動きが途切れずにつながるようになった。
testglass の紹介記事を公開
AI が書いた大量のテストを人間がレビューしやすくするために作った testglass について、Zenn に記事を書いた。テストを「名前・手順・期待結果・判定」の仕様書として並べる仕組みと、LLM を使わずに構文木から組み立てる設計の理由を紹介している。
記事のルールを分け、下書きを作業ブランチで書くようにする
Zenn の記事の書き方を独立したルールにまとめ、下書き用のディレクトリをやめて作業ブランチの上で直接書く運用にした。Zenn と同じ表示で確かめてから公開できるようになった。
ポートフォリオ記事のタイトルを変更
ポートフォリオ記事のタイトルを変更
Notes に Zenn の記事を並べる
記事を Zenn で公開するようにしたため、Notes の一覧・作品・Tech のページから Zenn の記事へ直接たどれるようにした。以前の記事ページの URL は、リンクが切れないよう Zenn の記事へ転送する。
既存の2本の記事を Zenn で公開
技術記事を Zenn に集約するため、ポートフォリオに書いた2本の記事を Zenn で公開した。あわせて、ポートフォリオの記事は他のポートフォリオと違う仕組みが伝わるよう、実装に沿った説明を書き足した。
Zenn の技術記事へたどれるようにする
技術記事を Zenn に書くことにしたため、About と Notes から Zenn のプロフィールへたどれるようにした。あわせて、npm に公開した testglass の状態を「運用中」に更新した。
検索結果でこのサイトを見つけやすくする
検索エンジンがサイト内のページを辿りやすくし、「Tora29」が GitHub で活動する Web Engineer であることを伝えるようにした。同じ名前の別サイトと区別しやすくなる。
入口の惑星が暗く見えにくい問題を修正
入口の宇宙のシーンで、惑星の表面の粒子と色味を明るくし、軌道の奥にある惑星や球の影の側も見えやすくした。
Works に home-hub を追加
SvelteKit と Cloudflare（Pages・D1）で作っている Web アプリ home-hub を Works に追加し、構成やテストの工夫を読めるようにした。
Works に testglass を追加
テストコードを静的解析してレビュー用のテスト仕様書を生成するツール「testglass」を Works に追加し、その開発の経過も Activity に載るようにした。
オープニングを初回から短い1種類にまとめる
初めて訪れた人にも短いオープニングを見せるようにし、操作できるまでの時間を3.3秒から2.3秒に縮めた。
スマートフォンでセクションを開閉するときの演出のずれを改善
スマートフォンでセクションを開く・閉じるとき、粒子の演出だけが先に進み、ページの切り替えが遅れて見える問題を改善した。
スマートフォンでオープニングの動きがカクつく問題を改善
スマートフォンで Home を開いたときのオープニング（ビッグバンから惑星が集まるまで）の描画を軽くし、コマ落ちせず滑らかに動くようにした。
オープニングで惑星が最後に急に縮む問題を修正
オープニングで、散らばった粒子が最後に一気に縮んで惑星になっていたのを、渦を巻きながら内側から少しずつ集まって形になるようにした。
記事などへ直接入ってから Home に戻るとイントロが再生される問題を修正
記事や各セクションのURLから直接サイトに入り、閉じるボタンで Home に戻ったときに、Welcome のイントロが再生されないようにした。サイト内の移動では演出に待たされずに Home を見られる。
記事「ハーネスは AI のための説明書でもある」を追加
AI 駆動開発で品質を保つための「ハーネスエンジニアリング」について、書く前に伝えるハーネスと書いたあとに確かめるハーネスの考え方と、このサイトでの実例をまとめた記事を公開した。
スマートフォンでトップページの描画を軽くした
スマートフォンでトップページの宇宙のシーンを軽くし、ラベルの文字を読みやすい大きさにした。見た目をほとんど変えずに、描画の負荷と電池の消費を抑えている。
アクセシビリティを WCAG 2.1 AA に対応
小さな補足の文字まで読みやすいコントラストに上げ、トップページの動き続ける背景を止められるようにした。キーボードだけでも、すべての入口と操作に届く。
記事「Static-first で作るポートフォリオ」を推敲
記事「Static-first で作るポートフォリオ」の表記と箇条書きを整え、Static-first にした理由をより読み取りやすくした。
共有したときの画像とファビコンを追加
SNS や Slack でページを共有したときに、宇宙のシーンの画像付きで表示されるようにした。ブラウザのタブにも、惑星をかたどったアイコンが出る。
セクションを開いた位置に、そのセクションの色の光を残す
トップページからセクションを開いたあと、ページの背景の、開いた惑星（名前・最新の開発活動）の位置に、そのセクションの色の光がうっすら残るようにした。どこから開いたかが伝わり、閉じたときに縮んで戻る先とも一致する。
表示名とセクションの説明を見直し
サイトの表示名をハンドルネーム（Tora29）に変え、各セクションの見出しの下の説明を、短く言い切る形にそろえた。
イントロとセクションを開く・閉じる演出を追加
トップページを開くと、暗闇に浮かぶ「WELCOME」からビッグバンで宇宙が広がるイントロを再生するようにした。惑星を押すと、その惑星から粒子が広がってページが現れ、閉じると惑星へ縮んで戻る。
トップページに宇宙のシーンを追加
トップページを、名前を中心に4つの惑星が公転する宇宙のシーンにした。惑星はセクションごとに模様を持ち、衛星の数はそのセクションの件数に連動するため、コンテンツが増えるほどシーンがにぎやかになる。
トップページに各セクションへの入口を追加
トップページの中央の名前と、その周りの4つの惑星（Career / Works / Tech / Notes）から、各セクションへ移動できるようにした。左下に職種と GitHub、右下に最新の開発活動を表示し、開かなくても最近の動きが分かる。
記事一覧と記事詳細のページを追加
技術記事を一覧・詳細で読めるようにし、記事から関連する作品や技術へ移動できるようにした。最初の記事として、このポートフォリオの設計について書いた。
開発活動の一覧ページを追加
GitHub 上の公開された開発活動を日付ごとに一覧でき、作品ごとに絞り込めるようにした。絞り込んだ状態は URL（?work=）で共有でき、作品のページから、その作品の開発の過程へ直接移動できる。
GitHub の PR から Activity を生成する処理を追加
作品に紐付けた GitHub Repository のマージ済み PR と Release から、閲覧者が読める開発活動（Activity）を自動で生成できるようにした。依存関係の更新や CI の調整などの雑務は除外し、機能の追加・修正・ドキュメントの変更だけを載せる。
自己紹介のページを追加
職種・現在の役割・経験年数、得意な技術、大切にしていること、目指す方向を1ページで読めるようにした。最新の開発活動も3件まで表示し、Activity の一覧へ続けて移動できる。
職歴と資格のページを追加
これまでの職歴を新しい順のタイムラインで読めるようにし、各職歴で使った技術から Tech のページへ移動できるようにした。IT 系の資格と、それ以外の資格も載せている。
作品一覧と作品詳細のページを追加
作ったものを一覧でき、各作品のページで概要・構成・使った技術を読めるようにした。Tech のページから作品へ、作品から Tech へと行き来でき、戻るボタンは直前に見ていたページへ戻る。
ページを開くたびに発生するリダイレクトを解消
ページの URL を末尾スラッシュなしの形に揃え、ページを開くたびに発生していた転送（301）をなくした。ページの表示が速くなり、共有される URL も一つに揃う。
Tech 一覧と Tech 詳細のページを追加
使ってきた技術をジャンルごとに実績の多い順で一覧でき、各技術のページでは、その技術を使った作品・記事・職歴・開発活動を確認できるようにした。熟練度を自己申告ではなく、実績から辿れる。
Tech ごとの実績と関連 Tech をビルド時に集計
作品・記事・職歴・Activity に付けた Tech をビルド時に逆引きし、Tech ごとの実績件数（下位の技術を含む）と、よく一緒に使われる関連 Tech を求められるようにした。技術の熟練度を自己申告ではなく実績で示すための土台になる。
作品・記事・職歴・Tech のデータ構造を定義
作品・記事・職歴・Activity が参照する Tech を一か所で定義し、未定義の Tech や存在しない作品への参照をビルド時にエラーにするようにした。これにより、Tech を軸にしたコンテンツ同士のつながりが表記ゆれなく保たれる。
開発ルールとプロジェクトの概要を整備
ポートフォリオの実装を始めるにあたり、ディレクトリ構成・コンテンツの書き方・スタイル・コンポーネント・Git運用・テストの開発ルールと、プロジェクトの概要を整備した。
Related Notes
- AI のために書いたハーネスが、人間の説明書にもなっていた話
この作品について書いた記事
- Claude Code のエージェントを猫にして、ターミナルで見守れるようにしてみた
共通の技術：TypeScript
- AI が書いた大量のテストを人間がレビューするために、テスト仕様書を生成するツールを作ってみた
共通の技術：TypeScript