S & J Architects

Built with: Gatsby | React | CSS | GraphQL

See the code, see the result.

This project uses Gatsby and React to display JavaScript Components, uses the Gatsby-Image plugin to optimize images with lazy loading, hold image position, generate smaller images for quicker downloading, and optimize 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!