Skip to content

Commit cd5ac6c

Browse files
PinkSylviePinkSylvie
authored
Merge pull request #72 from RGBOARD/our_developers
Developers Page
2 parents e8d74da + cd69157 commit cd5ac6c

9 files changed

Lines changed: 221 additions & 0 deletions

File tree

‎view/src/App.jsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { BrowserRouter, Routes, Route, Navigate, useLocation } from 'react-route
22
import './App.css';
33
import Header from './components/Header';
44
import Footer from './components/Footer';
5+
import Developers from './pages/Developers';
56
import UserHome from './pages/UserHome';
67
import AdminHome from './pages/AdminHome';
78
import LogIn from './pages/Login';
@@ -59,6 +60,10 @@ function AppContent() {
5960
hasRole('admin') ? <AdminHome /> : <UserHome />
6061
}
6162
/>
63+
<Route
64+
path="/developers"
65+
element={ <Developers />}
66+
/>
6267
<Route
6368
path="/signup"
6469
element={isAuthenticated ? <Navigate to="/" /> : <SignUp />}

‎view/src/assets/Edimar.jpg‎

119 KB
Loading

‎view/src/assets/Irsaris.jpg‎

113 KB
Loading

‎view/src/assets/Jandel.jpg‎

59 KB
Loading

‎view/src/assets/Marianyelis.jpg‎

83.9 KB
Loading

‎view/src/components/Developer.jsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import './styles/Footer.css'
3+
import './styles/Developer.css';
4+
import { Linkedin } from 'lucide-react';
5+
6+
const Developer = ({ name, degree, excerpt, photo, linkedin, borderColor }) => {
7+
return (
8+
<div className={`developer-card ${borderColor}`}>
9+
<div className="photo-block">
10+
{photo && <img src={photo} alt={`${name}'s photo`} className="developer-photo"/>}
11+
<a href={linkedin} className="linkedin-link" target="_blank" rel="noopener noreferrer">
12+
<Linkedin/>
13+
</a>
14+
</div>
15+
<h3 className="dev-name">{name}</h3>
16+
<p className="dev-degree">{degree}</p>
17+
<p className="dev-excerpt">{excerpt}</p>
18+
</div>
19+
);
20+
};
21+
22+
export default Developer;

‎view/src/components/styles/Developer.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.developer-card{
2+
position: relative;
3+
display: flex;
4+
flex-direction: column;
5+
background-color: #e6e6e6;
6+
border-radius: 0.5rem;
7+
max-width: 400px;
8+
align-items: center;
9+
justify-content: center;
10+
margin: 1rem;
11+
padding: 1rem;
12+
}
13+
14+
.photo-block{
15+
display: flex;
16+
flex-direction: row;
17+
}
18+
19+
.linkedin-link {
20+
position: absolute;
21+
top: 0.75rem;
22+
right: 0.75rem;
23+
text-decoration: none;
24+
font-weight: bold;
25+
}
26+
27+
.dev-name{
28+
font-size: large;
29+
font-weight: bold;
30+
}
31+
32+
.dev-degree{
33+
font-family: "Pixelify Sans", sans-serif;
34+
font-size: 1.15rem;
35+
}
36+
37+
.dev-excerpt {
38+
flex-grow: 1;
39+
text-align: center;
40+
padding: 0.5rem 0;
41+
}
42+
43+
.developer-photo {
44+
width: 120px;
45+
height: 120px;
46+
object-fit: cover;
47+
border-radius: 50%;
48+
}

