Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 16, 2020 01:46 am GMT

Redesign my portfolioIt loads very fast

Hi, everyone!

This is my second attempt for writing a blog.

Alt text of imag

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

Alt Text

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:

Alt Text

Why AlpineJS ?

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

<link rel="stylesheet" href="build/all.css" async /><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!


Original Link: https://dev.to/pushpak1300/redesign-my-portfolio-it-loads-very-fast-nn4

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To