Redesign my portfolio! It loads very fast ⚡

#javascript #alpinejs #css #webdev

Hi, everyone!

This is my second attempt for writing a blog.

So I learned web development around 2 years ago. I decided to build my portfolio using Bootstrap4. my old portfolio used to load in 3.5 seconds and had a performance score of 69. most of the content on the previous portfolio was static means I have to change HTML to change my project listing. so I decided to rebuild (and redesign) my portfolio site using AlpineJs and Bootstrap4

After 5 days of working non-stop, I've finally migrated my site over to AlpineJs! You may notice the site is a little faster:

Why AlpineJS ?

Starting with AlpineJS

Thomas Toledo-Pierre ・ Jan 3 '20 ・ 7 min read

#javascript #alpinejs #gulp #webdev

You are right: why would you bother learning, AGAIN, a new tool while there are so many others, with such huge communities around them?
Well here are a few pros:

you get to follow the evolution of a library from the beginning, and, why not, contribute,
while React, Vue is acclaimed by a lot of developers, AlpineJS presents a much lighter way of doing front-end Web, much closer to the basics than today's framework.
I have a data source as a JSON file so loading data from JSON and parsing in HTML is easy in Alpine. (NO MORE STATIC CONTENT 🎉)

How I optimize speed

Eliminating render-blocking resources( using async and defer)

<link rel="stylesheet" href="build/all.css" media='all' />

<script src="build/app.js" defer></script>

Used Purge to remove unused css.
Using CDN to serve static content with good cache policy
I used netifly CDN to serve static content.
Used webp images for better compression ratio
Used module bundler(Webpack) to minify and bundle files

Here is the link to my portfolio.

Here is the link to Source Code github.

I'm also planning to add dark mode on site.🌙

would love to receive some feedback on my portfolio site🍍

Did I miss anything? Let me know in the comments :)

Thank You!

Top comments (12)

Paul (hxii) Glushak • May 16 '20

Great job on the improvement! Always glad when people make the effort to better their craft.

That being said, while this may be an unpopular opinion and I hope you'll take criticism, but.. why?

Why load 1.1Mb of resources for one page? Your content (well, HTML, rather) is 0.8% of the total request. Render blocking and heavy resources aside, imagine not everyone has fast internet but is interested in your work. It takes your page about 15 seconds to load on slow 3G.
Why keep animations playing after the initial load? If you scroll back and forth it's very annoying.
You should check out prefers-reduced-motion and prefers-color-scheme.