McInnes Design

A personal portfolio using React, built on Gatsby.

Work in progress, currently building out components - Stay tuned for more updates.

Storing 'Username' to persist across website

React form component, using React Context. This allows it to be applied to different components without having to manually pass it through each layer of the component tree.

Enter some text below, the header menu will maintain the text across all pages. Because text is stored as it's typed - there is no need for a submit button. All you have to do is remove the default behavour of the HTML form so it doesn't unnecessarily reload the page.

currently logged in as: Guest

Storing component data - Colour Picker

React form component, using React State. Form input is stored in the component and passed to a CSS variable. Submit the form without any input to select a random colour.

your colour: random

API Fetch Test

Gatsby allows data to be retrieved either at build time or render time. This is acheived using the JS Fetch API. For build time data, Node and GraphQL is required. For render time, the standard Fetch API can be used.