In order to challenge my design skills and improve on my React knowledge, I created my personal portfolio website using Gatsby.js, a static site generator. To see the website, go to Personal Portfolio.

I started the journey of creating this website by experimenting with some color palletes and layouts using Figma. It allowed for a range of customizable design layouts where I could iterate quickly see what works with what. I settled on the purple and mint green color because I thought it worked well with each other. I then decided to seperate my portfolio by category, with web development and machine learning being seperate in order to logically seperate what people would be interested in.

With the rise of TailwindCSS, I decided to switch off of Bootstrap and use it for this project. It has been a while since I have switched CSS/UI frameworks so I didn't know about the rise of tailwind but overall liked how it was very functional and customizable. I found TailwindCSS to be a nice abstraction of raw CSS in a much more readable way. Overall, the learning curve was still there because of developments like CSS Grid and Flexbox which I missed out with because of my forays into mobile development but I was still able to make stuff happen.

With a static website, there wasn't much frontend development aside from the design. With that said, I was still able to get a good handle of React functional components and how they interact together. In addition, I did make use of React props to pass data down to children components and React state and hooks to manage the state of the navbar and handle when its in mobile or desktop mode.