Skip to content

Commit 32a4553

Browse files
vmcodesvmcodes
committed
added initial components
1 parent 33601da commit 32a4553

File tree

11 files changed

+497
-3539
lines changed

11 files changed

+497
-3539
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
node_modules
44
.env
55
.DS_Store
6+
yarn-error.log
67

78
# PWA files
89
**/public/sw.js

‎CHANGELOG.md

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
5151
- .prettierignore file
5252
- husky, lint-staged to auto format with prettier on git commit
5353
- lint and format script to run prettier check and write on all files respectively
54-
54+
- who we are components
5555

5656
### Fixed
5757

@@ -67,6 +67,3 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
6767
- updated mobile nav to automatically close when page route change is completed
6868
- adjust flex-basis of a few sections in the about page to better match the design file
6969
- prettierrc "end of line" to auto
70-
71-
72-

‎components/containers/Member.js

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import Image from 'next/image';
2+
import Link from 'next/link';
3+
import styles from '@/styles/Member.module.scss';
4+
5+
export default function Member({
6+
image,
7+
altTag,
8+
name,
9+
title,
10+
position,
11+
about,
12+
linkedIn,
13+
portfolio,
14+
customClass,
15+
}) {
16+
return (
17+
<div
18+
className={
19+
customClass ? `${styles.card} ${styles[customClass]}` : styles.card
20+
}
21+
>
22+
{image && (
23+
<div className={styles.card__image}>
24+
<Image
25+
src={image}
26+
alt={altTag}
27+
className={styles.img}
28+
layout='fill'
29+
/>
30+
</div>
31+
)}
32+
33+
<h2 className={styles.name}>{name}</h2>
34+
<h3 className={styles.title}>{title}</h3>
35+
<h3 className={styles.position}>{position}</h3>
36+
<div className={`${styles.content}`}>
37+
{linkedIn && (
38+
<div className={`${styles.links}`}>
39+
<Image
40+
src='/images/svg/LinkedIn2.svg'
41+
alt='LinkedIn'
42+
height='25px'
43+
width='25px'
44+
/>
45+
<Link href={`https://linkedin.com/${linkedIn}`}>{linkedIn}</Link>
46+
</div>
47+
)}
48+
{portfolio && (
49+
<div className={`${styles.links}`}>
50+
<Image
51+
src='/images/svg/globe.svg'
52+
alt='Web Site'
53+
height='25px'
54+
width='25px'
55+
/>
56+
<Link href={`https://${portfolio}`}>{portfolio}</Link>
57+
</div>
58+
)}
59+
60+
<p>{about}</p>
61+
</div>
62+
</div>
63+
);
64+
}

‎components/containers/Row.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import styles from '@/styles/Row.module.scss';
2+
3+
export default function Row({ children }) {
4+
return <section className={styles.wrapper}>{children}</section>;
5+
}

‎pages/about.js

Lines changed: 61 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@ import {
66
primaryAccent,
77
lightBgColor,
88
} from '@/styles/TwoColumn.module.scss';
9+
import rowStyles from '@/styles/Row.module.scss';
910
import CardsColumns from '@/components/containers/CardsColumns';
1011
import Title from '@/components/snippets/Title';
1112
import Container from '@/components/containers/Container';
13+
import Row from '@/components/containers/Row';
14+
import Member from '@/components/containers/Member';
1215

