"Update Media.jsx with AOS animations and adjust About and Contact pa…

…ge margins; comment out Project component code"

This commit message describes the changes made in the code diff. The Media.jsx component has been updated to

src/components/socialMedia/Media.jsx

@@ -9,11 +9,14 @@ import Logo from "../logo/Logo";
 
 const Media = () => {
   return (
-    <div className="text-center py-10 md:py-6">
+    <div className="text-center mt-14">
       <div className="mb-6 md:mb-12">
         <Logo text="Social Media Accounts" />
       </div>
       <ul
+        data-aos="zoom-in"
+        data-aos-delay="500"
+        data-aos-easing="ease-in-sine"
         className="flex md:justify-around justify-center items-center text-4xl md:text-5xl
        text-gray-500 space-x-6 md:space-x-8"
       >

src/pages/about/index.jsx

@@ -86,7 +86,7 @@ const About = () => {
           </div>
         </div>
       </section>
-      <div className="h-0.5 w-full lg:w-[max] my-10 lg:my-40 bg-gray-400"></div>
+      <div className="h-0.5 w-full lg:w-[max] my-10 lg:my-[8rem] bg-gray-400"></div>
     </div>
   );
 };

src/pages/contact/index.jsx

@@ -3,7 +3,7 @@ import Logo from "../../components/logo/Logo";
 
 const Contact = () => {
     return (
-        <section  id="Contact" className="bg-white my-[6rem]">
+        <section  id="Contact" className="bg-white my-[5rem]">
             <div className="py-4 lg:py-16 px-4 mx-auto max-w-screen-md">
                 <h2 className="mb-4 text-3xl sm:text-4xl lg:text-5xl tracking-tight font-extrabold text-center text-gray-400">
                     <Logo text={'Contact us'} />

src/pages/projects/index.js

@@ -1,4 +1,59 @@
-import React from 'react';
+// import React from 'react';
+// import Image from 'next/image';
+// import Link from 'next/link';
+// import Logo from '../../components/logo/Logo';
+// import data from '@/utils/projectsname.json';
+// import Button from '@/components/button/Button';
+
+// const Project = () => {
+//     return (
+//         <div id="Projects" className="">
+//             <div className="text-3xl md:text-5xl text-center mb-8">
+//                 <Logo text={'Projects'} />
+//             </div>
+//             <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+//                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+//                     {data.map((items, index) => (
+//                         <div
+//                             key={index}
+//                             data-aos="zoom-in"
+//                             data-aos-offset="500"
+//                             // delay={800}
+//                             data-aos-easing="ease-in-sine"
+//                             className="bg-white rounded-lg shadow shadow-[#33a5af] overflow-hidden"
+//                         >
+//                             <Image
+//                                 className="w-full h-[20vh] object-cover hover:scale-75 duration-300"
+//                                 src={'/Images/portfolio.png'}
+//                                 width="400"
+//                                 height="200"
+//                             />
+//                             <div className="p-4 md:p-6">
+//                                 <h3 className="text-lg leading-6 font-medium text-gray-900">{items.name}</h3>
+//                                 <Link href={`${items.links}`} className="mt-2 leading-6 hover:text-black text-gray-500">{items.description}</Link>
+//                                 <div className="mt-2">
+//                                     <a href="#" className="text-gray-400">{items.hashtags}</a>
+//                                 </div>
+//                             </div>
+//                         </div>
+//                     ))}
+//                 </div>
+//             </div>
+//             <div className="flex justify-center mt-8" >
+//                 <Link href={'https://github.com/Syed-Shayan-01'}>
+//                     <Button text={'See More'} />
+//                 </Link>
+//             </div>
+//         </div>
+//     );
+// }
+
+// export default Project;
+
+
+
+
+import React, { useEffect } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import Logo from '../../components/logo/Logo';
@@ -7,7 +62,7 @@ import Button from '@/components/button/Button';
 
 const Project = () => {
     return (
-        <div id="Projects" className="">
+        <div id="Projects" className="flex flex-col justify-center items-center">
             <div className="text-3xl md:text-5xl text-center mb-8">
                 <Logo text={'Projects'} />
             </div>
@@ -16,9 +71,9 @@ const Project = () => {
                     {data.map((items, index) => (
                         <div
                             key={index}
-                            data-aos="fade-up"
+                            data-aos="zoom-in"
                             data-aos-offset="500"
-                            delay={800}
+                            // delay={800}
                             data-aos-easing="ease-in-sine"
                             className="bg-white rounded-lg shadow shadow-[#33a5af] overflow-hidden"
                         >
@@ -39,11 +94,7 @@ const Project = () => {
                     ))}
                 </div>
             </div>
-            <div className="flex justify-center mt-8" 
-                data-aos="zoom-in"
-                data-aos-offset="500"
-                delay={800}
-                data-aos-easing="ease-in-sine">
+            <div className="flex justify-center mt-8" >
                 <Link href={'https://github.com/Syed-Shayan-01'}>
                     <Button text={'See More'} />
                 </Link>