It was like a season of portfolios a while back and everyone was making a new one. This was the time for me to redesign my own portfolio which was hanging there from forever, with the bare minimum design you can think of.
Before redesigning I need to think about a design that can look good. I looked at @alispitel's portfolio It helped a little, actually It is a great design but I wasn't getting any way to make a personalized version of that design. I also saw @benharper's portfolio It's unique on its own. The thing to notice after looking at a lot of portfolios was most of the portfolios have at least 4 sections [About, contact, projects, social]. They were using GIFS, Animations, Canvas too.
After that, I looked at the landing pages of the website which are good at designing. They were heavily using illustrations and I liked them too. Soft colours, catchy headline fonts and having good illustration/image were the takes from them. I now have a blurred picture in mind of that is gonna to be but a lot was still unclear.
At this time I clone my repo and started trying out new designs to find out what works. After making it in different ways and but I wasn't getting a catchy design. I have made the 4 sections in HTML and design was still ugly.Finally I came to https://cssgrid.io. If you don't know about it, It's a landing page for free CSS GRID course made by fabulous @wesbos. I took the idea of using SVG + colour for the hero. I even used the polygon for that image.
I have made the design now and it just needed small tweaks and some animations. I used an animation on my name and used a custom font from google fonts.
I used font awesome for social icons. Then I used custom list-style-type (😫 only firefox supports it.) rest get a good old numbered list.
Finishing all that stuff I now need to get out of my primary browser and run the page on different hosts and browsers to see how it works across platforms. I tried it on chrome Android, Edge, Firefox and It seemed to work fine except to the polygon not supported in Edge. I reduced padding for smartphones.
Now its done and I wrote a commit message and pushed it. see it https://itsjzt.github.io/