S & J Architects

Built with: Gatsby | React | CSS | GraphQL

See the code, see the result.

This project was my first foray into learning more about React-based frameworks as a Lambda School student in October 2018. It uses Gatsby and React to display JavaScript components and uses the Gatsby-Image plugin to optimize images through lazy loading, holding image position, generating smaller images for quicker downloading, and optimizing image compression. Gatsby-Image uses GraphQL queries to make the images available for use.

Why build this project?

This project is intended to show value for both businesses without websites and businesses with unoptimized websites. Gatsby is blazing fast and adds a number of optimizations that are important for the modern web. This project's primary content loads in less than 2 seconds on a 3G connection, which is a great speed that keeps visitors from leaving a site in frustration. Google takes page speed into account when ranking pages for search results, so a quicker site can lead to more visitors.

This project was my first time using GraphQL and Gatsby, which I thought were both fun and useful. They're easy to pick up, make web development easier, and can lead to a better website in the end. Everyone wins!