1316
export default function AboutUs() {
1417
return (
@@ -142,7 +145,7 @@ export default function AboutUs() {
142145
customInnerClass='wanna-learn-more'
143146
/>
144147
<TwoColumn
145-
title="Junior Developers"
148+
title='Junior Developers'
146149
content={
147150
'If you are a junior web developer looking for some guidance and mentoring, ' +
148151
'we invite you to join us and start coding our platform. ' +
@@ -159,7 +162,7 @@ export default function AboutUs() {
159162
customInnerClass='two-text-columns'
160163
secondTextColumn={
161164
<TwoColumn
162-
title="Experienced Developers"
165+
title='Experienced Developers'
163166
content={
164167
'If you are an experienced and patient-loving developer, ' +
165168
'a true rockstar who wants to mentor juniors, ' +
@@ -182,15 +185,24 @@ export default function AboutUs() {
182185
content={
183186
<div>
184187
After taking a look at our project&nbsp;
185-
<a target='_blank'
186-
href='https://github.com/Web-Dev-Path/web-dev-path#readme'
187-
rel='noopener noreferrer' >README</a> and&nbsp;
188-
<a target='_blank'
189-
href='https://github.com/Web-Dev-Path/web-dev-path/wiki'
190-
rel='noopener noreferrer' >wiki</a>,
191-
just send us an email sharing with us about your journey in tech and
192-
why you’re interested in joining us.
193-
<br/>
188+
<a
189+
target='_blank'
190+
href='https://github.com/Web-Dev-Path/web-dev-path#readme'
191+
rel='noopener noreferrer'
192+
>
193+
README
194+
</a>{' '}
195+
and&nbsp;
196+
<a
197+
target='_blank'
198+
href='https://github.com/Web-Dev-Path/web-dev-path/wiki'
199+
rel='noopener noreferrer'
200+
>
201+
wiki
202+
</a>
203+
, just send us an email sharing with us about your journey in tech
204+
and why you’re interested in joining us.
205+
<br />
194206
We've got you!
195207
</div>
196208
}
@@ -199,11 +211,47 @@ export default function AboutUs() {
199211
color={primary}
200212
bgColor={white}
201213
customInnerClass='get-started'
202-
link="mailto:[email protected]"
203-
linkText="Ping Us"
214+
link='mailto:[email protected]'
215+
linkText='Ping Us'
204216
customBtnClass='inverted-grey'
205217
/>
206218
</RevealContentContainer>
219+
<RevealContentContainer>
220+
<section className={rowStyles.primaryBg}>
221+
<Container>
222+
<Title title='Who we are' />
223+
224+
<Row>
225+
<Member
226+
image='/images/ellipse.png'
227+
name='Mariana Caldas'
228+
title='Project Team Lead'
229+
position='Web Developer (Front-End)'
230+
customClass='row-card'
231+
linkedIn='mariana-caldas'
232+
portfolio='marianacaldas.com'
233+
about='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
234+
/>
235+
236+
<Member image='/images/ellipse.png' customClass='row-card' />
237+
238+
<Member image='/images/ellipse.png' customClass='row-card' />
239+
240+
<Member image='/images/ellipse.png' customClass='row-card' />
241+
242+
<Member image='/images/ellipse.png' customClass='row-card' />
243+
244+
<Member image='/images/ellipse.png' customClass='row-card' />
245+
246+
<Member image='/images/ellipse.png' customClass='row-card' />
247+
248+
<Member image='/images/ellipse.png' customClass='row-card' />
249+
250+
<Member image='/images/ellipse.png' customClass='row-card' />
251+
</Row>
252+
</Container>
253+
</section>
254+
</RevealContentContainer>
207255
</div>
208256
);
209257
}

‎public/images/ellipse.png

4.29 KB
Loading

‎public/images/svg/LinkedIn2.svg

Lines changed: 1 addition & 0 deletions
Loading

‎public/images/svg/globe.svg

Lines changed: 1 addition & 0 deletions
Loading

‎styles/Member.module.scss

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
@use './variables' as *;
2+
@use './mixins' as *;
3+
4+
.card {
5+
margin: 1rem 1rem 0 0.5rem;
6+
padding: 1rem;
7+
border-radius: 1.5rem;
8+
box-shadow: $box-shadow;
9+
min-height: 35rem;
10+
background-color: $white;
11+
display: flex;
12+
justify-content: left;
13+
flex-direction: column;
14+
15+
@include small-mobile {
16+
height: 40rem;
17+
width: 100%;
18+
}
19+
20+
@include tablet {
21+
height: 30rem;
22+
width: 40%;
23+
}
24+
25+
@include desktop {
26+
min-width: 25%;
27+
max-width: 25%;
28+
margin: 1.5rem 1.5rem 0 1.5rem;
29+
}
30+
31+
.name {
32+
font-style: italic;
33+
font-family: $heading-font;
34+
font-size: 1.5rem !important;
35+
color: $primary-content-color;
36+
margin-bottom: 0px;
37+
line-height: unset;
38+
39+
@include tablet {
40+
font-size: 2.25rem;
41+
}
42+
}
43+
44+
.title {
45+
font-family: $heading-font;
46+
font-size: 1rem !important;
47+
color: $primary-content-color;
48+
text-align: left;
49+
line-height: normal;
50+
margin: 0px !important;
51+
52+
@include tablet {
53+
font-size: 2rem;
54+
}
55+
}
56+
57+
.position {
58+
font-family: $heading-font;
59+
font-size: 1rem !important;
60+
color: $primary-content-color;
61+
text-align: left;
62+
line-height: normal;
63+
margin: 0px !important;
64+
65+
@include tablet {
66+
font-size: 2rem;
67+
}
68+
}
69+
70+
.content {
71+
align-items: center;
72+
margin: auto;
73+
}
74+
75+
p {
76+
font-size: 1rem !important;
77+
text-align: left;
78+
line-height: normal;
79+
}
80+
81+
.links {
82+
font-size: 1rem !important;
83+
display: flex;
84+
flex-direction: row;
85+
justify-content: left;
86+
margin-bottom: 1rem;
87+
88+
a {
89+
padding-left: 1rem;
90+
text-decoration: underline;
91+
text-underline-offset: 2px;
92+
93+
&:hover {
94+
opacity: 0.6;
95+
text-decoration: none;
96+
}
97+
}
98+
}
99+
100+
.card__image {
101+
min-width: 10rem;
102+
min-height: 10rem;
103+
position: relative;
104+
margin: 0.5rem auto;
105+
106+
img {
107+
border-radius: 0.25rem;
108+
}
109+
}
110+
}

0 commit comments

Comments
 (0)