diff --git a/view/src/App.jsx b/view/src/App.jsx index 40f58e3..4e8215d 100644 --- a/view/src/App.jsx +++ b/view/src/App.jsx @@ -2,6 +2,7 @@ import { BrowserRouter, Routes, Route, Navigate, useLocation } from 'react-route import './App.css'; import Header from './components/Header'; import Footer from './components/Footer'; +import Developers from './pages/Developers'; import UserHome from './pages/UserHome'; import AdminHome from './pages/AdminHome'; import LogIn from './pages/Login'; @@ -59,6 +60,10 @@ function AppContent() { hasRole('admin') ? : } /> + } + /> : } diff --git a/view/src/assets/Edimar.jpg b/view/src/assets/Edimar.jpg new file mode 100644 index 0000000..33ba268 Binary files /dev/null and b/view/src/assets/Edimar.jpg differ diff --git a/view/src/assets/Irsaris.jpg b/view/src/assets/Irsaris.jpg new file mode 100644 index 0000000..65dcdf5 Binary files /dev/null and b/view/src/assets/Irsaris.jpg differ diff --git a/view/src/assets/Jandel.jpg b/view/src/assets/Jandel.jpg new file mode 100644 index 0000000..622afb6 Binary files /dev/null and b/view/src/assets/Jandel.jpg differ diff --git a/view/src/assets/Marianyelis.jpg b/view/src/assets/Marianyelis.jpg new file mode 100644 index 0000000..b10d392 Binary files /dev/null and b/view/src/assets/Marianyelis.jpg differ diff --git a/view/src/components/Developer.jsx b/view/src/components/Developer.jsx new file mode 100644 index 0000000..a353645 --- /dev/null +++ b/view/src/components/Developer.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import './styles/Footer.css' +import './styles/Developer.css'; +import { Linkedin } from 'lucide-react'; + +const Developer = ({ name, degree, excerpt, photo, linkedin, borderColor }) => { + return ( +
+
+ {photo && {`${name}'s} + + + +
+

{name}

+

{degree}

+

{excerpt}

+
+ ); +}; + +export default Developer; diff --git a/view/src/components/styles/Developer.css b/view/src/components/styles/Developer.css new file mode 100644 index 0000000..079120c --- /dev/null +++ b/view/src/components/styles/Developer.css @@ -0,0 +1,48 @@ +.developer-card{ + position: relative; + display: flex; + flex-direction: column; + background-color: #e6e6e6; + border-radius: 0.5rem; + max-width: 400px; + align-items: center; + justify-content: center; + margin: 1rem; + padding: 1rem; +} + +.photo-block{ + display: flex; + flex-direction: row; +} + +.linkedin-link { + position: absolute; + top: 0.75rem; + right: 0.75rem; + text-decoration: none; + font-weight: bold; +} + +.dev-name{ + font-size: large; + font-weight: bold; +} + +.dev-degree{ + font-family: "Pixelify Sans", sans-serif; + font-size: 1.15rem; +} + +.dev-excerpt { + flex-grow: 1; + text-align: center; + padding: 0.5rem 0; +} + +.developer-photo { + width: 120px; + height: 120px; + object-fit: cover; + border-radius: 50%; +} \ No newline at end of file diff --git a/view/src/pages/Developers.jsx b/view/src/pages/Developers.jsx new file mode 100644 index 0000000..0bf57a4 --- /dev/null +++ b/view/src/pages/Developers.jsx @@ -0,0 +1,78 @@ +import React from 'react'; +import './styles/LandingPage.css' +import Developer from '../components/Developer'; +import marianyelis from '../assets/Marianyelis.jpg'; +import edimar from '../assets/Edimar.jpg'; +import irsaris from '../assets/Irsaris.jpg'; +import jandel from '../assets/Jandel.jpg'; +import "./styles/Developers.css"; + +const Developers = () => { + + const developers = [ + { + name: 'Marianyelis Jimenez Mercedes', + degree: 'Software Engineering', + excerpt: 'There’s something special about seeing all the puzzle pieces come together after putting in the work. I enjoy coding with a backdrop of city pop or video game soundtracks—Pokémon always made the perfect soundtrack for this project.', + photo: marianyelis, + linkedin: 'https://www.linkedin.com/in/marianyelis-jimenez-mercedes/', + borderColor: "border-b-5 border-red-500", + }, + { + name: 'Edimar Valentín Kery', + degree: 'Computer Science and Engineering', + excerpt: 'They asked how well I understood theoretical computer science. I said I had a theoretical degree in computer science. They said welcome aboard. Fallout: New Vegas fans will get it—I enjoy working with embedded systems and robotics. My favorite language is C, but I always end up using C++.', + photo: edimar, + linkedin: 'https://www.linkedin.com/in/edimar-valent%C3%ADn-kery-26992299/', + borderColor: "border-b-5 border-green-500", + }, + { + name: 'Irsaris Pérez Rodríguez', + degree: 'Software Engineering', + excerpt: 'Software engineer by day, bug whisperer by night. Fluent in sarcasm, semicolons, and the occasional segfault. I refactor for fun and clean up like company\'s coming, and yes—I’ve named every rubber duck I’ve ever debugged with.', + photo: irsaris, + linkedin: 'https://www.linkedin.com/in/irsaris-perez/', + borderColor: "border-b-5 border-blue-500", + }, + { + name: 'Jandel Rodríguez Vázquez', + degree: 'Computer Science and Engineering', + excerpt: 'I’m all about chasing challenges — whether it’s shaving seconds off a run, geeking out over F1 strategy, or working on my project car until it (finally) cooperates. That same curiosity and drive shape how I approach coding: always eager to learn, improve, and build something I’m proud of.', + photo: jandel, + linkedin: 'https://www.linkedin.com/in/jandelrodriguez/', + borderColor: "border-b-5 border-yellow-400", + }, + + ]; + + return ( +
+

Our Developers

+
+

A small peek at the developers who brought RGBoard to life.

+

From design decisions to backend logic and frontend polish, our team has tackled every corner of the + project with care and creativity. + Each developer contributed across the full stack, making this site not just functional, but something we're + proud of. +

+
+
+
+ {developers.map((developer, index) => ( + + ))} +
+
+
+ ); +}; + +export default Developers; \ No newline at end of file diff --git a/view/src/pages/styles/Developers.css b/view/src/pages/styles/Developers.css new file mode 100644 index 0000000..e606349 --- /dev/null +++ b/view/src/pages/styles/Developers.css @@ -0,0 +1,68 @@ +@font-face { + font-family: 'PixelifySans'; + src: url('../../assets/fonts/PixelifySans/PixelifySans-VariableFont_wght.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} +@keyframes fadeSlideIn { + 0% { + opacity: 0; + transform: translateY(-20px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.card-animation { + animation: fadeSlideIn 0.6s ease-out both; +} + +.developers-page { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + padding: 2rem; + box-sizing: border-box; + overflow: hidden; +} + +.page-title{ + text-align: center; + font-size: 2rem; + font-weight: bold; + margin-bottom: 0.5rem; + padding: 1rem; +} + +.page-desc{ + text-align: center; + font-size: 1.1rem; + max-width: 1000px; + padding-bottom: 1rem; +} + + +.developers-wrapper { + display: flex; + flex-direction: column; + justify-content: flex-start; + padding-top: 1rem; + max-height: 100vh; + overflow-y: auto; + width: 100%; + gap: 1.5rem; +} + + +.developers-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1.5rem; + width: 100%; + align-items: flex-start; +} \ No newline at end of file