Toaster Website

Description

In an effort to reduce page load times and improve accessibility, I was tasked with rebuilding Toaster's website, whilst keeping the same design and functionality.

The current version (which I also worked on) makes use of React and Redux, and is built via webpack. It is not, however, Server Side Rendered.

The new version of the website is built as a static site using eleventy and a set of custom rollup plugins. The styles are written using Sass, and JS is written in native ES modules. The site can also be used without JS as a traditional static site.

A big effort went into optimising page load performance, by using techniques such as code splitting, images lazy loading, scripts and styles preloading, critical styles inlining, fonts self-hosting (and more). Firebase was chosen to host the new version of the site for its blazing fast servers.

A CI/CD pipeline using Docker and Google Cloud Build has been set up in order to deploy a new version of the site every time the code is pushed to the master branch, or every time the content is updated in the CMS.