DSI Company Website

Digital Systems and Integration

CopywritingProject ManagementDevelopmentSales

stack

CSS3
Javascript
ReactJS
GatsbyJS
GraphQL
Prismic.io
Netlify
Analytics

Project Overview

I built the company website for Digital Systems and Integration from the ground up, including all of its content and overarching website structure and vision. I coded the website from scratch, using Gatsby and React to make the website blazing fast and fun to use (and code.)

Stack

Having built my personal portfolio with Gatsby, I was already in love with its workflow. I decided to use this stack again for a few reasons:

  1. All the benefits of static site generators (faster than querying databases at runtime, no worrying about servers.)
  2. Gatsby is so fast, because of its automatic implementation of the PRPL pattern—including lazy-loading images, inlining of critical CSS, code splitting, responsive image sets, and much more—out of the box.
  3. I love using React for interactivity.
  4. Using Prismic CMS the customer can add content on the fly without opening a code editor or calling me.
  5. Gatsby has many built-in SEO optimizations and plugins, and building JSON-LD schemas, adding helper text, and other SEO tasks are super-easy.

I will likely stick with this stack for most brochure-type projects in the near future!

Deployment

I chose Netlify to host the website. Using Prismic's webhooks API, I can automatically trigger rebuilds whenever new content is published. It will also rebuild when a new commit is pushed to master, making ongoing maintenance a breeze. Using the Netlify cache plugin for Gatsby, I was able to cut build-time to less than three minutes.

Summary

The most challenging part of the project was, by far, writing all of the content. That's arguably because of my personality—I enjoy writing code more than I enjoy writing English. For future projects, I will likely outsource large chunks of the writing to someone that enjoys writing as much as I enjoy coding.