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 ?
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)
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?
prefers-reduced-motion
andprefers-color-scheme
.I'm still working on improving it .
Thank you so much for sharing really helpful tips I will check them out :D
Hey just a heads up, I went to your portfolio website. I just wanted to offer a suggestion that might've been missed. At the bottom of your portfolio in the footer, more specifically the direct child of the "list-inline-item" element, it seems that the specific element that has the :hover effect does not share the same border-radius as the background color. This difference results in these :hover effects changing the background color while the user's cursor can be located at any 4 of the corners of the element outside of the background color. Just some thoughts, but overall pretty great portfolio! Have a great one
Many thanks for reporting the issue ! Issue has been resolved now. 👍
It always feels good to see scores like that go up! What do you feel was the hardest part of the process?
Yes ! The hardest part was to configure webpack and purge for remove the unused bootstrap css
I love the animations that you have!
Thanks 👍
Great job, looks incredible.
Thanks!
Hello great to see the performance boost 👍
Just wanted to know if you noticed a SEO impact when using those tools
I've not seen any negative impact on SEO.
SEO score has increase after using these tools.
For SEO optimization you can follow this article.
Some comments have been hidden by the post's author - find out more