krebeDev

My personal website, built with Gatsby and deployed on Netlify.

krebeDev

Project overview

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.

The challenge

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.

Technical summary

Here are the tools and technologies I got involved with while building this website.

  • Gatsby
  • GraphQL
  • CSS Modules
  • Adobe XD: UI Design