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
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.