Skip to content

Commit 73e65c8

Browse files
msaaddevmsaaddev
committed
📦 NEW: pod members data
1 parent 4301ca4 commit 73e65c8

File tree

7 files changed

+163
-9
lines changed

7 files changed

+163
-9
lines changed

‎components/Card.js‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { useState, useEffect } from 'react';
2+
import Link from 'next/link';
23
import styles from '../styles/Card.module.css';
34

4-
const Card = ({ url, name, pod }) => {
5+
const Card = ({ url, name, pod, github, linkedin }) => {
56
const [podClass, setPodClass] = useState(styles.card);
67
useEffect(() => {
78
if (pod === true) {
@@ -13,6 +14,38 @@ const Card = ({ url, name, pod }) => {
1314
<div className={podClass}>
1415
<img src={url} alt={name} />
1516
<h3>{name}</h3>
17+
<div className={styles.social}>
18+
{pod === true ? (
19+
<>
20+
<Link href={github} passHref={true}>
21+
<a>
22+
<img src='./icons/github_logo.png' alt='github' />
23+
</a>
24+
</Link>
25+
<Link href={linkedin} passHref={true}>
26+
<a>
27+
<img src='./icons/linkedin_logo.png' alt='github' />
28+
</a>
29+
</Link>
30+
</>
31+
) : (
32+
<>
33+
<Link href='https://github.com/khattakdev' passHref={true}>
34+
<a>
35+
<img src='./icons/github_logo_white.png' alt='github' />
36+
</a>
37+
</Link>
38+
<Link href='https://linkedin.com/in/khattakdev' passHref={true}>
39+
<a>
40+
<img src='./icons/linkedin_logo_white.png' alt='github' />
41+
</a>
42+
</Link>
43+
</>
44+
)}
45+
</div>
46+
<div className={styles.read_more_btn}>
47+
<button>Read More</button>
48+
</div>
1649
</div>
1750
);
1851
};

‎components/Pod.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ const Pod = () => {
1414
<Card
1515
url={member.url}
1616
name={member.name}
17+
github={member.github}
18+
linkedin={member.linkedin}
1719
pod={true}
1820
key={Math.floor(Math.random() * 10000)}
1921
/>

‎data/podMembers.js‎

Lines changed: 42 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,44 @@
11
module.exports = [
2-
{ name: 'Angelina Gasharova', url: '/images/Angelina_Gasharova.jpg' },
3-
{ name: 'Saad Irfan', url: '/images/saad.jpg' },
4-
{ name: 'Aneesh Kodali', url: '/images/Aneesh_Kodali.jpeg' },
5-
{ name: 'Nkosilathi_Tauro', url: '/images/Nkosilathi_Tauro.png' },
2+
{
3+
name: 'Angelina Gasharova',
4+
url: '/images/Angelina_Gasharova.jpg',
5+
github: 'https://github.com/angelinag',
6+
linkedin: 'https://linkedin.com/in',
7+
},
8+
{
9+
name: 'Saad Irfan',
10+
url: '/images/saad.jpg',
11+
github: 'https://github.com/msaaddev',
12+
linkedin: 'https://linkedin.com/in/msaaddev',
13+
},
14+
{
15+
name: 'Aneesh Kodali',
16+
url: '/images/Aneesh_Kodali.jpeg',
17+
github: 'https://github.com/aneeshkodali',
18+
linkedin: 'https://linkedin.com/in/aneeshkodali',
19+
},
20+
{
21+
name: 'Nkosilathi Tauro',
22+
url: '/images/Nkosilathi_Tauro.png',
23+
github: 'https://github.com/nkosi-tauro',
24+
linkedin: 'https://linkedin.com/in/nkosi-tauro',
25+
},
26+
{
27+
name: 'Levy Naibei',
28+
url: '/images/levy.jpeg',
29+
github: 'https://github.com/Levy-Naibei',
30+
linkedin: 'https://linkedin.com/in/Levy-Naibei/',
31+
},
32+
{
33+
name: 'Anna Tselikova',
34+
url: '/images/ania.jpg',
35+
github: 'https://github.com/aniats',
36+
linkedin: 'https://linkedin.com/in/anna-tselikova-756496164/',
37+
},
38+
{
39+
name: 'Egor Tarasov',
40+
url: '/images/egor.jpeg',
41+
github: 'https://github.com/Jorres',
42+
linkedin: 'https://linkedin.com/',
43+
},
644
];

‎public/images/ania.jpg‎

94.8 KB
Loading

‎public/images/egor.jpeg‎

18.2 KB
Loading

‎public/images/levy.jpeg‎

8.43 KB
Loading

‎styles/Card.module.css‎

Lines changed: 85 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.card {
22
width: 300px;
3-
height: 400px;
4-
margin-top: 50px;
3+
height: 450px;
4+
margin: 50px 25px 0px 25px;
55
border-radius: 5px;
66
box-shadow: #9e9e9e 1px 1px 10px;
77
transition: all 0.5s;
@@ -21,17 +21,43 @@
2121
width: 250px;
2222
height: 250px;
2323
border-radius: 200px;
24-
margin-top: 30px;
24+
border: solid 3px #9e9e9e;
25+
margin-top: 25px;
26+
}
27+
28+
.pod:nth-child(1) img,
29+
.pod:nth-child(8) img,
30+
.pod:nth-child(10) img {
31+
border: solid 3px #db3236;
32+
}
33+
34+
.pod:nth-child(2) img,
35+
.pod:nth-child(5) img,
36+
.pod:nth-child(9) img {
37+
border: solid 3px #3cba54;
38+
}
39+
40+
.pod:nth-child(3) img,
41+
.pod:nth-child(6) img,
42+
.pod:nth-child(11) img {
43+
border: solid 3px #f4c20d;
44+
}
45+
46+
.pod:nth-child(4) img,
47+
.pod:nth-child(7) img,
48+
.pod:nth-child(12) img {
49+
border: solid 3px #4885ed;
2550
}
2651

2752
.card h3 {
2853
font-size: 1.5rem;
2954
color: #ffffff;
55+
margin: 15px 0px;
3056
}
3157

3258
.pod {
3359
width: 300px;
34-
height: 400px;
60+
height: 450px;
3561
margin: 50px 25px 0px 25px;
3662
border-radius: 5px;
3763
box-shadow: #ffffff 1px 1px 10px;
@@ -50,4 +76,59 @@
5076
.pod h3 {
5177
font-size: 1.5rem;
5278
color: #000000;
79+
margin: 15px 0px;
80+
}
81+
82+
.social {
83+
display: flex;
84+
flex-direction: row !important;
85+
justify-content: center;
86+
}
87+
88+
.social img {
89+
width: 30px;
90+
height: 30px;
91+
padding: 0;
92+
margin: 0;
93+
border: none !important;
94+
border-radius: 5px;
95+
margin: 0px 10px;
96+
}
97+
98+
.card .read_more_btn button {
99+
margin-top: 20px;
100+
padding: 10px 30px;
101+
text-transform: uppercase;
102+
color: #000000;
103+
background-color: #ffffff;
104+
border: none;
105+
border-radius: 5px;
106+
font-weight: 700;
107+
transition: all 0.5s;
108+
}
109+
110+
card .read_more_btn button:hover {
111+
cursor: pointer;
112+
box-shadow: #ffffff 1px 1px 20px;
113+
margin-top: 15px;
114+
padding: 15px 35px;
115+
}
116+
117+
.read_more_btn button {
118+
margin-top: 20px;
119+
padding: 10px 30px;
120+
text-transform: uppercase;
121+
color: #ffffff;
122+
background-color: #000000;
123+
border: none;
124+
border-radius: 5px;
125+
font-weight: 700;
126+
transition: all 0.5s;
127+
}
128+
129+
.read_more_btn button:hover {
130+
cursor: pointer;
131+
box-shadow: #201e1e 1px 1px 20px;
132+
margin-top: 15px;
133+
padding: 15px 35px;
53134
}

0 commit comments

Comments
 (0)