意味

私はポートフォリオに次のような意味を込めています：

株式会社 ●● (人名) の ●● (人名) というサービスを世に知らしめる or 売り込む

こんな感じのを作った

きっかけ

一般的に、転職活動は相手の会社に自分をアピールしたり、それによって内定を獲得したりする活動のことを言います。私の場合は、転職活動がいつしか「自分という商品で相手に営業をかけて成約を取る」という感覚に変わっていました。
だとすれば、

会社の商品を相手に売る状況と同じだよね？

と。そしてそれと同時に、

職種関係なく営業力（商品の良さを伝える力）は必要なんだ

と気づいてしまったのです。

私は転職活動において、「会社」は「自分」のことであり、「商品」は「自分」のことであると考えています。
つまり、「自分という会社の自分という商品を売り込む」ことになります。

商品を伝える方法には以下の要素があります（あくまで私の解釈です）：

トーク（その場のノリ）
資料（事前準備）

自分はトークが平均以下なので、資料を作りこむ方に注力しようと思いました。
そして、会社のウェブサイトみたいにいい感じのものを作りたいと思い、自分バージョンを作りました。

ポートフォリオに載せたもの

会社では、会社のホームページが存在して、概要・ソリューション・ブログ・採用情報などが載っています。
私は以下の表のようにポートフォリオに置き換えました。

会社	ポートフォリオ
会社概要	自分の生い立ち・職務経歴
ソリューション・対応事例	スキル・資格・今まで作ったもの
（テック）ブログ	日記・ブログ
採用情報	連絡先・自分が受けられる仕事の内容など

また、表にはありませんがプライバシーポリシーも必須です。プライバシーポリシーはブログでよく使われているものを参考に、英語・日本語ともに記載しました。

どんなツールを使ったか

フロントエンド・デザイン

フロントエンドやデザインの経験が特に薄かったので、静的サイトジェネレータとそこにある良さげなデザインをもとに、少しアレンジすることにしました。
そして、採用したのが Hugo です。

Jamstack のサイトジェネレータ一覧で比較しましたが、決め手になったのは以下の点です：

自分が興味ある Golang で作られている
テンプレートが豊富で、ポートフォリオ向けのデザインも何種類かある
ビルドが速く、制作体験が良い

テンプレートは toha を選択しました。

実際、作っている間が一番楽しく、初版の完成までまったく飽きることがありませんでした。
自分の期待通り、いい感じに仕上がったので、企業さんとの面談では多くの方から「フロント得意なんですか？」と言っていただき、これはうれしい誤算（？）でした。

サイト名・スローガン

サイト名は会社でいう社名にあたります。
私の場合は紆余曲折あり、自分のことをうまく言い表す単語を並べました。

スローガンは、自分が仕事で大事にしていることをシンプルに 1 文にまとめます。

ロゴ

ロゴは会社においてトレードマークとなるため、自分のサイトにもロゴを用意する必要がありました。
でも、デザインは苦手なので、どこか自動生成してくれるサイトが無いか探した結果、見つけたのが Brandmark Logo Maker でした。

このサイトでは、社名・スローガン・キーワード・カラースタイルを選択することで、条件に合ったロゴのデザインを自動生成し、何種類か提示してくれます。
いいものが見つからない場合は納得いくまで生成をやり直します。

ロゴが決まったら、ロゴの入っているデザインテンプレートを購入します。
プランが以下のように 3 つあるのですが、私はデザイナープランを選択しました。

ベーシックプラン：PNG 画像のみ、$25
デザイナープラン：デザインテンプレート一式、$65
エンタープライズプラン：デザイナープランの一式＋Brandmark 社デザインチームによるコンセプト作成（最大 10 個）、$175

デザインテンプレート一式には以下のものが付いてきました。

ロゴ画像
デザインガイドライン
モックアップ（製品にロゴを印刷したときのイメージ画像）
プロフィールアイコン
名刺デザイン
MS Word の文書デザイン
Facebook/Instagram 用素材
プレゼン用スライドデザイン (MS PowerPoint)
請求書

Brandmark Logo Maker で作ったロゴの著作権は購入者に属し、商用・個人問わず自由に使用することができます。
また、1 度購入してしまえば、ロゴの修正は何度でも可能です。

工夫したところ

ポートフォリオのデザインはほぼ工夫していません。どちらかというと、メンテナンス・更新を楽に行うための工夫を行いました。

ビルド後にテストを実行する

サイトを何度か更新していた時に、画像が 0 バイトになったり、ブログが 404 になってしまうなどのインシデントがあったりしたため、以下のようなテストをビルド後に実施しています：

ビルド後の画像で 0 バイトのものが存在しない
ブログページ（プライバシーポリシー）のページが正常に表示されることを E2E でテストする

この結果、サイトの稼働率が相対的にアップしました（具体的に計測はしていませんが）。

テンプレートのリポジトリにプルリクを出す

テンプレートを一度導入してしまえば自由にカスタマイズできるのですが、これはみんなが必要、と思ったものについてはプルリクエストを出して対応しました。
これにより、リポジトリ更新への対応工数が大幅に削減されました。

今まで出したプルリクエストたち

ブログ記事だけ別のリポジトリに分離する

Hugo においては、ブログ記事も同じリポジトリに格納します。そのため、ブログをちょくちょく更新する場合、コミットログに「ブログを更新」がたくさん並んで見にくくなるという問題がありました。
そこで、ブログのディレクトリだけ別のリポジトリに移動させて、ブログのリポジトリにプッシュされたらポートフォリオのリポジトリでビルド・デプロイする仕組みを用意しました。

あとがき

いまではサイトを更新することが楽しみになりました。