Building My Portfolio from Scratch Pt. 1

Hi everyone, this is my first blog post!

Since I started in the world of web development in 2017 I wanted to do a portfolio, but why? Because it summarizes who you are at a professional level showcasing your best projects and some information about you.

The thing is that I wanted to do something different than before, I made some attempts to do a portfolio a year ago but it was really quirky with zero responsiveness and without a solid design, so I told myself to do something different for this version.

I've selected Github Pages as the host for my portfolio website, it is pretty easy to set it up. To make it mobile friendly and also easier to work with the CSS, Tailwind CSS is my best friend, quick to set up, and good for simple pages. I wouldn't call my design minimalist but I like to keep things clean and tidy.

Let's talk about performance:

I've done some tests with Google Lighthouse, at the beginning I had some problems with my website going from non-optimized images, CSS not minified and SEO related issues. Here are the results after some tweaks:

Desktop version

Mobile version

Short Performance Tips that I've learned:

Use SVGs instead of favicons, this will reduce your loading time plus you might need a couple to load not the whole file.
For SVG optimization and converting it into a tag I've used: Jake's SVGOMG
Minify CSS, Duckduckgo has a built-in minifier when you search the word Minify CSS.
Don't forget to add ALT text to images, this will help improve your SEO score.
Optimize it for mobile users.

Some Notes

This portfolio is not yet fully done, it is missing the most important part which is the project showcase and I will be talking about it in part two of this series.

Another important note is that the mobile version works perfectly on my Oneplus 7T using Chrome or Duckduckgo browser, but when tested on an iPhone had some alignment issues which I will be focusing to fix soon.