Alex Winder Website Redesign

Although I had a fully functioning website, over the years it had become dated and wasn't making use of modern features which had become available since the last time I had built the site. Therefore in February 2020 I decided to do a complete rewrite and redesign of the front-end of my own personal site to give it a fresh new look and feel, and to take advantage of newer browser features such as CSS flexbox. 

The previous version of the website had been built upon Bootstrap 3, however in the new version I decided I wanted much more control over the look and feel of my site. Therefore I opted to use Tailwind CSS for the front-end framework. I learned about Tailwind whilst browsing various online forums and found the approach of utility classes for CSS very interesting, so decided to make use of it in my own website. Tailwind also had the opportunity to install additional packages which could massively reduce the CSS stylesheet sizes, so this would also bring about performance boosts to my website by making the content much smaller than on the previous version. I also made use of Tailwind's approach to CSS flexbox which allowed responsive design to be implemented very easily and was a nice change when compared to Bootstrap's rows and column approach.

I've always been a fan of icons on website, as I feel that they bring a more customised feel to the site and they give it some character in ways in which you can't achieve using UTF-8 characters. I have been a user of FontAwesome icons for some time now, but in the previous version of the site these had been loaded in with a webfont. For the most part this is fine, however I wanted to make use of SVGs, so in the new version I wanted to migrate over on any part of the website which made use of icons. By switching over to SVG it provided 3 very significant benefits, firstly as the code is on the same page or located in an SVG spritesheet this reduced the number of requests to the web server, speeding up the response times as requests to a webfont was not necessary. Secondly as SVGs are drawn directly by the web browser this meant that they could scale perfectly no matter the viewport size. Lastly, as I was using Tailwind for the styling this meant that I could very easily customise the SVGs using utility classes to make the icons flow well with the page. 

The backend of my site was built using Laravel and I felt that there was no need to change this as I was happy with everything it provides, however I did take the opportunity to update it to the latest version and to take advantage of more of the features Laravel has to offer.

As the previous version of my site used the Bootstrap framework, it also required jQuery. However as I was looking to achieve a new look and make use of new technologies in this new version I decided not to use jQuery, instead I opted for Vue.js. My decision for this was guided mainly due to my use of Laravel, as Vue.js comes almost pre-installed with Laravel and you can very easily get it running on your website with very minimal effort. Therefore for sections of the site which were dynamic or would benefit from specific features were done so by integrating with Vue.js.

During the update of my site I have found that Tailwind is far more powerful than I originally thought, and for websites which would benefit from a more customised approach I will consider it as a very strong option. I also learned a considerable amount about Vue.js, as it is a framework which I hadn't delved very deeply into before this project, despite being aware of it and it's significant growth in the JavaScript community. I found it to be very intuitive and plan to learn much more about it in the very near future.