The Hot T(r)opics:

DESCRIPTION

A beverage recipe finder website. Choose your fruits, find your juice! A personal project I created while attending General Assembly. From concept/design to development, this project is very important to me as it unlocked a strong desire for me to continue to learn and advance in web development which I have always been interested in. This is my first project utilizing skills I learnt at General Assembly over a 3 month course. It was fulfilling to see my knowledge be applied in calling on an API utilizing Javascript, furthering my CSS and HTML skills, and writing all the code from scratch to create this website from start to finish.

PLEASE CHECK IT OUT HERE →
http://thehottropics.com

AWARDS AND FEATURED ON →
CSSWinner
OnePageLove

WORK HOSTED ON GITHUB →
https://github.com/mimikins23

WEB DEVELOPMENT

The Hot Tropics is a website I built using HTML, CSS and Javascript - it calls on Yummly's API which enables me to serve up tropical beverage recipes depending on the fruits the user selects. I designed the experience of the website to be a fun/interactive experience that is so simple to use that you can easily repeat a new search again. Developing this website I not only learnt a great deal but also had to overcome some challenges that I have never had to before. I tweaked a lot to make this website responsive to different screen sizes and had to rethink the type of experience that users would have on mobile. I was adamant on maintaining the animated components of the website created by parallax, even on mobile; and didn't want mobile to just be a 'simpler' version of the desktop site so I found this a challenge but learnt a lot of how to set up desktop code to be more responsive from the get-go and to always keep this in mind.

DESIGN

Some examples of the fruit I illustrated and designed for the website. 

fruit_grid_transparentfruit_grid_transparent

SVG ANIMATION & PARALLAX

I wrote code for SVG animation so that on hover, each fruit animates an SVG line that slices through it to reveal a sliced version of the fruit. Parallax was also an effect that I manually learnt to implement in code by intricately specifying the different scroll top, heights and layers moving in different directions - applying conditions to elements depending on positioning.