diff --git a/src/App.jsx b/src/App.jsx index 99d8d90b1..af60bd8a4 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,5 @@ // Enhanced App component with updated styles and layout -import React from 'react'; +import React, { useState, useMemo } from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import { motion } from 'framer-motion'; import NavbarCard from './Components/NavbarCard'; @@ -15,7 +15,18 @@ import VerticalTimeline from './Components/Timeline'; import Carousel from './Components/Carousel'; import Hero from './Components/Hero'; import Footer from "./Components/Footer" +import Search from './Components/Search'; +import { HighlightProvider } from './context/HighlightContext'; +import HighlightWrapper from './Components/HighlightWrapper'; +const searchableContent = [ + { path: '/', title: 'Home', description: 'Welcome to Project X' }, + { path: '/events', title: 'Events', description: 'Upcoming and past events' }, + { path: '/projects', title: 'Projects', description: 'Current projects' }, + { path: '/achievements', title: 'Achievements', description: 'Our accomplishments' }, + { path: '/past-projects', title: 'Past Projects', description: 'Completed projects' }, + { path: '/upcoming-projects', title: 'Upcoming Projects', description: 'Future initiatives' }, +]; const Homepage = () => { return ( @@ -23,9 +34,13 @@ const Homepage = () => { {/* Text Section between Hero and Carousel */}
-

Welcome to Project X

+

+ Welcome to Project X +

- We are an exclusive club at Veermata Jijabai Technological Institute, Mumbai. We provide a collaborative environment for students to learn, grow, and build projects together under mentorship. Explore our achievements, past projects, and upcoming events! + + We are an exclusive club at Veermata Jijabai Technological Institute, Mumbai. We provide a collaborative environment for students to learn, grow, and build projects together under mentorship. Explore our achievements, past projects, and upcoming events! +

