Skip to content

Commit 981d420

Browse files
krish-134krish-134
authored
Merge pull request #2 from ubc-subbots/Members
Members
2 parents 410d7d2 + 8ee690d commit 981d420

3 files changed

Lines changed: 90 additions & 20 deletions

File tree

‎public/data/members.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@
1919
"role": "member",
2020
"image": "viktor_moreno.jpeg",
2121
"media": {
22-
"linkedIn": "",
22+
"linkedIn": "https://www.linkedin.com/in/vmoreno2001/",
2323
"instagram": "",
2424
"github": "",
25-
"email": ""
25+
"email": "viktor.moreno123@gmail.com"
2626
}
2727
},
2828

@@ -103,7 +103,7 @@
103103
"linkedIn": "https://www.linkedin.com/in/yasinkurji",
104104
"instagram": "",
105105
"github": "",
106-
"email": ""
106+
"email": "yasinkurji@gmail.com"
107107
}
108108
},
109109
{
@@ -116,7 +116,7 @@
116116
"linkedIn": "www.linkedin.com/in/vincentvong39",
117117
"instagram": "",
118118
"github": "",
119-
"email": ""
119+
"email": "vincentvong39@gmail.com"
120120
}
121121
},
122122

@@ -171,7 +171,7 @@
171171
"role": "lead",
172172
"image": "abhishek_raghuwanshi.jpeg",
173173
"media": {
174-
"linkedIn": "",
174+
"linkedIn": "https://www.linkedin.com/in/a112r",
175175
"instagram": "",
176176
"github": "",
177177
"email": ""
@@ -359,10 +359,10 @@
359359
"role": "lead",
360360
"image": "hashaam_zafar.jpeg",
361361
"media": {
362-
"linkedIn": "",
362+
"linkedIn": "https://linkedin.com/in/hashaamzafar",
363363
"instagram": "",
364364
"github": "",
365-
"email": ""
365+
"email": "hashaamzafar2003@protonmail.com"
366366
}
367367
},
368368
{
@@ -478,7 +478,7 @@
478478
"media": {
479479
"linkedIn": "https://www.linkedin.com/in/krishna-garcha/",
480480
"instagram": "",
481-
"github": "",
481+
"github": "https://github.com/krish-134",
482482
"email": "garchakri@gmail.com"
483483
}
484484
},

‎src/pages/Members/Members.css‎

Lines changed: 60 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -138,15 +138,6 @@
138138
gap: 10px;
139139
position: relative;
140140

141-
142-
img {
143-
aspect-ratio: 1 / 1;
144-
width: 150px;
145-
object-fit: cover;
146-
border-radius: 100%;
147-
/* border: 2px solid var(--dark-green); */
148-
}
149-
150141
svg {
151142
position: absolute;
152143
top: 130px;
@@ -169,6 +160,66 @@
169160
font-weight: 400;
170161
}
171162
}
163+
164+
.member-image-wrapper {
165+
position: relative;
166+
width: 150px;
167+
height: 150px;
168+
border-radius: 100%;
169+
overflow: hidden;
170+
flex-shrink: 0;
171+
}
172+
173+
.member-image-wrapper img {
174+
width: 100%;
175+
height: 100%;
176+
object-fit: cover;
177+
display: block;
178+
}
179+
180+
.member-overlay {
181+
position: absolute;
182+
inset: 0;
183+
background: rgba(0, 0, 0, 0.4);
184+
border-radius: 100%;
185+
display: flex;
186+
flex-direction: column;
187+
align-items: center;
188+
justify-content: center;
189+
gap: 10px;
190+
opacity: 0;
191+
transition: opacity 0.2s ease;
192+
overflow-y: auto;
193+
padding: 8px 0;
194+
}
195+
196+
.member-image-wrapper:hover .member-overlay {
197+
opacity: 1;
198+
}
199+
200+
.member-overlay a {
201+
color: white;
202+
display: flex;
203+
align-items: center;
204+
gap: 8px;
205+
font-size: 0.75rem;
206+
text-decoration: none;
207+
transition: color 0.15s ease;
208+
}
209+
210+
.member-overlay a:hover {
211+
color: var(--yellow);
212+
}
213+
214+
.member-overlay a svg {
215+
/* override the anchor icon absolute positioning */
216+
position: static;
217+
width: 36px;
218+
height: 36px;
219+
color: inherit;
220+
transform: none;
221+
}
222+
172223
}
173224

174225
.member-item:hover svg {

‎src/pages/Members/Members.tsx‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useState, useEffect } from 'react';
22
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3-
import { faUser, faAnchor } from '@fortawesome/free-solid-svg-icons';
3+
import { faUser, faAnchor, faEnvelope } from '@fortawesome/free-solid-svg-icons';
4+
import { faLinkedin, faGithub, faInstagram } from '@fortawesome/free-brands-svg-icons';
45

56
import './Members.css';
67

@@ -92,15 +93,33 @@ function MemberItem({ member }: MemberItemProps) {
9293
return role === "lead";
9394
}
9495

96+
const links = [
97+
{ href: member.media.linkedIn, icon: faLinkedin, label: "LinkedIn" },
98+
{ href: member.media.instagram, icon: faInstagram, label: "Instagram" },
99+
{ href: member.media.github, icon: faGithub, label: "GitHub" },
100+
{ href: member.media.email ? `mailto:${member.media.email}` : "", icon: faEnvelope, label: "Email" },
101+
102+
].filter(link => link.href !== ""); // Filter out empty links
103+
95104
return (
96105
<div className="member-item">
97-
<img src={member.image !== ""? `/images/members/${member.image}` : '/images/members/placeholder.png'} />
106+
<div className="member-image-wrapper">
107+
<img src={member.image !== "" ? `/images/members/${member.image}` : '/images/members/placeholder.png'} />
108+
{links.length > 0 && (
109+
<div className="member-overlay">
110+
{links.map(link => (
111+
<a key={link.label} href={link.href} target="_blank" rel="noopener noreferrer" aria-label={link.label}>
112+
<FontAwesomeIcon icon={link.icon} />
113+
</a>
114+
))}
115+
</div>
116+
)}
117+
</div>
98118
<h4>
99119
{member.firstName}
100120
<br />
101121
<span>{member.lastName}</span>
102122
</h4>
103-
104123
{isLead(member.role) ? <FontAwesomeIcon icon={faAnchor} /> : <></>}
105124
</div>
106125
);

0 commit comments

Comments
 (0)