新しいポートフォリオサイトを作りました

自分の作品を紹介するために、ポートフォリオサイトを作成しました。

デザイン

いつもと同じように、最初に Illustrator でデザインを作成しました。

フォント選定

スタイリッシュなフォントが使いたかったので、英字のみの箇所は Jost を使用し、作品名などの日本語を含む可能性のある箇所は Noto Sans JP を使用しました。フォントは Google Fonts の CDN から配信されているものを直接使用しました。

技術スタック選定

いつも通り React + Vite + TypeScript の構成で作成しました。デプロイの選択肢を広げ、サーバー費用を抑えられるように、バックエンドサーバーは用意しませんでした。

なお、SSG については、ビルドステップが増えて面倒だと思ったため、今回は選択肢から外しました。Next.js の静的エクスポートや CSR については詳しくないため、今後検討したいと考えています。また、表示するページが 1 つしかない点、また、将来的なポップアップの実装時にも History API を使用する予定はない点からも、SSG や SSR の必要性は低いと考えました。

Create React App は非推奨となっているため、選択肢から外しました。

いや、この文章誰向け？面接中か？

レスポンシブ対応

可変個のアイテムに対応できるよう、 Flexbox を使用して実装しました。

画面の幅に応じて、1 列～ 3 列の間でグリッドが変化するようにしました。Flexbox の末尾に空の要素を追加して、最後の行が左寄せになるように修正しました。

after 疑似要素でも良いですが、追加できる疑似要素の個数に限りがあるため、今回は拡張性を重視して、疑似要素ではなく実際の div 要素を使用しました。

Flexboxのjustify-contentで最後の行を左寄せにする方法 – to-R

スタイルの記述量と、テスト時の分岐網羅に必要なパターン数が増加してしまうメディアクエリについては、最低限の指定に留めました。

キーボードナビゲーション対応

div ( border-radius:50%; overflow:hidden; ) 要素の内側に a 要素があり、キーボードナビゲーション時の枠線が隠れて見えなくなってしまっていたので、 a 要素を div 要素の外側に出して枠線が見えるようにしました。

ですが、その結果、枠線が円ではなく長方形になってしまったので、 :focus-visible セレクタを使用して、明示的にボーダーを追加しました。ただし、視認性という点では長方形のままでも良かったかもしれません。

a.profile-anchor:focus-visible  {
  outline: none;
}

a.profile-anchor:focus-visible .profile-image-container  {
  border-color: #000000;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

a 要素の中に div 要素を入れることが正当になるためには条件があるので、今回は念の為 display: inline-block; を指定した span 要素に変更しておきました。

<a> の中に <div> って入れていいの？ #HTML – Qiita