This Portfolio

This website involved using Server Side Rendering with React.

Project Goals

This Portfolio was built with the intention that I could update both the content and the styling frequently. I also wanted the opportunity to improve SEO at some point, and for that reason I chose to do Server Side Rendering in React with a Headless CMS. React allows me to make updates to the function, structure, and styling of the application quickly and easily. The Headless CMS gives me an interface in which I can easily update my React templates with new content without having to sort through and clutter my code with markdown files. Gatsby made it easy to use SSR and offered quick plugins to connect with Prismic and GraphQL straight out of the box.

Project Technologies

• React and Gatsby.js - Gatsby.js allows me to render server-side while giving me the flexibility to use React and even hydrate with client side rendering if needed. It allows me to easily connect with my CMS API with its built in plug-ins. Along with the SSR generating pages quickly, it loads images quickly by delivering them straight from a CDN.
• Emotion.js - Emotion.js or any styled components library is far superior to its comparable vanilla CSS options. It allows me to quickly build and update styling for components without having to connect with SCSS in far removed files. It scopes my CSS so I don't have to worry about conflicts with components in other areas. Overall, I can spend more time coding and designing than worrying about scoping and naming.
• Prismic - Prismic is a Headless CMS that comes with some other nice features. It has unlimited API calls, documents, and assets along with 100gb of built-in CDN. The best part is that, because I'm the only user on it, it's free. It connects seamlessly with Gatsby and makes editing markdown a breeze. It even has cool features such as previewing the content before publishing.
• GraphQl - GraphQl provides a very nice API interface for me to pull my content from Prismic. Using its developer tools allow me to conveniently explore the structure of the database. While using GraphQl would normally be too complex to be worthwhile for a small portfolio Headless CMS, Gatsby and Prismic make it easy to set up and build with it through their plugins.
• Netlify - Netlify offered a quick and easy deployment option for this site. I can easily scale my bandwidth and media or add features without wasting time looking for the service. Setting up a deployment pipeline is easy too. Deploying is as simple as pushing to my main branch allowing me to focus on development and spend less time worrying about the build process.