はじめに
自身の成果物や経歴を載せたりするポートフォリオサイト（プロフィール / 自己紹介サイト）ですが、最近作り直す機会があり、完成までに考えたことや調査したこと、どう作ったのかに関してまとめます。
本稿には、主に次のような内容が書いてあります。
- どのプラットフォーム/サービス上に作るか
- サイトに何を掲載するか
- どんなデザインにするか
- どのように実装したか
どこに作るか
Web上にポートフォリオサイトを作ることのできるサービスは数多くあります。
自分は最終的にGitHub Pages上に作成することにしましたが、各サービスにメリットがあるので、自分にフィットしたものを選定するのが良さそうです。
gist
GitHubが提供するソースコードやファイルをシンプルに共有できるサービスです。
マークダウン（GitHub Flavored Markdown）で書いたファイルをアップロードすると、gist上にHTMLとして表示されます。
この仕組みを利用しポートフォリオサイトとして公開するわけです。
当然バージョン管理できますし、マークダウンを書くだけというシンプルさが良いですね。
シークレット化も可能です。
cv.mdやbio.md等で検索するとイメージが湧くかと思います（検索結果）。
GitHubのREADMEプロフィール
GitHubユーザ名を冠するリポジトリ直下にREADME.mdを配置すると、書いた内容がGitHubのプロフィールページに表示されます。
プロフィールにGitHubのステータスを含められるのが良いですね。
Notion
Notionにも自己紹介ページを作って公開できます。
自前ホスティング
自前でサーバリソースを準備してポートフォリオサイトを公開する方法です。
少し大変ではありますがカスタマブルな良さがあります。
最近だとFirebase HostingやVercel等のマネージドな仕組みを利用するのが無料かつ簡単で良いかもしれません。
GitHub Pages
GitHubにはGitHub Pagesという機能があり、リポジトリを静的サイトとして公開することができます。
開発者のbioに載っていがちな[ユーザ名].github.ioドメインのアレです（もちろんドメイン変更可）。
その他の方法
何を書くか
ポートフォリオサイトにどんな項目書くか洗い出すのはなかなか骨が折れます。
以下では知人友人知り合い含めた色んなエンジニアのポートフォリオサイトを見ながら要素を抜き出してみました。
- 自己紹介（About Me、Summary）
- 興味分野（Interest Area、Interests）
- スキルセット（Skills、Technical Skills、Tech Stacks）
- 職務経歴（Industry Experience、Work Experience、Career、Professinal History）
- 在学歴（Education、Educational History）
- 開発物 / ポートフォリオ（OSS、Works）
- 論文（Publications、Selected Publications、Preprints、Poster）
- 発表歴（Slides、Talks、Presentations）
- 受賞歴 / 達成事項（Awards、Honors、Achievements）
- 各種リンク（Links）
- 資格（Qualifications、Certifications）
- 趣味（Hobbies）
- 連絡先（Contact Me）
これら全て書くのは必要十分が過ぎるので、自己紹介 / スキルセット / 経歴辺りを軸に肉付けしていくのが良さそうです。
どんなデザインにするか
特にデザイン周りでテクいことはしていないのでほぼ割愛します。
DribbbleやPinterest辺りで「portfolio design」「cv design」「resume design」なんかで検索しつつ、既存のエンジニアポートフォリオサイトを眺めて作る内容を固めていった形です。
Webっぽい天衣無縫な凝る方をすると自分のスキルではダサくなってしまったので、Material Design等である程度仕組み化されるように意識しました。
実装
前述の通り、最終的にGitHub Pages上に作ることにしました。
GitHub Pagesは静的ページしか返せないためSSGの面倒見てもらえるNextにしました。
Next.js + TypeScript + Tailwind CSSがメインの技術スタックです。
実験的に極一部にのみMaterial Tailwindのコンポーネントも導入しています。
Next.js × GitHub Pagesについては各所で解説されているので、どれかを参考にすればすぐに作れると思います。
ブログも一緒に作りたい場合：
なお上記の記事に限らず、GitHub Pages作ってみた系の記事はpeaceiris/actions-gh-pagesを利用しデプロイを行っている例が多いです。
別に問題はないのですが、2022年から新たなデプロイ方法がアナウンスされたので、こちらを利用する方がスマートかもしれません。