a scene of a bathtub

Allo

screenshot of my old website screenshot of old website's ugly header images taking long to load on my old website screenshot of Google's lighthouse performance scorer for my old website

This.Portfolio

Creator: Augusto Mota Pinheiro
Start Date: 17/01/2021
End Date: 01/02/2020
Medium: Tailwindcss | Browserify | Node.js | Others

I wanted to make this website to replace my old one for various reasons: first and foremost, my original portfolio was made with Mobirise™, a website building platform based on Bootstrap 5. Although a very easy platform, it was super buggy and not very open to customization (notably the forced white header at the bottom of each page, 2nd picture). Not only that, but as you can see from the 3rd and 4th pictures above, the site's performance was terrible and I wasn't at all satisfied with it.

I decided then to create my own website from scratch as efficiently as possible! Starting off the project, I was aiming for 3 things: performance, ease of maintenance and mobile-friendliness. Already understanding pretty well how HTML5 and CSS3 worked, I looked for some tools and techniques I could use to accomplish my set goals. After some research I found out a couple of things:

  1. tailwindcss is a great option to get into web design for someone with my Xamarin.Forms experience + it's not a shippable framework, so more performance!
  2. .webp is the format to use for web images, it has an incredible compression ratio with little visual quality loss.
  3. going all out on a entire framework like React, Vue.js or even Svelte is overkill for my current use case, so jQuery is just fine, despite its age.
  4. finally, to optimize my .css and .js files (as well as jQuery & others), Postcss & Browserify are the ideal tools, once again, for my use case.

Having that in hand (and armed with this TailwindCSS tutorial by The Net Ninja), I got started!

After 2 weeks of work (with school starting and everything), I finally finished! And in my opinion, I achieved my goals pretty well :D! Everything I built is solid and maintainable all while being peformant and pretty to look at!

a screenshot of the new scores of my website

Finally, I also wanted to have the source code of this entire project open for anyone to see (and possibly suggest improvements here or there), so I uploaded everything on Github :) I setup 2 Github Actions (sitemap generation & copying the public folder to an external repository) to automate the deployment process to Hostinger, so I can just push and everything will be deployed automatically!