diff --git a/src/Pages/Projects/Components/ProjectCard.js b/src/Pages/Projects/Components/ProjectCard.js index 6dbb8f52f..e8e103491 100644 --- a/src/Pages/Projects/Components/ProjectCard.js +++ b/src/Pages/Projects/Components/ProjectCard.js @@ -1,19 +1,36 @@ import React from 'react'; - -export default function ProjectCard({link, image, name, subnote, caption}) { +export default function ProjectCard(project) { return ( -
- - Project Picture - -

- {name} - {subnote} -

-

- {caption} -

+
+
+
+ Album +
+
+

{project.name}

+

{project.caption}

+ + {project.information} + +
+ + + +
+
+
+ ); } diff --git a/src/Pages/Projects/Projects.js b/src/Pages/Projects/Projects.js index 10277a771..68846c38a 100644 --- a/src/Pages/Projects/Projects.js +++ b/src/Pages/Projects/Projects.js @@ -1,201 +1,61 @@ import React from 'react'; +import ProjectCard from './Components/ProjectCard'; -// just steal this somehow -// https://turbo.build/blog -export default function ProjectsPage() { - const projectData = [ - { - 'link': 'https://github.com/SCE-Development/Clark', - 'image': 'https://user-images.githubusercontent.com' + - '/59713070/235862105-9606e862-e27e-40d4-8991-de1793c48dd0.png', - 'name': 'Clark', 'subnote': '(formerly Core-v4)', - information: 'Full Stack', - 'caption': 'React, Express.js, and MongoDB; Clark is the club\'s website. It supports printing services for members and allows officers to control various devices in the clubroom.', - iconDivClassName: 'size-1/5 space-x-4 w-4/12 lg:w-6/12 bottom-0', - icons: (<> - {/* react */} - - - - - - - - - - - {/* node */} - - - - - - - - - - - - - {/* tailwindcss */} - - - - - - - - - - - - {/* mongodb */} - - - - - - - - - - - - - - ) - }, - { - 'link': 'https://github.com/SCE-Development/RFID-door-lock', - 'image': 'https://user-images.githubusercontent.com' + - '/59713070/235862570-70f92c0a-8e18-4ddf-b7c8-bdb21723480f.jpeg', - 'name': 'RFID Door System', - information: 'Firmware with Arduino', - 'caption': 'SCE\'s development team officers created an RFID card reader and door control relay to allow entry into the clubroom\'s office using a Clipper card.', - iconDivClassName: 'size-1/5 space-x-4', - icons: ( - <> - {/* arduino */} - - - - - - - - - - - - {/* aws */} - - - - - - - - ), - }, - { - 'link': 'https://github.com/SCE-Development/', - 'image': 'https://user-images.githubusercontent.com' + - '/59713070/235861717-5315d9df-fb5e-4414-84bb-0334fe769271.jpeg', - 'name': '3D Pancake Printer', - information: '3D Printing with Marlin Firmware', - 'caption': 'In the spirit of our love for pancakes, SCE\'s hardware team constructed a 3D Pancake Printer. Does it work? No. When completed it will create intricate pancake designs.', - iconDivClassName: 'size-3/5 space-x-4', - icons: ( - <> - {/* marlin firmware */} - - - - - - - ), - }, - { - 'link': 'https://github.com/SCE-Development/rpi-led-controller', - 'image': 'https://user-images.githubusercontent.com' + - '/59713070/235859723-cdea1a8e-5698-40c2-9755-9ec2e40984cd.jpeg', - 'name': 'SCE Light-Emitting Display', - information: 'Interfacing RESTful APIs with Hardware', - 'caption': 'Produced as a part of our summer internship projects, SCE interns designed an officer-controlled illuminated sign, functioning to brighten the clubroom\'s atmosphere.', - iconDivClassName: 'size-1/5 space-x-4', - icons: ( - <> - - - - - - - - - - - - - - - - - - - ), - }, - ]; +const projects = [ + { + 'link': 'https://github.com/SCE-Development/Clark', + 'image': 'https://user-images.githubusercontent.com/59713070/235862105-9606e862-e27e-40d4-8991-de1793c48dd0.png', + 'name': 'Clark', 'subnote': '(formerly Core-v4)', + 'information': 'Full Stack', + 'caption': 'React, Express.js, and MongoDB; Clark is the club\'s website. It supports printing services for members and allows officers to control various devices in the clubroom.' + }, + { + 'link': 'https://github.com/SCE-Development/rpi-led-controller', + 'image': 'https://user-images.githubusercontent.com/59713070/235859723-cdea1a8e-5698-40c2-9755-9ec2e40984cd.jpeg', + 'name': 'SCE Light-Emitting Display', + 'information': 'Interfacing RESTful APIs with Hardware', + 'caption': 'Produced as a part of our summer internship projects, SCE interns designed an officer-controlled illuminated sign, functioning to brighten the clubroom\'s atmosphere.' + }, + { + 'link': 'https://github.com/SCE-Development/Clark', + 'image': 'https://github.com/user-attachments/assets/1637dc25-2073-43e5-a952-c1a3d50d16fe', + 'name': 'SCEta Transit', + 'information': 'Full Stack', + 'caption': 'SCETA Transit is a web application that provides real-time bus, Caltrain, and BART timing predictions for nearby stops.' + }, + { + 'link': 'https://github.com/SCE-Development/Clark', + 'image': 'https://github.com/user-attachments/assets/204dc7d7-e7a1-4add-ae6b-37286ba1c510', + 'name': 'SCE Chatroom', + 'information': 'Full Stack', + 'caption': 'SCE\'s chatroom is a web application that allows members to communicate with each other in real-time.' + }, + { + 'link': 'https://github.com/SCE-Development/cleezy', + 'image': 'https://github.com/user-attachments/assets/de1017ac-ca79-46e5-b3b4-5e62666713fb', + 'name': 'Cleezy', + 'information': 'FastAPI', + 'caption': 'A url shortening service created by SCE' + }, +]; +export default function ProjectsPage() { return ( -
-
-
-

Our Recent Projects

-

The SCE Development Team is open to all students, no prior experience is required.

-
-
- {projectData.map((project) => ( -
-
- {/* */} - - - - - - {project.information} - - {/* maybe put something down here later? */} - {/* 14 days ago */} -
- -

- {project.name} -

-

{project.caption}

-
-
- {project.icons} -
- - GitHub Link - - - - - -
-
- ))} -
+
+
+
+

Our Recent Projects

+
+

The SCE Development Team is open to all students, no prior experience is required!

+
-
+ {projects.map((project) => ( + <> + +
+
+ + ))} +
); }