diff --git a/src/App.jsx b/src/App.jsx index 99d8d90b1..f96d69ab0 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,68 +1,58 @@ -// 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" - - -const Homepage = () => { - return ( -
- - {/* 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! -

-
- -
- -
-
- ); -}; - - - +import { + BrowserRouter as Router, + Routes, + Route, + useLocation, +} from 'react-router-dom'; +import { AnimatePresence } from 'framer-motion'; + +// Routes +import Events from './pages/Events'; +import Projects from './pages/Projects'; +import Achievements from './pages/Achievements'; +import PastProjects from './pages/PastProjects'; +import UpcomingProjects from './pages/UpcomingProjects'; +import Homepage from './pages/Homepage'; +import NotFound from './pages/NotFound'; + +// Components +import Navigation from './components/Navigation'; +import Footer from './components/Footer'; + +// CSS +import './App.css'; + +function AnimatedRoutes() { + const location = useLocation(); + return ( + + + } /> + } /> + } /> + } /> + } /> + } + /> + } /> + + + ); +} function App() { - return ( -
- - - - } /> - } /> - } /> - } /> - } /> - } /> - {/* } /> */} - - {/* } /> */} - -
- ); + return ( +
+ + + +
+ ); } export default App; - -{/*
*/ } \ No newline at end of file diff --git a/src/Components/Achievements.jsx b/src/Components/Achievements.jsx deleted file mode 100644 index 3214455e2..000000000 --- a/src/Components/Achievements.jsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import CircularCard from './CircularCard'; - -const Achievements = () => { - return ( -
-

- GSoC Contributors -

-
-
- - - - -
-
-
-
-
- - - -
-
-
-
- ); -} - -export default Achievements; diff --git a/src/Components/Card.jsx b/src/Components/Card.jsx index 8140228ab..c3f4dc2a7 100644 --- a/src/Components/Card.jsx +++ b/src/Components/Card.jsx @@ -1,14 +1,18 @@ import React from 'react'; const Card = ({ image, text }) => { - return ( -
- Card image -
-

{text}

-
-
- ); + return ( +
+ Card image +
+

{text}

+
+
+ ); }; export default Card; diff --git a/src/Components/Carousel.jsx b/src/Components/Carousel.jsx index 8b2fa2564..1560d48e2 100644 --- a/src/Components/Carousel.jsx +++ b/src/Components/Carousel.jsx @@ -1,64 +1,64 @@ import React, { useEffect, useState } from 'react'; const Typewriter = ({ texts, delay = 100 }) => { - const [textIndex, setTextIndex] = useState(0); - const [displayText, setDisplayText] = useState(''); - const [isDeleting, setIsDeleting] = useState(false); - const [typingSpeed, setTypingSpeed] = useState(delay); + const [textIndex, setTextIndex] = useState(0); + const [displayText, setDisplayText] = useState(''); + const [isDeleting, setIsDeleting] = useState(false); + const [typingSpeed, setTypingSpeed] = useState(delay); - useEffect(() => { - const handleTyping = () => { - const currentText = texts[textIndex]; - if (isDeleting) { - setDisplayText((prev) => prev.slice(0, prev.length - 1)); - setTypingSpeed(delay / 2); - } else { - setDisplayText((prev) => currentText.slice(0, prev.length + 1)); - setTypingSpeed(delay); - } + useEffect(() => { + const handleTyping = () => { + const currentText = texts[textIndex]; + if (isDeleting) { + setDisplayText((prev) => prev.slice(0, prev.length - 1)); + setTypingSpeed(delay / 2); + } else { + setDisplayText((prev) => currentText.slice(0, prev.length + 1)); + setTypingSpeed(delay); + } - if (!isDeleting && displayText === currentText) { - setTimeout(() => setIsDeleting(true), 1000); - } else if (isDeleting && displayText === '') { - setIsDeleting(false); - setTextIndex((prev) => (prev + 1) % texts.length); - } - }; + if (!isDeleting && displayText === currentText) { + setTimeout(() => setIsDeleting(true), 1000); + } else if (isDeleting && displayText === '') { + setIsDeleting(false); + setTextIndex((prev) => (prev + 1) % texts.length); + } + }; - const timer = setTimeout(handleTyping, typingSpeed); - return () => clearTimeout(timer); - }, [displayText, isDeleting, typingSpeed, textIndex, texts, delay]); + const timer = setTimeout(handleTyping, typingSpeed); + return () => clearTimeout(timer); + }, [displayText, isDeleting, typingSpeed, textIndex, texts, delay]); - return
{displayText}
; + return
{displayText}
; }; const Carousel = () => { - const images = [ - "src/assets/OpenCV.jpg", - "src/assets/Image2.jpg", - "src/assets/Image1.jpg", - "src/assets/Image3.jpg", - "src/assets/Image4.jpg", - ]; + const images = [ + 'src/assets/OpenCV.jpg', + 'src/assets/Image2.jpg', + 'src/assets/Image1.jpg', + 'src/assets/Image3.jpg', + 'src/assets/Image4.jpg', + ]; - const [currentIndex, setCurrentIndex] = useState(0); + const [currentIndex, setCurrentIndex] = useState(0); - useEffect(() => { - const interval = setInterval(() => { - setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length); - }, 3000); - return () => clearInterval(interval); - }, [images.length]); + useEffect(() => { + const interval = setInterval(() => { + setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length); + }, 3000); + return () => clearInterval(interval); + }, [images.length]); - return ( -
-
- {`Slide - {/*
+ return ( +
+
+ {`Slide + {/*
{ />
*/} -
-
- ); +
+
+ ); }; export default Carousel; diff --git a/src/Components/CircularCard.jsx b/src/Components/CircularCard.jsx index fe20619b8..1f4f2d9d4 100644 --- a/src/Components/CircularCard.jsx +++ b/src/Components/CircularCard.jsx @@ -2,21 +2,33 @@ import React from 'react'; import { useSpring, animated } from 'react-spring'; const CircularCard = ({ image, name, organization, link }) => { - const props = useSpring({ opacity: 1, from: { opacity: 0 } }); + const props = useSpring({ opacity: 1, from: { opacity: 0 } }); - return ( - - - -
- {name} -
-

{name}

-

{organization}

- - - - ); + return ( + + +
+ {name} +
+

+ {name} +

+

{organization}

+ + + ); }; export default CircularCard; diff --git a/src/Components/Events.jsx b/src/Components/Events.jsx deleted file mode 100644 index c6085cfa1..000000000 --- a/src/Components/Events.jsx +++ /dev/null @@ -1,105 +0,0 @@ -import React from "react"; -import { Chrono } from "react-chrono"; -import '../App.css' - -const Events = () => { - 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" - } - } - }, - { - 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" - } - } - }, - { - 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.", - media: { - type: "IMAGE", - source: { - 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.", - media: { - type: "IMAGE", - source: { - 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.", - media: { - type: "IMAGE", - source: { - url: "src/assets/final_presentation.jpeg" - } - } - } - ]; - - return ( -
-
-
- -
-
-
- ) -} - -export default Events; \ No newline at end of file diff --git a/src/Components/FeatureCard.jsx b/src/Components/FeatureCard.jsx index ff5a5fbf0..8010cce88 100644 --- a/src/Components/FeatureCard.jsx +++ b/src/Components/FeatureCard.jsx @@ -1,46 +1,52 @@ import React from 'react'; import { useNavigate } from 'react-router-dom'; -import '../App.css' +import '../App.css'; const FeatureCard = ({ - title, - tag, - info, - buttontext, - style, - tagStyle, - page, + title, + tag, + info, + buttontext, + style, + tagStyle, + page, }) => { - const navigate = useNavigate(); - const handleButtonClick = () => { - window.open(page, '_blank'); - }; + const navigate = useNavigate(); + const handleButtonClick = () => { + window.open(page, '_blank'); + }; - return ( -
-
-

- {title} -

-
-
-

{tag}

-
-
-

{info}

-
-
- -
-
- ); +
+

+ {title} +

+
+
+

+ {tag} +

+
+
+

{info}

+
+
+ +
+
+ ); }; export default FeatureCard; diff --git a/src/Components/Footer.jsx b/src/Components/Footer.jsx index 8998d324e..b87d103eb 100644 --- a/src/Components/Footer.jsx +++ b/src/Components/Footer.jsx @@ -1,26 +1,42 @@ import React from 'react'; import { FaInstagram, FaGithub, FaEnvelope } from 'react-icons/fa'; -import { Link } from 'react-router-dom'; const Footer = () => { - return ( - - ); + return ( + + ); }; -export default Footer; \ No newline at end of file +export default Footer; diff --git a/src/Components/Hero.jsx b/src/Components/Hero.jsx index b5960745c..ec30d2b56 100644 --- a/src/Components/Hero.jsx +++ b/src/Components/Hero.jsx @@ -5,22 +5,25 @@ import React from 'react'; const Hero = () => { return (
-
-
-

ProjectX

-

Innovating the future

+
+
+

+ ProjectX +

+

+ Innovating the future +

+
+
+ + +
-
- - - -
- ); -} +}; export default Hero; diff --git a/src/Components/NavbarCard.jsx b/src/Components/NavbarCard.jsx index 43c52f8da..4ca38ea7d 100644 --- a/src/Components/NavbarCard.jsx +++ b/src/Components/NavbarCard.jsx @@ -1,13 +1,19 @@ import React from 'react'; const NavbarCard = ({ title, description, icon }) => { - return ( -
- {icon && {title}} -

{title}

-

{description}

-
- ); + return ( +
+ {icon && ( + {title} + )} +

{title}

+

{description}

+
+ ); }; export default NavbarCard; diff --git a/src/Components/Navigation.jsx b/src/Components/Navigation.jsx index 764a54e79..7c648054d 100644 --- a/src/Components/Navigation.jsx +++ b/src/Components/Navigation.jsx @@ -4,21 +4,47 @@ import { Link } from 'react-router-dom'; import logo from '../assets/X_Logo.png'; const Navigation = () => { - return ( - - ); + return ( + + ); }; export default Navigation; diff --git a/src/Components/PastProjects.jsx b/src/Components/PastProjects.jsx deleted file mode 100644 index 700cfc7bd..000000000 --- a/src/Components/PastProjects.jsx +++ /dev/null @@ -1,101 +0,0 @@ -import React from 'react'; -import FeatureCard from './FeatureCard'; // Assuming FeatureCard is in the same directory - -const PastProjects = () => { - return ( -
-
-
-

