Michael V. ColiannaAuthor / Web Developer

Developer & Author Site

Michael's site, converted to a Gatsby/React app, and using Contentful.

A few months earlier, I grew tired of having to maintain the WordPress instances running my personal (author) and professional (developer) sites. So I found a template I liked and converted it for use in a Laravel project. Since my company is looking to expand its offering, I've been researching different CMS and front-end options. I already had familiarity with Contentful, and figured it was time to link it up with some of the Javascript-based frameworks.

A list of content model fields in the Contentful web interface.

The Contentful dashboard, on the "content" tab, showing a filter by "work" content type.

I took the information from the Laravel site, created matching content models in Contentful, and migrated the data in.

Then I created a Gatsby project and proceeded to rework the Laravel components into their equivalent React siblings.

Code snippet of a React page component utilizing some Contentful data from a GraphQL query.

Code snippet of a React component for an external link.

After that I utilized the Gatsby source for Contentful to pull in the data and create GraphQL queries for it.

The GraphQL query used to pull in the "page" content models.

And, rather than write multiple pages for the different areas, I utilized the Gatsby Node API to create them dynamically.

Code snippet from the site's Gatsby node config file, showing a loop through "work" pages and generating pages for them.

Lastly, I set up a Netlify deploy for the site.

A Netlify site dashboard showing the deploy for the site.

For the future, I plan on either locating/paying for a better design and implementing it into the project. Unlike my professional work, this source code is viewable on GitHub in a public repository.