In today's web development landscape, overall performance is supreme. That is where static site generators like Gatsby shines. It was my first encounter with Gatsby, so I spent a few days digging into the docs to understand how the APIs fit together. I particularly like the powerful GraphiQL tool that exposes the GraphQL data layer. It made organizing and piping data into the website a breeze.
Designing the UI was a mix of hurdles and fun. I did some UI/UX research and took clues from Behance and Dribble. Narrowing it down, I checked out some developer portfolio websites and got inspirations from caferati.me, giftegwuenu.com, taniarascia.com and Overreacted.io. With the bits and pieces in place, I made the design with Adobe XD.
Creating the site
The first thing I did after scaffolding the app was to organize the structure of the project directory. I wanted the site to be up in the shortest possible time. The high points for me making this site is the little form validation. There are features I will include in subsequent iterations.
Here are the tools and technologies I got involved with while building this website.
- CSS Modules
- Adobe XD: UI Design