I have literally redesigned my personal page a hundred times. I made my page back in 2017. I always wanted to have a personal page but the lack of access to servers and a domain restricted that, until I found GitHub pages. Back then I didn't know what a responsive page was, I was just diving into the world of Web development. I did find about Bootstrap but I jumped the gun and started using it right away. After a few days and endless visits to StackOverflow I was finally able to get my page on board.

Though, it was just a basic page. I wanted to make it awesome but I didn't know what I was missing. It was anything but perfect. It has been 2 years since then and I can say that my page, even though not perfect, is good enough. It's responsive, looks good and it's fast.

I believe any page should have these 3 things.

Responsive, Fast, Beautiful

There are many ways to do that. I learned it the hard way that it's not just my code, sometimes we need to use libraries to make our work easier and the page perform better.

Use a library to load images faster

I've always admired the way images load on Medium, and I really like it. So one day, I just wondered how I could do something like that in my blogs and as it turns out there are libraries for that.

The one that can get the medium effect, (which I use BTW) is called progressive-image.js. What it does is loads a low quality version of the actual image when the page is loaded and later, as you scroll through the contents, it loads the rest of the high quality images on the background. Isn't that nice? Go give it a shot, it's super easy to use.

Source: José M. Pérez's Blog Post

Use illustrations instead of images

Don't know what I'm talking about? Have you seen those pages that have those really cute looking human figures that indirectly convey the message. HINT: Look below.

Still thinking? These illustrations can be got from sites like unDraw or freepik. The ones available at unDraw are completely open source and they can even be downloaded with the color you like. freepik does give free images but with the condition that the author will be given credit wherever the image is used.

Learn to use Bootstrap

If you don't already know this, Bootstrap has a really good documentation. I was damned when I found out the amount of flexibility it gives. I am pretty sure that after redesigning my page so many times, I can safely say that the amount of css I wrote in the beginning has reduced by about 70% after learning about the different features that Bootstrap has.

I'm not saying that you need to read the whole docs but instead atleast the most used ones. Or we can always keep searching as we keep building the page, that's the approach I take nowadays.

Anyways, if the solution is not available in the docs, StackOverflow always has it.

Use custom fonts

Fonts are an important part of the design. What better place to get fonts then Google. Google has a whole site dedicated to fonts that can be used for free.

I'm currently using Roboto Condensed for the title of the blogs in my page. Experiment using different fonts on your page and keep trying new designs, you'll find the right one. I started with some really weird fonts in the beginning and as I kept trying new ones, I kept changing them.

Start using SASS

It's not hard. It's really simple and it's not necessary to know it all to actually use it. Use for the small things and gradually learn to do the different things. Anyways, if you have a programming background, which most people reading this post probably have, it's really feels awesome to use it.

I always thought it's a lot of work to use SASS and I can say I've never been so wrong in my life. All we need is a converter to convert the sass files to css. I use SassC which I preferred to use because it's written in C and being a C developer I always have this feeling in the back of my head that C is blazing fast always.

Simple is Beautiful

I used to think making my page feature packed will make it awesome. That's not true all the time. Yes, having features, a lot of them is a happy addon but making it messy with features is not a good approach to designing your page.

Try to keep it simple, use all the above points provided, keep it simple. Make awesome, but small, things. If you want to show people how good a developer you are, design the page such that, it's simple and yet has a lot of features. Features that users will find out as they scroll through the page.

Lastly, it's important to understand that, It is NOT necessary to show all the skills you have. While designing the page, keep in mind the users perspective. You don't wanna brag about your skills and at the same time you wanna make sure that they know you're good.

This last part is the one that people don't understand, mostly newbies. Finding a way to beautifully present yourself such that people love it and don't think you're too much at the same time is a skill you'll develop with time, with a lot of redesigns of your page.

Have a Happy New Year guys and try to implement these few points while designing your page and you'll see how you feel good about your page. Good Luck 😉

Posts for redesign

Things to do before redesigning your personal page