"Refactor Project component: remove individual project components, ad…

…d JSON data for projects, and update layout using map function" Explanation: * The Project component has been refactored to remove individual project components. * A
Syed-Shayan-01 · Apr 16, 2024 · 953b810 · 953b810
1 parent ed660c8
commit 953b810
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 49 deletions.
diff --git a/src/components/button/Button.js b/src/components/button/Button.js
@@ -2,7 +2,7 @@
 
 const Button = ({ text }) => {
   return (
-    <button className="text-white duration-300 hover:scale-105 hover:bg-white
+    <button className="text-white duration-300 
      hover:text-black m-2 bg-blue-600 py-2 px-2 rounded">
       {text}
     </button>

diff --git a/src/pages/projects/Project.js b/src/pages/projects/Project.js
@@ -2,19 +2,15 @@ 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="my-10 md:my-40">
             <div className="text-3xl md:text-5xl text-center mb-8">
                 <Logo text={'Projects'} />
             </div>
-            <div className="flex flex-col md:flex-row justify-center items-center space-y-8 md:space-y-0 md:space-x-8">
-                <div data-aos="fade-up"
-                    data-aos-offset="500"
-                    delay={800}
-                    data-aos-easing="ease-in-sine" className="rounded-xl overflow-hidden shadow-xl duration-300 hover:scale-105">
-                    <Image
+            {/* <Image
                         src="/Images/mini-hack.png"
                         className="w-full h-80 md:w-96 md:h-80"
                         width={400}
@@ -26,50 +22,43 @@ const Project = () => {
                         <Link className="text-gray-700 text-sm hover:text-black" href="https://syed-shayan-01.github.io/Mini-Hackaton-SMIT/">
                             My Mini Hackaton Project in SMIT
                         </Link>
-                    </div>
-                </div>
-                <div data-aos="fade-down"
-                    data-aos-offset="500"
-                    delay={800}
-                    data-aos-easing="ease-in-sine" className="rounded-xl overflow-hidden shadow-xl duration-300 hover:scale-105">
-                    <Image
-                        src="/Images/portfolio.png"
-                        className="w-full h-80 md:w-96 md:h-80"
-                        width={400}
-                        height={200}
-                        alt="Simple Portfolio"
-                    />
-                    <div className="px-6 py-4">
-                        <div className="font-bold text-xl mb-2">Simple Portfolio</div>
-                        <Link className="text-gray-700 text-sm hover:text-black" href="https://tailwind-app-snowy.vercel.app/">
-                            My First Practice Simple Portfolio Using Next.js
-                        </Link>
-                    </div>
-                </div>
-                <div  data-aos="fade-up"
-                    data-aos-offset="500"
-
-                    delay={800}
-                    data-aos-easing="ease-in-sine" className="rounded-xl overflow-hidden shadow-xl duration-300 hover:scale-105">
-                    <Image
-                        src="/Images/word-count.png"
-                        className="w-full h-80 md:w-96 md:h-80"
-                        width={400}
-                        height={200}
-                        alt="Word Counter App"
-                    />
-                    <div className="px-6 py-4">
-                        <div className="font-bold text-xl mb-2">Word Counter App</div>
-                        <Link className="text-gray-700 text-sm hover:text-black" href="https://word-counter-nextjs.vercel.app/">
-                            My Word Counter App using Next.js
-                        </Link>
-                    </div>
+                    </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) => {
+                        return (
+                            <div key={index}
+                                data-aos="fade-up"
+                                data-aos-offset="500"
+                                delay={800}
+                                data-aos-easing="ease-in-sine"
+                                className="bg-white w-[20rem] 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-6">
+                                    <h3 className="mt-4 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>
+                                        <a href='#' className='text-gray-400'>{items.hashtags}</a>
+                                    </div>
+                                </div>
+                            </div>)
+                    })}
                 </div>
             </div>
-            <div className="flex justify-center mt-8 hover:scale-110 hover:text-blue-600 font-bold duration-300">
-                Check out my GitHub to watch more projects....................
+
+            <div className="flex justify-center mt-8" 
+             data-aos="zoom-in"
+             data-aos-offset="500"
+             delay={800}
+             data-aos-easing="ease-in-sine">
+                <Link href={'https://github.com/Syed-Shayan-01'}><Button text={'See More'} /></Link>
             </div>
-        </div>
+        </div >
     );
 }
 

diff --git a/src/utils/projectsname.json b/src/utils/projectsname.json
@@ -0,0 +1,32 @@
+[
+    {
+        "name": "Full Stack Madarsa Website",
+        "description": "I CREATED MADARSA WEBSITE USING NEXT JS APP ROUTER",
+        "links": "https://alquran-academy.vercel.app/",
+        "hashtags": "#nextjs"
+    },
+    {
+        "name": "Student Attendance Admin Panel",
+        "description": "I CREATED STUDENT ATTENDANCE APPUSING NEXTJS",
+        "links": "https://shayan-attend.vercel.app/",
+        "hashtags": "#nodejs, #expressjs, #nextjs, #mongodb"
+    },
+    {
+        "name": "Mini Hackton SMIT",
+        "description": "I CREATED BLOG APP IN SMIT MINI HACKTON USING NEXT JS",
+        "links": "https://github.com/Syed-Shayan-01",
+        "hashtags": "#nextjs"
+    },
+    {
+        "name": "Simple Portfolio",
+        "description": "I CREATED SIMPLE PORTFOLIO USING NEXTJS",
+        "links": "https://tailwind-app-snowy.vercel.app/",
+        "hashtags": "#nextjs"
+    },
+    {
+        "name": "Word Counter App",
+        "description": "I CREATED Word Counter USING NEXTJS",
+        "links": "https://word-counter-nextjs.vercel.app/",
+        "hashtags": "#nextjs"
+    }
+]