Blog Redesign

100DaysToOffload 

Blog Redesign

This blog got a refresh during December, while switching to Eleventy. Back then, I was quite happy with the design of the whole blog, but as the time went by, it felt plain and boring to look at. There was no personal touch involved apart from the blog posts that would make it stand out. So, I set out to find another SSG to switch with so that I can focus on restructuring and designing the blog with a fresh environment.

Initially, I was able to recreate the same blog in some SSG but, I stuck with Eleventy as all the necessary stuff was already done and the only thing I which I didn't like was the design. I thought I would give it a try with some personal CSS touches after I get some free time, but, luck had something else planned for me.

You see, my domain got expired and that alone put the whole project on hold until the things got sorted out. Fast forwarded to May, the redesign is finally finished (hope so) with some new things added and some removed.

Performace Improvements

Measure page quality

With the new design changes, the performance of the blog has improved. The blog can be accessed even on a slow 4G connection in less than 30 seconds (tested in my local area, where speeds are of 2G for 4G). There are only two places where JavaScript is used, a music widget on the homepage and search page. Even the page size is reduced to a certain extent.

Showing Waterfall

Music Widget

Music Widget Screen Shot

This is something different I have done so far. It fetches the current song which I'm listening to from Last FM page and shows it in a nice widget like fashion. Wait! There is more to it. If the song artist is present in my favorite list (hard-coded) it would show a heart emoji besides the artist name. Doesn't it look cool?

Good Bye, Comment Section

I had to say goodbye to the comment section. Since I don't receive any, and it takes space in the page and uses JavaScript. If I change my mind in the near future, I would bring it back.

Color Scheme

Color Scheme Example

While doing the redesign, I switched to a lot of color schemes to try out. Preferably purple themed ones, but I found most of them hindered the readability of the blog. So, I ended up with a randomly generated color scheme which worked out for me.

Old design

Compared to the old design, the new one looks a bit more minimal, compact and easy on eyes.

The whole redesign phase might not look huge to some people, but for me, it's a platform to express my feelings in a creative way. I agree that my design skills are not that great, but what's important is how happy I'm after this changes. That's all for today, I hope you guys would like the changes which I have made to this blog.

This is the Day 20 of 100DaysToOffload challenge (Round Two)