Skip to content

Commit a74794c

Browse files
alebiavatialebiavati
authored
184 Update "Our Leadership Team" section in the about page (#213)
1 parent b09b808 commit a74794c

31 files changed

+178
-109
lines changed

‎sections/executive-team-section/executive-avatar.js‎

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,53 @@ import { rem } from 'polished'
44
import { string } from 'prop-types'
55
import styled from 'styled-components'
66

7-
import { TABLET_SMALL_SIZE } from 'styles/constants'
8-
9-
const WIDTH = rem('160px')
7+
import { MediaContainer, StaticImage } from 'components'
8+
import { TABLET_LARGE_SIZE, TABLET_SMALL_SIZE } from 'styles/constants'
109

1110
const Container = styled.div`
1211
display: flex;
1312
flex-direction: column;
1413
justify-content: center;
1514
align-items: center;
1615
align-self: flex-start;
17-
padding: ${rem('32px')};
16+
text-align: center;
17+
margin-bottom: ${rem('65px')};
18+
max-width: 50%;
19+
flex: 0 0 50%;
1820
19-
@media only screen and (max-width: ${TABLET_SMALL_SIZE}) {
20-
padding: ${rem('32px')} ${rem('10px')};
21+
@media only screen and (min-width: ${TABLET_SMALL_SIZE}) {
22+
max-width: 25%;
23+
flex: 0 0 25%;
24+
margin-bottom: ${rem('80px')};
25+
}
26+
27+
@media only screen and (min-width: ${TABLET_LARGE_SIZE}) {
28+
max-width: 20%;
29+
flex: 0 0 20%;
30+
margin-bottom: ${rem('84px')};
2131
}
2232
`
2333

24-
const Avatar = styled.img`
34+
const AvatarContainer = styled(MediaContainer)`
35+
width: 100%;
36+
max-width: 160px;
37+
38+
@media only screen and (min-width: ${TABLET_SMALL_SIZE}) {
39+
max-width: 140px;
40+
}
41+
`
42+
43+
const Avatar = styled(MediaContainer)`
44+
width: 100%;
45+
height: 0;
46+
padding-bottom: 100%;
2547
border-radius: 100%;
26-
width: ${WIDTH};
48+
overflow: hidden;
2749
`
2850

2951
const Name = styled.div`
3052
font-size: 18px;
3153
font-weight: 600;
32-
3354
padding-top: ${rem('24px')};
3455
`
3556

@@ -41,12 +62,15 @@ const Position = styled.span`
4162
text-transform: capitalize;
4263
text-align: center;
4364
line-height: ${rem('18px')};
44-
max-width: ${WIDTH};
4565
`
4666

4767
const ExecutiveAvatar = ({ name, postion, src }) => (
4868
<Container>
49-
<Avatar src={src} alt={`${name}: ${postion}`} />
69+
<AvatarContainer>
70+
<Avatar>
71+
<StaticImage name={src} alt={`${name}: ${postion}`} />
72+
</Avatar>
73+
</AvatarContainer>
5074
<Name>{name}</Name>
5175
<Position>{postion}</Position>
5276
</Container>

‎sections/executive-team-section/index.js‎

Lines changed: 41 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,17 @@ import { rem } from 'polished'
44
import styled from 'styled-components'
55

66
import { Heading } from 'components'
7-
import { FlexSectionContent } from 'components/layout'
87
import { useIsMaxScreenSize } from 'helpers/hooks'
9-
import ChevronSvg from 'public/chevron.svg'
10-
import {
11-
TABLET_LARGE_SIZE,
12-
MOBILE_SIZE,
13-
TABLET_SMALL_SIZE,
14-
} from 'styles/constants'
8+
import { TABLET_LARGE_SIZE, TABLET_SMALL_SIZE } from 'styles/constants'
159

10+
import ChevronSvg from '../../static/icons/chevron.svg'
1611
import ExecutiveAvatar from './executive-avatar'
12+
import { people } from './people'
1713

1814
const { h2 } = Heading.VARIANT
1915

2016
const StyledSection = styled.section`
21-
padding: ${rem('164px')} 0;
17+
padding: ${rem('100px')} 0;
2218
2319
@media only screen and (max-width: ${TABLET_LARGE_SIZE}) {
2420
padding: ${rem('124px')} 0;
@@ -27,23 +23,28 @@ const StyledSection = styled.section`
2723

2824
const StyledHeading = styled((props) => <Heading {...props} />)`
2925
text-align: center;
26+
margin-bottom: ${rem('42px')};
27+
28+
@media only screen and (min-width: ${TABLET_SMALL_SIZE}) {
29+
margin-bottom: ${rem('108px')};
30+
}
3031
`
3132

3233
const AvatarList = styled.div`
3334
display: flex;
3435
flex-direction: row;
3536
flex-wrap: wrap;
36-
justify-content: space-around;
37-
margin: 0 120px;
38-
padding-top: ${rem('108px')};
37+
justify-content: center;
38+
margin: 0 auto;
39+
max-width: ${rem('1240px')};
40+
padding: 0 ${rem('35px')};
3941
40-
@media only screen and (max-width: ${TABLET_LARGE_SIZE}) {
41-
margin: 0 10%;
42+
@media only screen and (min-width: ${TABLET_SMALL_SIZE}) {
43+
padding: 0 ${rem('40px')};
4244
}
4345
44-
@media only screen and (max-width: ${MOBILE_SIZE}) {
45-
padding-top: ${rem('42px')};
46-
margin: 0;
46+
@media only screen and (min-width: ${TABLET_LARGE_SIZE}) {
47+
padding: 0 ${rem('60px')};
4748
}
4849
`
4950

@@ -52,16 +53,19 @@ const LinkButtonContainer = styled.div`
5253
flex-direction: column;
5354
align-self: flex-end;
5455
margin-top: ${rem('24px')};
55-
margin-bottom: ${rem('32px')};
56+
margin-bottom: ${rem('65px')};
57+
max-width: 50%;
58+
flex: 0 0 50%;
5659
`
5760

5861
const LinkButton = styled.button`
59-
color: #8493b0;
62+
color: #ff6ab9;
6063
text-decoration: underline;
6164
font-size: 18px;
6265
font-weight: 700;
6366
border: none;
6467
background: none;
68+
cursor: pointer;
6569
`
6670

6771
const InvertedChevronSvg = styled(ChevronSvg)`
@@ -73,52 +77,6 @@ const LinkButtonTextContainer = styled.span`
7377
padding-right: ${rem('4px')};
7478
`
7579

76-
const people = [
77-
{ name: 'Greg Gunn', postion: 'Co-Founder', src: '/greg.jpeg' },
78-
{
79-
name: 'Beier Cai',
80-
postion: 'Co-Founder',
81-
src: '/beier.jpeg',
82-
},
83-
{ name: 'Noel Pullen', postion: 'CXO', src: '/noel.jpeg' },
84-
{ name: 'Cong Ly', postion: 'VP Growth', src: '/cong.jpeg' },
85-
{
86-
name: 'Ashley Brookes',
87-
postion: 'VP Marketing',
88-
src: '/ashley.jpeg',
89-
},
90-
{
91-
name: 'Tiffany Jung',
92-
postion: 'VP Strategy & OPS',
93-
src: '/tiffany.jpeg',
94-
},
95-
{
96-
name: 'Sarah Marion',
97-
postion: 'Founder Partnerships',
98-
src: '/sarah.jpeg',
99-
},
100-
{
101-
name: 'Bill Monkman',
102-
postion: 'Chief Architect',
103-
src: '/bill.jpeg',
104-
},
105-
{
106-
name: 'Steven Shi',
107-
postion: 'Staff Devops Engineer',
108-
src: '/steven.jpeg',
109-
},
110-
{
111-
name: 'Phong Thieu',
112-
postion: 'Engineering Manager',
113-
src: '/phong.jpeg',
114-
},
115-
{
116-
name: 'Renee Tung',
117-
postion: 'Finance',
118-
src: '/renee.jpeg',
119-
},
120-
]
121-
12280
const ExecutiveTeamSection = () => {
12381
const isCompactScreen = useIsMaxScreenSize(TABLET_SMALL_SIZE)
12482
const [showAllPeople, setShowAllPeople] = useState(false)
@@ -130,27 +88,25 @@ const ExecutiveTeamSection = () => {
13088

13189
return (
13290
<StyledSection>
133-
<FlexSectionContent>
134-
<StyledHeading variant={h2}>Our Executive Team</StyledHeading>
135-
<AvatarList>
136-
{peopleToShow.map((person) => (
137-
<ExecutiveAvatar {...person} key={person.name} />
138-
))}
139-
{isCompactScreen && (
140-
<LinkButtonContainer>
141-
<LinkButton
142-
onClick={() => setShowAllPeople(!showAllPeople)}
143-
type="button"
144-
>
145-
<LinkButtonTextContainer>
146-
{showAllPeople ? 'Collapse' : 'Whole Team'}
147-
</LinkButtonTextContainer>
148-
{showAllPeople ? <InvertedChevronSvg /> : <ChevronSvg />}
149-
</LinkButton>
150-
</LinkButtonContainer>
151-
)}
152-
</AvatarList>
153-
</FlexSectionContent>
91+
<StyledHeading variant={h2}>Our Executive Team</StyledHeading>
92+
<AvatarList>
93+
{peopleToShow.map((person) => (
94+
<ExecutiveAvatar {...person} key={person.name} />
95+
))}
96+
{isCompactScreen && (
97+
<LinkButtonContainer>
98+
<LinkButton
99+
onClick={() => setShowAllPeople(!showAllPeople)}
100+
type="button"
101+
>
102+
<LinkButtonTextContainer>
103+
{showAllPeople ? 'Collapse' : 'Whole Team'}
104+
</LinkButtonTextContainer>
105+
{showAllPeople ? <InvertedChevronSvg /> : <ChevronSvg />}
106+
</LinkButton>
107+
</LinkButtonContainer>
108+
)}
109+
</AvatarList>
154110
</StyledSection>
155111
)
156112
}

‎sections/executive-team-section/people.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
export const people = [
2+
{ name: 'Greg Gunn', postion: 'Co-Founder', src: 'team/greg.jpeg' },
3+
{
4+
name: 'Beier Cai',
5+
postion: 'Co-Founder',
6+
src: 'team/beier.jpeg',
7+
},
8+
{ name: 'Noel Pullen', postion: 'CXO', src: 'team/noel.jpeg' },
9+
{ name: 'Cong Ly', postion: 'VP Growth', src: 'team/cong.jpeg' },
10+
{
11+
name: 'Tiffany Jung',
12+
postion: 'VP Strategy & OPS',
13+
src: 'team/tiffany.jpeg',
14+
},
15+
{
16+
name: 'Ashley Brookes',
17+
postion: 'VP Marketing',
18+
src: 'team/ashley.jpeg',
19+
},
20+
{
21+
name: 'Sarah Marion',
22+
postion: 'Founder Partnerships',
23+
src: 'team/sarah.jpeg',
24+
},
25+
{
26+
name: 'Elaine Lam',
27+
postion: 'EPX Coordinator',
28+
src: 'team/elaine.png',
29+
},
30+
{
31+
name: 'Renee Tung',
32+
postion: 'Finance & Operations Manager',
33+
src: 'team/renee.jpeg',
34+
},
35+
{
36+
name: 'Bill Monkman',
37+
postion: 'Chief Architect',
38+
src: 'team/bill.jpeg',
39+
},
40+
{
41+
name: 'Phong Thieu',
42+
postion: 'Senior Engineering Manager',
43+
src: 'team/phong.jpeg',
44+
},
45+
{
46+
name: 'David Cheung',
47+
postion: 'Software Engineer',
48+
src: 'team/david.jpeg',
49+
},
50+
{
51+
name: 'Simon Ho',
52+
postion: 'Technical lead',
53+
src: 'team/simon.jpeg',
54+
},
55+
{
56+
name: 'Paul Donnelly',
57+
postion: 'Product Design lead',
58+
src: 'team/paul.png',
59+
},
60+
{
61+
name: 'Anita Chen',
62+
postion: 'UX Designer',
63+
src: 'team/anita.png',
64+
},
65+
{
66+
name: 'Elina Goldin',
67+
postion: 'Software Engineer',
68+
src: 'team/elina.jpeg',
69+
},
70+
{
71+
name: 'Tim Wan',
72+
postion: 'Software Engineer',
73+
src: 'team/timw.jpeg',
74+
},
75+
{
76+
name: 'Julie Huang',
77+
postion: 'Software Engineer',
78+
src: 'team/julie.jpeg',
79+
},
80+
{
81+
name: 'Ricky Lee',
82+
postion: 'Software Engineer',
83+
src: 'team/ricky.jpeg',
84+
},
85+
]

‎sections/opensource-section/index.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -80,16 +80,16 @@ const AvatarList = styled.div`
8080
`
8181

8282
const people = [
83-
{ name: 'Jason', src: '/jason.jpeg' },
84-
{ name: 'Adrian', src: '/adrian.jpeg' },
85-
{ name: 'Djordje', src: '/djordje.jpeg' },
86-
{ name: 'Jayd', src: '/jayd.jpeg' },
87-
{ name: 'Tim R', src: '/timr.jpeg' },
88-
{ name: 'Tim W', src: '/timw.jpeg' },
89-
{ name: 'Julie', src: '/julie.jpeg' },
90-
{ name: 'Ashley', src: '/ashley.jpeg' },
91-
{ name: 'Anita', src: '/anita.png' },
92-
{ name: 'Simon', src: '/simon.jpeg' },
83+
{ name: 'Jason', src: 'team/jason.jpeg' },
84+
{ name: 'Adrian', src: 'team/adrian.jpeg' },
85+
{ name: 'Djordje', src: 'team/djordje.jpeg' },
86+
{ name: 'Jayd', src: 'team/jayd.jpeg' },
87+
{ name: 'Tim R', src: 'team/timr.jpeg' },
88+
{ name: 'Tim W', src: 'team/timw.jpeg' },
89+
{ name: 'Julie', src: 'team/julie.jpeg' },
90+
{ name: 'Ashley', src: 'team/ashley.jpeg' },
91+
{ name: 'Anita', src: 'team/anita.png' },
92+
{ name: 'Simon', src: 'team/simon.jpeg' },
9393
]
9494

9595
const OpensourceSection = () => {

0 commit comments

Comments
 (0)