Portfolio Improvements

Since completing the first version of my website back in November, I have made a few changes to improve the overall experience. The changes that have been made are mostly focused on performance enhancements and usability fixes.

iPhone X with my website open.

Usability

I first looked at how the usability of my website could be improved. Whilst reviewing my website, I discovered that at the end of my project posts and blog posts, there was nowhere for the user to go, as I had no 'top' button and no links for the user to click, meaning they would have to scroll all the way back to the top. This was particularly an issue for blog posts, as these could get quite lengthy and would mean a lot of scrolling to return to the top. To overcome this issue, I implemented a 'View More Posts' section with links to more of my blog posts, to encourage the user to continue reading more of my posts.

New View More Blog posts section on my website.

Performance Enhancements

I also made some performance enhancements to my website. My CSS was already minified using the grunt-contrib-cssmin task with Grunt but my JavaScript was not. I found a highly useful package within Atom called atom-minify that allowed me to minify my JavaScript files to a new minified file each time that I saved. This meant I could keep an editable, non-minified version of my scripts to edit whilst having a minified version for the production version of my website.

To further enhance the speed and security of my website, I used CloudFlare. Cloudflare provides a content delivery network (CDN) service to optimise the delivery of webpages to get faster loading times. To do this, I created an account on Cloudflare and then updated my domain nameservers in 34SP to the ones provided by Cloudflare. This is super simple to do yet provides a lot of benefits, such as automatically applying optimisations to webpages. Cloudflare works by sitting between the visitor and the website's hosting provider and acts as a reverse proxy.

To improve accessibility, I also added titles to the SVGs that I had used throughout the site. The title tag provides a short description of the SVG, improving accessibility for impaired users.

The previous version can be seen here.

Future Plans

I intend to write more blogs posts in the near future, but as my project is currently static, I have to manually create a HTML file every time. I am going to look at either putting my website into a content management system like WordPress or a static site generator like Jekyll so that I can create new blog posts from markdown files.

I would also like to make improvements to my project pages to include more in-depth information about each project that I have completed. If I decide to use a content management system, I would also like to create a page builder type setup to quickly put case studies together.

View More Posts