Skip to content

Commit 54271ef

Browse files
GurprankedGurpranked
authored
Merge pull request #70 from UMLCloudComputing/feat/Add-member-details-page-from-member-avatar
feat: Added member avatar component with modal functionality on landing page.
2 parents 9355de8 + 481f828 commit 54271ef

File tree

3 files changed

+132
-28
lines changed

3 files changed

+132
-28
lines changed

‎src/components/AvatarLarge.tsx

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import React from 'react';
2+
import Link from "@docusaurus/Link";
3+
import { Backdrop, Modal, Fade, Box } from "@mui/material";
4+
5+
function MemberCard ({ ProfileImage, Name, Subtitle, Details, Github }) {
6+
return (
7+
<>
8+
<div className="card__header">
9+
<div className="avatar avatar--vertical">
10+
<img
11+
className='avatar__photo avatar__photo--xl'
12+
src={ProfileImage}
13+
/>
14+
<div className="avatar__intro">
15+
<div className="avatar__name">{Name}</div>
16+
<small className="avatar__subtitle">{Subtitle}</small>
17+
</div>
18+
</div>
19+
</div>
20+
<div className="card__body">
21+
<small>
22+
{Details}
23+
</small>
24+
</div>
25+
<div className="card__footer">
26+
<Link className="button button--secondary button--block" to={Github}>Github</Link>
27+
</div>
28+
</>
29+
);
30+
}
31+
32+
33+
function AvatarLarge({ member }) {
34+
const [open, setOpen] = React.useState(false);
35+
const handleOpen = () => setOpen(true);
36+
const handleClose = () => setOpen(false);
37+
38+
return (
39+
<div>
40+
<div className="avatar" onClick={handleOpen}>
41+
<img
42+
className="avatar__photo avatar__photo--lg"
43+
src={member.profile_image} />
44+
<div className="avatar_intro">
45+
<div className="avatar__name"> {member.name} </div>
46+
<small className="avatar__subtitle"> {member.subtitle} </small>
47+
</div>
48+
</div>
49+
<Modal
50+
aria-labelledby="modal-modal-title"
51+
aria-describedby="modal-modal-description"
52+
open={open}
53+
disableScrollLock
54+
onClose={handleClose}
55+
closeAfterTransition
56+
style={{ backdropFilter: 'blur(5px)' }}
57+
slots={{ backdrop: Backdrop }}
58+
slotProps={{
59+
backdrop: {
60+
timeout: 500,
61+
},
62+
}}
63+
>
64+
<Fade in={open}>
65+
<Box className="card" sx={{
66+
position:'absolute',
67+
top: '50%',
68+
left:'50%',
69+
transform: 'translate(-50%, -50%)',
70+
boxShadow: 25,
71+
}}>
72+
<MemberCard
73+
ProfileImage={member.profile_image}
74+
Name={member.name}
75+
Subtitle={member.subtitle}
76+
Details={member.details}
77+
Github={member.github}
78+
/>
79+
</Box>
80+
</Fade>
81+
</Modal>
82+
</div>
83+
);
84+
};
85+
86+
export default AvatarLarge;

