This project is a demo for Cœur, a draft YSWS where participants make an e-card/letter to someone they love or about something they love, and get either stickers or a sweatshirt!
This demo is a love letter between Heidi and Orpheus (hehe :3)
This site is fully usable on mobile devices and computers with a mouse/trackpad. To navigate, simply use the arrow buttons at the bottom of the page to go between pages, or use left and right arrow keys on a keyboard.
This site was made on Svelte and deployed on the SvelteKit framework.
The main challenge I faced was initially positioning images on top of the bold header-1 text, while also trying to add in transitions. I eventually realized that the slide transition would be easier to handle and that I also didn't need to use position: absolute just to translate the image up. This made it possible to have a smooth experience on mobile as well.
Additionally, it took me a long time to put together the border since I decided to make everything out of SVGs or body tags; however, I think it was worth it since I have more power to change the border directly, compared to if I had to constantly replace the images. (It did make the code somewhat messy tho ;-;)
All assets are either original (made by moi >w<) or derived from stickers.hackclub.com Below are all designers of assets derived from stickers.hackclub.comub.comm
- msw
- fropii
- bunnyguy
- candy
*Construct assets did not have a named author
- This project gets the +2 sugar rush for full usability by keyboard, because I used event listeners to incorporate moving between pages with the arrow keys on the keyboard.
