docs: add johannacannelongo.com to the showcase

[ethancanne]

Overview

Added a new website to the Sites Showcase page on the Qwik website. This website is the Author Bio/Portfolio page that I created using the Qwik framework for Johanna Cannelongo. This website features a modern and responsive design, taking advantage of Qwik's core features and abilities. I am confident that this website will be a valuable addition to the showcase, as it demonstrates how Qwik can be leveraged to create stunning and functional websites. You can access the website at https://johannacannelongo.com/, and the repository is available at https://github.com/ethancanne/johanna-cannelongo. Thank you for considering this new addition to the showcase. I hope it inspires other users to explore the potential of Qwik.

What is it?

• [ ] Feature / enhancement
• [ ] Bug
• [x] Docs / tests / types / typos

Description

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

I updated the pages.json file to include a new entry for johannacannelongo.com. This change is non-intrusive and does not affect any dependencies or introduce any breaking changes. { "href": “https://johannacannelongo.com", "tags": “portfolio" },

Use cases and why

• Inspires other users to explore the potential of Qwik throught its design capabilities
• Showcases the speed and performance increases of using Qwik through johanncannelongo.com

Checklist:

• [x] My code follows the developer guidelines of this project
• [x] I have performed a self-review of my own code
• [ ] I have made corresponding changes to the documentation
• [ ] Added new tests to cover the fix / functionality

[stackblitz[bot]]

Run & review this pull request in StackBlitz Codeflow.

[ethancanne]

There was a slight error I in the format of the new JSON entry I made, so I committed a change into this pull request which fixes the issue.

[zanettin]

Hi @ethancanne 👋 thanks a lot for this submission 🙏 unfortunately PSI (page speed insight from google) is not yet very satisfied with the performance of the website. you can find the results here including descriptions of what could be improved. in this case it's mostly about the size of the used images. you can simply compress them by using any available online tool like https://tinypng.com/ or any other. I hope this helps to boost the score of the website 🤞

[manucorporat]

Yeah! happy to merge when fixes the perf issues! should be easy! scale down the images. Recommend looking into the vite-imagetools if the images are local: https://github.com/JonasKruckenberg/imagetools/blob/main/docs/guide/getting-started.md

You can optimize and resize the images as part of the normal vite build!

[ethancanne]

Thank you @zanettin and @manucorporat! I appreciate you running the performance test, I'll definitely start working on optimizing those images to help boost the performance, and I'll let you all know the updated score once that is done!

[ethancanne]

@zanettin and @manucorporat, I have optimized several images and files used on the site, which has resulted in improved performance scores. You can view the new performance scores here: https://pagespeed.web.dev/analysis/https-johannacannelongo-com/w2adrdd7qw?form_factor=desktop

Please let me know if there are any other areas that need to be looked at before merging.

[zanettin]

Hi @ethancanne 👋

wow congrats to this jump from 29 to 70! 👏
btw for us relevant is the mobile score.

imo there is still some room for improvements. for example setting width and height for the images (or reserve the needed space with css). specially for the portrait which is visible initially. this causes atm a layout shift since all the content is pushed down after the image is loaded. this pays in on the CLS score.

Other than that the LCP should be reduced as well to get it into the green range. imo we should land on a mobile score somewhere > 85 👍

[manucorporat]

Yeah! I think this site should easily score 100 in mobile too, following @zanettin advice + maybe reducing image size a bit more and/or usign webp.

[barel-mishal]

I there is great summery about optimizing images from Steve here https://www.youtube.com/watch?v=-zzmfjIiC3M . Hope it will helps

[mhevery]

In the latest version of Qwik there are built-in image optimization tools. Those should allow you to get a 100 on the page speed score. Ping us when ready.

[zanettin]

i'll close this PR for now. feel free to reopen it when ever u'r ready 🙏 thx again