Snicket Eggs - free range egg shop

HTML, CSS and Javascript for a suprisingly pretty egg shop site

Snicket Eggs homepage with large jumbotron

It is important to first explain i am not dangerously infatuated with eggs. However, i am lucky that my mother keeps chickens for eggs. So when she asked me to create a website to help her sell more of her eggs how could i not?

Further example showing colour, use of images and fonts

DESIGN

In terms of design i went for a modern, somewhat minimalist style with a simple colour pallete of black, white, a light blue that echoes the blue eggs of the Araucana breed and a peach colour which, again, echoes an egg shell colour but more vibrant.

A block of text and a gallery

ANIMATIONS

The site uses a animations for fade in and slide in effects, and transitions when leaving a page. This requires some minor link hijacking but the fallback is standard link behaviour so that the website can be accessible.

Meet the Hens page uses Vue.js

VUE.JS

The 'Meet the Hens' page uses Vue.js to create an interactive introduction to the various breeds kept, complete with animations.

OPTIMISATION

In order to speed up performances images are lazy loaded with the user seeing a blurry image initially. I managed to achieve a good lighthouse score whilst still using large hi-res images.

Front page on a mobile device

MOBILE

The mobile design benefits from the various image optimisations.

Meet the Hens page on a mobile device