新しいPCに移行したら、ポートフォリオのソースがどこにもなかった。正確にはGitHubの奥に眠っていたんだけど、開いてみたら数年前の自分が書いた真っ黒なサイトで、なんだかもう自分じゃない気がした。だから作り直すことにした。ゼロから。
しかも今回は、ほぼ全部 Claude Code と喋りながら作った。わたしはコードを書くというより、「こうしたい」を投げて、出てきたものに文句を言って、また直してもらう。我ながらAIに依存している。
何で作ったか
- Next.js 15（App Router）+ React 19 + TypeScript
- 静的書き出し（
output: export）にして Netlify へ。サーバーは持たない - スタイルは Tailwind、フォントは JetBrains Mono
- ヒーローの背景は、ライブラリを使わずに生の WebGL でフラグメントシェーダーを書いた
最後のシェーダーは完全に趣味。ノイズを流して、紙にインクが滲むみたいな表現にした。
工夫したところ
コンセプトは「紙のターミナル」。白い紙の上に、ターミナルやコマンドの世界観をのせた。ls ./works みたいなプロンプトでセクションが始まる。
動きも足した。スクロールで要素がせり上がる演出、カーソルに吸い付くリング、ホバーで作品プレビューが出るやつ。派手にしすぎると一気に安っぽくなるので、シェーダーもアニメも「ちょっと物足りないくらい」で止めている。
地味に一番ハマったのはモバイルメニュー。全画面メニューが背景を覆ってくれなくて、しばらく原因がわからなかった。犯人はヘッダーにかけた backdrop-filter で、これが内側の position: fixed の基準をすり替えてしまう。結局メニューだけ別の場所にポータルで描いて解決した。こういうの、一人だと半日溶かしてたと思う。
あとは日本人がメインで来るので、ブラウザの言語を見て日本語と英語を出し分けるようにした。右上のトグルでも切り替わる。
配色で3回やり直した
ここが今回いちばん情けない話。
最初は黒×蛍光グリーンのサイバーな配色で作った。かっこいいけど「わたしっぽくない」と思って却下。次に白地×テラコッタの落ち着いた色にして、これだ、と思った。……思ったんだけど、公開ボタンを押す直前に気づいた。この色、Claude のブランドカラーにそっくりだ。さすがに本人（AI）の色で本人のサイトを塗るのは違う。
で、明るいオレンジに変えた。変数を1つ直すだけなので作業は一瞬。3回目でやっと納得した。
公開してから、五月雨で直してる
公開ボタンを押して終わり、にはならなかった。スマホで開いたら、トップの「garciaaan」だけがどーんと出て下がスカスカに間延びしていたので、モバイルだけ高さを詰めた。ファビコンも作った。サイトと同じ JetBrains Mono の小文字「g」を、オレンジで。左上のロゴを押したらトップに戻るようにもした。気づくたびに直して push するだけで反映されるので、この手軽さはちょっと気持ちいい。
そして、アクセス解析（GA4）も入れた。どこから来て、どのページが読まれているのか、ようやく数字で見えるようになった。PMとして散々データを触ってきたのに、自分のサイトはずっとノーデータだったの、我ながらどうかと思う。これでやっと「計測できる人」のサイトになった。
おわりに
中身も全部入れ替えた。いま動いているこのサイトの中で、このブログを書いている。
作り直してよかった。少なくとも、数年後の自分がまた「これ自分じゃない」と思うまでは。