Design
Figma is my absolute favorite design tool. Here's my design
The final website and the design have a fair amount of differences. Being the designer, developer and only stakeholder meant I could change things on the fly as I had innovative ideas, such as adding more blobs to everything, creating a call to action on each page, adjusting the contact section, etc.
If you want a cool comparison to my previous design language, you can check out my old website, first made before attending any UX courses, or having a design mentor. Learning from others and taking feedback seriously is the only way to see improvements this quickly.
React, Gatsby, and Netlify CMS
My previous website was based on this Netlify CMS starter, which uses React itself and Netlify CMS. There wasn’t much of a challenge to rework the CSS and Javascript to suit my needs, and I hadn’t learned much.
With my new site, I wanted to be as ambitious as possible and break new ground, but stick to JAMstack. My goal was to learn the basics of React, JSX, and to use a popular framework for React. I settled on Gatsby.js due to it being recommended by Netlify, it’s popularity beyond Netlify, and the use of GraphQL - something I’ve heard about but never really took a stab at it as someone who was a primarily PHP/WordPress developer.
I followed this super useful tutorial in addition to Gatsby’s and Netlify’s documentation, and I was on my way forward.
Anime.js and SVGs
I wanted this website to feel fluid and constantly shifting, and I knew animating SVGs would help accomplish that feel. I searched codepen.io for some inspiration, and I found this amazing pen using Anime.js. I was instantly hooked and I decided that it would be the basis for my new site. Recreating the effect in React, using an Anime.js component was a major learning moment for me. The transforming blob shapes started to proliferate through all of the pages (hopefully not too much), and I made use of the blobs.app website for all of my shapes.
After a lot of growth, experimentation, and challenging myself, I have a website that I'm finally proud of.