The portfolio website for the designers I've worked with over the past decade. Their focus is on print, branding, exhibition design, as well as web design. After using Wordpress successfully for many years, I did some research into alternatives and settled on Statamic. While Wordpress is wonderful in a lot of ways, it's origin as a blogging platform means that all of the functionality built on top of it makes it lumber along like Frankenstein's monster for projects that require a lot of customization. Statamic makes it really easy to build the pages in the CMS to reflect the flow of the content that's going to be displayed on the front-end. There have been recent changes to Wordpress that have made things a bit better, but as a developer there's a lot to like in how Statamic is structured. It's a pleasure to work with (for the most part). Instead of a database, it uses YAML in a flat file format to store all of the data and manage configuration. It has a templating system called Antlers which is mostly great, but I did have to create a custom addon where I could lean on some straight PHP to pull and sort data for a complicated grid layout.
This site has a few cosmetic features the designers wanted to use to enrich the presentation of their portfolio. There's an animation effect where the page fades out before loading the next page and fading in elements in a staggered fashion, as well as fading content in as you scroll down. They wanted to avoid using the typical grid layout for the projects on the work pages where all of the images are the same aspect ratio. To accomplish this, I used CSS Grid Layout which was a very welcome addition to CSS added in 2017. There's also a complicated hover effect for project images on those grids that took some time to get working with the grid layout and the overlay that appears.
I used Foundation 6 to handle responsiveness. I've found it quite flexible compared to other CSS frameworks I've used, including Bootstrap. Since it's a site focused on showcasing design which makes it image heavy, optimizing images for mobile was important. All of the images are served by imgIX which optimizes and caches images. I also used lazysizes to lazy load images that are below the fold, fetching them as the user scrolls down the page. Finally, I used the picture HTML5 tag to serve smaller images to mobile devices using the width of the device as a guide to help with mobile performance.
Statamic has caching built in, and it will cache the entire page serving it as static HTML. I think this is essential since their templating system seems to be a bit sluggish if caching isn't turned on. I configured the CMS to invalidate the cache for a page if any updates are made to ensure that the website isn't serving outdated content. I used uglifyjs to compile all of the scripts required for each page into a single minimized Javascript file using the command line, and I minimized the CSS. After turning on gzip, along with all of the other optimizations, even the image heavy pages load and render in under 1000ms.