Portfolio

Webinar Geek

Business point of contact site

React
Gatsby.js
Storyblok
TailwindCSS
Typescript
GraphQL

I migrated a business's website built with WordPress and Bolt over to a Gatsby site alongside StoryblokCMS. I used Tailwind and Twin.Macro for the stylings to create clean components and something that can be easily understood and passed on.

The code is built using robust typescript and all the Storyblok components are automatically typed making it a great development experience.

I also made use of Gatsby functions to trigger some extra code when content was updated including creating redirects and indexing the Algolia search platform.

The site went through rigorous testing and I worked closely with other developers and content editors to make a fully functional, fast and clean Gatsby site.

Annie Frances Art

Artist's portfolio and store

React
Gatsby.js
GraphQL
Contentful
Chakra-UI

This site features an artists paintings and also has their Fine Arts America store embedded into it.

It is built with Gatsby, styled with Chakra-UI and uses Contentful so the artist can edit her static pages.

The site was quick to set up thanks to the store already being in place and Chakra-UI helped get the required styling to meet a tight deadline.

ISJ Photography

Photography portfolio

React
Gatsby.js
GraphQL
Bulma
Netlify CMS

This is Gatsby site for a photographer and uses Netlify CMS so they can easily edit content on the pages as well create new pages/blog posts from templates I have created.

I used Bulma for styling which really helped creating a responsive design and responsive photo galleries.

Gatsby's Image API was also invaluable to create lazy loaded, blurry images to hasten the percieved performance of the site.

Werkbaan Oost

Dutch information site

React
Gatsby.js
GraphQL
DatoCMS
TailwindCSS

This project was converting a site from WordPress to using a stack including Gatsby, DatoCMS and TailwindCSS.

The DatoCMS structure is set up with reusable blocks which are rendered by Gatsby components. This means the content editors can easily use the blocks they desire and no content in the site is hard coded.

This was the first time I used TailwindCSS and I had a much better experience with it than using Bulma.

Karen Worrall

Writer's portfolio

React
Gatsby.js
GraphQL
Contentful
Chakra-UI

This is the portfolio website of a writer featuring their services, selected works and testimonials.

I built the website from the ground up, writing all the JavaScript and CSS and implemented third party React libraries.

The website uses Netlify CMS as a backend to load information for the portfolio, testimonials and services section so the client can easily add or update the content.

Night Health Worker Box

WordPress ecommerce

WordPress

On this website, you can buy a subscription for a monthly care package designed for night health workers. The website uses the Genesis framework and implements the Subbly platform to handle the e-commerce side of it.

I have also taught the client to use WordPress so they can update the website themselves with new pictures every month.

Breaking Bad Quiz

Next.js Quiz App

React
Next.js
Chakra-UI
Fauna

This is a fun Breaking Bad quiz app I created in Next. You have to guess whether each character dies by the end of the series.

I have integrated it with Fauna to keep track of how many people got each answers right and use local storage to keep track of the user's progress.

I used the breaking bad API to source the questions and pictures. Thanks Timbales.

© 2023, Built with Gatsby and Contentful