Built with Hugo and WidiCSS with Swiper carousel.
Stephen Czaikoski is a talented artist that I’ve known for my entire life because he’s also my cousin. I’ve admired his work both in quality and quantity and am impressed with his inner drive that moves him down his artistic path. When he asked if I could help him with a website, I was very pleased and wanted to make something special to showcase his art.
Goals
Show off Stephen’s art via
- Image Gallery
- Carousel
- Zoom enabled for detailed views
Using Hugo’s native image processing with WindiCSS and Swiper, I combined them all to provide www.stephenc.art.
Hugo Image Optimization
One of the biggest pieces to this site is handling the images intelligently, optimally. Hugo has fantastic image processing that I leverage to produce web optimized sizes to improve delivery time and reduce download overhead.
Firebase Hosting
This static site is delivered very cheaply (free with current traffic) via Firebase hosting. The CSS is optimized and the javascript is minimal but one of the speed advantages is leveraging browser caching by providing optimized caching rules that can make the Hugo-processed, optimized images have a longer caching period; the cache headers allow the browser to not even bother to check for updates on items that won’t change like fingerprinted CSS, JS and optimized images.
LazyLoad Media
The site also uses Vanilla Lazyload to lazyload the images. This resulted in some cross behavior with swiper, especially when attempting to use swiper’s lazy load in addition to vanilla. I ended up stick with vanilla-lazyload and excluding swiper’s lazyload; they seem to get along now and I get to use lazyload for non-swiper images as well, so win-win.
Swiper for Carousels
Swiper is awesome. This is my first use and it’s so much better than my own custom carousels. I didn’t want to have to learn the details on handling the swipe and why should I? Swiper solves this problem with far more options that I could’ve produced. Kudos to the swiper team.