🚀 Optimized the page speed & Added the better svg 😊 of flag on the header

[nermalcat69]

Hey this is nermal, i was thinking of making an effective change to the repository, i checked jams.hackclub.com's page speed , it was a bit bad sooo thought of doing something which can make it a bit better (the results will be at the end, scroll down for it)

Changes Made

• Fixed the flag svg, as it was low quality as compared to the one created by hackclub (the one mentioned in assets repository)

LOW QUALITY SVG: HIGH QUALITY SVG:

• Disabled dragging of the flag svg

https://github.com/hackclub/jams/assets/73933669/1a6ba5b1-973b-4858-ae18-de725bb12c79

• Added BoxShadow(Hover effect) to "New to Jams? Start Jamming! 🍁" Component

Please encourage people to use webp images for their thumbnails instead of gifs or pngs

• Converted gif to webp in multiple batch / jams (Using gif is not a good practice as it slows down the page) (Using CloudConvert)

1. https://jams.hackclub.com/jam/glsl-shaders
2. https://jams.hackclub.com/jam/voxel-animation
3. https://jams.hackclub.com/jam/custom-snowglobe
4. https://jams.hackclub.com/jam/story-game
5. https://jams.hackclub.com/jam/kaboom-game

---

Flexible formats: WebP is a chameleon — it supports both lossless (like a PNG) and lossy (like a JPEG, slight quality loss for smaller file size) compression. Transparency: Similar to PNG files, WebP supports transparent backgrounds.

• Converted pngs to webp (jams/batch) (Using CloudConvert)

  1. https://jams.hackclub.com/batch/sprig
  2. https://jams.hackclub.com/jam/hacker-card
  3. https://jams.hackclub.com/jam/ai-travel
  4. https://jams.hackclub.com/batch/webOS
  5. https://jams.hackclub.com/jam/web-ai-comic
  6. compressed the create your own smart ai's sticker (it was png, i converted it to webp via cloudconvert)
  7. https://jams.hackclub.com/jam/online-store
  8. https://jams.hackclub.com/jam/web-ar
  9. https://jams.hackclub.com/jam/erc-20-token
  10. https://jams.hackclub.com/batch/3d-armory
  11. Compressed the sprig sticker from png to webp
  12. Compressed the hack sticker from png to webp

• Compressed WEBp image (resized it)

  1. https://jams.hackclub.com/batch/sparkletilt-pcb

---

There's some improvement by using webps instead of gifs

1. Largest Contentful Paint is 5.1s instead of 6.7 secs
2. Speed index is 1.9s instead of 3.4secs

Before

After

[vercel[bot]]

@nermalcat69 is attempting to deploy a commit to the Hack Club Team on Vercel.

A member of the Team first needs to authorize it.

[nermalcat69]

@SerenityUX check this pull request, let me know what are ur thoughts ?

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
jams	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 2, 2023 11:26am

[nermalcat69]

After

[nermalcat69]

Before