menep / grid-gallery

An experiment in Css grid with my own photos

CSS Very Scottish Gallery

Motivation

I've wanted to create a gallery to display some of my photos for a while, so here it is! It has been build with CSS Grid and vanilla JS.

Project status

Basic functionality is working (photo display, carousel, responsive grid). Images lazy load (implemented with IntersectionObserver API).

How to use

Hovering over an image shows its color version, clicking on it open an overlay to see it in a bigger size. You can navigate the photos clicking on the UI or the keyboard arrows.

Practiced features

• CSS Grid
• Webpack configuration from scratch
• Lazy loading images with IntersectionObserver API

How to run locally

yarn install yarn start

Known issues and future features

Images are too heavy, Sass/JS are not tidy. The grid randomization functionality might be a feature in the future. Performance issues will be addressed too (remove exif, images are too heavy, will probably experiment with sprites). I might eventually create a NodeJS server with a database and an api with info about the photos.

Images

All photos were taken by me.