| I've built a responsive landing page for my portfolio using React, CSS, and TypeScript. It consists of two sections, Home page and Product page, has frontend cart functionality as well as animations powered by GSAP and Framer Motion. |
Here is a working live demo hosted on Vercel: https://adidas-project.vercel.app/
The image slider is built with JavaScript (no libraries).
On mobile, you can also navigate to the next/previous slide by swiping right/left. The buttons and dots still work too.
The user drags down the UI's Cart Tab to reveal/hide the Cart modal. This is implemented with the use of GSAP's draggable interaction and elastic animation.
Every time an item is added to the screen, the Cart Tab animates, providing a visual hint as to what the user must do to open the Cart modal.
Last, the Cart icon changes if the cart is empty or not.
- React
- CSS
- TypeScript
- GreenSock Animation Platform (GSAP)
- Framer Motion