I started designing the website by placing the project grid at the center of the user experience. I wanted to create a smart hover effect - only for the desktop version - that would display the main project image in full screen mode beneath the project grid.

The second relevant element of the design would be a sidebar triggering information about the author on hover. At first, this element would only contain a logo, a menu and contact information, but after many briefings with the client, we decided to expand its functionalities and place all of the text content there, resulting in a really flexible and easy-to-use information point, accessible from every page.

The biggest challenge I found was related to usability and accessibility rules: I wanted to give space to the beautiful project images and display them as a background when hovering the boxes, but the titles and descriptions were often covered by the complexity (and unpredictability) of the pictures. I solved this by introducing an overlay of transparent color under every text label, to grant readability in every case.

The end result was a successful web application that made the client very happy with what he wanted to communicate, and allowed me to design (and fully code) a product with a complex "dramaturgy": on the desktop version, the user can expand the project items on the same page by clicking on the boxes, and this takes a really detailed animation work to make it look seamless and natural.
With this project, I really felt that I was producing an interactive media product, and the pride is doubled by the fact that the website has a very good Lighthouse score on Google Chrome.