I recently published the fourth version of my portfolio jemimaabu.com.
With this version, I tried to make the code as performant and accessible as...
For further actions, you may consider blocking this person and/or reporting abuse
Cool website Jemima! Doing multiple color themes was a cool idea. Have you thought about having a different theme based on the system preference? The fade in animations are cool but are a bit slow when trying to scroll the page fast.
Thanks :)
Yeah, I'm currently setting the default color theme using the
prefers-color-schememedia query so it's based on the system preference, unless you select a different color scheme which is then stored in local storage.The fade-in animations are set in a throttle function of 250ms to reduce the number of times the function is called while scrolling.
Hope that clears things up :)
Hello Jemina. Your website is very nice. Also, this article about your design process is very well written. Especially the parts about a11y are very useful to me, so thank you and great job! 👍
On your optimization arguments: I totally share your thinking there about minimalism and staying out of a framework (Vanilla JS). But a recent experience thought me a bit otherwise. In Lighthouse Chrome, a page of mine hat a perfect 100 in performance, and then I tested the same page on web.dev/measure/ and it was just 60-70 😲
With Gatsby 3 and Next.JS 10, I can get in the 90-100 there, but I have actually no real clue how to get there myself 😅. It has to be optimized SSG with build+asset pipeline + image optimization capabilities of those frameworks that make it happen. There are just so many mistakes to make if you have to reinvent those things yourself.
Next Analytics additionally gives you this thing "Real Experience Score", that tracks performance metrics of your real visitors over time. Nothing can beat real data like that and setting up something like this yourself is very hard and a lot of work.
Lighthouse also changed weights (web.dev/performance-scoring/) recently, so the local Lighthouse can't be assumed to be stable across Chrome versions.
This all shifted my opinion from "Stay unopinionated to optimize myself" towards "those things are way too much for me in reality and subject to frequent change, I probably shouldn't optimize myself at all and let frameworks do it". Also, a framework like Next.JS gets real-world feedback from companies like Netflix, Hulu, Twitch, and many others and can make things better based on that. It is just very hard to beat all the resources that flow into such frameworks with your own smarts.
I only use local Lighthouse to get in the right direction during development, but as a final argument about site performance in terms of user experience, it's far from enough in my opinion. You are right that just the idea behind the score matters (which is true for every single metric that exists) which is great UX, but achieving it for real is something very hard.
On a personal portfolio site, it probably doesn't matter that much though, and might be overkill. But maybe those considerations can be helpful for other projects you build in the future.
Thanks for the feedback :D
Yeah I was trying to keep things simple with my portfolio but I'll definitely look into your suggestions for my other projects.
All the best :)
I highly recommend switching to mobile check on lighthouse, it will show more feedback on the page:
googlechrome.github.io/lighthouse/...
Hello Jemima, I like all your portfolio versions especially the last one, It's amazing !!
I have two comments,
I have visited your website.
It is awesome Jemima. I love it
Great job, congats 👏👏
Great content! I read some of your other articles as well, amazingly well written and very helpful. Thank you! 👏
Thanks, glad you enjoyed it :)
Not a front-end developer, but I like the blue color combination on your portfolio.
It is definitely something I will steal for mine...
+1 for Vanilla JS 🤩
Amazing site! 👏🏻👏🏻👏🏻