@@ -204,7 +203,7 @@ function Homepage() {
}}
>
Our Sponsors
-
+
diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx
index 3d529d4..9f3e0ed 100644
--- a/src/pages/Projects.tsx
+++ b/src/pages/Projects.tsx
@@ -1,43 +1,18 @@
import React from 'react';
import {useState, useRef, useEffect} from 'react';
-import '../styles/projects.css';
-import ImageProjectCard from '../components/ImageProjectCard';
-import ImageSlideCard from '../components/ImageSlideCard';
-import Popup from '../components/Popup';
+import '../styles/projects/projects.css';
+import ProjectCard from '../components/projects/ProjectCard';
+import ProjectFilter from '../components/projects/ProjectFilter';
+import ResourcesCard from '../components/projects/ResourcesCard';
+import ProjectPopup from '../components/projects/ProjectPopup';
import Loader from '../components/Loader';
-import pcrP from '../static/images/projects/pcrP.webp';
-import chessP from '../static/images/projects/chessP.webp';
-import droneP from '../static/images/projects/droneP.webp';
-import fitnessP from '../static/images/projects/fitnessP.webp';
-import musicP from '../static/images/projects/musicP.webp';
-import carP from '../static/images/projects/carP.webp'
-import crackleP from '../static/images/projects/crackleP.webp'
-import robotarmP from '../static/images/projects/robotic_armP.webp'
-import texelArtsP from '../static/images/projects/texelArtsP.webp'
-import traceP from '../static/images/projects/traceP.webp'
-import hydroponicsP from '../static/images/projects/hydroponicsP.webp'
-import placeholder from '../static/images/projects/placeholder.png'
+import pcrVid from '../static/videos/pcrTest.gif';
+
+import { PROJECT_KEYS, PROJECT_NAMES, PROJECT_IMAGES, PROJECT_TEAM_PAGES, PROJECT_CODEBASES, PROJECT_DESCRIPTIONS, FINISHED_PROJECTS, ONGOING_PROJECTS, PROJECT_VIDEOS, PROJECT_SLIDESHOWS} from '../static/constants/Projects';
+import { TECH_LEAD_NAMES } from '../static/constants/About';
-import pcr1 from '../static/images/slideshows/pcrSPic1.webp';
-import pcr2 from '../static/images/slideshows/pcrSPic2.webp';
-import pcr3 from '../static/images/slideshows/pcrSPic3.webp';
-import drone1 from '../static/images/slideshows/droneSPic1.webp';
-import drone2 from '../static/images/slideshows/droneSPic2.webp';
-import drone3 from '../static/images/slideshows/droneSPic3.webp';
-import chess1 from '../static/images/slideshows/chessSPic1.webp';
-import chess2 from '../static/images/slideshows/chessSPic2.webp';
-import chess3 from '../static/images/slideshows/chessSPic3.webp';
-import fitness1 from '../static/images/slideshows/fitnessSPic1.webp';
-import fitness2 from '../static/images/slideshows/fitnessSPic2.webp';
-import fitness3 from '../static/images/slideshows/fitnessSPic3.webp';
-import music1 from '../static/images/slideshows/musicSPic1.webp';
-import music2 from '../static/images/slideshows/musicSPic2.webp';
-import music3 from '../static/images/slideshows/musicSPic3.webp';
-import hydroponics1 from '../static/images/slideshows/hydroponicSPic1.webp';
-import hydroponics2 from '../static/images/slideshows/hydroponicSPic2.webp';
-import hydroponics3 from '../static/images/slideshows/hydroponicSPic3.webp';
import cv from '../static/images/lectures/cv.webp';
import deepLearning from '../static/images/lectures/deepLearning.webp';
import cvIntro from '../static/images/lectures/introToCV.webp';
@@ -46,21 +21,11 @@ import rlIntro from '../static/images/lectures/introToRL.webp';
import qL from '../static/images/lectures/qL.webp';
import markov from '../static/images/lectures/markovModelFree.webp';
-import pcrVid from '../static/videos/pcrTest.gif';
-import chessVid from '../static/videos/chessTest.gif';
-import droneVid from '../static/videos/droneTest.gif';
-import fitnessVid from '../static/videos/fitnessTest.gif';
-import musicVid from '../static/videos/musicTest.gif';
-// import robotarmVid from '../static/videos/robotarmTest.gif';
-import texelArtsVid from '../static/videos/TexelArtsTest.gif'
-import robotArmVid from '../static/videos/arm_project.gif';
-import smartMirrorVid from '../static/videos/smartMirrorVid.gif';
-import carVid from '../static/videos/carVid.gif'
-
import projectTransHead from '../static/vectors/projectHeaderTransition.svg';
import temp from '../static/vectors/projectBackground.svg';
-import { finished } from 'stream';
+
+
function Projects() {
const [showPopup, setShowPopup] = useState(false);
@@ -70,9 +35,10 @@ function Projects() {
name: string;
lName: string;
members: string;
- desc: string;
+ desc?: string;
git: string;
gantt: string;
+ SliderData ?: Array
;
rect?: DOMRect;
}>({
id: 0,
@@ -86,14 +52,6 @@ function Projects() {
rect: new DOMRect(10, 20, 30, 40)
});
- const [curFilter, setCurFilter] = useState([0]);
-
- //@ts-ignore
- const handleFilterChange = (newFilters ) => {
- handleResize();
- setCurFilter(newFilters);
-
- };
const handleOpenPopup = (info : {
id: number;
@@ -101,9 +59,10 @@ function Projects() {
name: string;
lName: string;
members: string;
- desc: string;
+ desc?: string;
git: string;
gantt: string;
+ SliderData ?: Array;
}, ClientRect : DOMRect | undefined) => {
setCardInfo({...info, rect: ClientRect});
setShowPopup(true);
@@ -114,246 +73,6 @@ function Projects() {
setShowPopup(false);
};
- const cardData =[
- {//PCR
- id: 0,
- img : pcrP,
- name:'PCR',
- lName:"Angelica Sharma, Vishal Kantahraju",
- members:"Angelica, Vishal, Andrew, Thida, Nathan, Kritika, Harshita, Harish, Archit, Aarya, James",
- desc: 'We are automating PCR, a medical technique used to duplicate DNA. We have most individual components working, so this semester, we will focus on putting it all together, testing it with PCR, and writing a research paper to publish our robot',
- git:"https://github.com/ECLAIR-Robotics/PCR_Automation",
- gantt:"https://docs.google.com/spreadsheets/d/1qEEfA078V_SaOaCuu-pih-EUJhn9BdbRNVKUYMlfKlY/edit?usp=sharing",
- finished:1,
- video: pcrVid,
- SliderData : [
- {
- image:
- pcr1
- },
- {
- image:
- pcr2
- },
- {
- image:
- pcr3
- }
- ]
- },
- {//chess
- id: 1,
- img :chessP ,
- name:'Chess Teacher',
- lName:"Hursh Jha, Anik Patel",
- members:"Hursh, Anik, Caleb",
- desc: 'Chess Teacher is a robot that is designed to not only play a game of chess, but also teach the player how to improve, and adjust its style to allow the player to maximize their learning opportunities. We use an overhead camera coupled with computer vision to enable the robot to have an accurate understanding of the game, while using our own in house chess engine to play the game - enabling the robot to have a comprehensive understanding over every position.',
- git:"https://github.com/ECLAIR-Robotics/Chess_Teacher",
- gantt:"https://docs.google.com/spreadsheets/d/1CbTH5hqcQgmXZnDkoqhe9yYVnaWjdlhSyqxfz_0mcEA/edit?usp=sharing",
- finished:1,
- video: chessVid,
- SliderData : [
- {
- image:
- chess1
- },
- {
- image:
- chess2
- },
- {
- image:
- chess3
- }
- ]
- },
- {//autonomous drone
- id: 2,
- img :droneP ,
- name:'Autonomous Drone',
- lName:"Carson Stark",
- members:"Justin Sasek",
- desc: 'For our project, we’re programming a hexacopter drone to navigate and preform tasks autonomously using a suite of cameras and sensors. Missions may include indoor navigation and mapping, trash pickup, or military-style search and destroy. We use the python programming language, Robot Operating System, and ArduCopter firmware. No experience is necessary.',
- git:"https://github.com/ECLAIR-Robotics/Drone_Prooject",
- gantt:"https://docs.google.com/spreadsheets/d/1HXZt8AaNJ8NgtD4zdfVyAx9iu88J-shJCg4XmMV2MSs/edit?usp=sharing",
- finished:1,
- video: droneVid,
- SliderData : [
- {
- image:
- drone1
- },
- {
- image:
- drone2
- },
- {
- image:
- drone3
- }
- ]
- },
- {//music
- id: 3,
- img :musicP ,
- name:'Music Mood',
- lName:"Sahana Ganapathy",
- members:"Mehul Murali, Seungwon Lee, Nikhil Kalidasu, Nidhi Thippana, Jason Ren, Sarah Wang-Zhou",
- desc: 'We trained and fine tuned a large language model to associate emotions with a song given it’s lyrics, and used the model to gather emotion data on Spotify profiles/playlists. Our next steps are integrating this model into a usable application and further exploring its capabilities.',
- git:"https://github.com/ECLAIR-Robotics/Song-Analysis",
- gantt:"https://docs.google.com/spreadsheets/d/1X8J35_nY-nvYd4q41Xf4_2WzTLX5uL0LTaCeWgZsZ2c/edit?usp=sharing",
- finished:1,
- video: musicVid,
- SliderData : [
- {
- image:
- music1
- },
- {
- image:
- music2
- },
- {
- image:
- music3
- }
- ]
- },
- {//robot arm
- id: 4,
- img : robotarmP ,
- name:'Robotic Arm',
- lName:"Sahil Jain",
- members:"Conrad Li",
- desc: 'By utilizing a simple robotic arm, we aim to implement inverse kinematics and more advanced software features to further our understanding of robotic arm construction.',
- git:"https://github.com/ECLAIR-Robotics/RoboticArm-",
- gantt:"https://github.com/ECLAIR-Robotics/RoboticArm555-",
- finished:1,
- video: robotArmVid,
- },
- {//fitness tracker
- id: 5,
- img :fitnessP ,
- name:'Fitness Tracker',
- lName:"Kyrylo Boiko",
- members:"Abbhinav Jayaraman and Annabel To",
- desc: 'We worked on creating a smart fitness band that would assist gym goers with tracking reps and measuring their form. We used positional & movement data from an IMU sensor and an ML model to transfer findings. It can be further developed to provide real-time suggestions based on most common form errors that are similar to user’s movement patterns.',
- git:"https://github.com/ECLAIR-Robotics/fitness-tracker",
- gantt:"https://docs.google.com/spreadsheets/d/19foBPCCLEiLqI4vJ4cUKgb43mY644ruY5lhwpawIxis/edit?usp=sharing",
- finished:1,
- video: fitnessVid,
- SliderData : [
- {
- image:
- fitness1
- },
- {
- image:
- fitness2
- },
- {
- image:
- fitness3
- }
- ]
- },
- {//smart mirror
- id: 6,
- img :"https://drive.google.com/uc?export=view&id=18k4112Of06u9Yb42pT8NL_o8Nk-GgEny" ,
- name:'Smart Mirror',
- lName:"Sahil Jain",
- members:"Conrad Li",
- desc: 'We aim to modify a Samsung infrared TV in order to make a functional smart mirror capable of interacting with a user and performing basic utility functions.',
- git:"https://github.com/ECLAIR-Robotics/Smart-Mirror",
- gantt:"https://docs.google.com/spreadsheets/d/1cCVkAxT6YRqcerKprb5HxVsnR_jYmP8Ai7Nvbnz0M0I/edit?usp=sharing",
- finished:1,
- video: smartMirrorVid,
- },
-
- {//autonomous car
- id: 7,
- img : carP,
- name:'Autonomous Car',
- lName:"",
- members:"Sahana, Nikhil, Ayaan, Jerry, Vinaenae, Cameron, Alexzander, Marcus, Miles, Tommy, Masamu, Hannah",
- desc: 'The goal of the autonomous car project is to build a fully autonomous RC car that has support for natural language intake and feedback. Overall, we are trying to establish a greater bond of trust between the user and the car, something that the industry is still working on today.',
- git: "https://github.com/ECLAIR-Robotics/nlp-car",
- gantt:"",
- finished:0,
- video: carVid,
- SliderData : []
-
- },
-
- {//CRACKLE
- id: 8,
- img : crackleP,
- name:'CRACKLE',
- lName:"",
- members:"Tanay, Manas, Leo, Yash, Gaurav, Tanay, Manav, Shalani, Ayaan, Isabella, Keshav, Sanskar",
- desc: "Crackle's goal is to emulate DUM-E from Iron Man. This means fully resolving voice commands spoken into dynamically generated plans using GPT. The finished product will be able to perform any physically possible task requested by a user",
- git:"https://github.com/ECLAIR-Robotics/crackle",
- gantt:"https://befitting-galliform-d9c.notion.site/Crackle-Teamspace-Home-9e32fd2ea0ca4e4695607c16f522433f",
- finished:0,
- video: "",
- SliderData : []
-
- },
- {//Texel Arts
- id: 9,
- img : texelArtsP,
- name:'Texel Arts',
- lName:"",
- members:"Kevin, Anna, Umer",
- desc: 'The Texel Arts project is a machine learning system that takes videos and transforms them into animation files applied on given rigs. The final goal is an online library of animations that can be readily downloaded, where processed animations are continuously added to the website',
- git:"",
- gantt:"",
- finished:0,
- video: texelArtsVid,
- SliderData : []
- },
- {//TRACE
- id: 10,
- img : traceP,
- name: "TRACE",
- lName: "",
- members: "Arnav, Rizky, Chris, Dan, Rishab, Isabella, Cameron",
- desc: "TRACE is a project to track and control the position of a ball on a tilting platform. The goals of this project are to exhibit a basic control system with two degrees of freedom that also implements computer vision. This will help develop member skills with CV, controls, simulation, and hardware design.",
- git: "",
- gantt: "",
- finished: 0,
- video: "",
- SliderData : []
- },
-
- {//Hydroponics
- id: 11,
- img: hydroponicsP,
- name: "Hydroponics",
- lName: "Arnav Joshi",
- members: "Isabella, Sanskar, Markus, Anisha",
- desc: "We aim to create an automated hydroponic garden.",
- git: "",
- gantt: "https://www.notion.so/Autonomous-Hydroponics-de7db5da18214e42a170f000432b0deb",
- finished: 1,
- video: "",
- SliderData : [
- {
- image:
- hydroponics1
- },
- {
- image:
- hydroponics2
- },
- {
- image:
- hydroponics3
- }
- ]
- },
- ];
-
const MLData = [
{
id: 100,
@@ -403,12 +122,29 @@ function Projects() {
window.open(link, '_blank');
}
- const filteredCardData = cardData.filter(card => curFilter.includes(card.finished));
+ const [curFilter, setCurFilter] = useState("inprogress");
+ const [filteredKeys, setFilteredKeys] = useState(ONGOING_PROJECTS);
+
const cardLocations = useRef>([]);
useEffect(() => {
- cardLocations.current = cardLocations.current.slice(0, cardData.length);
- }, [cardData]);
+ console.log("Filter changed to: ", curFilter);
+ if (curFilter === "all") {
+ setFilteredKeys(PROJECT_KEYS);
+ console.log("All keys: ", PROJECT_KEYS);
+ } else if (curFilter === "inprogress") {
+ setFilteredKeys(ONGOING_PROJECTS);
+ console.log("Ongoing keys: ", ONGOING_PROJECTS);
+ } else if (curFilter === "completed") {
+ setFilteredKeys(FINISHED_PROJECTS);
+ console.log("Finished keys: ", FINISHED_PROJECTS);
+ }
+
+ console.log("Filtered keys: ", filteredKeys);
+ cardLocations.current = cardLocations.current.slice(0, filteredKeys.length);
+ handleResize();
+
+ }, [curFilter]);
const [pBGLoaded, setPBGLoaded] = useState(false);
const pBGDivRef = useRef(null);
@@ -417,23 +153,14 @@ function Projects() {
const[resize, isResized] = useState(false);
useEffect(() => {
- // const bgDiv : HTMLDivElement | null = document.querySelector('.projectPageBelowHeader');
- // bgDiv?.addEventListener('load', pBGLateLoadWrapper);
if (pBGDivRef.current && pElementRef.current) {
const divHeight = pBGDivRef.current.clientHeight;
pElementRef.current.style.height = `${divHeight}px`;
}
- // setPBGLoaded(true);
- // if (bgDiv && bgDiv.style.backgroundImage !== "") {
- // setPBGLoaded(true);
- // } else {
-
- // }
}, [resize]);
function handleResize() {
- // setPBGLoaded(false);
isResized(!resize);
}
window.addEventListener('resize', handleResize);
@@ -444,7 +171,6 @@ function Projects() {
async function handleLoad() {
setTimeout(wrapperFunction, 200)
-
}
return (
@@ -453,37 +179,47 @@ function Projects() {
What We Do