Goal:

Continue working on none-3D react and build a stronger fundamental base. Improve my css styling and general programming skills and responsive web design. Make a portfolio piece.

‍

Tech Stack:

• React
• GSAP

‍

Recap:

This project went relatively smoothly actually. In terms of design it's pretty simple actually, a flexbox with two 100vh columns essentially, slideshow on the right and descriptions on the left. At first this project started out as just a slideshow with corresponding numbers but I reformatting the project to a more fun summery* idea to talk about some drinks. Disclaimer, the stock photos I used are not actually of the drinks I wrote about and they are also not my favorite summer drinks. I don't really drink often enough to have 10 favorite drinks especially not 10 summer ones. I just found enough stock photos of drinks to look consistent and googled summer drinks that might look somewhat like the images.

The hardest part of this project from a code perspective was the image loading w/ the corresponding loading bar. If you have a fast internet and you didn't see the loading bar you can reload the page in inspector w/ throttled settings. It's just two layers too deep into passing props to components too deep for me at the moment. I followed a tutorial for this component and while I can follow along with the logic while watching and coding, if asked to remake from scratch I probably wouldn't be able to without a snippet. Overall I learned a lot more about components and general state management with react and even managed to slip some gsap into the project as well. I attempted to try the react-gsap library to use declarative gsap but since I'm still not super familiar with gsap in general it was quite hard for me to integrate it.

‍

Link to code:

https://github.com/fakebrianho/HW02_ReactDrinks

‍

Link to live site:

https://bho.media/summerdrinks/

‍

‍

‍