added link for expo

package.json

@@ -45,6 +45,7 @@
         "react-query": "^3.39.3",
         "react-responsive": "^9.0.2",
         "remark-gfm": "^4.0.0",
+        "sass": "^1.72.0",
         "tailwind": "^4.0.0",
         "tailwind-merge": "^2.2.1",
         "tailwindcss": "^3.4.1",

src/components/ProjectCard.js

@@ -11,7 +11,7 @@ const ProjectCard = ({ project }) => {
         </div>
         <div className='p-6 pb-0 h-full'>
           <div className='h-full'>
-            <h6 className="mb-2 text-md font-semibold text-fuchsia-900">{project.project_sig}</h6>
+            <h6 className="mb-2 text-md font-semibold text-fuchsia-900">{project.project_sig.toUpperCase()}</h6>
             <h5 className="mb-2 text-2xl font-semibold tracking-tight text-black">{project.title}</h5>
             <p className="mb-3 font-normal text-gray-700">({project.project_description.slice(0, 150) + "... see more"})</p>
           </div>

src/components/ProjectsPage.js

@@ -1,13 +1,13 @@
 // ProjectsPage.js
-import React, { useState,useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import ProjectCard from './ProjectCard';
 import ReactPaginate from 'react-paginate';
 import './ProjectsPage.css'; // Import your CSS for styling
 import { IoIosArrowForward } from "react-icons/io";
 import { IoIosArrowBack } from "react-icons/io";
 import { useMediaQuery } from "react-responsive";
 
-const ProjectsPage = ({ projects }) => {
+const ProjectsPage = ({ projects, tag }) => {
   const [currentPage, setCurrentPage] = useState(0);
   const bigScreen = useMediaQuery({ minWidth: "1536px" });
   const projectsPerPage = bigScreen ? 8 : 6;
@@ -16,6 +16,10 @@ const ProjectsPage = ({ projects }) => {
     setCurrentPage(data.selected);
   };
 
+  if (tag) {
+    projects = projects.filter(project => project.project_tags.toLowerCase().includes(tag.toLowerCase()))
+  }
+
   useEffect(() => {
     window.scrollTo(0, 0);
   }, [currentPage]);

src/components/about.js

@@ -1,9 +1,31 @@
+import Link from "next/link";
+import styles from "./about.module.scss"
+import { BiSolidCalendarEvent } from "react-icons/bi";
+
 export default function About() {
     return (
         <main className="flex flex-col w-full">
-            {/* <section className="bg-[#faf3fd] py-3 flex gap-5 items-center justify-center bg-no-repeat">
-                <span>IET</span> <span>CodeBuddy</span>
-            </section> */}
+            <Link href="#">
+                <section className="bg-[#542568] h-10 cursor-pointer flex justify-center items-center w-screen overflow-hidden relative animate-bounce">
+                    {/* <div className={`${styles.expo} flex gap-3 top-2`}>
+                    <span className={`w-[130px] font-semibold text-white`}>PROJECT EXPO</span>
+                    <span className={`w-[130px] font-semibold text-white`}>PROJECT EXPO</span>
+                    <span className={`w-[130px] font-semibold text-white`}>PROJECT EXPO</span>
+                    <span className={`w-[130px] font-semibold text-white`}>PROJECT EXPO</span>
+                    <span className={`w-[130px] font-semibold text-white`}>PROJECT EXPO</span>
+                    <span className={`w-[130px] font-semibold text-white`}>PROJECT EXPO</span>
+                </div>
+                <div className={`${styles.secondary} flex gap-3 top-2`}>
+                    <span className={`w-[130px] font-semibold text-white`}>PROJECT EXPO</span>
+                    <span className={`w-[130px] font-semibold text-white`}>PROJECT EXPO</span>
+                    <span className={`w-[130px] font-semibold text-white`}>PROJECT EXPO</span>
+                    <span className={`w-[130px] font-semibold text-white`}>PROJECT EXPO</span>
+                    <span className={`w-[130px] font-semibold text-white`}>PROJECT EXPO</span>
+                    <span className={`w-[130px] font-semibold text-white`}>PROJECT EXPO</span>
+                </div> */}
+                    <span className={`font-normal text-white flex items-center gap-1`}><BiSolidCalendarEvent className="w-5 h-5" /> {" "} <span>Project Expo. Check out <span className=" underline underline-offset-2">projects</span></span></span>
+                </section>
+            </Link>
             <section className="bg-[#280c33] bg-[url('/bg.png')] bg-cover h-full p-12">
                 <div className="flex flex-col items-center justify-center mt-2">
                     <h1 className=" text-white flex items-center gap-3 text-3xl font-bold text-center"><span className="bg-[white] w-8 h-1 block">{" "}</span> ABOUT US<span className="bg-[white] w-8 h-1 block">{" "}</span></h1>
@@ -27,7 +49,7 @@ export default function About() {
                             <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-100 dark:text-white">Global Network and Impact</h5>
                             <p className="mb-3 font-normal text-gray-100 dark:text-gray-400">Affiliated with IET London, a premier professional society with over 168,000 members worldwide, we offer a global knowledge network to facilitate the exchange of ideas and promote the positive impact of science, engineering, and technology. Eminent personalities are invited to conduct lectures for the benefit of club members and those interested in our activities.</p>
                         </div>
-                         <div className="w-full overflow-hidden">
+                        <div className="w-full overflow-hidden">
                             <img className="object-cover rounded-t-lg h-auto md:rounded-r-lg" src="https://images.unsplash.com/photo-1627389955800-4afab384df17?q=80&w=1974&auto=format&fit=crop" alt="" />
                         </div>
                     </div>

src/components/about.module.scss

@@ -0,0 +1,33 @@
+.expo {
+    width: inherit;
+    position: absolute;
+    left: 0%;
+    animation: r 10s linear infinite;
+}
+
+@keyframes r {
+    from {
+        left: 0%;
+    }
+
+    to {
+        left: -100%;
+    }
+}
+
+@keyframes secondary {
+    from {
+        left: 100%;
+    }
+
+    to {
+        left: 0%;
+    }
+}
+
+.secondary {
+    width: inherit;
+    position: absolute;
+    left: 0%;
+    animation: secondary 10s linear infinite;
+}

src/components/hero.js

@@ -5,7 +5,7 @@ export default function Hero() {
     return (
         <>
             <main className=" flex relative justify-center items-center min-h-[80vh] md:min-h-[90vh] mt-14 sm:mt-0 flex-col ">
-                <Particles />
+                {/* <Particles /> */}
                 <div className="flex items-center sm:justify-between w-full px-10 flex-col-reverse md:flex-row z-10">
                     <div className="flex flex-col flex-auto w-full md:w-1/2 justify-center">
                         <h1 className="text-black text-4xl md:text-5xl font-bold">Igniting Innovation

src/components/project/projectList.jsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react';
 import ProjectsPage from "@/components/ProjectsPage";
 import { fetchProjects } from '@/components/api';
+import { useSearchParams } from 'next/navigation'
 
 export default function ProjectList() {
   const [projects, setProjects] = useState([]);
@@ -16,9 +17,16 @@ export default function ProjectList() {
     fetchData();
   }, []);
 
+  const searchParams = useSearchParams()
+
+  const tag = searchParams.get('tag')
+
+  console.log(projects);
+  console.log(tag)
+
   return (
     <div>
-      <ProjectsPage projects={projects} />
+      <ProjectsPage projects={projects} tag={tag}/>
     </div>
   );
 }