This is a static Svelte site run on Github Pages and a demo project for a soon to be proposed YSWS, "The Zoo". Participants make a static Svelte app about any animal (real or not). I decided to make this demo about a Red Panda named Kitsu. Super excited to make a YSWS draft and tutorial on how to make a site like this in the near future!
Once you ship this you can't edit the description of the project, but you'll be able to add more devlogs and re-ship it as you add new features!
Added in more responsive updates. Before I had just tested up to what size my Mac window could go, but I was able to iron all the issues pretty quickly once I ran it on my phone. Should have ran it on the port im realizing now but it's shapable now so we learn and move on w^
Site is officially deployed at lynn89-sudo.github.io/red-panda
Just need to iron out responsive design bugs and I'll ship
everything is done!
Completed a quick Endangered Status page. For a demo it's more than fine, but if the program gets accepted I'll probably make it a bit better.
Kitsu Page is complete!!
Both night (sleeping) and day (eating) sequences work, might have to squash some bugs but I think I got them all.
Final part is making the endangered status page then shipping! w^
Kitsu now attacks when you disturb her too much while sleeping.
Now you may be asking, what does Kitsu do to attack? I can't tell you... I can only say she doesn't give up easily...
You can now over-pet Kitsu. She has 3 phases for more angry: normal, annoyed, very annoyed, angry.
I plan to make it so that when she reaches peak angry you get redirected from the page before she gets aggressive.
Added in the Angry Face, will work more on this at a later time
Added in a Splash Text label that dynamically updates
Added in sleepy Kitsu!!
Kitsu automatically wakes up around dawn and dusk, and sleeps the rest of the day. Red Pandas sleep the majority of the day away! Quite lucky, but they are an endangered species so maybe not a great survival strategy.
Otherwise in love with this site, one of my favorite projects in a long time.
Working really well so far. Using position relative on the container and position fixed on the images, they stack on top of each other. I made the images so that they have the exact same dimensions and the placements of the parts are relative to the whole body. Also added an infinite CSS tail wagging animation.
Unfortunately the time spent making the art assets didn't get tracked >:(
Panel unlocks properly and button links to the page, need to build the kitsu page now
Started working on Red Panda art for the Meet Kitsu page, also decided to eventually make a page on the endangered status of Red Pandas.
Facts Panel is complete and unlocks the other pages when you go through all 5 facts, may add a timer minimum to this but still deciding
Got the arrows to work, had to use a button instead of plain span.
Also tried using the preload feature on Svelte to load the json, but kept running into issues. I might try again later, but it's presentable as is.
Got the icons to work properly now, the issue was related to how I used google icons on the banner.
First fact works properly, now I need to create back and forth arrows to cycle through.
facts.json is working mostly properly now, I have no clue why google fonts icon isn't working right now, given it's working for the banner :|
Forgot runes existed in Svelte 5 so I am using those now instead of the Svelte 3/4 syntax
Added in a Svelte component that participants will import, which will link to the main site when it exists
Started the app, going a bit smoother given I know more of what I'm doing. SvelteKit makes it much easier.
Debating between Kitsu and Mochi for the names, but that's beside the point.