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