@@ -40,26 +55,45 @@ const Homepage = () => { function App() { - return ( -
- - - - } /> - } /> - } /> - } /> - } /> - } /> - {/* } /> */} + const [searchQuery, setSearchQuery] = useState(''); - {/* } /> */} - -
- -
-
-
+ const searchResults = useMemo(() => { + if (!searchQuery) return []; + const query = searchQuery.toLowerCase(); + return searchableContent.filter( + item => + item.title.toLowerCase().includes(query) || + item.description.toLowerCase().includes(query) + ); + }, [searchQuery]); + + return ( + +
+ + + + + + } /> + } /> + } /> + } /> + } /> + } /> + {/* } /> */} + {/* } /> */} + +
+ +
+
+
+ ); } diff --git a/src/Components/Card.jsx b/src/Components/Card.jsx index 8140228ab..bdb1f5bf3 100644 --- a/src/Components/Card.jsx +++ b/src/Components/Card.jsx @@ -1,11 +1,14 @@ import React from 'react'; +import HighlightWrapper from './HighlightWrapper'; const Card = ({ image, text }) => { return (
Card image
-

{text}

+ + {text} +
); diff --git a/src/Components/Carousel.jsx b/src/Components/Carousel.jsx index 8b2fa2564..37b564032 100644 --- a/src/Components/Carousel.jsx +++ b/src/Components/Carousel.jsx @@ -1,4 +1,5 @@ import React, { useEffect, useState } from 'react'; +import HighlightWrapper from './HighlightWrapper'; const Typewriter = ({ texts, delay = 100 }) => { const [textIndex, setTextIndex] = useState(0); @@ -29,7 +30,11 @@ const Typewriter = ({ texts, delay = 100 }) => { return () => clearTimeout(timer); }, [displayText, isDeleting, typingSpeed, textIndex, texts, delay]); - return
{displayText}
; + return ( +
+ {displayText} +
+ ); }; const Carousel = () => { diff --git a/src/Components/CircularCard.jsx b/src/Components/CircularCard.jsx index fe20619b8..7679f3088 100644 --- a/src/Components/CircularCard.jsx +++ b/src/Components/CircularCard.jsx @@ -1,5 +1,6 @@ import React from 'react'; import { useSpring, animated } from 'react-spring'; +import HighlightWrapper from './HighlightWrapper'; const CircularCard = ({ image, name, organization, link }) => { const props = useSpring({ opacity: 1, from: { opacity: 0 } }); @@ -11,8 +12,12 @@ const CircularCard = ({ image, name, organization, link }) => {
{name}
-

{name}

-

{organization}

+

+ {name} +

+

+ {organization} +

diff --git a/src/Components/Events.jsx b/src/Components/Events.jsx index c6085cfa1..e19810b16 100644 --- a/src/Components/Events.jsx +++ b/src/Components/Events.jsx @@ -1,14 +1,15 @@ import React from "react"; import { Chrono } from "react-chrono"; +import HighlightWrapper from './HighlightWrapper'; import '../App.css' const Events = () => { const items = [ { - title: "March 19 2024", - cardTitle: "Open Source Introduction", + title: March 19 2024, + cardTitle: Open Source Introduction, // cardSubtitle: "Men of the British Expeditionary Force (BEF) wade out to...", - cardDetailedText: "Open source software is software with source code that anyone can inspect, modify, and enhance", + cardDetailedText: Open source software is software with source code that anyone can inspect, modify, and enhance, media: { type: "IMAGE", source: { @@ -17,10 +18,10 @@ const Events = () => { } }, { - title: "April 24 2024", - cardTitle: "OpenCV Workshop", + title: April 24 2024, + cardTitle: OpenCV Workshop, // cardSubtitle: "OpenCV is a library of programming functions mainly for real-time computer vision..", - cardDetailedText: "OpenCV is a library of programming functions mainly for real-time computer vision", + cardDetailedText: OpenCV is a library of programming functions mainly for real-time computer vision, media: { type: "IMAGE", source: { @@ -29,10 +30,10 @@ const Events = () => { } }, { - title: "June - July 2024", - cardTitle: "Selection Phase for batch of 2027", + title: June - July 2024, + cardTitle: Selection Phase for batch of 2027, // cardSubtitle: "A surprise military strike by the Imperial Japanese Navy Air Service...", - cardDetailedText: "An exhuastive process involving tasks, proposal preparations and interviews was carried out to shortlists sys for the mentorship program.", + cardDetailedText: An exhuastive process involving tasks, proposal preparations and interviews was carried out to shortlists sys for the mentorship program., media: { type: "IMAGE", source: { @@ -41,10 +42,10 @@ const Events = () => { } }, { - title: "July - October", - cardTitle: "Weekly Meets and project development phase", + title: July - October, + cardTitle: Weekly Meets and project development phase, // cardSubtitle: "Men of the British Expeditionary Force (BEF) wade out to...", - cardDetailedText: "Sys developed their respective projects under the mentorship of Tys which was continuosly monitored by Lys via weekly presentations.", + cardDetailedText: Sys developed their respective projects under the mentorship of Tys which was continuosly monitored by Lys via weekly presentations., media: { type: "IMAGE", source: { @@ -53,10 +54,10 @@ const Events = () => { } }, { - title: "October 19 2024", - cardTitle: "Final Presentation", + title: October 19 2024, + cardTitle: Final Presentation, // cardSubtitle: "Men of the British Expeditionary Force (BEF) wade out to...", - cardDetailedText: "The project development phase was wrapped up , here the Sys presented their work and answered the questions posed to them.", + cardDetailedText: The project development phase was wrapped up , here the Sys presented their work and answered the questions posed to them., media: { type: "IMAGE", source: { diff --git a/src/Components/FeatureCard.jsx b/src/Components/FeatureCard.jsx index ff5a5fbf0..c815acd92 100644 --- a/src/Components/FeatureCard.jsx +++ b/src/Components/FeatureCard.jsx @@ -1,5 +1,6 @@ import React from 'react'; import { useNavigate } from 'react-router-dom'; +import HighlightWrapper from './HighlightWrapper'; import '../App.css' const FeatureCard = ({ @@ -20,14 +21,18 @@ const FeatureCard = ({

- {title} -

+ {title} +
-

{tag}

+

+ {tag} +

-

{info}

+

+ {info} +

diff --git a/src/Components/Footer.jsx b/src/Components/Footer.jsx index 8998d324e..b0d2a5676 100644 --- a/src/Components/Footer.jsx +++ b/src/Components/Footer.jsx @@ -1,6 +1,7 @@ import React from 'react'; import { FaInstagram, FaGithub, FaEnvelope } from 'react-icons/fa'; import { Link } from 'react-router-dom'; +import HighlightWrapper from './HighlightWrapper'; const Footer = () => { return ( @@ -17,7 +18,11 @@ const Footer = () => {
-

© {new Date().getFullYear()} ProjectX

+

+ + © {new Date().getFullYear()} ProjectX + +

); diff --git a/src/Components/Hero.jsx b/src/Components/Hero.jsx index b5960745c..8792d5534 100644 --- a/src/Components/Hero.jsx +++ b/src/Components/Hero.jsx @@ -1,25 +1,27 @@ import React from 'react'; -// import ThreeJSComponent from './ThreeJSComponent'; -// import Sphere from "./icons"; +import HighlightWrapper from './HighlightWrapper'; const Hero = () => { return (
-
-
-

ProjectX

-

Innovating the future

+
+
+

+ ProjectX +

+

+ Innovating the future +

+
+
+ + +
-
- - - -
- ); } diff --git a/src/Components/HighlightWrapper.jsx b/src/Components/HighlightWrapper.jsx new file mode 100644 index 000000000..8c2cd400c --- /dev/null +++ b/src/Components/HighlightWrapper.jsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { useHighlight } from '../context/HighlightContext'; + +const HighlightWrapper = ({ children }) => { + const { highlightTerm } = useHighlight(); + // console.log("HighlightWrapper", highlightTerm); + // console.log(children); + + if (!highlightTerm || typeof children !== 'string') { + return children; + } + + const parts = children.split(new RegExp(`(${highlightTerm})`, 'gi')); + + return ( + <> + {parts.map((part, i) => + part.toLowerCase() === highlightTerm.toLowerCase() ? + ( + + {part} + + ) : part + )} + + ); +}; + +export default HighlightWrapper; diff --git a/src/Components/Navigation.jsx b/src/Components/Navigation.jsx index 764a54e79..1bb5c5855 100644 --- a/src/Components/Navigation.jsx +++ b/src/Components/Navigation.jsx @@ -3,7 +3,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; import logo from '../assets/X_Logo.png'; -const Navigation = () => { +const Navigation = ({ children }) => { return ( ); }; diff --git a/src/Components/PastProjects.jsx b/src/Components/PastProjects.jsx index 700cfc7bd..1a90c9a74 100644 --- a/src/Components/PastProjects.jsx +++ b/src/Components/PastProjects.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import HighlightWrapper from './HighlightWrapper'; import FeatureCard from './FeatureCard'; // Assuming FeatureCard is in the same directory const PastProjects = () => { @@ -6,7 +7,9 @@ const PastProjects = () => {
-

Past Projects

+

+ Past Projects +

{ return ( @@ -25,16 +26,18 @@ const Card = ({ title, link }) => {
-
{title}
+
+ {title} +

- - Press on The Read More Button to know more!!! - + + Press on The Read More Button to know more!!! +

- Read more + Read more
); diff --git a/src/Components/Search.jsx b/src/Components/Search.jsx new file mode 100644 index 000000000..7c736ba36 --- /dev/null +++ b/src/Components/Search.jsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { useNavigate } from 'react-router-dom'; +import { useHighlight } from '../context/HighlightContext'; + +const Search = ({ searchQuery, setSearchQuery, searchResults }) => { + const navigate = useNavigate(); + const { setHighlightTerm } = useHighlight(); + + const handleSearchChange = (e) => { + const value = e.target.value; + setSearchQuery(value); + setHighlightTerm(value); + }; + + const handleSearchClick = (path) => { + setSearchQuery(''); + setHighlightTerm(''); + navigate(path); + }; + + return ( +
+ + {searchQuery && searchResults.length > 0 && ( +
+ {searchResults.map((result, index) => ( +
handleSearchClick(result.path)} + className="p-3 hover:bg-gray-700 cursor-pointer" + > +
{result.title}
+
{result.description}
+
+ ))} +
+ )} +
+ ); +}; + +export default Search; diff --git a/src/Components/Timeline.jsx b/src/Components/Timeline.jsx index 074281036..2d55f2355 100644 --- a/src/Components/Timeline.jsx +++ b/src/Components/Timeline.jsx @@ -1,4 +1,5 @@ import { useEffect } from 'react'; +import HighlightWrapper from './HighlightWrapper'; import './timeline.css'; const VerticalTimeline = () => { @@ -41,20 +42,22 @@ const VerticalTimeline = () => {
-

Name Surname / Company Name

-

VERTICAL TIMELINE

+

Name Surname / Company Name

+

VERTICAL TIMELINE

    -

    2015

    +

    2015

  • -

    Title One

    +

    Title One

    - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab fugit - libero dolor rerum repellat tenetur enim impedit? + + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab fugit + libero dolor rerum repellat tenetur enim impedit? +

    • diff --git a/src/Components/UpcomingProjects.jsx b/src/Components/UpcomingProjects.jsx index 8753429ca..86b062f5f 100644 --- a/src/Components/UpcomingProjects.jsx +++ b/src/Components/UpcomingProjects.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import HighlightWrapper from './HighlightWrapper'; const UpcomingProjects = () => { // Custom styles for gradient text @@ -13,8 +14,12 @@ const UpcomingProjects = () => { return (
    -

    Upcoming Projects

    -

    Coming Soon

    +

    + Upcoming Projects +

    +

    + Coming Soon +

    ); diff --git a/src/context/HighlightContext.jsx b/src/context/HighlightContext.jsx new file mode 100644 index 000000000..23a30cdcc --- /dev/null +++ b/src/context/HighlightContext.jsx @@ -0,0 +1,15 @@ +import React, { createContext, useState, useContext } from 'react'; + +const HighlightContext = createContext(); + +export const HighlightProvider = ({ children }) => { + const [highlightTerm, setHighlightTerm] = useState(''); + + return ( + + {children} + + ); +}; + +export const useHighlight = () => useContext(HighlightContext);