Cinematt

My photography website with selected images from my collection.

I had a trove of photos that I had taken over a large number of years. I wanted to put them on my own website, which would focus on delivering crisp and clear images for all devices.

My preference was to move away from existing image hosting services such as Instagram, Flickr and Facebook. While it is easier to disseminate content on some of these platforms, I wanted to create something what was open and free for everybody to use.

I set about creating my own Photography website to fulfill the following requirements:

  • Content should load as quickly as possible on all devices. I used the HTML <picture> element to deliver responsive images.
  • Art direction is important for showing grouped images of different aspect ratios in the best possible way. I wanted to experiment with CSS grid layout, so this was a perfect opportunity for me to try it out.
  • I didn't want to have people waiting too long for the page to load. I implemented lazy loading in Javascript to start sequentially loading images once the layout of the page was rendered.
  • I needed somewhere to host and process these images. I opted to use Cloudinary who provide an excellent API for delivering images in multiple sizes.
  • I wanted to include the metadata for my images. Cloudinary also did an excellent job parsing and delivering this through their API.
  • I needed to be able to fetch the image metadata from Cloudinary and format it in such a way that Hugo could pick it up as a content item for each of the 289 photos I had processed. I wrote a little tool to take care of this.
  • This site is online at https://cinematt.photography and the project is on GitHub.