Stephen Czaikoski Thumbnail

Stephen Czaikoski

July 7th, 2021 · 2 min read · Portfolio

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 always admired his work both in quality and quantity. I'm impressed with his inner drive that moves him down his artistic path and 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

  1. Image Gallery
  2. Carousel
  3. 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 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.