AlexEdwards-co Case Study

18 hours ago : 2 min read

The Problem

Exemplifying projects and influenced study without having to be overly technical or rely on fully-operational sites.

There are many cases where the project results are the same but done differently. E.g. A Calculator in different technical languages, or flexing different muscles such as design / UX, Front-end / Back-end.

The Solution

A website treated as a well-written manual. Able to point towards projects of various capabilities and technologies. A centralised location for both experiments and documentation.

Requirements: CMS integration | Fully WCAG Accessible Capabilities: SEO | Project hosting | Documentation

Results

A well-documented website with the adaptability to add modules and leverage templates while remaining fast, lightweight (Under 700KB inc. images), and to a high standard of accessibility.

Lighthouse Report for Alexedwards-co


There are so many reasons to have an online portfolio, but not having excellent design skills (Something I'm working on) the exciting work can be lost within the code. Adding the ability to pair written-word to work can help follow the journey from start to finish and how we make decisions. I also don't want to have to commit changes to the codebase to update or add a new page; something that has become a fashion with the likes of Vue-press. A Headless-CMS performs that function, which also influences the front end architecture.

Like all sites based about clarity and documentation; the front end needs to be lightweight but interactive. As the site evolves, it should be compatible with the same content model, and pages should update auto-magically. A Server-side or Static Site Generator would be optimal for this, comprising of page generation, caching, and that auto-magic.

All of this considered, here is the proposed stack:

Contentful: Content modelling and CMS

Gatsby: React-based SSG for site generation

Netlify: Site hosting and integration with others in the stack.

Gatsby is a significant factor here, as choosing to go with React, it landed between NextJS and GatsbyJS. Choosing the latter was for its SEO optimisation and incredibly lightweight pages. NextJS has seen significant improvements as of late, however, would also determine where hosting and server-functions would reside if running as Server-side rendering.

One benefit of Netlify + Gatsby is Incremental Building. Currently, in Beta, it allows Gatsby to keep a cache and only build what has changed; significantly reducing build time.