Guardian

I built this site from scratch in React with GatsbyJS for Worktools, a cyber-security start-up based in London. I worked with a graphic designer for the designs. The site includes connection to the Google maps API an email notification back-end with GetForm.io and custom CSS animations.

WHERE

Guardian logo

STACK

  • React
  • Gatsby
  • Tailwind CSS
  • Styled Components
  • AWS

Project Purpose and Goal

Worktools has built a web app and desktop app in React and so wanted a modern website in React to help with their VC funding round. They wanted it to be in React so as to be able to possibly reutilise some of the components across their other apps.

Webstack and explanation

I used React with GatsbyJS, a React-based, GraphQL powered, static site generator. I used Tailwind CSS, a utility first CSS framework, for styling. It was deployed on AWS.

Lessons Learned

I really honed my responsive website skills in this project. It was the first time I'd used CSS grid in addition to FlexBox which I am more familiar with. I also learnt a lot about CSS animations I am quite proud of the shield, target and heart animations which I built using SVGs provided by the graphic designer (see below). I also was able to improve my skills in using Tailwind CSS and Git version control and of course React.

IT Health

Know exactly when IT issues may be on the horizon

Compliance

Easily manage your NCSC Cyber Essentials and GDPR compliance

Cybersecurity

Understand the threats that your users and devices face

Other Projects