Optimised the code for my portfolio

I have updated my portfolio as part of May 1 reboot. This is a challenge set up by Tobias van Schneider. I didn’t get showcased but this was a great initiative to push me to update my portfolio.

My portfolio website on lifeofmle.com

From a design and layout aspect, nothing much has changed. What has changed is the everything underneath the hood.

When I first started with my portfolio, I bought a theme and put my content in. I got interviews and jobs — it got the job done. Since creating my first portfolio, my web skills have improved by learning from my colleagues. This portfolio update is an application of that knowledge. I wanted to style the page myself and I wanted to improve the load time and finally get rid of the very unnecessary preload animation on the page.

Things I updated

  • Cleaning up the CSS. Prior to the update my site required requests for 4 CSS files. I didn’t know how to change the CSS because there was so much of it in the theme and hard to edit. I am a huge fan of Sass (more specifically SCSS). The variables, mixins and nesting makes it easy for me to understand the structure of the styling. By doing everything from scratch, I could focus on only the styling that was needed. I design desktop first but when coding it is always easier to do mobile first because everything stacks by default (but there is more to mobile design than just stacking things)
  • Efficient workflow. Using Sass requires you to do preprocessing of the SCSS to convert it to CSS. This requires setting something up to do that for you. I used Gulp because of the ease of using it with npm and plugins. I used Browser Sync to automatically update the page whenever I made changes to the Sass or HTML files. This plugin did not require any extra browser plugins like Livereload. You can check out the setup here on GitHub. Winning!
  • Maintaining changes. Working with GitHub alone, there are no real rules on how you should push and commit code. This year I got taught why and how the Git Flow works. I applied this process here by using feature branches and merging by via pull requests.
  • Using Susy instead of Bootstrap for grids. I learnt how to do responsive web design thanks to Bootstrap. It was straightforward and simple to try things out. Only critique of it is the use of classes in the markup to define how it is behaves at different breakpoints. Since I am using Sass now I could use Bootstrap Sass version but all I really needed ws the grid layout. I thought I would give Susy a try. It is a lightweight responsive grid library. It does the job, easy to use. I recommend it.
  • Reduce JavaScript usage. My portfolio a month ago required 11 JavaScript files. Why?!? It is only a portfolio website. I didn’t remove JavaScript completely because I like the scroll to effect and the simplicity of using JQuery for manipulating states of divs. I reduced the amount of JavaScript enough so that it could be used inline with the HTML code thus reducing a request. In the future I could try to remove JavaScript completely and use CSS animations.
  • Optimise images. Images take up most of the page weight for websites. I thought that web servers would serve the optimal image to the client. Haha so naive! Without a CMS or a server managing image requests, meant that I had to optimise the images myself. You can use Photoshop/Sketch to save the optimise images or use a tool to optimise the image.

A good web page is both well designed and performs well. I believe I still have a lot to learn in both areas but this is a step in the right direction.