2020年12月31日

Photoギャラリーサイト

Photoギャラリーサイト

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

使用技術

  • Next.js
  • tailwindcss
  • Typescript
  • Vercel
  • microCMS

作ったきっかけ

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

特長

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

サイト

https://photo.mismith.me/

GitHub

https://github.com/mismith0227/photo_site

© 2021, misumi_takuma