概要
このポートフォリオサイト自体です。自己紹介やプロダクト一覧、ブログなどを掲載しています。デザインとアクセシビリティにこだわって作りました。
背景
デザインとアクセシビリティの実践の場にしたいという思いから作りました。WCAGに準拠するプロダクトを自分の手でちゃんと作ってみたかったこと、そして「自分はこういうものを作れる」というプレゼンスを示せるものを持っておきたかったことが動機です。
特徴
- シンプルさの中に個性を出すデザイン: PCをテーマにした大胆なタイポグラフィと塗りつぶしで印象的なデザインにしています。ページタイトルをあえて右寄せにしたり、プロダクト一覧の並べ方を工夫したりと、細かい部分にも手を入れています
- アクセシビリティ: WCAG2.1のレベルAAに準拠しています。デザインの段階から考慮することで、色のコントラスト比や文字サイズ拡大時のレイアウト崩れなどの問題を未然に防ぎました。キーボード操作のフォーカストラップや、スクロールアニメーションの一時停止機能なども実装しています
技術的なこだわり
全ページ静的なサイトのため、静的サイト生成に特化したAstroを採用しました。ページ読み込みが高速で、パフォーマンスやアクセシビリティのチェックも開発中にワンタッチで行えます。
トップページのスクロールアニメーションにはGSAPを使用しました。アニメーションの起点と終点を可視化しながら開発できるため、直感的に実装できました。ブログのOGP画像生成にはsatoriを使用し、tsx形式からSVG画像を生成しています。