就職活動・転職活動に備えてポートフォリオサイトを作成したので経緯や内容・工夫点をご紹介します。
簡単に実践できてサイトの質を向上させることができる工夫点も複数紹介しているので，参考になる方も多いと思います！
完成したサイト・ソースコードがこちら↓
前提
- 制作者は学生
- 就職活動でスキルや過去の実績をアピールすることを目的に制作を開始
- 就活が終了した現在も副業探しや転職活動を見据えてアップデート中
- 勉強のために触ったことのないNuxt.jsを使用
方針
自身のことや過去の実績について知ってもらうことが一番の目的であるため…
- サイト自体の機能を盛り盛りにしてスキルをアピールするというより，伝えたいことが十分に伝わるようなUIを作成することを優先したい
とはいえスキルもアピールしたいため…
- 目的から離れすぎない範囲でフロントエンドに機能をつける
- サイトパフォーマンスに気を配る
表示項目
下記項目を表示することにしました。
- 簡単なプロフィール（Profile）
- 過去の制作物(Works)
- プログラミング言語やフレームワーク等のスキル・経験（Skills）
- GitHubやQiitaの情報（Activities）
詳細プロフィールや経歴なども載せるか悩みましたが，個人情報を載せすぎるのも少し怖いので今回は載せないことにしました。
内容・工夫点
項目ごとにご紹介します。
Profile
サイトトップに以下の要素を表示します。
- 名前
- GitHubアカウントへのリンク
- GitHub Contribution
象徴的な画像やアイコン，キャッチコピーなどがほしいところですが，今のところはありません…
複数のGitHub Contributionの表示
GitHubのContribution（いわゆる草）は過去にどの程度開発をしているのか評価するうえで重要な指標のひとつになり得ます。
しかし，GitHubのアカウントを複数使い分けている場合（会社用・個人用など），その全てを見に行くのは少し面倒です。（就活の際に人事の方がそこまでしてくれるか怪しい）
そこで，GitHub APIを使うことで会社用と個人用の２つのアカウントのContributionをまとめて表示させてみました。
実装方法については以前まとめたので興味がある人はぜひ↓
（この機能はオリジナリティや技術的なアピールにもなりそうなので結構気に入っています笑）
GitHub Contributionの表示/非表示切り替えボタン
仕事でどの程度開発しているのか知りたいという場合もありそうなので（その逆も），画像右下のボタンからContributionの表示/非表示切り替えができるようにしました。
この機能はUIデザインの観点から以下の工夫をしており，説明文なしでも直感的に操作できると思います。
- 単なるボタンではなくトグルボタンを使用することでON/OFFを切り替えるためのUIであることを分かりやすくする
- 色・アイコン画像をContribution表示と統一することで切り替え操作の対象を分かりやすくする
ちなみにこのトグルボタンはbutton,img,divを組み合わせ，CSSでtransitionをつけることで半ば強引に実現しています笑
Works
制作物について，以下の情報を表示
- 名前
- 概要
- 技術やアピールポイント等のキーワード
- 制作日
- サイト・ソースコードのリンク
最大4件の表示しか想定していないため，現時点では静的に実装しています。
Skills
スキルについて，主に以下の情報を静的に表示
- 名前
- レベル
- （ロゴ）
アピールポイントを明確にするためにメインでアピールしたいスキルを8つに絞り，それらにはロゴやレベル（そのスキルに対する自信）も併せて表示しました。
サブのスキルには大きなアピールになりそうにないスキル（GitやTailwindcss等）やメインと比較してアピールの優先度が低いスキル（分野が少し違う，経験が少ない等）を記載しています。
また，実務経験の有無を問われることも多いため，メインのスキルは実務経験あり(緑)となし（オレンジ）で色分けしました。
懸念点として，ロゴの周りのゲージの基準が分かりにくい気もしますが，学生の私には経験年数のような数値で測れるような指標がないため，今はこのままにしています。
（週1ぐらいで開発している時期もあれば毎日開発している時期もあるので…）
ちなみに，Tailwindcssで頑張ってhoverアクションをつけたので是非PCでご確認ください…！
Activities
各種公開APIを利用し，以下の情報を動的に表示
- GitHubのリポジトリ
- Qiitaの投稿
RESTとGraphQL
GitHub APIはGraphQL，Qiita APIはRESTと，あえて異なる方式のAPIを採用しているため，少しは技術的なアピールになればと期待しています…
Qiita APIについても以前まとめたのでぜひ↓
サイト全体
サイトパフォーマンス
LighthouseやPageSpeed Insights等の分析ツールを活用しながら問題点を一つ一つ潰していくという方法で，高いサイトパフォーマンスを実現しています。
SSG(Static Site Generation)
今回制作するサイトは，更新頻度が低く，リアルタイムな情報更新も求められないため，ビルド時に静的ページを生成するSSG(Static Site Generation)による高速化が期待できます。
ただし，サイトトップに表示しているGitHubのContributionは毎日更新されてほしいため，GitHub Actionsを用いて毎日定時に自動ビルドされるよう設定しています。
表示データの制限（ページネーション）
基本的には，表示するものが多いとそれだけ時間がかかります。
また，無駄なスクロールも増えるためユーザビリティ的にも良いとはいえません。
以上の理由から，GitHubのリポジトリやQiitaの投稿などの初期表示数を制限し，「Show More」ボタン押下によって表示数を増やすという仕様にしています。
CLS対策
一部データの読み込みが遅れることなどが原因でレイアウトがずれる場合があります。
これは，ユーザの誤クリック等を招くため，CLS(Cumulative Layout Shift)という表示の安定性を測る指標に悪影響を与えます。
一般的にはデータの読み込みが完了するまでスケルトンやプレースホルダと呼ばれる代わりの要素を表示させることで対策されたりしますが，今回は元々画像以外で読み込みが遅れるということがほとんどなかったため，imgタグのheight,width属性を設定するだけで対策できました。
PWA対応
PWA（Progressive Web Apps）に対応することでネイティブアプリのようにホーム画面に追加し，ブラウザとは別タブで開くことができるようになります。
また，Service Workerのキャッシュによりオフラインでも閲覧可能になったり，オンラインでの読み込みが高速化されたりといったメリットもあります。
（今回は対応しませんが通知機能なども実装可能になります！）
実装方法割愛しますが，画像用意して設定の記述を少し加えるだけなのですぐできました！
Accesibility向上
少しパフォーマンスとはずれますが，LighthouseやPageSpeed InsightsのAccesibility欄を参考にしながらAccesibility向上に努めました。
具体的には，imgタグのalt属性，buttonやaタグのaria-label等を設定することで，テキスト読み上げ機能などにも対応しました。
また，色のコントラストを一定以上に保つことで，誰にとっても見やすいWebサイトを実現しました。
OGP設定
TwitterやQiitaなどでリンクを貼った際の，サイトタイトルや説明，画像などの表示設定です。
ポートフォリオサイトの目的を考えると，検索からではなくシェアから訪れる場合がほとんどであるため，地味ですが重要です。
今回は以下の画像のように設定しておきました。
今後の課題・展望
- スマホ表示時のパフォーマンス向上（画像出し分けとか）
- テキスト圧縮（やろうとしたけどなぜかできてない…）
- 画像最適化（今回は効果薄そうだからやってない）
- ナイトモードの実装
- SEO対策（検索での流入を求めてないからやってない）
おわりに
技術的に難しいことはあまりしていませんが，目的に対して一貫性のある良いものができたと考えています。
気になったところやアドバイスがあればコメントいただけると嬉しいです！
就活は終わっちゃいましたが，副業は探しているのでTwitterのDMなどでお声がけいただけると嬉しいです！
完成したサイト・ソースコード↓