Photoギャラリーサイト

  • webpack
  • tailwindcss
  • Next.js
  • TypeScript
Photoギャラリーサイト

趣味の写真のポートフォリオサイトとしています。更新はmicroCMSを使用し、ホスティングはVercelです。JAMstackの構成で、料金はドメイン代だけお財布に優しいです。

作ったきっかけ

Next.jsやtailwindcssを試したくて作りました。 また、写真が趣味で500pxやインスタグラムなどで写真は載せているのですが、サービスだとどうしても写真以外のコンテンツもあるため、純粋に写真を見てもらうだけのサイトが欲しくて作りました。

特長

  • tailwindcssを使い、CSSは一切書かずに作りました(configで若干カスタマイズはしています)
  • column-countプロパティで、CSSでピンタレストのようなレイアウトに
  • モーダルで写真を拡大し、拡大後は左右ボタン、またはフリック操作で写真を切り替えられるようにしています(モーダルは自作、スライドはslick.js)
  • ブログ機能も追加し、ブログの追加読み込みは無限スクロールにしています

Date

2020年12月

URL

https://photo.mismith.me/