The Zoo is an interactive webpage about the chameleon (the best animal on earth), built with SvelteKit for the YSWS Hack Club Zoo. It covers information about it and includes an interactive page where you can play with it at the end of the reading.
🗂️ Table of Contents
- Main requirements:
- 8+ hours of coding
- Site coded with SvelteKit and statically hosted on GitHub Pages
- Theme around the best animal (the chameleon of course)
- Include the Zoo Banner component everywhere
- Include the README.md file with a description
- Information panel [5/3]
- Information panel uses $state and $derived
- Unlock a button after reading all facts
- Earn mynts
- Bonus requirements:
- Extra hours (8h + 27h = 35h)
- Use of svelte:head in +layout.svelte
- Animal conservation status according to IUCN
- The facts panel is fully dynamic
- Use of $effect on the main page and the interactive page
- Presence of easter eggs (3/3)
- Site 100% responsive ON ALL DEVICES (except Apple Watch)
On the main page, the user takes a short journey through the trees, discovers several sections with detailed information (basics, camouflage and tongue, endangered status), checks an interactive information panel offering fun and educational facts about the chameleon, and can unlock the “Meet Chameleon” button after reading all the facts.
My interactive page is a simple game where the user must click on flies to score points before the chameleon catches them, just like a real chameleon would do to feed.
- Clicks on the chameleon: Clicking the chameleon triggers a color change—be careful not to click too many times.
- Mouse movements: The chameleon’s eye follows the user’s cursor.
- Time: The sky color changes dynamically according to the real time.
- Flies: It automatically catches the flies.
- Randomness: The chameleon sometimes makes a mistake and attacks the mouse cursor instead of the fly.
- Daytime life: The chameleon has a higher chance of hitting the fly from 8 a.m. to 8 p.m.
- Speech: The chameleon makes random comments depending on the situation (win/lose/pause).
The design of this project was created in Figma.
👉 See the Figma here
|
.png)
|
.png)
|
.png)
|
.png)
|
.png)
|
|
.png)
|
.png)
|
- 💚 Clicking the green chameleon in the tree will trigger a cute animation for his sweetheart in the tree opposite
- 🏪 A nice ASCII art hidden in the webpage’s source code
- 🖌️ The barcode leads to the best GitHub account
- Designed by: [xen0r-star]
- Coded by: [xen0r-star]
- Drawings by: [xen0r-star]
- Original ideas: [xen0r-star]
- Testing and debugging: [xen0r-star]
- Documentation: [xen0r-star]
- Chameleon animation: [xen0r-star]
- UI/UX: [xen0r-star]
- Project management: [xen0r-star]
- Zoo Banner: [lynn89-sudo]
🖤💛❤️ Made by a Belgian 🖤💛❤️