Welcome to my portfolio website repo

I hope this repo is useful and you like what you see.

Technologies used

I've decided since it's a static website nothing more, why not get back to the basics.

So I used the following:

1- Good old vanilla HTML

2- CSS

3- and of course a little bit of our only friend Javascript.

To make this simple website load reasonably fast, I took the following steps using the awesome postCSS tool.

1- Minified css files, using cssnano postcss plugin.

2- Combined css files in a single file, to reduce the http requests, using postcss-import plugin.

3- Compressed all the pngs and jpgs to a reasonable quality.

4- Used images in webp format, which is not supported on all browsers, but Safari and Firefox are getting there.

Using gap with flexbox is not fully supported by all major browsers (I'm looking at you safari and firefox on ios.) which wasn't nice at all because you'll have to replace it with margins and couple of lines of css.
The same support issue I mentioned above about webp format.
I got around it by using <picture> element with <source> that has a srcset attribute of webp version of the image and an <img> element with jpg format as a fallback.

Example:
```
<picture>
 <source
 srcset="./images/2228176.webp 320w" type="image/webp" />

  <img src="./images/2228176.jpg" alt="mobile app concept" class="project__img" loading="lazy"/>
</picture>
```
Firefox and Chrome have different implementation of image native lazy loading. Chrome is more sensitive than firefox; I mean smaller threshold for the off-screen images which make it load the images earlier.
Please check this link for more details on chromium implementation.

I really had fun coding this project and I learnt a lot.

Huge thank you to this amazing community