The Culinary Globe

The ultimate destination for discovering iconic dishes from around the world.

Comment

Inspiration

My inspiration for this site was my curiosity about different cuisines around the world. I didn't know some of the cuisines in South America or Africa. I wanted to create a platform that not only educated people about the various types of food and their origins but also made it fun and interactive.

What it does

The culinary globe provides information about different cuisines around the world using a variety of methods including animations, text, games, and interactive maps. It is a one-stop shop for anyone looking to learn more about the diverse world of food.

How we built it

I used HTML, CSS, JS, and jquery. I spent a lot of time learning about how to position things and arrange them nicely on the site, which was a bit of a challenge. Despite this, I was able to create a functional website with games, text, image galleries, interactive maps, and more. I used SVG's for most of the animations and images from google for the image galleries/image carousel.

Challenges we ran into

As mentioned before, the positioning and layouts were a challenge. Another challenge I ran into was trying to get the cheetah animation working. It took me a while to figure out why there were multiple frames of the cheetah showing up at once instead of just one fluid animation. Managing all the work solo was also tough. This included coming up with ideas, designing the layout, writing the content, and troubleshooting any issues that arose. It was a lot of work, but in the end, it was worth it to see the finished product.

Accomplishments that we're proud of

  • Making a functional site that already has a lot of content and interactivity.
  • Writing 1000 lines of CSS.
  • Cool hover effects
  • Animations

What we learned

  • CSS animations
  • Embedding Google Maps
  • CSS positioning/layouts
  • Effects on hover
  • Image galleries
  • Display a video in text

What's next for The Culinary Globe

I plan on making The Culinary Globe more responsive on mobile devices and adding more images and content for not-so-well-known cuisines. I can also improve the continent pages by making them more connected and improving the UX.

Share this project:

Updates