2024

mocafico.com

Website
ClientGuido Mocafico
Work
Frontend Development
WithDaniele Polacco, Tristan Bagot
Project Image
Project Image
Project Image
Visit Website
Summary

Collaborated to the frontend development of the digital archive of the Swiss-Italian photographer Guido Mocafico.

The work was a collaboration between me, Daniele Polacco - who took care of the backend while supporting and mentoring me along the way, and Tristan Bagot, who made all this possible by coordinating the project, trusting the process, and bringing his unique expertise.

Stack

Nuxt 3, Craft CMS

Description

Mocafico.com can be considered the digital archive of the 30 years of Guido Mocafico's photographic career.

In all honesty, I consider this project my second real "clash" with web development (the first one is not listed on this website, and probably never will for copyright reasons ✌️), where I realized how hard it can be to achieve things that look easy on the surface (how hard be to implement a long gallery of images, right?), but instead require experience and technical expertise, to keep up with certain standards (design, performance, smooth dialogue between frontend and backend).

During this project, the main challenges were related to the quantity of photographic material that needed to be uploaded on the website, and the methods necessary to deliver such materials efficiently, without compromising the image quality and the overall user experience. While hundreds of images were loaded on the backend at very high resolution, the browser would need to fetch them in the shortest time possible, while avoiding unnecessary waste of resources.

To handle such aspects, caching played a big role, and we went through several phases of refactoring and optimization, which was definitely a big learning (and humbling) experience on my side. What seemed a simple project became a delicate exercise of reduction through optimization. At the very essence, the website consists of a series of collections displayed on a grid and an image carousel.