Past Projects

-
- - - - - - -
- -
- - {/* */} -
-
-
-
- ); -}; - -export default PastProjects; diff --git a/src/Components/Projects.jsx b/src/Components/Projects.jsx deleted file mode 100644 index 788a4b0ba..000000000 --- a/src/Components/Projects.jsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; - -const CardRow = () => { - return ( -
-
- -
-
- -
-
- -
-
-
-
- ); -}; - -const Card = ({ title, link }) => { - return ( - -
-
-
-
{title}
-
-

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

-
- - Read more - -
- ); -}; - -export default CardRow; diff --git a/src/Components/ThreeJSComponent.jsx b/src/Components/ThreeJSComponent.jsx index 6de4f6918..eb3244217 100644 --- a/src/Components/ThreeJSComponent.jsx +++ b/src/Components/ThreeJSComponent.jsx @@ -2,183 +2,226 @@ import React, { useEffect, useRef } from 'react'; import * as THREE from 'three'; const ThreeJSComponent = () => { - const containerRef = useRef(null); - - useEffect(() => { - let group; - let particlesData = []; - let camera, scene, renderer; - let positions, colors; - let particles; - let pointCloud; - let particlePositions; - let linesMesh; - - const maxParticleCount = 1000; - let particleCount = 500; - const r = 800; - const rHalf = r / 2; - - const container = containerRef.current; - - camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000); - camera.position.z = 1750; - - scene = new THREE.Scene(); - - group = new THREE.Group(); - scene.add(group); - - const helper = new THREE.BoxHelper(new THREE.Mesh(new THREE.BoxGeometry(r, r, r))); - helper.material.color.setHex(0x474747); - helper.material.blending = THREE.AdditiveBlending; - helper.material.transparent = true; - group.add(helper); - - const segments = maxParticleCount * maxParticleCount; - positions = new Float32Array(segments * 3); - colors = new Float32Array(segments * 3); - - const pMaterial = new THREE.PointsMaterial({ - size: 3, - blending: THREE.AdditiveBlending, - transparent: true, - sizeAttenuation: false, - }); - - particles = new THREE.BufferGeometry(); - particlePositions = new Float32Array(maxParticleCount * 3); - - for (let i = 0; i < maxParticleCount; i++) { - const x = Math.random() * r - r / 2; - const y = Math.random() * r - r / 2; - const z = Math.random() * r - r / 2; - - particlePositions[i * 3] = x; - particlePositions[i * 3 + 1] = y; - particlePositions[i * 3 + 2] = z; - - particlesData.push({ - velocity: new THREE.Vector3(-1 + Math.random() * 2, -1 + Math.random() * 2, -1 + Math.random() * 2), - numConnections: 0, - }); - } - - particles.setDrawRange(0, particleCount); - particles.setAttribute('position', new THREE.BufferAttribute(particlePositions, 3).setUsage(THREE.DynamicDrawUsage)); - - pointCloud = new THREE.Points(particles, pMaterial); - group.add(pointCloud); - - const geometry = new THREE.BufferGeometry(); - geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3).setUsage(THREE.DynamicDrawUsage)); - geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3).setUsage(THREE.DynamicDrawUsage)); - geometry.computeBoundingSphere(); - geometry.setDrawRange(0, 0); - - const material = new THREE.LineBasicMaterial({ - vertexColors: true, - blending: THREE.AdditiveBlending, - transparent: true, - }); - - linesMesh = new THREE.LineSegments(geometry, material); - group.add(linesMesh); - - renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - container.appendChild(renderer.domElement); - - window.addEventListener('resize', onWindowResize); - - function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); - } - - function animate() { - let vertexpos = 0; - let colorpos = 0; - let numConnected = 0; - - for (let i = 0; i < particleCount; i++) particlesData[i].numConnections = 0; - - for (let i = 0; i < particleCount; i++) { - const particleData = particlesData[i]; - - particlePositions[i * 3] += particleData.velocity.x; - particlePositions[i * 3 + 1] += particleData.velocity.y; - particlePositions[i * 3 + 2] += particleData.velocity.z; - - if (particlePositions[i * 3 + 1] < -rHalf || particlePositions[i * 3 + 1] > rHalf) - particleData.velocity.y = -particleData.velocity.y; - - if (particlePositions[i * 3] < -rHalf || particlePositions[i * 3] > rHalf) - particleData.velocity.x = -particleData.velocity.x; - - if (particlePositions[i * 3 + 2] < -rHalf || particlePositions[i * 3 + 2] > rHalf) - particleData.velocity.z = -particleData.velocity.z; - - for (let j = i + 1; j < particleCount; j++) { - const particleDataB = particlesData[j]; - - const dx = particlePositions[i * 3] - particlePositions[j * 3]; - const dy = particlePositions[i * 3 + 1] - particlePositions[j * 3 + 1]; - const dz = particlePositions[i * 3 + 2] - particlePositions[j * 3 + 2]; - const dist = Math.sqrt(dx * dx + dy * dy + dz * dz); - - if (dist < 150) { - particleData.numConnections++; - particleDataB.numConnections++; - - const alpha = 1.0 - dist / 150; - - positions[vertexpos++] = particlePositions[i * 3]; - positions[vertexpos++] = particlePositions[i * 3 + 1]; - positions[vertexpos++] = particlePositions[i * 3 + 2]; - - positions[vertexpos++] = particlePositions[j * 3]; - positions[vertexpos++] = particlePositions[j * 3 + 1]; - positions[vertexpos++] = particlePositions[j * 3 + 2]; - - colors[colorpos++] = alpha; - colors[colorpos++] = alpha; - colors[colorpos++] = alpha; - - colors[colorpos++] = alpha; - colors[colorpos++] = alpha; - colors[colorpos++] = alpha; - - numConnected++; - } + const containerRef = useRef(null); + + useEffect(() => { + let group; + let particlesData = []; + let camera, scene, renderer; + let positions, colors; + let particles; + let pointCloud; + let particlePositions; + let linesMesh; + + const maxParticleCount = 1000; + let particleCount = 500; + const r = 800; + const rHalf = r / 2; + + const container = containerRef.current; + + camera = new THREE.PerspectiveCamera( + 45, + window.innerWidth / window.innerHeight, + 1, + 4000 + ); + camera.position.z = 1750; + + scene = new THREE.Scene(); + + group = new THREE.Group(); + scene.add(group); + + const helper = new THREE.BoxHelper( + new THREE.Mesh(new THREE.BoxGeometry(r, r, r)) + ); + helper.material.color.setHex(0x474747); + helper.material.blending = THREE.AdditiveBlending; + helper.material.transparent = true; + group.add(helper); + + const segments = maxParticleCount * maxParticleCount; + positions = new Float32Array(segments * 3); + colors = new Float32Array(segments * 3); + + const pMaterial = new THREE.PointsMaterial({ + size: 3, + blending: THREE.AdditiveBlending, + transparent: true, + sizeAttenuation: false, + }); + + particles = new THREE.BufferGeometry(); + particlePositions = new Float32Array(maxParticleCount * 3); + + for (let i = 0; i < maxParticleCount; i++) { + const x = Math.random() * r - r / 2; + const y = Math.random() * r - r / 2; + const z = Math.random() * r - r / 2; + + particlePositions[i * 3] = x; + particlePositions[i * 3 + 1] = y; + particlePositions[i * 3 + 2] = z; + + particlesData.push({ + velocity: new THREE.Vector3( + -1 + Math.random() * 2, + -1 + Math.random() * 2, + -1 + Math.random() * 2 + ), + numConnections: 0, + }); } - } - linesMesh.geometry.setDrawRange(0, numConnected * 2); - linesMesh.geometry.attributes.position.needsUpdate = true; - linesMesh.geometry.attributes.color.needsUpdate = true; - pointCloud.geometry.attributes.position.needsUpdate = true; + particles.setDrawRange(0, particleCount); + particles.setAttribute( + 'position', + new THREE.BufferAttribute(particlePositions, 3).setUsage( + THREE.DynamicDrawUsage + ) + ); + + pointCloud = new THREE.Points(particles, pMaterial); + group.add(pointCloud); + + const geometry = new THREE.BufferGeometry(); + geometry.setAttribute( + 'position', + new THREE.BufferAttribute(positions, 3).setUsage( + THREE.DynamicDrawUsage + ) + ); + geometry.setAttribute( + 'color', + new THREE.BufferAttribute(colors, 3).setUsage( + THREE.DynamicDrawUsage + ) + ); + geometry.computeBoundingSphere(); + geometry.setDrawRange(0, 0); + + const material = new THREE.LineBasicMaterial({ + vertexColors: true, + blending: THREE.AdditiveBlending, + transparent: true, + }); + + linesMesh = new THREE.LineSegments(geometry, material); + group.add(linesMesh); + + renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(window.innerWidth, window.innerHeight); + container.appendChild(renderer.domElement); + + window.addEventListener('resize', onWindowResize); + + function onWindowResize() { + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + renderer.setSize(window.innerWidth, window.innerHeight); + } - render(); - } + function animate() { + let vertexpos = 0; + let colorpos = 0; + let numConnected = 0; + + for (let i = 0; i < particleCount; i++) + particlesData[i].numConnections = 0; + + for (let i = 0; i < particleCount; i++) { + const particleData = particlesData[i]; + + particlePositions[i * 3] += particleData.velocity.x; + particlePositions[i * 3 + 1] += particleData.velocity.y; + particlePositions[i * 3 + 2] += particleData.velocity.z; + + if ( + particlePositions[i * 3 + 1] < -rHalf || + particlePositions[i * 3 + 1] > rHalf + ) + particleData.velocity.y = -particleData.velocity.y; + + if ( + particlePositions[i * 3] < -rHalf || + particlePositions[i * 3] > rHalf + ) + particleData.velocity.x = -particleData.velocity.x; + + if ( + particlePositions[i * 3 + 2] < -rHalf || + particlePositions[i * 3 + 2] > rHalf + ) + particleData.velocity.z = -particleData.velocity.z; + + for (let j = i + 1; j < particleCount; j++) { + const particleDataB = particlesData[j]; + + const dx = + particlePositions[i * 3] - particlePositions[j * 3]; + const dy = + particlePositions[i * 3 + 1] - + particlePositions[j * 3 + 1]; + const dz = + particlePositions[i * 3 + 2] - + particlePositions[j * 3 + 2]; + const dist = Math.sqrt(dx * dx + dy * dy + dz * dz); + + if (dist < 150) { + particleData.numConnections++; + particleDataB.numConnections++; + + const alpha = 1.0 - dist / 150; + + positions[vertexpos++] = particlePositions[i * 3]; + positions[vertexpos++] = particlePositions[i * 3 + 1]; + positions[vertexpos++] = particlePositions[i * 3 + 2]; + + positions[vertexpos++] = particlePositions[j * 3]; + positions[vertexpos++] = particlePositions[j * 3 + 1]; + positions[vertexpos++] = particlePositions[j * 3 + 2]; + + colors[colorpos++] = alpha; + colors[colorpos++] = alpha; + colors[colorpos++] = alpha; + + colors[colorpos++] = alpha; + colors[colorpos++] = alpha; + colors[colorpos++] = alpha; + + numConnected++; + } + } + } + + linesMesh.geometry.setDrawRange(0, numConnected * 2); + linesMesh.geometry.attributes.position.needsUpdate = true; + linesMesh.geometry.attributes.color.needsUpdate = true; + pointCloud.geometry.attributes.position.needsUpdate = true; + + render(); + } - function render() { - const time = Date.now() * 0.001; - group.rotation.y = time * 0.1; - renderer.render(scene, camera); - } + function render() { + const time = Date.now() * 0.001; + group.rotation.y = time * 0.1; + renderer.render(scene, camera); + } - renderer.setAnimationLoop(animate); + renderer.setAnimationLoop(animate); - return () => { - window.removeEventListener('resize', onWindowResize); - renderer.dispose(); - }; - }, []); + return () => { + window.removeEventListener('resize', onWindowResize); + renderer.dispose(); + }; + }, []); - return
; + return ( +
+ ); }; export default ThreeJSComponent; diff --git a/src/Components/Timeline.jsx b/src/Components/Timeline.jsx index 074281036..b86ef0ba3 100644 --- a/src/Components/Timeline.jsx +++ b/src/Components/Timeline.jsx @@ -2,127 +2,144 @@ import { useEffect } from 'react'; import './timeline.css'; const VerticalTimeline = () => { - useEffect(() => { - const items = document.querySelectorAll("#timeline li"); + useEffect(() => { + const items = document.querySelectorAll('#timeline li'); - const isInViewport = (el) => { - const rect = el.getBoundingClientRect(); - return ( - rect.top >= 0 && - rect.left >= 0 && - rect.bottom <= - (window.innerHeight || document.documentElement.clientHeight) && - rect.right <= (window.innerWidth || document.documentElement.clientWidth) - ); - }; + const isInViewport = (el) => { + const rect = el.getBoundingClientRect(); + return ( + rect.top >= 0 && + rect.left >= 0 && + rect.bottom <= + (window.innerHeight || + document.documentElement.clientHeight) && + rect.right <= + (window.innerWidth || document.documentElement.clientWidth) + ); + }; - const run = () => - items.forEach((item) => { - if (isInViewport(item)) { - item.classList.add("show"); - } - }); + const run = () => + items.forEach((item) => { + if (isInViewport(item)) { + item.classList.add('show'); + } + }); - // Events - window.addEventListener("load", run); - window.addEventListener("resize", run); - window.addEventListener("scroll", run); + // Events + window.addEventListener('load', run); + window.addEventListener('resize', run); + window.addEventListener('scroll', run); - return () => { - window.removeEventListener("load", run); - window.removeEventListener("resize", run); - window.removeEventListener("scroll", run); - }; - }, []); + return () => { + window.removeEventListener('load', run); + window.removeEventListener('resize', run); + window.removeEventListener('scroll', run); + }; + }, []); - return ( -
-
-
-
-
-

Name Surname / Company Name

-

VERTICAL TIMELINE

-
-
-
    -

    2015

    -
  • -
    -
    -

    Title One

    -
    -

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

    -
    -
    • -

    2016

    -
  • -
    -
    -

    Title Two

    -
    -

    - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt non - illum dolores est harum minus, modi alias ad dolorum ipsum. -

    -
    -
    • -

    2017

    -
  • -
    -
    -

    Title Three

    -
    -

    - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut - recusandae cumque cupiditate eius quis! Hic assumenda nemo eos. - Consequuntur, fugiat. Nam quis dolor magni distinctio. -

    -
    -
    • -

    2018

    -
  • -
    -
    -

    Title Four

    -
    -

    - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora - quae nesciunt ullam officia asperiores culpa. -

    -
    -
    • -

    2019

    -
  • -
    -
    -

    Title Five

    -
    -

    - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt - rerum facere quisquam quasi? Totam nulla libero beatae itaque? -

    -
    -
    • -

    2020

    -
  • -
    -
    -

    Title Six

    -
    -

    - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt non - illum dolores est harum minus, modi alias ad dolorum ipsum. -

    -
    -
    • -
-
-
- ); + return ( +
+
+
+
+
+

+ Name Surname / + Company Name +

+

VERTICAL TIMELINE

+
+
+
    +

    2015

    +
  • +
    +
    +

    Title One

    +
    +

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

    +
    +
    • +

    2016

    +
  • +
    +
    +

    Title Two

    +
    +

    + Lorem ipsum dolor, sit amet consectetur + adipisicing elit. Sunt non illum dolores + est harum minus, modi alias ad dolorum + ipsum. +

    +
    +
    • +

    2017

    +
  • +
    +
    +

    Title Three

    +
    +

    + Lorem ipsum dolor sit, amet consectetur + adipisicing elit. Ut recusandae cumque + cupiditate eius quis! Hic assumenda nemo + eos. Consequuntur, fugiat. Nam quis + dolor magni distinctio. +

    +
    +
    • +

    2018

    +
  • +
    +
    +

    Title Four

    +
    +

    + Lorem ipsum dolor, sit amet consectetur + adipisicing elit. Tempora quae nesciunt + ullam officia asperiores culpa. +

    +
    +
    • +

    2019

    +
  • +
    +
    +

    Title Five

    +
    +

    + Lorem ipsum dolor sit, amet consectetur + adipisicing elit. Deserunt rerum facere + quisquam quasi? Totam nulla libero + beatae itaque? +

    +
    +
    • +

    2020

    +
  • +
    +
    +

    Title Six

    +
    +

    + Lorem ipsum dolor, sit amet consectetur + adipisicing elit. Sunt non illum dolores + est harum minus, modi alias ad dolorum + ipsum. +

    +
    +
    • +
+
+
+
+
+ ); }; export default VerticalTimeline; diff --git a/src/Components/icons.jsx b/src/Components/icons.jsx index be8e43df4..9b85d3e78 100644 --- a/src/Components/icons.jsx +++ b/src/Components/icons.jsx @@ -1,49 +1,81 @@ -import React from "react"; -import allIcons from "simple-icons"; -import { v4 } from "uuid"; -import { IconCloud } from "react-icon-cloud"; +import React from 'react'; +import allIcons from 'simple-icons'; +import { v4 } from 'uuid'; +import { IconCloud } from 'react-icon-cloud'; const Sphere = () => { - const tagCanvasOptions = { - imageScale: 2, - initial: [0.1, -0.1], - reverse: true, - tooltip: "native", - tooltipDelay: 0, - wheelZoom: true - }; + const tagCanvasOptions = { + imageScale: 2, + initial: [0.1, -0.1], + reverse: true, + tooltip: 'native', + tooltipDelay: 0, + wheelZoom: true, + }; - const iconSlugs = [ - "airfrance", "arlo", "dart", "java", "react", "flutter", "android", "andel", - "html5", "audible", "nodedotjs", "express", "nextdotjs", "prisma", "amazonaws", - "postgresql", "firebase", "battledotnet", "nginx", "vercel", "canva", - "testinglibrary", "jest", "cypress", "docker", "git", "figshare", "jira", - "github", "gitlab", "electron", "visualstudiocode", "androidstudio", "sonarqube", "figma" - ]; + const iconSlugs = [ + 'airfrance', + 'arlo', + 'dart', + 'java', + 'react', + 'flutter', + 'android', + 'andel', + 'html5', + 'audible', + 'nodedotjs', + 'express', + 'nextdotjs', + 'prisma', + 'amazonaws', + 'postgresql', + 'firebase', + 'battledotnet', + 'nginx', + 'vercel', + 'canva', + 'testinglibrary', + 'jest', + 'cypress', + 'docker', + 'git', + 'figshare', + 'jira', + 'github', + 'gitlab', + 'electron', + 'visualstudiocode', + 'androidstudio', + 'sonarqube', + 'figma', + ]; - const iconTags = iconSlugs.map((slug) => { - const icon = allIcons.Get(slug); - if (!icon) { - console.error(`Icon for ${slug} not found`); - return null; - } - return { id: slug, simpleIcon: icon }; - }).filter(tag => tag !== null); + const iconTags = iconSlugs + .map((slug) => { + const icon = allIcons.Get(slug); + if (!icon) { + console.error(`Icon for ${slug} not found`); + return null; + } + return { id: slug, simpleIcon: icon }; + }) + .filter((tag) => tag !== null); - return ( -
- -
- ); + return ( +
+ +
+ ); }; export default Sphere; diff --git a/src/pages/Achievements.jsx b/src/pages/Achievements.jsx new file mode 100644 index 000000000..183c73032 --- /dev/null +++ b/src/pages/Achievements.jsx @@ -0,0 +1,90 @@ +import React from 'react'; +import CircularCard from '../components/CircularCard'; +import { motion } from 'framer-motion'; + +let time = 0.1; +let delta = 0.02; +const AnimatedCircularCard = (props) => { + time += delta; + return ( + + + + ); +}; + +const Achievements = () => { + return ( +
+ +

+ GSoC Contributors +

+ +
+
+ + + + +
+
+
+
+
+ + + +
+
+
+
+ ); +}; + +export default Achievements; diff --git a/src/pages/Events.jsx b/src/pages/Events.jsx new file mode 100644 index 000000000..e29abf007 --- /dev/null +++ b/src/pages/Events.jsx @@ -0,0 +1,125 @@ +import React from 'react'; +import { Chrono } from 'react-chrono'; +import '../App.css'; +import { motion } from 'framer-motion'; + +const Events = () => { + 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', + }, + }, + }, + { + 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', + }, + }, + }, + { + 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.', + media: { + type: 'IMAGE', + source: { + 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.', + media: { + type: 'IMAGE', + source: { + 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.', + media: { + type: 'IMAGE', + source: { + url: 'src/assets/final_presentation.jpeg', + }, + }, + }, + ]; + + return ( +
+
+ + + +
+
+ ); +}; + +export default Events; diff --git a/src/pages/Homepage.jsx b/src/pages/Homepage.jsx new file mode 100644 index 000000000..224fc64c3 --- /dev/null +++ b/src/pages/Homepage.jsx @@ -0,0 +1,40 @@ +import Carousel from '../components/Carousel'; +import Hero from '../components/Hero'; +import { motion } from 'framer-motion'; + +const Homepage = () => { + return ( + + + {/* 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! +

+
+ +
+ +
+ + ); +}; + +export default Homepage; diff --git a/src/pages/NotFound.jsx b/src/pages/NotFound.jsx new file mode 100644 index 000000000..1be4e3ce7 --- /dev/null +++ b/src/pages/NotFound.jsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { useNavigate } from 'react-router-dom'; +import { motion } from 'framer-motion'; +import '../App.css'; + +const NotFound = () => { + const navigate = useNavigate(); + console.log('Not Found Button!'); + return ( + +
+
+
+
+ Oops, this page doesn't exist! +
+
+ +
+
+
+
+ + ); +}; + +export default NotFound; diff --git a/src/pages/PastProjects.jsx b/src/pages/PastProjects.jsx new file mode 100644 index 000000000..14849e0de --- /dev/null +++ b/src/pages/PastProjects.jsx @@ -0,0 +1,135 @@ +import React from 'react'; +import FeatureCard from '../components/FeatureCard'; +import { motion } from 'framer-motion'; + +const AnimatedLeftFeatureCard = (props) => { + return ( + + + + ); +}; + +const AnimatedRightFeatureCard = (props) => { + return ( + + + + ); +}; + +const PastProjects = () => { + return ( +
+
+
+ + Past Projects + +
+ + + + + + + + + + {/* */} +
+
+
+
+ ); +}; + +export default PastProjects; diff --git a/src/pages/Projects.jsx b/src/pages/Projects.jsx new file mode 100644 index 000000000..9d4af0433 --- /dev/null +++ b/src/pages/Projects.jsx @@ -0,0 +1,60 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import { motion } from 'framer-motion'; + +const CardRow = () => { + return ( +
+
+
+
+ +
+
+ +
+
+
+
+ ); +}; + +const Card = ({ title, link }) => { + return ( + +
+
+
+
+ {title} +
+
+

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

+
+ + Read more + +
+ + ); +}; + +export default CardRow; diff --git a/src/Components/UpcomingProjects.jsx b/src/pages/UpcomingProjects.jsx similarity index 64% rename from src/Components/UpcomingProjects.jsx rename to src/pages/UpcomingProjects.jsx index 8753429ca..467fac8da 100644 --- a/src/Components/UpcomingProjects.jsx +++ b/src/pages/UpcomingProjects.jsx @@ -7,17 +7,24 @@ const UpcomingProjects = () => { WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', animation: 'bounce 2s infinite', - fontFamily: "'Roboto Mono', monospace" + fontFamily: "'Roboto Mono', monospace", }; return (
-

Upcoming Projects

-

Coming Soon

+

+ Upcoming Projects +

+

+ Coming Soon +

); -} +}; export default UpcomingProjects;