My portfolio app built on the JAMstack (JavaScript, APIs, and Markup).
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.
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.
This app is currently hosted on a blazingly fast, global CDN. Continuous deployment integrated with Github for easy updates and deployments.
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.