Mendo Alex Cuba

For this project I worked with Adam Leon from Transmitter Studios. He asked if I would like to help him build a musicians website. Who doesn't want to do that? When he mentioned it was for Alex Cuba... to be honest I hadn't heard of him before, but when I heard the music and saw the album art I was all in!

Collaborating with Adam is always fun as he comes up with some amazing ideas. This website project is no exception.

The Challenges

When I first looked at the flat mockup designs I was presented I thought this is too bad, fairly straightforward. Then I started to read all the little notes and thought...hmmmm... this is going to have some challenges.

First, this site would need to be built in wordpress so that the client could easily update the site. This is not normally a challenge but with all the custom elements, sliders etc, this would call for some out of the box thinking.

Second, I had to implement page transitions. There are many page transitions plugins but this would require something custom.

Third, for the album page the design required that the pages look like they were layering over each other.

The Solution

Without letting the cat out of the bag I will give you a few tidbits on how I tackled the challenges.

For the first challenge I used a custom theme and plugin that I built that works with the Divi Builder. The plugin I created allows be to build custom modules for Divi at ease. This is not only beneficial for me to be able to add complex modules to a site easily but makes it incredibly easy for the client to update the content.

For the second challenge I use a javascript library that would allow me to create page transitions. This library not only allowed me to create a page loading transition, but it allows for the page to be preloaded for better user experience. All in all it was a win win for me and the client.

The third challenge required a little more out of the box thinking. I had seen this done before but with javascript, but I din't want to add another JS library to the mix. So I started to think how could this be done with only CSS. Viola a solution was born. Using fixed position and clipping the end result was achieved.