16Project Cards Design

In this session, you worked on adding a "Work" section to a web application using React. You began by setting up your environment in Visual Studio Code and running the application on localhost. The focus was on creating a dynamic section where project cards are displayed, which include animations and links to GitHub repositories.
Here's a breakdown of the key tasks you completed:
Setting up Components: You imported necessary components such as react-tilt and framer-motion for animations, and other custom components for layout and data handling.
Structuring the Work Section: You structured the "Work" section using JSX in Works.jsx, defining how project cards would be arranged and interacted with. This included setting up a motion.div to handle animations and using a tilt effect for the cards.
Dynamic Content Loading: You dynamically loaded project data from a constants file and mapped this data to render each project card with specific animations based on the project index.
Styling and Animation: You extensively styled the project cards using Tailwind CSS and set up animations for the cards to appear one by one with a delay. Each card could tilt and had a button to link to the GitHub repository.
Interactive Elements: Added interactive elements such as clickable divs that open project links in new tabs.
Text Content: Implemented text areas for project descriptions and tags, dynamically loading and styling them according to data.
This session was mainly about enhancing the user interface and interaction of the projects section of your application, using advanced React features and animations to create an engaging user experience.
completed works.jsx file
drive.google.c...