Responses by Diego Quintana, chief executive officer and founder, Solitario Studio.
Background: This site is the official portfolio for creative studio Buena Suerte, a Chilean boutique team of animators and designers heavily involved in film and media branding.
Design core: The site relies heavily on a four-column grid on desktop. Some of the highlights are the parallax effects on the homepage, the header’s project menu with marquee hover effects and variable size thumbnails, and the flower with CSS mix-blending that snaps into the size of the footer once you’ve scrolled all the way down the page.
Challenges: From a coding perspective, the main challenge was enhancing the very specifically defined design built by Buena Suerte. Font sizes, transition speeds and overall proportions were the main topic across many meetings.
Time constraints: We had as much time as we needed to make the site work properly. The team was extremely cooperative as we built or proposed each new feature. We learned that quality and innovation takes time. Even though the project is a “regular” portfolio built on WordPress, the front end became a fun challenge very quickly.
Navigation structure: The navigation was primarily built by Buena Suerte. At times, the lack of readability in menus or quirky font choices were baseline features to show that the studio is not afraid to go against the grain and attract clients who were after experimentation.
One of the main challenges was being able to keep a chronological order of the projects once you break the screens down to smaller resolutions and fewer columns. We had to build a lazy-loading logic for empty divs that trigger based on media queries and scrolling distance.
Technology: The back end is built on WordPress using Advanced Custom Fields for easy management by the client. On the front end, the site uses Bootstrap, GSAP for animations and Lenis for silky smooth scrolling. The main preloader is built with a simple CSS keyframe animation.