Responses by Louis Paquet, creative director and designer.

Background: Creative developer Quentin Hocdé and I designed a clean, smooth and user-friendly portfolio website for Héloïse Thibodeau Architecte, a Montréal-based architectural firm. The goal was to allow its stunning projects to take center stage without unnecessary distractions. By creating an elegant and intuitive user experience, we ensured that visitors can easily explore the firm’s work. The website is aimed at businesses seeking the best architectural firm for their projects, making it important to provide a polished, professional showcase that reflects the firm’s level of expertise.

Design core: The core features are all about providing a seamless and smooth user experience. There are two main ways to explore the portfolio: a clean, linear horizontal list and a more exploratory infinite grid mode. Both offer unique ways to navigate through the projects, making the browsing experience flexible and engaging. A standout feature is how the project pages are displayed: they open on top of the listing, letting users scroll through and return exactly to where they left off. It’s a small detail, but it greatly enhances the fluidity of navigation and keeps the experience immersive.

Challenges: Implementing the dual navigation system—one being a straightforward list and the other an infinite grid that users can scroll and drag through. Ensuring a smooth and quick switch between these two modes took some effort.

Another tricky part was designing seamless page transitions. For example, on some pages, new content loads on top of the old page, but if you scroll to the end, you loop back to the previous content. Managing multiple containers and states to achieve these transitions was complex, but it was also rewarding and fun to code once it all came together.

New lessons: One major learning experience was working with WebGL for the infinite grid feature. To improve performance and flexibility, Quentin decided to use WebGL with three.js, which was a first for this type of grid. I also found some inspiration from a helpful codepen by Jesper Landberg that really assisted in getting this grid to function just right.

Technology: The site is built using WordPress as the CMS with the Timber framework. I prefer not to spend too much time on back-end tasks, and WordPress combined with Advanced Custom Fields enables me to focus more on the creative coding aspects. For the front end, we utilized GSAP for animations, Lenis for smooth scrolling and three.js for the WebGL grid. These technologies worked together to create an experience both visually appealing and highly performant.