‎src/members_meta/members.json

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,51 @@
11
[
22
{
3-
"image": "https://avatars.githubusercontent.com/u/44274319?v=4",
3+
"profile_image": "https://avatars.githubusercontent.com/u/44274319?v=4",
44
"name": "Martin Marwad",
5-
"subtitle": "Founder, Alumni Advisor, UniPath.io Founder"
5+
"subtitle": "Founder, Alumni Advisor, 10x Dev",
6+
"details": "Martin talented developer with a plethora of knowledge and an incredible skill to lead",
7+
"github": "https://github.com/MartinMarwad"
68
},
79
{
8-
"image": "https://avatars.githubusercontent.com/u/136134023?v=4",
10+
"profile_image": "https://avatars.githubusercontent.com/u/136134023?v=4",
911
"name": "Alvin Yu",
10-
"subtitle": "President, UniBot Founder, UniPath.io Dev"
12+
"subtitle": "President, UniBot Founder, 10x Dev",
13+
"details": "Alvin is one of the most activate and inspirational members of the club",
14+
"github": "https://github.com/ultralapse"
1115
},
1216
{
13-
"image": "https://avatars.githubusercontent.com/u/81245965?v=4",
17+
"profile_image": "https://avatars.githubusercontent.com/u/81245965?v=4",
1418
"name": "Nick Bottari",
15-
"subtitle": "Vice President, UniPath.io General Lead"
19+
"subtitle": "Vice President, UniPath.io General Lead",
20+
"details": "Nick is one of the creative masterminds behind the club",
21+
"github": "https://github.com/nbottari9"
1622
},
1723
{
18-
"image": "https://avatars.githubusercontent.com/u/60888380?v=4",
24+
"profile_image": "https://avatars.githubusercontent.com/u/60888380?v=4",
1925
"name": "Christopher Coco",
20-
"subtitle": "Secretary, Attendance Bot Lead, UniPath.io Dev"
26+
"subtitle": "Secretary, Attendance Bot Lead",
27+
"details": "AKA CJ, a capable and focused developer",
28+
"github": "https://github.com/cjcocokrisp"
2129
},
2230
{
23-
"image": "https://media.licdn.com/dms/image/v2/D4E03AQEnHtWDIh-mBg/profile-displayphoto-shrink_200_200/profile-displayphoto-shrink_200_200/0/1700494525950?e=1729728000&v=beta&t=SsM6J2qHqALo4otJYYdKUKOAMrcliF-dMXpmEUzC2pw",
31+
"profile_image": "https://media.licdn.com/dms/image/v2/D4E03AQEnHtWDIh-mBg/profile-displayphoto-shrink_200_200/profile-displayphoto-shrink_200_200/0/1700494525950?e=1729728000&v=beta&t=SsM6J2qHqALo4otJYYdKUKOAMrcliF-dMXpmEUzC2pw",
2432
"name": "Gurpreet Singh",
25-
"subtitle": "Treasurer, Club Website Lead, UniPath.io Dev"
33+
"subtitle": "Treasurer, Club Website Lead",
34+
"details": "AKA Preet, one of the leads behind this website",
35+
"github": "https://github.com/Gurpranked"
2636
},
2737
{
28-
"image": "https://avatars.githubusercontent.com/u/109564679?v=4",
38+
"profile_image": "https://avatars.githubusercontent.com/u/109564679?v=4",
2939
"name": "Rahul Rajesh",
30-
"subtitle": "Former VP, UniPath.io Dev, UML-Now-CLI Dev"
40+
"subtitle": "Former VP, UniPath.io Dev",
41+
"details": "Rahul holds passion in hardware focused development, specifically within linux",
42+
"github": "https://github.com/rajeshrah22"
3143
},
3244
{
33-
"image": "https://media.licdn.com/dms/image/v2/D4E03AQGZblBKFmKCmg/profile-displayphoto-shrink_200_200/profile-displayphoto-shrink_200_200/0/1703034903861?e=1729728000&v=beta&t=lcd6aBE3hfJ7sx4_y_sGEcAcyLTnxZ6JXsHzN8Sn9DA",
45+
"profile_image": "https://media.licdn.com/dms/image/v2/D4E03AQGZblBKFmKCmg/profile-displayphoto-shrink_200_200/profile-displayphoto-shrink_200_200/0/1703034903861?e=1729728000&v=beta&t=lcd6aBE3hfJ7sx4_y_sGEcAcyLTnxZ6JXsHzN8Sn9DA",
3446
"name": "Noah Shayne",
35-
"subtitle": "UniPath.io Dev, UniBot Dev, Hawkerscrape Dev"
47+
"subtitle": "UniPath.io Dev, UniBot Dev",
48+
"details": "A charming developer with an interest in digital forensics and cybersecurity",
49+
"github": "https://github.com/noahshayne"
3650
}
3751
]

‎src/pages/index.js

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import { createTheme,responsiveFontSizes } from '@mui/material';
2323
import Layout from '@theme/Layout';
2424
import { ThemeProvider } from '@emotion/react';
2525
import members from "../members_meta/members.json";
26-
26+
import AvatarLarge from "../components/AvatarLarge";
2727

2828
let theme = createTheme();
2929
theme = responsiveFontSizes(theme);
@@ -186,17 +186,17 @@ function HomepageFeatures() {
186186
);
187187
}
188188

189-
const AvatarLarge = ({ Image, Name, Subtitle}) =>(
190-
<div class="avatar">
191-
<img
192-
class="avatar__photo avatar__photo--lg"
193-
src={Image} />
194-
<div class="avatar_intro">
195-
<div class="avatar__name"> {Name} </div>
196-
<small class="avatar__subtitle"> {Subtitle} </small>
197-
</div>
198-
</div>
199-
);
189+
// const AvatarLarge = ({ Image, Name, Subtitle }) =>(
190+
// <div class="avatar">
191+
// <img
192+
// class="avatar__photo avatar__photo--lg"
193+
// src={Image} />
194+
// <div class="avatar_intro">
195+
// <div class="avatar__name"> {Name} </div>
196+
// <small class="avatar__subtitle"> {Subtitle} </small>
197+
// </div>
198+
// </div>
199+
// );
200200

201201
function Members() {
202202
return (
@@ -208,9 +208,13 @@ function Members() {
208208
'scrollbar-width': 'none', // Firefox
209209
}}>
210210
<Grid container wrap="nowrap">
211-
{members.map(member => {
211+
{members.map((member, idx) => {
212212
return (
213-
<Grid item sx={{ minWidth: '430px' }}><AvatarLarge Image={member.image} Name={member.name} Subtitle={member.subtitle} /></Grid>
213+
<Grid item key={idx} sx={{ minWidth: '430px' }}>
214+
<AvatarLarge
215+
member={member}
216+
/>
217+
</Grid>
214218
);
215219
})}
216220
</Grid>

0 commit comments

Comments
 (0)