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