Gatsby Static Site

PROJECT DETAILS

Marea Clark Interiors originally hired me to make updates to their WordPress website. Their site was using a custom theme built by another developer that they were no longer working with. There were many limitations with their theme at the time that prevented MCI from expanding their website, so they hired a third-party web designer to create a new design. I then developed a new WordPress website for MCI based on the new designs. While the updated WordPress website was light-years ahead of the previous design, there were still a few limitations presented by WordPress that impacted the satisfaction of the client, mainly page load speeds and hosting cache issues. While WordPress is a very user-friendly platform that requires little to no coding experience to build a website, the tools that allow such user-friendliness end up introducing a lot of bloat to the source code of the site, which affects things like page load times.

I ended up convincing the client to try out a new platform - GatsbyJS. Gatsby is a React-based, GraphQL powered static site generator, and is designed with speed and performance in mind - automatic image optimization comes right out of the box, and is crucial for an image-heavy website like MCI's. After rebuilding MCI's website with Gatsby, the client was extremely satisfied with the performance upgrades.

The MCI Gatsby Static Site comprises of individual project pages that contain image galleries of various Interior Design client projects. Each gallery also has lightbox functionality - a user can click on an image, which is then displayed in a lightbox that allows the user to view the image at larger sizes, and also allows forward / backward navigation through all the images in the gallery.

PROJECT IMAGES