Cinematt (NextJS)

Personal photography website built using NextJS.

This project is a rebuild of my personal photography website, which uses the NextJS framework. NextJS can be used as a static site generator - a perfect use case for a project like this.

The older incarnation of this project used a combination of the Hugo static site generator, Ruby SASS for styles and Javascript (ES6) for behaviour.

While each of these were very powerful on their own, they were quite cumbersome when needing to be brought together. I needed to set up three seperate Docker containers to run Hugo, Ruby SASS and Gulp to manage scripts.

I wanted to keep this as a static website (given that updates are infrequent) so it would require very little in terms of server resources. With NextJS, I was still able to do that quite easily because it comes with SSR and static site generation baked in.

Performance is key for this project, so I implemented responsive images with the html <picture> element. This ensures the most suitable image size is used for a given device. The correct balance of art direction, image detail and bandwidth consumption should be maintained.

With CSS Grid layout, I was able to control the display of images and show them for all viewport sizes and ensure they flowed well, depending on whether they were of portrait or landscape orientation.

To host and transform these images, I use a service called Cloudinary whereupon I can upload a high detail TIFF image, and have it serves as either WebP or JPG depending on device support.

For deployment, I use a combination of Docker Compose and CircleCI. These two build the images for the application and deploy them to a remote server, a minimal DigitalOcean droplet which costs me US$5 a month.

This project is now online and can be seen at https://cinematt.photography. The source code is also on github.com/cinematt-nextjs.