Matt Finucane

Cinematt

Photography portfolio website.

About this project

This is my personal photography website built using the Hugo static site generator.

Work on this project started in June 2017 and is still ongoing. The source code for the project can be seen on Github. The project can be seen live here.

The Brief

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.

Project planning and development

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

Note: I have written about my experiences in building this site - see my blog post on Building Cinematt with CSS grid layout.

Challenges encountered

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.

I took on this project to learn more about the CSS grid layout framework. Given that this is a very new technology, it doesn’t work in Internet Explorer (nor will it ever). MS Edge support is coming soon and the latest versions of all browsers support the framework.

There has also been some odd CSS behaviour. Safari on iOS crashed when I tried to reveal my responsive nagivation menu. This worked perfectly on all other devices, so I think it could be a bug in the Webkit rendering engine.