mattvox / portfolio

My portfolio built on the JAMstack with React, Redux, and Contentful

Portfolio

My portfolio app built on the JAMstack (JavaScript, APIs, and Markup).

https://mattbliffert.com

Overview

My portfolio was designed not only to feature my work and provide information about myself, but also as a test bed or scaffolding for technologies and work flows I plan to implement in future projects, both personally and professionally.

Technical

This lightweight site is engineered using the JAMstack, relying on React, Redux, and Contentful to produce a fast, "serverless", highly-performant application that is secure, easy to update, and easy to deploy. To combat long loading times, React-Snapshot is integrated into the build process to produce static HTML markup of all pages, which dramatically decreases the perceived loading speed of the app, especially on slower internet connections.

• React is responsible for the front-end, with content being provided through APIs.
• Contentful, an API-first, headless CMS delivers all content, including markdown, as JSON through their API over a CDN. Content is managed through their cloud-hosted CMS. Images are also provided over Contentful's CDN.
• Redux handles all global state management. Redux-Thunk and Redux-Promise middleware is included to provide more functionality to action creators.
• React Router handles routing on the client-side.
• React-Snapshot is added as a final step in the build process to produce static HTML for all relative paths greatly increasing perceived loading performance.
• Styling is provided by Styled Components, with structural elements provided by React Bootstrap.

Deployment

This app is currently hosted on a blazingly fast, global CDN. Continuous deployment integrated with Github for easy updates and deployments.

Development Roadmap

This is v1.0 of the app, but future enhancements are expected to include:

• Move app from its current VPS to a static server with a global CDN, like those provided by Netlify or Surge. Migrated to Netlify.
• Integrate continuous deployment/integration. Using Netlify's CI.
• Introduce a more comprehensive test suite.
• Provide a Case Studies section for the most interesting projects and client apps, with each getting its own "page".
• Rethink and refactor sections/layout for a version 2! There is always room for improvement! :)

This project was bootstrapped with Create React App. You can find the most recent version of this guide here.