diff --git a/package-lock.json b/package-lock.json index 1bc508ef8..0bf28ca7c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "framer-motion": "^11.1.7", "gsap": "^3.12.5", "lil-gui": "^0.19.2", + "lottie-web": "^5.12.2", "react": "^18.2.0", "react-chrono": "^2.6.1", "react-d3-cloud": "^1.0.6", @@ -8376,6 +8377,12 @@ "loose-envify": "cli.js" } }, + "node_modules/lottie-web": { + "version": "5.12.2", + "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz", + "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==", + "license": "MIT" + }, "node_modules/lru-cache": { "version": "10.2.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.1.tgz", diff --git a/package.json b/package.json index d555ef09d..bc5cfb494 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "framer-motion": "^11.1.7", "gsap": "^3.12.5", "lil-gui": "^0.19.2", + "lottie-web": "^5.12.2", "react": "^18.2.0", "react-chrono": "^2.6.1", "react-d3-cloud": "^1.0.6", diff --git a/src/App.jsx b/src/App.jsx index 99d8d90b1..736215080 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,34 +1,44 @@ // Enhanced App component with updated styles and layout -import React from 'react'; -import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; -import { motion } from 'framer-motion'; -import NavbarCard from './Components/NavbarCard'; -import Navigation from './Components/Navigation'; -import Events from './Components/Events'; -import StudentManagement from './Components/Achievements'; -import Projects from './Components/Projects'; -import './App.css' -import Achievements from './Components/Achievements'; -import PastProjects from './Components/PastProjects'; -import UpcomingProjects from './Components/UpcomingProjects'; -import VerticalTimeline from './Components/Timeline'; -import Carousel from './Components/Carousel'; -import Hero from './Components/Hero'; -import Footer from "./Components/Footer" - - +import React from "react"; +import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; +import { motion } from "framer-motion"; +import NavbarCard from "./Components/NavbarCard"; +import Navigation from "./Components/Navigation"; +import Events from "./Components/Events"; +import StudentManagement from "./Components/Achievements"; +import Projects from "./Components/Projects"; +import "./App.css"; +import Achievements from "./Components/Achievements"; +import PastProjects from "./Components/PastProjects"; +import UpcomingProjects from "./Components/UpcomingProjects"; +import VerticalTimeline from "./Components/Timeline"; +import Carousel from "./Components/Carousel"; +import Hero from "./Components/Hero"; +import Footer from "./Components/Footer"; +import Error404 from "./Components/Error404"; +import { ContextProvider } from "./Components/Context"; +import myHook from "./Components/Context"; const Homepage = () => { + const { siteMode } = myHook(); + console.log("Homepage siteMode:", siteMode); + return (
- {/* Text Section between Hero and Carousel */} -
+ {/* Text Section between Hero and Carousel */} +

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!

-
@@ -36,33 +46,44 @@ const Homepage = () => { ); }; +function App() { + return ( + + + + ); +} +function AppContent() { + const { siteMode } = myHook(); - -function App() { return ( -
- - - - } /> - } /> - } /> - } /> - } /> - } /> - {/* } /> */} +
+ + + + } /> + } /> + } /> + } /> + } /> + } /> + {/* } /> */} - {/* } /> */} - -
- -
-
+ {/* } /> */} + + {/* New Routes */} + + } /> + +
+
); } export default App; -{/*
*/ } \ No newline at end of file +{ + /*
*/ +} diff --git a/src/Components/Achievements.jsx b/src/Components/Achievements.jsx index 3214455e2..045eb5592 100644 --- a/src/Components/Achievements.jsx +++ b/src/Components/Achievements.jsx @@ -1,31 +1,65 @@ -import React from 'react'; -import CircularCard from './CircularCard'; - +import React from "react"; +import CircularCard from "./CircularCard"; const Achievements = () => { return ( -
-

+
+

GSoC Contributors

-
-
- - - - -
+
+ + + + +
+ +
+ + + + + + + {/*
*/} + {/* //
*/}
-
-
-
- - - -
-
-
); -} +}; -export default Achievements; +export default Achievements; \ No newline at end of file diff --git a/src/Components/Carousel.jsx b/src/Components/Carousel.jsx index 8b2fa2564..7f9c62a65 100644 --- a/src/Components/Carousel.jsx +++ b/src/Components/Carousel.jsx @@ -51,8 +51,8 @@ const Carousel = () => { }, [images.length]); return ( -
-
+
+
{`Slide { const props = useSpring({ opacity: 1, from: { opacity: 0 } }); - + const { siteMode } = myHook(); return ( - - - -
- {name} -
-

{name}

-

{organization}

- - + + +
+ {name} +
+

+ {name} +

+

+ {organization} +

+ ); }; diff --git a/src/Components/Context.jsx b/src/Components/Context.jsx new file mode 100644 index 000000000..96ff346c3 --- /dev/null +++ b/src/Components/Context.jsx @@ -0,0 +1,25 @@ +import React, { createContext, useContext, useEffect, useState } from "react"; +const Context = createContext(); + +export const ContextProvider = ({ children }) => { + + const [siteMode,setSiteMode]=useState(localStorage.getItem("siteMode") || "dark") + + const value = { + siteMode,setSiteMode + }; + + + useEffect(() => { + localStorage.setItem("siteMode", siteMode); + }, [siteMode]); + + return {children}; +}; + +const myHook = () => { + const context = useContext(Context); + return context; +}; + +export default myHook; \ No newline at end of file diff --git a/src/Components/CountdownTimer.jsx b/src/Components/CountdownTimer.jsx new file mode 100644 index 000000000..34b4a4e34 --- /dev/null +++ b/src/Components/CountdownTimer.jsx @@ -0,0 +1,101 @@ +import React, { useEffect, useState } from 'react'; +import myHook from "./Context" +import { motion } from 'framer-motion'; + +const CountdownTimer = () => { + const targetDate = new Date("2025-01-25T14:00:00"); + + const [timeLeft, setTimeLeft] = useState({ + days: 0, + hours: 0, + minutes: 0, + seconds: 0, + }); + + const { siteMode }=myHook() + + useEffect(() => { + const interval = setInterval(() => { + const now = new Date(); + const difference = targetDate - now; + + if (difference <= 0) { + clearInterval(interval); + setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 }); + } else { + setTimeLeft({ + days: Math.floor(difference / (1000 * 60 * 60 * 24)), + hours: Math.floor((difference / (1000 * 60 * 60)) % 24), + minutes: Math.floor((difference / (1000 * 60)) % 60), + seconds: Math.floor((difference / 1000) % 60), + }); + } + }, 1000); + + return () => clearInterval(interval); + }, [targetDate]); + + return ( + +
+ +

+ DEBUG-A-THON starts in +

+ +
+
+ + {String(timeLeft.days).padStart(2, '0')} + +

Days

+
+ +
+ + {String(timeLeft.hours).padStart(2, '0')} + +

Hours

+
+ +
+ + {String(timeLeft.minutes).padStart(2, '0')} + +

Minutes

+
+ +
+ + {String(timeLeft.seconds).padStart(2, '0')} + +

Seconds

+
+
+
+ ); +}; + + + +export default CountdownTimer; \ No newline at end of file diff --git a/src/Components/Error404.jsx b/src/Components/Error404.jsx new file mode 100644 index 000000000..1db5be7d2 --- /dev/null +++ b/src/Components/Error404.jsx @@ -0,0 +1,37 @@ +import React,{useEffect} from "react"; +import { Link } from "react-router-dom"; +import lottie from "lottie-web" +import Error404 from "../assets/Error_404.json" + + +const NotFoundPage = () => { + useEffect(() => { + const anim = lottie.loadAnimation({ + container: document.getElementById('lottie-container'), + renderer: 'svg', + loop: true, + autoplay: true, + animationData: Error404, + }); + return () => anim.destroy(); + }, []); + return ( +
+

+ Oops! +

+
+
+

+ This page doesn't exist! +

+ + + +
+ ); +}; + +export default NotFoundPage; diff --git a/src/Components/Events.jsx b/src/Components/Events.jsx index c6085cfa1..e20b39840 100644 --- a/src/Components/Events.jsx +++ b/src/Components/Events.jsx @@ -1,105 +1,116 @@ +// -------- import React from "react"; import { Chrono } from "react-chrono"; -import '../App.css' +import myHook from "./Context"; // Import the custom hook for context +import "../App.css"; const Events = () => { + const { siteMode } = myHook(); // Get the current theme from context + const items = [ { 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", media: { type: "IMAGE", source: { - url: "src/assets/Xplore_1.jpg" - } - } + url: "src/assets/Xplore_1.jpg", + }, + }, }, { 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", media: { type: "IMAGE", source: { - url: "src/assets/OpenCV.jpg" - } - } + url: "src/assets/OpenCV.jpg", + }, + }, }, { 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 exhaustive process involving tasks, proposal preparations, and interviews was carried out to shortlist Sys for the mentorship program.", media: { type: "IMAGE", source: { - url: "src/assets/selection_phase.png" - } - } + url: "src/assets/selection_phase.png", + }, + }, }, { 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.", + cardTitle: "Weekly Meets and Project Development Phase", + cardDetailedText: "Sys developed their respective projects under the mentorship of Tys, which was continuously monitored by Lys via weekly presentations.", media: { type: "IMAGE", source: { - url: "src/assets/Weekly_meet.JPG" - } - } + url: "src/assets/Weekly_meet.JPG", + }, + }, }, { 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, and the Sys presented their work and answered the questions posed to them.", media: { type: "IMAGE", source: { - url: "src/assets/final_presentation.jpeg" - } - } - } + url: "src/assets/final_presentation.jpeg", + }, + }, + }, ]; + // Theme configurations for light and dark modes + const theme = siteMode === "dark" ? { + primary: "#fff", + secondary: "#e2e8f0", + cardBgColor: "rgba(30, 41, 59, 0.8)", + cardDetailsColor: "#e2e8f0", + cardSubtitleColor: "#a0aec0", + cardForeColor: "#fff", + titleColor: "#fff", + cardText: "#e2e8f0", + lineColor: "#4a5568", + dotColor: "#0b228c", + } : { + primary: "#1a202c", + secondary: "#718096", + cardBgColor: "rgba(255, 255, 255, 0.9)", + cardDetailsColor: "#2d3748", + cardSubtitleColor: "#4a5568", + cardForeColor: "#1a202c", + titleColor: "#1a202c", + cardText:"white", + lineColor: "#a0aec0", + dotColor: "#2b6cb0", + }; + return ( -
-
-
+
+
+
- ) -} + ); +}; -export default Events; \ No newline at end of file +export default Events; diff --git a/src/Components/FeatureCard.jsx b/src/Components/FeatureCard.jsx index ff5a5fbf0..15d4c6f63 100644 --- a/src/Components/FeatureCard.jsx +++ b/src/Components/FeatureCard.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { useNavigate } from 'react-router-dom'; import '../App.css' - +import myHook from './Context'; const FeatureCard = ({ title, tag, @@ -15,26 +15,27 @@ const FeatureCard = ({ const handleButtonClick = () => { window.open(page, '_blank'); }; + const {siteMode}=myHook() return ( -
+

{title}

-

{tag}

+

{tag}

-

{info}

+

{info}

-
+
diff --git a/src/Components/Hero.jsx b/src/Components/Hero.jsx index b5960745c..3d01b70a4 100644 --- a/src/Components/Hero.jsx +++ b/src/Components/Hero.jsx @@ -1,26 +1,31 @@ -import React from 'react'; +import React from "react"; // import ThreeJSComponent from './ThreeJSComponent'; // import Sphere from "./icons"; - +import CountdownTimer from "./CountdownTimer"; const Hero = () => { - return ( -
-
-
-

ProjectX

-

Innovating the future

+ return ( +
+ +
+
+

+ ProjectX +

+

+ Innovating the future +

-
- + + + style={{ clipPath: "polygon(0 0, 100% 0, 100% 90%, 0 100%)" }} + > - -
- - ); -} + +
+ ); +}; export default Hero; diff --git a/src/Components/Navigation.jsx b/src/Components/Navigation.jsx index 764a54e79..a0540a004 100644 --- a/src/Components/Navigation.jsx +++ b/src/Components/Navigation.jsx @@ -1,24 +1,91 @@ -// Enhanced Navigation component with updated styles -import React from 'react'; +import React, { useState } from 'react'; import { Link } from 'react-router-dom'; +import { FaBars, FaTimes } from 'react-icons/fa'; +import { MdLightMode, MdDarkMode } from 'react-icons/md'; import logo from '../assets/X_Logo.png'; - +import myHook from './Context'; const Navigation = () => { + const [isMenuOpen, setIsMenuOpen] = useState(false); + const { siteMode,setSiteMode}=myHook() + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + const toggleTheme = () => { + console.log(siteMode) + setSiteMode(siteMode === 'dark' ? 'light' : 'dark'); + }; + + const navLinks = [ + { to: '/', label: 'Home' }, + { to: '/events', label: 'Events' }, + { to: '/projects', label: 'Projects' }, + { to: '/achievements', label: 'Achievements' } + ]; + return ( -