Developers Page

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') ? <AdminHome /> : <UserHome />
             } 
           />
+          <Route
+            path="/developers"
+            element={ <Developers />}
+          />
           <Route 
             path="/signup" 
             element={isAuthenticated ? <Navigate to="/" /> : <SignUp />}

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 (
+      <div className={`developer-card ${borderColor}`}>
+          <div className="photo-block">
+              {photo && <img src={photo} alt={`${name}'s photo`} className="developer-photo"/>}
+              <a href={linkedin} className="linkedin-link" target="_blank" rel="noopener noreferrer">
+                  <Linkedin/>
+              </a>
+          </div>
+          <h3 className="dev-name">{name}</h3>
+          <p className="dev-degree">{degree}</p>
+          <p className="dev-excerpt">{excerpt}</p>
+      </div>
+  );
+};
+
+export default Developer;

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%;
+}

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 (
+    <div className="developers-page">
+      <h2 className="page-title">Our Developers</h2>
+      <div className="page-desc">
+        <h3 className="font-semibold">A small peek at the developers who brought RGBoard to life.</h3>
+        <h3> 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.
+        </h3>
+      </div>
+      <div className="developers-wrapper card-animation">
+        <div className="developers-container">
+          {developers.map((developer, index) => (
+            <Developer
+              key={index}
+              name={developer.name}
+              degree={developer.degree}
+              excerpt={developer.excerpt}
+              photo={developer.photo}
+              linkedin={developer.linkedin}
+              borderColor={developer.borderColor}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Developers;

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;
+}