-
-
-
- {props.linkedin && (
-
- 
-
- )}
- {props.mail && (
-
- 
-
- )}
-
-
-
-
{props.name}
-
{props.role}
+
+
+
+
+
+
+ {props.media.linkedIn && (
+
+
+
+ )}
+
+ {props.media.email && (
+
+
+
+ )}
+
+ {props.media.instagram && (
+
+ 
+
+ )}
+
+ {props.media.github && (
+
+
+
+ )}
+
+
+
+ {props.firstName} {props.lastName}
+ {props.role == "lead" ? "Lead": ""}
+
+
);
}
diff --git a/src/components/Members/members.css b/src/components/Members/members.css
index 881f382..c3f29f3 100644
--- a/src/components/Members/members.css
+++ b/src/components/Members/members.css
@@ -8,7 +8,7 @@
margin-top: 6rem;
}
-.members-title {
+.members-header {
display: flex;
flex-direction: column;
justify-content: center;
@@ -17,14 +17,14 @@
margin-bottom: 3rem;
}
-.group {
+.member-header-photo {
width: 100%;
/* -webkit-mask-
image: linear-gradient(to bottom, black 70%, transparent 100%);
mask-image: linear-gradient(to bottom, black 70%, transparent 100%); */
}
-.member-title1 {
+.member-header-title {
/* color: rgb(9, 7, 69); */
color: var(--primary-color);
font-size: 3rem;
@@ -32,7 +32,7 @@
padding-top: 1rem;
}
-.member-title2 {
+.member-header-content {
font-size: 1.2rem;
max-width: 80%;
font-weight: 400;
@@ -48,63 +48,44 @@
margin-top: 2rem;
}
-.align {
+.subteam {
display: flex;
- flex-direction: row;
- flex-wrap: wrap;
+ flex-direction: column;
+ align-items: center;
justify-content: center;
- max-width: 75vw;
}
-.CoCaptains,
-.admin,
-.mechanical,
-.electrical,
-.actuator,
-.software,
-.sound-localization,
-.frames-enclosures,
-.co-captains {
+.subteam-header {
+ margin: 1rem 0;
+
display: flex;
- flex-direction: column;
- align-items: center;
+ flex-direction: row;
+ flex-wrap: nowrap;
justify-content: center;
+ align-items: center;
}
-.CoCaptains-title,
-.admin-title,
-.software-title,
-.mechanical-title,
-.actuator-title,
-.electrical-title,
-.sound-localization-title,
-.frames-enclosures-title,
-.co-captains-title {
+.subteam-header > span {
letter-spacing: 1.5px;
- margin-top: 1rem;
font-size: 2rem;
font-weight: 700;
- height: 2.5rem;
color: var(--primary-color);
line-height: 1;
}
-.align1 {
- margin: 1rem 0;
-
+.subteam-members {
display: flex;
flex-direction: row;
- flex-wrap: nowrap;
+ flex-wrap: wrap;
justify-content: center;
- align-items: center;
+ max-width: 75vw;
}
.icon-common {
- font-size: 2rem;
+ height: 2rem;
color: var(--primary-color);
display: flex;
align-items: center;
- line-height: 1;
margin-left: 0.5rem;
}
@@ -122,14 +103,7 @@
font-size: 2rem;
}
- .admin-title,
- .software-title,
- .mechanical-title,
- .actuator-title,
- .electrical-title,
- .sound-localization-title,
- .frames-enclosures-title,
- .co-captains-title {
+ .subteam-title {
font-size: 1.5rem;
}
diff --git a/src/components/Members/members.jsx b/src/components/Members/members.jsx
index 501cccc..2f7e0a9 100644
--- a/src/components/Members/members.jsx
+++ b/src/components/Members/members.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import {
faCode,
faTools,
- faCarBattery,
+ faBolt,
faBriefcase,
faMicrophone,
faCrown,
@@ -14,20 +14,20 @@ import Member from './member';
import { LazyLoadImage } from 'react-lazy-load-image-component';
const TEAM_META = {
- CoCaptains: { title: 'CO-CAPTAINS', icon: faCrown },
- Admin: { title: 'ADMIN + BUSINESS', icon: faBriefcase },
- Actuator: { title: 'ACTUATOR', icon: faTools },
- Electrical: { title: 'ELECTRICAL', icon: faCarBattery },
- Software: { title: 'SOFTWARE', icon: faCode },
- 'Sound Localization': { title: 'SOUND LOCALIZATION', icon: faMicrophone },
- 'Frames-Enclosures': { title: 'FRAMES & ENCLOSURES', icon: faToolbox },
+ captain: { title: 'CO-CAPTAINS', icon: faCrown },
+ admin: { title: 'ADMIN + BUSINESS', icon: faBriefcase },
+ actuators: { title: 'ACTUATORS', icon: faTools },
+ electrical: { title: 'ELECTRICAL', icon: faBolt },
+ software: { title: 'SOFTWARE', icon: faCode },
+ sound_localization: { title: 'SOUND LOCALIZATION', icon: faMicrophone },
+ mechanical: { title: 'FRAMES & ENCLOSURES', icon: faToolbox },
};
export default function Members() {
const [members, setMembers] = useState([]);
useEffect(() => {
- fetch(`${process.env.PUBLIC_URL}/data/members.json`)
+ fetch(`${process.env.PUBLIC_URL}/data/2025/members.json`)
.then((res) => res.json())
.then(setMembers)
.catch(console.error);
@@ -35,11 +35,7 @@ export default function Members() {
// Helper function to determine if someone is a lead
const isLead = (role) => {
- return (
- role.toLowerCase().includes('lead') ||
- role.toLowerCase().includes('captain') ||
- role.toLowerCase().includes('director')
- );
+ return role.toLowerCase().includes('lead');
};
// Helper function to sort members within a team
@@ -65,33 +61,36 @@ export default function Members() {
return (
{/* ----- hero / heading ----- */}
-
+
-
MEET THE TEAM
-
+
+ MEET THE TEAM
+
United by curiosity and driven by purpose, our {members.length}+ team
members bring unique skills and shared passion to every step of the
journey!
-
+
+
+
{Object.entries(TEAM_META).map(([teamKey, meta]) => {
let teamMembers;
- if (teamKey === 'CoCaptains') {
+ if (teamKey === 'captain') {
// Special handling for Co-Captains
teamMembers = members.filter((m) =>
- m.role.toLowerCase().includes('co-captain')
+ m.team.toLowerCase().includes('captain')
);
+
} else {
// Regular team filtering
teamMembers = members.filter(
- (m) =>
- m.team === teamKey && !m.role.toLowerCase().includes('co-captain')
+ (m) => m.team === teamKey && !m.team.toLowerCase().includes('captain')
);
}
@@ -105,39 +104,37 @@ export default function Members() {
return (
-
-
- {meta.title}
-
+
+
+ {meta.title}
-
- {sortedTeamMembers.map((m, i) => (
+
+
+ {sortedTeamMembers.map((meta, key) => (
))}
+
);
})}
+
+
+
);
}
diff --git a/src/components/Navbar/navbar.css b/src/components/Navbar/navbar.css
index 98eb045..e9030ab 100644
--- a/src/components/Navbar/navbar.css
+++ b/src/components/Navbar/navbar.css
@@ -94,8 +94,15 @@
/* Add this */
}
+.logo-link {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
.logo {
- filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+ width: 4.5rem;
+ height: auto;
}
.nav-content {
@@ -107,16 +114,11 @@
justify-content: space-between;
}
-.logo {
- width: 5.5rem;
- height: auto;
-}
-
.nav-title {
font-size: 3rem;
font-weight: 600;
color: var(--light-blue-color);
- text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+ /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); I think this is a little old */
position: absolute;
left: 50%;
transform: translateX(-50%);
@@ -231,27 +233,14 @@
justify-content: center;
}
-.linkedin,
-.instagram,
-.facebook {
- transition: transform 0.2s ease-in-out;
-}
-
-.linkedin:hover,
-.instagram:hover,
-.facebook:hover {
- transform: scale(1.2);
-}
-
-.instagram,
-.facebook {
- width: 3rem;
- height: auto;
+.navbar-icon {
+ height: 2.5rem;
+ color: white;
+ transition: 0.3s ease;
}
-.linkedin {
- width: 3.5rem;
- height: auto;
+.navbar-icon:hover {
+ transform: scale(1.1);
}
@media (max-width: 1183px) {
@@ -274,7 +263,7 @@
/* Logo icon */
.logo {
- width: 3.5rem;
+ width: 3.2rem;
}
/* was 5.5rem */
diff --git a/src/components/Navbar/navbar.jsx b/src/components/Navbar/navbar.jsx
index bdb854b..e3704ef 100644
--- a/src/components/Navbar/navbar.jsx
+++ b/src/components/Navbar/navbar.jsx
@@ -1,16 +1,18 @@
import { useState, useEffect } from 'react';
import { NavLink, useLocation } from 'react-router-dom';
-import Logo from '../../assets/logo.png';
+import Logo from '../../assets/logos/logo.png';
import './navbar.css';
import {
faBarsStaggered,
faTimes,
- faChevronDown,
+ faChevronDown
} from '@fortawesome/free-solid-svg-icons';
+import {
+ faGithub,
+ faInstagram,
+ faLinkedin
+} from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import Linkedin from '../../assets/linkedin2.png';
-import Instagram from '../../assets/insta2.png';
-import Github from '../../assets/github4.png';
const Navbar = () => {
const location = useLocation();
@@ -173,13 +175,13 @@ const Navbar = () => {