added scroll animations

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "aos": "^2.3.4",
     "autoprefixer": "^10.4.2",
     "postcss": "^8.4.8",
     "react": "^17.0.2",

src/components/About.jsx

@@ -1,9 +1,20 @@
 import React from "react";
+import AOS from 'aos';
+import "aos/dist/aos.css";
+import { useEffect } from "react";
 
 const About = () => {
+
+  useEffect(() => {
+    AOS.init({
+      duration : 1000
+    });
+  }, [])
+
+
   return (
     <div name='about' className='w-full h-screen bg-[#0a192f] text-gray-300'>
-      <div className='flex flex-col justify-center items-center w-full h-full'>
+      <div className='flex flex-col justify-center items-center w-full h-full' data-aos = "fade-down">
         <div className='max-w-[1000px] w-full grid grid-cols-2 gap-8'>
           <div className='sm:text-right pb-8 pl-4'>
             <p className='text-4xl font-bold inline border-b-4 border-pink-600'>

src/components/Contact.jsx

@@ -1,10 +1,18 @@
-import React from "react";
+import React, { useEffect } from "react";
+import AOS from 'aos';
+import "aos/dist/aos.css";
+
 
 const Contact = () => {
+  useEffect(() => {
+    AOS.init({
+      duration : 1000
+    });
+  }, [])
   return (
   <div  name='contact' className='w-full h-screen bg-[#0a192f] text-gray-300'>
       {/* Container */}
-      <div className='max-w-[1000px] mx-auto p-4 flex flex-col justify-center w-full h-full'>
+      <div className='max-w-[1000px] mx-auto p-4 flex flex-col justify-center w-full h-full' data-aos="fade-right">
 
       <section class="bg-[#0a192f]  dark:bg-gray-900">
       <div class="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">

src/components/Home.jsx

@@ -1,16 +1,24 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { HiArrowNarrowRight } from "react-icons/hi";
+import AOS from 'aos';
+import "aos/dist/aos.css";
 
 const Home = () => {
+  useEffect(() => {
+    AOS.init({
+      duration : 1000
+    });
+  }, [])
+
   return (
     <div name='home' className='w-full h-screen bg-[#0a192f]'>
       {/* Container */}
       <div className='max-w-[1000px] mx-auto px-8 flex flex-col justify-center h-full'>
-        <p className='text-pink-600'>Hi, my name is</p>
-        <h1 className='text-4xl sm:text-7xl font-bold text-[#ccd6f6]'>
+        <p className='text-pink-600' data-aos="fade-right">Hi, my name is</p>
+        <h1 className='text-4xl sm:text-7xl font-bold text-[#ccd6f6]' data-aos="fade-right">
           John Doe
         </h1>
-        <h2 className='text-4xl sm:text-7xl font-bold text-[#8892b0]'>
+        <h2 className='text-4xl sm:text-7xl font-bold text-[#8892b0]' data-aos="fade-right">
           I'm a Full Stack Developer.
         </h2>
         <p className='text-[#8892b0] py-4 max-w-[700px]'>

src/components/Navbar.jsx

@@ -11,19 +11,29 @@ import { HiOutlineMail } from 'react-icons/hi';
 import { BsFillPersonLinesFill } from 'react-icons/bs';
 import Logo from '../assets/logo.png';
 import { Link } from 'react-scroll';
+import { useEffect } from 'react';
+import AOS from 'aos';
+import "aos/dist/aos.css";
 
 const Navbar = () => {
   const [nav, setNav] = useState(false);
   const handleClick = () => setNav(!nav);
 
+  useEffect(() => {
+    AOS.init({
+      duration : 1000
+    });
+  }, [])
+
+
   return (
     <div className='fixed w-full h-[80px] flex justify-between items-center px-4 bg-[#0a192f] text-gray-300'>
-      <div>
+      <div data-aos = "fade-down">
         <img src={Logo} alt='Logo Image' style={{ width: '50px' }} />
       </div>
 
       {/* menu */}
-      <ul className='hidden md:flex'>
+      <ul className='hidden md:flex' data-aos="fade-down">
         <li>
           <Link to='home' smooth={true} duration={500}>
             Home

src/components/Skills.jsx

@@ -1,4 +1,6 @@
-import React from "react";
+import React, {useEffect} from "react";
+import AOS from 'aos';
+import "aos/dist/aos.css";
 
 // import HTML from "../assets/html.png";
 // import CSS from "../assets/css.png";
@@ -13,10 +15,15 @@ import React from "react";
 import {iconsarray} from '../constants.js';
 
 const Skills = () => {
+  useEffect(() => {
+    AOS.init({
+      duration : 2000
+    });
+  }, [])
   return (
     <div name='skills' className='w-full h-screen bg-[#0a192f] text-gray-300'>
       {/* Container */}
-      <div className='max-w-[1000px] mx-auto p-4 flex flex-col justify-center w-full h-full'>
+      <div className='max-w-[1000px] mx-auto p-4 flex flex-col justify-center w-full h-full' data-aos="fade-in">
         <div>
           <p className='text-4xl font-bold inline border-b-4 border-pink-600 '>
             Skills

src/components/Work.jsx

@@ -1,12 +1,20 @@
-import React from "react";
+import React, {useEffect} from "react";
 import WorkImg from "../assets/workImg.jpeg";
 import realEstate from "../assets/realestate.jpg";
 import WorkCard from "./WorkCard";
+import AOS from 'aos';
+import "aos/dist/aos.css";
 
 const Work = () => {
+  useEffect(() => {
+    AOS.init({
+      duration : 2000
+    });
+  }, [])
+
   return (
     <div name='work' className='w-full md:h-screen text-gray-300 bg-[#0a192f]'>
-      <div className='max-w-[1000px] mx-auto p-4 flex flex-col justify-center w-full h-full'>
+      <div className='max-w-[1000px] mx-auto p-4 flex flex-col justify-center w-full h-full' data-aos="fade-in">
         <div className='pb-8'>
           <p className='text-4xl font-bold inline border-b-4 text-gray-300 border-pink-600'>
             Work