‘The Hot Tropics’ is an interactive colorful One Pager that generates drink recipes based on your fruit selection within the page. Thanks so much for the brilliant build notes below Marisa, this is exactly what our readers want to know.
This is my first web development project. Working in the creative field and having a huge interest in design and the application of this through tech; I took a night course at General Assembly for front end web development and worked on this website as a personal project.
Functionality wise, I made the site very intuitive to be experienced more as a piece of design and an aesthetically pleasing experience. However, the website works by selecting the fruits you want and clicking "Find Drink" which makes an ajax call on the Yummly API to serve up a tropical beverage recipe based on the fruits you have chosen. This was interesting and I learnt a lot trying to implement this for my first time.
In addition to that, I spent a lot of time designing the website to be responsive on mobile and tried to tackle the problem of the interactivity and how that appears on smaller devices as well.
I illustrated all the graphics and then used svg animation to animate the slices that occur during hover. I also integrated parallax scrolling; when you click "Find Drink", the fruits all scroll off in different directions of the page and eventually fade/disappear, with the dots turning a different colour. I felt like this was a nice to give the page not only fluidity and movement, but the idea of depth on a flat graphic style, as well as the perception/illusion of vertical space, which I generally find interesting in the manipulation and design of web development.
I spent a lot of time nitpicking the spacing between things and adjusting the code manually to react to different browser sizes.
All in all, I'm excited about the opportunities of web development and hope that I will continue to get better, it is a great outlet of creative problem solving. I'm very excited for all the possibilities. Thank you so much for hearing me out!
