Skip to content

Commit c22a348

Browse files
author
Luciano Nooijen
committed
Improved over ons socials
1 parent 4536b05 commit c22a348

File tree

5 files changed

+115
-36
lines changed

5 files changed

+115
-36
lines changed

‎components/TeamMember.jsx‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import AllSocials from '../lib/Socials';
55
import { Col } from '../lib/Grid';
66

77
const TeamMemberWrapper = styled.div`
8+
position: relative;
89
padding: 3rem 0rem 3rem 0rem;
910
h1,
1011
h2,
@@ -19,7 +20,7 @@ const TeamMemberWrapper = styled.div`
1920
& > div {
2021
opacity: 0;
2122
transition: 0.5s;
22-
transform: translate(1em, 0.5em);
23+
transform: translate(0, 0.5em);
2324
}
2425
& > p {
2526
opacity: 1;
@@ -42,7 +43,7 @@ const TeamMemberWrapper = styled.div`
4243
}
4344
& > div {
4445
opacity: 1;
45-
transform: translate(1em, -1em);
46+
transform: translate(0, -1em);
4647
}
4748
& > p {
4849
opacity: 0;
@@ -61,15 +62,14 @@ const TeamMemberPhoto = styled.figure`
6162
6263
&::before {
6364
content: '';
64-
width: 100%;
65-
height: 45%;
65+
width: 90%;
66+
height: 80%;
6667
background: ${theme.colors.mediumgray};
6768
position: absolute;
68-
left: 0;
69+
left: 5%;
6970
transform: translate(0, 30%) scale(0.9);
7071
display: flex;
71-
top: 0;
72-
z-index: -1;
72+
top: -10%;
7373
transition: 0.3s ease;
7474
}
7575
img {
@@ -90,27 +90,29 @@ const getAltText = (name, alt) => {
9090
return `Een foto van ${name}`;
9191
};
9292

93+
const TeamMemberName = styled.h4`
94+
font-size: 0.9em;
95+
`;
96+
97+
const TeamMemberContainer = styled(Col)`
98+
text-align: center;
99+
`;
100+
93101
const TeamMember = props => {
94102
// eslint-disable-next-line
95103
const { name, title, img, alt } = props;
96104

97105
return (
98-
<Col
99-
offset={({ md: 0 }, { lg: 1 }, { xl: 1 })}
100-
sm={6}
101-
md={4}
102-
lg={3}
103-
xl={2}
104-
>
106+
<TeamMemberContainer sm={6} md={6} lg={3} xl={3}>
105107
<TeamMemberWrapper>
106108
<TeamMemberPhoto img={img}>
107109
<img src={img} alt={getAltText(name, alt)} />
108110
</TeamMemberPhoto>
109-
<h4>{name}</h4>
111+
<TeamMemberName>{name}</TeamMemberName>
110112
<p>{title}</p>
111113
<AllSocials {...props} />
112114
</TeamMemberWrapper>
113-
</Col>
115+
</TeamMemberContainer>
114116
);
115117
};
116118

‎lib/Socials.jsx‎

Lines changed: 36 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ const FooterSocialIcon = styled.a`
99
svg {
1010
display: inline-block;
1111
width: 3rem;
12-
margin-right: 1rem;
1312
}
1413
`;
1514

@@ -40,7 +39,7 @@ export const socialIcons = {
4039
.cls-2 { fill: none; stroke: ${socialIconFillColor}; stroke-miterlimit: 10; stroke-width: 1.5px; }
4140
</style>
4241
</defs>
43-
<title>Asset 75</title>
42+
<title>Twitter</title>
4443
<g id="Layer_2" data-name="Layer 2">
4544
<g id="Layer_4" data-name="Layer 4">
4645
<path class="cls-1" d="M44.78,23.23c0,.3,0,.61,0,.92,0,9.34-7.11,20.1-20.1,20.1a20,20,0,0,1-10.85-3.17,16,16,0,0,0,1.71.09,14.18,14.18,0,0,0,8.77-3,7.09,7.09,0,0,1-6.61-4.9,9.82,9.82,0,0,0,1.34.11,7.65,7.65,0,0,0,1.86-.24,7.07,7.07,0,0,1-5.67-6.94v-.09a7,7,0,0,0,3.19.9,7.06,7.06,0,0,1-3.15-5.88,6.94,6.94,0,0,1,1-3.57,20,20,0,0,0,14.56,7.39,8.62,8.62,0,0,1-.17-1.61,7.07,7.07,0,0,1,12.23-4.84,14,14,0,0,0,4.48-1.7,7,7,0,0,1-3.1,3.89,14.16,14.16,0,0,0,4.06-1.09,15.33,15.33,0,0,1-3.54,3.65Z" />
@@ -57,7 +56,7 @@ export const socialIcons = {
5756
.cls-2 { fill: none; stroke: ${socialIconFillColor}; stroke-miterlimit: 10; stroke-width: 1.5px; }
5857
</style>
5958
</defs>
60-
<title>Asset 74</title>
59+
<title>Instagram</title>
6160
<g id="Layer_2" data-name="Layer 2">
6261
<g id="Layer_4" data-name="Layer 4">
6362
<path class="cls-1" d="M29.52,21.29a8.12,8.12,0,1,0,8.12,8.12A8.11,8.11,0,0,0,29.52,21.29Zm0,13.4a5.28,5.28,0,1,1,5.28-5.28,5.29,5.29,0,0,1-5.28,5.28ZM39.87,21A1.9,1.9,0,1,1,38,19.07,1.89,1.89,0,0,1,39.87,21Zm5.38,1.92a9.39,9.39,0,0,0-2.56-6.64,9.4,9.4,0,0,0-6.64-2.55c-2.61-.15-10.45-.15-13.07,0a9.44,9.44,0,0,0-6.64,2.55,9.4,9.4,0,0,0-2.55,6.63c-.15,2.62-.15,10.46,0,13.07a9.4,9.4,0,0,0,2.55,6.64A9.47,9.47,0,0,0,23,45.14c2.62.15,10.46.15,13.07,0a9.37,9.37,0,0,0,6.64-2.56,9.46,9.46,0,0,0,2.56-6.64c.14-2.61.14-10.44,0-13.06ZM41.87,38.75a5.37,5.37,0,0,1-3,3c-2.09.83-7,.64-9.34.64s-7.26.18-9.34-.64a5.37,5.37,0,0,1-3-3c-.83-2.09-.63-7-.63-9.34s-.19-7.26.63-9.33a5.35,5.35,0,0,1,3-3c2.09-.82,7-.63,9.34-.63s7.26-.19,9.34.63a5.38,5.38,0,0,1,3,3c.82,2.08.63,7,.63,9.33S42.69,36.67,41.87,38.75Z" />
@@ -74,7 +73,7 @@ export const socialIcons = {
7473
.cls-2 { fill: none; stroke: ${socialIconFillColor}; stroke-miterlimit: 10; stroke-width: 1.5px; }
7574
</style>
7675
</defs>
77-
<title>Asset 73</title>
76+
<title>LinkedIn</title>
7877
<g id="Layer_2" data-name="Layer 2">
7978
<g id="Layer_4" data-name="Layer 4">
8079
<path class="cls-1" d="M21.58,43.74H15.25V23.38h6.33ZM18.41,20.61a3.68,3.68,0,1,1,3.66-3.7A3.7,3.7,0,0,1,18.41,20.61ZM45.24,43.74H38.93V33.83c0-2.36,0-5.39-3.28-5.39s-3.8,2.57-3.8,5.22V43.74H25.54V23.38H31.6v2.78h.09a6.66,6.66,0,0,1,6-3.29c6.4,0,7.58,4.22,7.58,9.69V43.74Z" />
@@ -83,6 +82,10 @@ export const socialIcons = {
8382
</g>
8483
</svg>
8584
`,
85+
email: `
86+
<!-- Envelope icon source: https://fontawesome.com/icons/envelope?style=regular --><?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 58.5 58.5" version="1.1" id="svg3937" sodipodi:docname="email.svg" inkscape:version="0.92.4 5da689c313, 2019-01-14"> <metadata id="metadata3941"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title>Email</dc:title> </cc:Work> </rdf:RDF> </metadata> <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1608" inkscape:window-height="2018" id="namedview3939" showgrid="false" inkscape:zoom="11.047788" inkscape:cx="9.3329891" inkscape:cy="19.758498" inkscape:window-x="19" inkscape:window-y="79" inkscape:window-maximized="0" inkscape:current-layer="Layer_4" /> <defs id="defs3927"> <style id="style3925">.cls-1{fill:${socialIconFillColor};}.cls-2{fill:none;stroke:${socialIconFillColor};stroke-miterlimit:10;stroke-width:1.5px;}</style> </defs> <title id="title3929">Email</title> <g id="Layer_2" data-name="Layer 2"> <g id="Layer_4" data-name="Layer 4"> <circle class="cls-2" cx="29.25" cy="29.25" r="28.5" id="circle3933" /> <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:26.65069199px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.66626728" x="21.592564" y="36.260834" id="text3945"><tspan sodipodi:role="line" id="tspan3943" x="21.592564" y="60.490421" style="stroke-width:0.66626728" /></text> <path inkscape:connector-curvature="0" style="fill:${socialIconFillColor};fill-opacity:1;stroke-width:0.06763811" d="M 43.318729,16.263481 H 15.181271 c -1.793089,0 -3.246629,1.453541 -3.246629,3.24663 v 19.479778 c 0,1.793083 1.45354,3.24663 3.246629,3.24663 h 28.137458 c 1.793082,0 3.246629,-1.453547 3.246629,-3.24663 V 19.510111 c 0,-1.793089 -1.453547,-3.24663 -3.246629,-3.24663 z m 0,3.24663 v 2.759973 c -1.516586,1.235006 -3.934375,3.155388 -9.103216,7.202785 -1.139091,0.895998 -3.395501,3.04858 -4.965513,3.023487 -1.569745,0.02538 -3.826897,-2.127828 -4.965521,-3.023487 -5.16802,-4.046792 -7.58642,-5.967578 -9.103208,-7.202785 V 19.510111 Z M 15.181271,38.989889 v -12.55377 c 1.549859,1.234466 3.747759,2.966742 7.097806,5.590019 1.478367,1.163716 4.067355,3.732674 6.970923,3.71705 2.889296,0.01562 5.445474,-2.516066 6.970311,-3.71651 3.349982,-2.623205 5.548488,-4.355963 7.098418,-5.590494 v 12.553705 z" id="path2" /> </g> </g> </svg>
87+
88+
`,
8689
};
8790

8891
// eslint-disable-next-line arrow-parens
@@ -93,21 +96,42 @@ export const getMinifiedSocial = social => {
9396
return minifiedHtml;
9497
};
9598

99+
const Icon = styled.span`
100+
display: inline-block;
101+
margin: 0 0.5rem;
102+
&:first-child {
103+
margin-left: 0;
104+
}
105+
`;
106+
96107
/* eslint-disable react/no-danger */
97-
export const SocialIcon = ({ url, social }) => (
98-
<FooterSocialIcon href={url}>
99-
<span dangerouslySetInnerHTML={{ __html: getMinifiedSocial(social) }} />
100-
</FooterSocialIcon>
101-
);
108+
export const SocialIcon = ({ url, social }) => {
109+
if (!url) {
110+
return '';
111+
}
112+
return (
113+
<FooterSocialIcon href={url}>
114+
<Icon
115+
dangerouslySetInnerHTML={{ __html: getMinifiedSocial(social) }}
116+
/>
117+
</FooterSocialIcon>
118+
);
119+
};
120+
121+
const SocialsContainer = styled.div`
122+
display: flex;
123+
justify-content: center;
124+
`;
102125

103126
// eslint-disable-next-line object-curly-newline
104-
const AllSocials = ({ facebook, twitter, linkedin, instagram }) => (
105-
<div>
127+
const AllSocials = ({ email, facebook, twitter, linkedin, instagram }) => (
128+
<SocialsContainer>
129+
<SocialIcon url={email} social="email" />
106130
<SocialIcon url={facebook} social="facebook" />
107131
<SocialIcon url={twitter} social="twitter" />
108132
<SocialIcon url={instagram} social="instagram" />
109133
<SocialIcon url={linkedin} social="linkedin" />
110-
</div>
134+
</SocialsContainer>
111135
);
112136

113137
export default AllSocials;

‎pages/over.jsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,12 @@ const Over = () => (
5555
</Row>
5656
</Container>
5757
<ImageBlock
58-
src="static/img/content/interior.jpg"
58+
src="/static/img/content/interior.jpg"
5959
alt="A fun day at the office"
6060
/>
6161
<Container fluid>
6262
<Row>
63-
<Col offset={{ md: 0, lg: 1, xl: 1 }} md={6} lg={6} xl={4}>
63+
<Col offset={{ md: 0, lg: 1, xl: 1 }} md={12} lg={5} xl={4}>
6464
<TextBlock
6565
subtitle="Het team"
6666
alt="Het team"
@@ -70,8 +70,6 @@ const Over = () => (
7070
{onzeVisie}
7171
</TextBlock>
7272
</Col>
73-
</Row>
74-
<Row>
7573
<TeamMember
7674
name="Jeroen van Steijn"
7775
title="Co-founder & software consultant"
@@ -85,14 +83,17 @@ const Over = () => (
8583
name="Luciano Nooijen"
8684
title="Co-founder & software consultant"
8785
img="/static/img/team/luciano.png"
88-
facebook="https://www.facebook.com/lucianonooijen"
86+
email="mailto:luciano@bytecode.nl"
87+
// facebook="https://www.facebook.com/lucianonooijen"
8988
twitter="https://twitter.com/lucianonooijen"
90-
instagram="https://www.instagram.com/lucianonooijen"
89+
// instagram="https://www.instagram.com/lucianonooijen"
9190
linkedin="https://www.linkedin.com/in/lucianonooijen"
9291
/>
92+
</Row>
93+
<Row>
9394
<TeamMember
9495
name="Julian van Dijk"
95-
title="Full-stack developer"
96+
title="Full-stack developer web/mobiel"
9697
img="/static/img/team/julian.png"
9798
facebook="https://www.facebook.com/lucianonooijen"
9899
twitter="https://twitter.com/lucianonooijen"
@@ -110,7 +111,7 @@ const Over = () => (
110111
/>
111112
<TeamMember
112113
name="Thomas Bodlaender"
113-
title="Sales accountmanager"
114+
title="Sales- en accountmanager"
114115
img="/static/img/team/thomas.png"
115116
facebook="https://www.facebook.com/richardvanthof"
116117
twitter="https://twitter.com/richardvanthof"

‎static/icons/social/email.svg‎

Lines changed: 52 additions & 0 deletions
Loading

static/img/content/Team.png renamed to static/img/content/team.png

File renamed without changes.

0 commit comments

Comments
 (0)