Last time I worked on my personal portfolio, I was working from a not-so-color-perfect display, with very less knowledge on web development and responsiveness.

This one's different, way different.

The Plan

My Layout Preferences

An ideal website in my opinion would be a no clutter, clean and minimal layout. I also loved presenting data in the form of beautiful visualizations, and realised I could somehow bring these two concepts into my portfolio.

Initial Ideation

I already had a vague idea that I would be majorly having a single focus point on the landing page, either my name in some fancy font / visualisation integration or a well edited image of me with some cool blend / mix effects. Latter was ruled out pretty quickly as I realized these two points -

1. I did not want the viewers of the website to be fascinated by my object-fit: contain skills
2. My photoshop skills were very basic

So cool + minimal visualisation with my name was decided.

Design Inspirations

• Notion
• Super - which had a amazing showcase section with super minimal but effective layouts
• Covid-19 Tracker

Planned Functionalities

1. Dark mode toggle (a necessity in all websites in 2021 in my opinion)
2. Buttons to redirect to social media

Planned Tech Stack

1. React - been using it for more than a year now, loving it
2. d3.js - didn't go for any charting / visualisation libraries as this gave me more power to customise everything
3. react-spring - spring based animations felt so much more natural than timing based animation
4. CSS modules - needed scoping so that I didn't have to worry about naming conventions, but didn't want to go for JS styling libraries as I didn't want any unneseccary overhead.

With all that decided, I started developing the landing page.