added animations of card on scroll using aos(github service)

package.json

@@ -3,7 +3,6 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
-
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -13,6 +12,7 @@
   "dependencies": {
     "@fontsource/outfit": "^5.0.13",
     "@fontsource/roboto": "^5.0.13",
+    "aos": "^3.0.0-beta.6",
     "gh-pages": "^6.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

src/components/About/About.jsx

@@ -7,7 +7,7 @@ export const About = () => {
   return (
     <section className={styles.container} id="about">
       <h2 className={styles.title}>About</h2>
-      <div className={styles.content}>
+      <div className={styles.content} data-aos="fade-left">
         <img
           src={getImageUrl("about/image.png")}
           alt="Me sitting with a laptop"

src/components/Contact/Contact.jsx

@@ -1,30 +1,34 @@
 import React from "react";
+import AOS from 'aos';
+import 'aos/dist/aos.css'; // You can also use <link> for styles
+// ..
+AOS.init();
 
 import styles from "./Contact.module.css";
 import { getImageUrl } from "../../utils";
 
 export const Contact = () => {
   return (
     <footer id="contact" className={styles.container}>
-      <div className={styles.text}>
+      <div className={styles.text} data-aos="fade-right">
         <h2>Contact</h2>
         <p>Feel free to reach out!</p>
       </div>
-      <ul className={styles.links}>
-        <li className={styles.link}>
+      <ul className={styles.links}   >
+        <li className={styles.link} data-aos="fade-left">
           <img src={getImageUrl("contact/emailIcon.png")} alt="Email icon" />
-          <a href="mailto:[email protected]">[email protected]</a>
+          <a href="mailto:[email protected]">shubhendu-Bhakat/mail</a>
         </li>
-        <li className={styles.link}>
+        <li className={styles.link}data-aos="fade-left" >
           <img
             src={getImageUrl("contact/linkedinIcon.png")}
             alt="LinkedIn icon"
           />
-          <a href="https://www.linkedin.com/in/shubhendu-bhakat/">linkedin.com/Shubhendu-Bhakat</a>
+          <a href="https://www.linkedin.com/in/shubhendu-bhakat/">Shubhendu-Bhakat/linkedin</a>
         </li>
-        <li className={styles.link}>
+        <li className={styles.link} >
           <img src={getImageUrl("contact/githubIcon.png")} alt="Github icon" />
-          <a href="https://github.com/Shubhendu-bhakat">github.com/Shubhendu-Bhakat</a>
+          <a href="https://github.com/Shubhendu-bhakat">Shubhendu-Bhakat/github</a>
         </li>
       </ul>
     </footer>

src/components/Contact/Contact.module.css

@@ -49,15 +49,14 @@
 @media screen and (max-width: 830px) {
   .container {
     flex-direction: column;
-    gap: 23px;
+    gap: 20px;
   }
 
   .text {
     display: flex;
     flex-direction: column;
     align-items: center;
   }
-
   .links {
     align-items: center;
   }

src/components/Experience/Experience.jsx

@@ -1,5 +1,8 @@
 import React from "react";
-
+import AOS from 'aos';
+import 'aos/dist/aos.css'; // You can also use <link> for styles
+// ..
+AOS.init();
 import styles from "./Experience.module.css";
 import skills from "../../data/skills.json";
 import history from "../../data/history.json";
@@ -13,9 +16,9 @@ export const Experience = () => {
         <div className={styles.skills}>
           {skills.map((skill, id) => {
             return (
-              <div key={id} className={styles.skill}>
+              <div key={id} className={styles.skill} data-aos="fade-right">
                 <div className={styles.skillImageContainer}>
-                  <img src={getImageUrl(skill.imageSrc)} alt={skill.title} />
+                  <img src={getImageUrl(skill.imageSrc)} alt={skill.title}/>
                 </div>
                 <p>{skill.title}</p>
               </div>
@@ -30,7 +33,7 @@ export const Experience = () => {
                   src={getImageUrl(historyItem.imageSrc)}
                   alt={`${historyItem.organisation} Logo`}
                 />
-                <div className={styles.historyItemDetails}>
+                <div className={styles.historyItemDetails} data-aos="fade-left">
                   <h3>{`${historyItem.role}`}</h3>
                   <p>{`${historyItem.startDate} - ${historyItem.endDate}`}</p>
                   <ul>

src/components/Hero/Hero.jsx

@@ -8,7 +8,7 @@ export const Hero = () => {
     <section className={styles.container}>
       <div className={styles.content}>
         <h1 className={styles.title}>Hi,</h1>
-        <p className={styles.description}>
+        <p className={styles.description}  data-aos="fade-right">
           I’m Shubhendu, a passionate and skilled developer specializing in
           the MERN stack and Java development. Whether it's building dynamic web
           applications or crafting robust backend solutions, I bring a wealth of

src/components/Projects/ProjectCard.jsx

@@ -7,7 +7,7 @@ export const ProjectCard = ({
   project: { title, imageSrc, description, skills, demo, source },
 }) => {
   return (
-    <div className={styles.container}>
+    <div className={styles.container}  data-aos="fade-right">
       <img
         src={getImageUrl(imageSrc)}
         alt={`Image of ${title}`}