‎view/src/pages/Developers.jsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React from 'react';
2+
import './styles/LandingPage.css'
3+
import Developer from '../components/Developer';
4+
import marianyelis from '../assets/Marianyelis.jpg';
5+
import edimar from '../assets/Edimar.jpg';
6+
import irsaris from '../assets/Irsaris.jpg';
7+
import jandel from '../assets/Jandel.jpg';
8+
import "./styles/Developers.css";
9+
10+
const Developers = () => {
11+
12+
const developers = [
13+
{
14+
name: 'Marianyelis Jimenez Mercedes',
15+
degree: 'Software Engineering',
16+
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.',
17+
photo: marianyelis,
18+
linkedin: 'https://www.linkedin.com/in/marianyelis-jimenez-mercedes/',
19+
borderColor: "border-b-5 border-red-500",
20+
},
21+
{
22+
name: 'Edimar Valentín Kery',
23+
degree: 'Computer Science and Engineering',
24+
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++.',
25+
photo: edimar,
26+
linkedin: 'https://www.linkedin.com/in/edimar-valent%C3%ADn-kery-26992299/',
27+
borderColor: "border-b-5 border-green-500",
28+
},
29+
{
30+
name: 'Irsaris Pérez Rodríguez',
31+
degree: 'Software Engineering',
32+
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.',
33+
photo: irsaris,
34+
linkedin: 'https://www.linkedin.com/in/irsaris-perez/',
35+
borderColor: "border-b-5 border-blue-500",
36+
},
37+
{
38+
name: 'Jandel Rodríguez Vázquez',
39+
degree: 'Computer Science and Engineering',
40+
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.',
41+
photo: jandel,
42+
linkedin: 'https://www.linkedin.com/in/jandelrodriguez/',
43+
borderColor: "border-b-5 border-yellow-400",
44+
},
45+
46+
];
47+
48+
return (
49+
<div className="developers-page">
50+
<h2 className="page-title">Our Developers</h2>
51+
<div className="page-desc">
52+
<h3 className="font-semibold">A small peek at the developers who brought RGBoard to life.</h3>
53+
<h3> From design decisions to backend logic and frontend polish, our team has tackled every corner of the
54+
project with care and creativity.
55+
Each developer contributed across the full stack, making this site not just functional, but something we're
56+
proud of.
57+
</h3>
58+
</div>
59+
<div className="developers-wrapper card-animation">
60+
<div className="developers-container">
61+
{developers.map((developer, index) => (
62+
<Developer
63+
key={index}
64+
name={developer.name}
65+
degree={developer.degree}
66+
excerpt={developer.excerpt}
67+
photo={developer.photo}
68+
linkedin={developer.linkedin}
69+
borderColor={developer.borderColor}
70+
/>
71+
))}
72+
</div>
73+
</div>
74+
</div>
75+
);
76+
};
77+
78+
export default Developers;

‎view/src/pages/styles/Developers.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
@font-face {
2+
font-family: 'PixelifySans';
3+
src: url('../../assets/fonts/PixelifySans/PixelifySans-VariableFont_wght.ttf') format('truetype');
4+
font-weight: normal;
5+
font-style: normal;
6+
}
7+
@keyframes fadeSlideIn {
8+
0% {
9+
opacity: 0;
10+
transform: translateY(-20px);
11+
}
12+
100% {
13+
opacity: 1;
14+
transform: translateY(0);
15+
}
16+
}
17+
18+
.card-animation {
19+
animation: fadeSlideIn 0.6s ease-out both;
20+
}
21+
22+
.developers-page {
23+
display: flex;
24+
flex-direction: column;
25+
justify-content: center;
26+
align-items: center;
27+
width: 100%;
28+
padding: 2rem;
29+
box-sizing: border-box;
30+
overflow: hidden;
31+
}
32+
33+
.page-title{
34+
text-align: center;
35+
font-size: 2rem;
36+
font-weight: bold;
37+
margin-bottom: 0.5rem;
38+
padding: 1rem;
39+
}
40+
41+
.page-desc{
42+
text-align: center;
43+
font-size: 1.1rem;
44+
max-width: 1000px;
45+
padding-bottom: 1rem;
46+
}
47+
48+
49+
.developers-wrapper {
50+
display: flex;
51+
flex-direction: column;
52+
justify-content: flex-start;
53+
padding-top: 1rem;
54+
max-height: 100vh;
55+
overflow-y: auto;
56+
width: 100%;
57+
gap: 1.5rem;
58+
}
59+
60+
61+
.developers-container {
62+
display: flex;
63+
flex-wrap: wrap;
64+
justify-content: center;
65+
gap: 1.5rem;
66+
width: 100%;
67+
align-items: flex-start;
68+
}

0 commit comments

Comments
 (0)