Designing my Portfolio Site using GatsbyJS

✍️

Originally published on my Medium. Before getting into Product Marketing, I ran a Product Design and Strategy Consulting firm called doer.studio with Shyam Kumar. This post is from then.

I have almost always preferred using static site generators over CM systems like Wordpress et al. They give a certain level of freedom, flexibility and performance that I’ve grown to enjoy and now require. Although I started with Site generator softwares like Cactus, Codekit and Hammer, I quickly moved to frameworks like Hugo, Hexo and finally settled with Jekyll. Since there was no plugin support on Github pages, I chose to host my site on Heroku and things worked brilliantly, until I got bored and took it all down leaving just a single page business card site up. This was back in 2015.

Cut to 2018, I am close to wrapping up my Executive MBA course at ISB, Hyderabad and it was time to re-create my portfolio. I went around looking for a suitable platform and since I had been working on creating Design Systems for Javascript based products, I decided to opt for a JS based static site generator — enter GatsbyJS. The internet has been raving about this magical thing built on React, that let people use React Components to build their sites easily.

I had to start off by familiarising myself with the platform and whatever GraphQL was. It took me a few videos and articles worth of learning before I could appreciate the ease of the process and what I’d have to do to get this working the way I want it to.

The plugins like Gatsby Image, Typography.js in the starters are very useful as starting points and although I usually like starting clean, these were nice enough to retain. The templating structure isn’t too complex even for a novice like me.

I wanted to use Emotion for my styling requirements but had to opt for the reliable Tachyons, mostly because I had to get this up within 20 days. The development process was a breeze saving for the times I was an exceptional luddite. Hosting the site on Netlify was an easy decision and the process wasn’t complex in the least.

Screenshot of my old site
Screenshot of my old site

The site has been up for a few days now. I mean, it’s not everyday that your website gets these scores in audits —

Credits to Kyle Mathews and all the other contributors.

🌐

If you liked this article, you might also like some of my other posts linked here — Writing

✉️

I'd love to hear your thoughts on the article, and/or how I can be of help to you via Email or LinkedIn