Austin J Blake

Portfolio Website

The site you are on right now. Created with GatsbyJS and dynamically generated from Contentful for blazing fast page loads and easy updating of content

I decided to build my personal site using GatsbyJS. Gatsby is a framework built around React and also uses GraphQL.

I chose to use this technology for two reasons: Speed and Ease of updating content.

Gatsby allows for blazing fast page loads and what I believe is an overall better user experience. It does this mainly with two built in methods; Link and Image. Under the hood, Gatsby will preload a page when a user hovers over a link, allowing navigation to internal pages to be almost instantaneous.

Gatsby Image will lazy load images to allow a quck initial page load and then use a blur-up effect to load in the complete image. It also scales images responsively and will load smaller images for mobile devices. More efficiency, more speed. Just what everyone wants.

Almost all of the content of this site is queried using GraphQL. This means that when I deploy the site, it automatically populates different components without needing to change a single line of code! So, so cool.

ContentfulCMS is what I aim my queries at. As you can see in the screenshots above, I can add in broad typings of content like blog posts or projects. Within each of those I can add as many items as I want and they will be automatically pulled into my site and rendered on the page for you to see. Just like the post I'm writing right now-I didn't need to add any more code in, I only have to make a new piece of content from Contentful and it's there.

One of the reasons that the combo of Gatsby and GraphQL and Contentful is even more powerful than a traditional content management system like Wordpress is that I can write different queries to pull different pieces from the same data. If I make a new project, it will automatically be added to the complete project page list(I also get to rank each project so they appear in the order I want), put in the slideshow(I can choose to only show the top 4 in here), and a brand new page is created for the writeup for that specific project!! It's hard to overstate how amazing this tech stack can be.

And to top it all off, I added a webhook so that when I publish any changes on Contentful, a new deploy is automatically triggered in Netlify(where all of my projects are hosted. check them out, they rock). If I change code and push to the master branch in github, I get a new build. If I change content in Contentful, new build. It just keeps getting better!

The same goes for the Skills Box. I learn something new, I make a new item for it in Contentful, tell it where to go, and its all updated for me. I had a ton of fun learning how to use GatsbyJS and GraphQL building this portfolio site and I'm really proud of how it all turned out. Much more than meets the eye.....