/odin-recipes

Project: Recipes - The Odin Project Full Stack Development

Primary LanguageHTML

Odin recipes


πŸ‘©β€πŸ³ Odin Recipes

Odin Recipes provides information on my top  5️⃣  best realisable dishes from each region in Genshin Impact.

Live demo: https://mistervaliant.github.io/odin-recipes/

Generic badge


βœ’οΈ General Information

Ever wanted to have a taste of Mondstadt's , Liyue's or Inazuma's cuisine? πŸ€”

Odin Recipes provides my top  5️⃣  Genshin Impact recipes for each region that can be realised in real-life.

Experience the culinary arts of each region in the ambience of Genshin Impact with theme music, sound effects and sceneries.

πŸ›ˆ About Genshin Impact:

Genshin Impact is an open-world action RPG. Set off on an adventure across Teyvat, a fantasy realm, to recover your missing sibling. You can wander seven different nations, interact with diverse characters with unique personalities and abilities, and engage in battle with them against formidable adversaries.


❀️ Motivation

The aim of this project is to revisit the basics of HTML, CSS and Javascript, and further understand the dos and don'ts of Fullstack Web Development using The Odin Project's (TOP) curriculum. Additionally, I always wanted to re-create Genshin Impacts' character selection page from their website.


πŸ‘¨β€πŸ’» Technologies Used

HTML5 logo CSS logo javaScript logo

πŸ“Œ Features

  • Day-Night Cycle
  • Theme music and sound effects
  • Regions' background
  • Genshin Impact's recipes in-game and IRL

πŸ“· Screenshots

Website showcase


πŸ—ΊοΈ Room for Improvement

Issues:

  • Sound effects takes time to play when first opened (or after 10 minutes [Github's cache])
  • Sliders are created programmatically in Javascript (Not a proper approach).
  • Performance issues for mobile devices

πŸ”— Acknowledgements

This project was inspired by Genshin Impact's Character Selection Page

Sound Effects:

  • Minecraft's Click
  • Discord's mute
  • Legend of Zelda BOTW's teleport

Other References:


Contact

Created by @MisterValiant - feel free to contact me! πŸ“§

Project Status: Completed