Amidst the ongoing lockdown, I decided to completely redesign my portfolio, which is just a single page website written in vanilla HTML, CSS & Javascript, displaying all my projects in a grid layout.
At the same time, I came across GatsbyJS, which claimed to simplify the process of building static sites. It was the ecosystem of Gatsby that was fascinating and the modularity that can be achieved by adding plugins felt like a great developer experience. For me though, the most important aspect was its documentation, which was simple to follow and organized in a developer friendly manner. The best part yet was, Gatsby is totally built around React, which meant that, I can further explore & improve my React skills while building my portfolio.
To get started, I wanted to know the inner working & setting up of the developer environment in Gatsby. Since, reading documentation wasn't enough for me, I headed on Youtube & first in the results was a Gatsby Bootcamp by Andrew Mead. After watching the whole bootcamp, my sight was clear and I was ready to start working on the portfolio. Thanks to Andrew Mead for such an in-depth & informative bootcamp.
Before jumping right into the coding part, I needed a clear picture on how the portfolio should look.
Figma helped in building the mockups of the design which were going to be implemented. The design being decided, it was time for setting up the developer environment.
To shave off some time, instead of manually downloading all the dependencies, I decided to go with one of the templates provided by Gatsby. That being done, it was now the matter of building individual components & fast forward 2 weeks, it is now pieced together into a functional website.
I would like to mention about the technology stack which made the development of this portfolio much easier & fun to work with.
→ Technology Stack
→ Assets
- Font: Inter
- Illustrations: ManyPixels
console.log("Success!")Thank you for reading. Make sure to keep an eye for the upcoming articles.
Stay safe & stay healthy.