Milo the Goat

Landing Page
Upside Down Milo + Cat, Changed Background Color, Spotify Playlist
Sankt Milo's Hall of Fame + Slow Crow Flying
Sankt Milo's Hall of Fame...in black

💡 Inspiration

The release of our childhood book series Shadow and Bone last Friday has caused Netflix records to be broken and Booktok (Tiktok) to go crazy! Ever since our five hour binge on the early morning of the release date, we realized that Milo, the goat, is the main character. We were confirmed with Booktok and Youtube videos praising him as Sankt Milo. After all, he is iconic and saved the entire show.

We decided to create a site dedicated to Milo as a fun passion project.

🤝 What it does

Milo is a site hosted on Vercel that brings the Grishaverse fandom closer to Milo the goat.

Features

Play Grishaverse inspired Spotify playlists.
Interact with Milo and (Unnamed Cat) by dragging them around and flipping them. Yes, they will be happy to be upside down forever. Please do that when visiting the site :)
Change the site's background color by reloading or the circle icon in the upper right hand corner.
Watch a crow fly...slowly...on Milo's Hall of Fame (Sankt Milo)
Click on each of the three buttons for a short description and video clip.
Do these again not in the same order.

💻 How we built it

We used the framework Next.js and Tailwind CSS, which contributes to easy user interaction. For Milo, the unnamed cat, the crow, and text animation, we used Framer Motion.

Text animation is evident in the delayed appearance of the first two paragraphs on the first page and in "Yes, crows are fly" on the second.

🐐 Challenges we ran into

Having different computer sizes, we had trouble viewing placement of images and words. We settled on working on one computer and made the site adjustable to all screen sizes! The placement of the cat under the Spotify playlist had issues as it was our first time working with Next.js and Tailwind CSS documentation. Lots of times, we didn't code Framer Motion correctly or forgot to import a component.

🐈 Accomplishments that we're proud of

We made a site dedicated to our favorite GOAT! For Rebecca, it was a step getting back into hackathons, not being afraid to learn new frameworks, and learning TypeScript. For Rene, it was learning React and JavaScript as she simply only knew a bit of HTML beforehand.

🎧 What we learned

Documentation. Documentation. Documentation. Pay attention to documentation! Through Youtube, Stack Overflow, and tutorials, we figured it out and pushed through to create a fully functional and interactive site for all Grishaverse and Milo lovers.

👩‍💻 What's next for Milo the Goat

Sound effects, an interactive map of the Grishaverse, and customizing Milo and the unnamed cat would be cool though we need to learn more Framer Motion first! We wanted to incorporate theme-ui but held back as we were both learning three new technologies this weekend.