๐ Website: marqeta-ui.vercel.app
This project is a clone of Marqeta as part of the gsap animation. The project involves
implementing various animations and ensuring the overall structure and performance of the
website is up to standards.
This assignment aims to replicate Marqeta Sample using React and GSAP for animations. The primary focus is on component reusability, state management, CSS style guide adherence, and webpage performance.
- [โ๏ธ] Mandatory Card Animation: Card animation implemented starting from the first section.
- [โ๏ธ] Additional Animations: Implemented text and element animation on scroll using GSAP and potentially other libraries.
- [โ๏ธ] Static UI: Reuse static HTML/CSS code from the provided website.
- [โ๏ธ] React Component Structure: Emphasized reusability and readability.
- [โ๏ธ] State Management: Proper state management using React hooks.
- [โ๏ธ] CSS Style Guide: Following a consistent CSS style guide.
- [โ๏ธ] Webpage Performance: Ensuring the website is optimized for performance.
- React
- Vite
- Javascript
- GSAP
- ScrollTrigger
- Webpack
- Babel
- HTML5/CSS3
- Dot Lottie
- Owl Carousel
The website optimizes performance by lazy loading components and assets, minimizing render-blocking resources, and optimizing images.
Marqeta - The source of inspiration for this project.
Clone the project
https://github.com/debrajhyper/marqeta.git
Go to the project directory
cd marqeta
Install dependencies
$npm install
Start the dev server
npx vite --port=4000