Skip to content

Commit 05d3066

Browse files
author
Tiko
committed
merged develop branch into this branch to resolve conflicts that might occur
2 parents e667dfd + 92a17f5 commit 05d3066

File tree

4 files changed

+257
-1
lines changed

4 files changed

+257
-1
lines changed

‎CHANGELOG.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
55
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
77

8+
## 2.5.15 (2020-12-17)
9+
10+
### Added:
11+
12+
* Eneco case
13+
14+
## 2.5.14 (2020-12-17)
15+
16+
### Added:
17+
18+
* Popup for articles
19+
820
## 2.5.13 (2020-11-12)
921

1022
### Fixed:

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "bytecode-website",
33
"private": false,
44
"description": "The Bytecode Digital Agency website, released as free software",
5-
"version": "v2.5.13",
5+
"version": "v2.5.15",
66
"author": "Luciano Nooijen <luciano@bytecode.nl>",
77
"keywords": [
88
"bytecode"

‎src/layouts/MainLayout.jsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
/* eslint-disable @typescript-eslint/camelcase */
2+
3+
import React, { useEffect, useState } from 'react';
4+
import styled from 'styled-components';
5+
import PropTypes from 'prop-types';
6+
import Helmet from 'react-helmet';
7+
import SEO from './SEO';
8+
import Navbar from '../containers/Navbar/Navbar';
9+
import Footer from './Footer';
10+
import { GlobalStyles, TypographyClassStyling } from '../styles/global-css';
11+
import HeadScripts from '../lib/GetHeadScripts';
12+
import NewsletterSubscribe from '../containers/NewsletterSubscribe/NewsletterSubscribe';
13+
14+
const Main = styled.main`
15+
max-width: 100vw !important;
16+
overflow-x: hidden;
17+
padding-top: ${props => (props.padded ? '15vh' : 0)};
18+
`;
19+
20+
const HeadElements = () => (
21+
<Helmet>
22+
<meta name="robots" content="index, follow" />
23+
<link type="text/plain" rel="author" href="/humans.txt" />
24+
<link
25+
href="https://fonts.googleapis.com/css?family=Cousine|Lato:300,400,700&display=swap"
26+
rel="stylesheet"
27+
/>
28+
</Helmet>
29+
);
30+
31+
const Layout = ({ children, pageSettings, padded, newsLetter }) => {
32+
const { title, description, keywords } = pageSettings;
33+
const [popup, setPopup] = useState(false);
34+
const [popupClosed, setPopupClosed] = useState(false);
35+
36+
const handleScroll = () => {
37+
const position = window.pageYOffset;
38+
const pageHeight = window.document.body.scrollHeight;
39+
const windowHeight = window.innerHeight;
40+
if ((position + windowHeight) / pageHeight > newsLetter) {
41+
setPopup(true);
42+
}
43+
};
44+
const closePopup = () => {
45+
setPopupClosed(true);
46+
};
47+
const MaybeRenderPopup = () => {
48+
if (popup && !popupClosed && newsLetter)
49+
return <NewsletterSubscribe popup closePopup={closePopup} />;
50+
return null;
51+
};
52+
53+
useEffect(() => {
54+
window.addEventListener('scroll', handleScroll, { passive: true });
55+
window.addEventListener('resize', handleScroll);
56+
return () => {
57+
window.removeEventListener('scroll', handleScroll);
58+
window.removeEventListener('resize', handleScroll);
59+
};
60+
}, []);
61+
return (
62+
<>
63+
<HeadElements />
64+
<HeadScripts />
65+
<GlobalStyles />
66+
<SEO title={title} description={description} keywords={keywords} />
67+
<Navbar />
68+
<Main padded={padded} className="main">
69+
<TypographyClassStyling />
70+
{children}
71+
<MaybeRenderPopup />
72+
</Main>
73+
<Footer />
74+
</>
75+
);
76+
};
77+
78+
export default Layout;
79+
80+
Layout.propTypes = {
81+
children: PropTypes.node.isRequired,
82+
padded: PropTypes.bool,
83+
pageSettings: PropTypes.shape({
84+
title: PropTypes.string.isRequired,
85+
description: PropTypes.string.isRequired,
86+
keywords: PropTypes.string.isRequired,
87+
}).isRequired,
88+
newsLetter: PropTypes.number,
89+
};
90+
91+
Layout.defaultProps = {
92+
padded: false,
93+
newsLetter: 0,
94+
};

‎src/pages/case/eneco.jsx‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import React from 'react';
2+
import Layout from '../../layouts/CaseLayout';
3+
import {
4+
Introduction,
5+
Section,
6+
TextAndImage,
7+
} from '../../containers/ContentBlocks/ContentBlocks';
8+
import Deliverables from '../../containers/Deliverables';
9+
import Credits from '../../containers/Credits/Credits';
10+
import Gallery from '../../containers/Gallery';
11+
import PostThumbnail from '../../containers/Thumbnails/PostThumbnail';
12+
13+
// All images
14+
const useCase = require('../../images/img/cases/eneco/header.png');
15+
const duurzaam = require('../../images/img/cases/eneco/intro.png');
16+
const electra = require('../../images/img/cases/eneco/eneco.png');
17+
const resultaat = require('../../images/img/cases/eneco/omschakelaar.png');
18+
19+
const omschakelaar = 'https://www.eneco.nl/duurzaam-advies/';
20+
21+
const dawny = require('../../images/img/cases/dawny/usecase.png');
22+
const coteetciel = require('../../images/img/cases/cote-et-ciel/homepage.png');
23+
const sungevity = require('../../images/img/cases/sungevity/header.jpg');
24+
25+
const pageSettings = {
26+
title: 'Omschakelen met Eneco',
27+
client: 'eneco',
28+
clientBio: '', // TODO: add client bio
29+
description: 'Nieuwe tool voor persoonlijk duurzaamheidsadvies',
30+
keywords: '', // TODO: add keywords
31+
image: useCase,
32+
};
33+
34+
const creditColumnOne = [
35+
{
36+
title: 'Client',
37+
content: ['Eneco'],
38+
},
39+
{
40+
title: 'Jaar',
41+
content: ['2019-2020'],
42+
},
43+
];
44+
const creditColumnTwo = [
45+
{
46+
title: 'Front-end development',
47+
content: ['Luciano Nooijen'],
48+
},
49+
];
50+
51+
const Case = () => (
52+
<Layout pageSettings={pageSettings}>
53+
<TextAndImage
54+
padded
55+
img={duurzaam}
56+
alt="Afbeelding van een eneco webpagina"
57+
>
58+
<h3>Ga voor duurzaam</h3>
59+
<p className="Paragraph Big (introduction">
60+
Energiebedrijf Eneco is in het afgelopen jaar bezig geweest met
61+
de ontwikkeling <a href={omschakelaar}>“De Omschakelaar”</a>,
62+
een nieuwe online tool. Met behulp van deze tool kunnen
63+
gebruikers persoonlijk advies krijgen over duurzaamheid.
64+
Luciano, onze co-founder en technical lead, heeft op ad
65+
interim-basis geholpen met de realisatie van De Omschakelaar.
66+
</p>
67+
</TextAndImage>
68+
<Deliverables
69+
deliverables={[
70+
'Frontend development',
71+
'Technisch en strategisch advies',
72+
'Architectuele verbeteringen',
73+
]}
74+
/>
75+
<Section>
76+
<Introduction>
77+
<h3>De uitdaging</h3>
78+
<p className="Paragraph Big (introduction)">
79+
Om bewust te worden van het “omschakeltype” dat zij zijn,
80+
doorlopen gebruikers een aantal stellingen die ingaan op hun
81+
houding tegenover duurzaamheid. Op basis van dit type en de
82+
huidige woonsituatie geeft Eneco een persoonlijk
83+
duurzaamheisadvies. Hoe kun jij energie besparen en
84+
duurzamer leven? Welke energieproducten passen hierbij?
85+
Hoeveel energiekosten kun jij besparen?
86+
</p>
87+
</Introduction>
88+
<TextAndImage
89+
img={electra}
90+
alt="Afbeelding van hogespanningsapparatuur"
91+
padded
92+
>
93+
<h2>Eneco</h2>
94+
<p className="big">
95+
Eneco is een energiebedrijf met een grote focus op
96+
duurzaamheid en maatschappelijke betrokkenheid. Met&nbsp;
97+
<a href={omschakelaar}>De Omschakelaar</a> beantwoordt Eneco
98+
vragen over bijvoorbeeld energietransitie en het loslaten
99+
van gas als energiebron.
100+
</p>
101+
</TextAndImage>
102+
</Section>
103+
<Section>
104+
<TextAndImage
105+
img={resultaat}
106+
alt="Afbeelding van de omschakelaar tool"
107+
reverse
108+
padded
109+
>
110+
<h2>Resultaat</h2>
111+
<p className="big">
112+
Het resultaat van de “De Omschakelaar”-tool staat nu{' '}
113+
<a href={omschakelaar}>online</a> en is klaar om mensen naar
114+
een duurzamere levensstijl te helpen. Op dit moment promoot
115+
Eneco de nieuwe tool via reclames op internet en tv. Deze
116+
tool is nu het hoofddoel van de marketing en op hun website.
117+
</p>
118+
</TextAndImage>
119+
</Section>
120+
<Credits
121+
columnOne={creditColumnOne}
122+
columnTwo={creditColumnTwo}
123+
special={['Dept & Eneco']}
124+
resourceLinks={['https://eneco.nl']}
125+
resources={['Eneco Website']}
126+
/>
127+
<Gallery padded sm={33}>
128+
<PostThumbnail
129+
title="Valpreventie voor ouderen"
130+
category="Reinier de Graaf ziekenhuis"
131+
slug="/case/dawny"
132+
postImageUrl={dawny}
133+
/>
134+
<PostThumbnail
135+
title="Hoge kwaliteit rugtassen"
136+
category="côte&ciel"
137+
slug="/case/cote-et-ciel"
138+
postImageUrl={coteetciel}
139+
/>
140+
<PostThumbnail
141+
title="Een digitale omgeving voor zonnepanelen op huurdaken"
142+
category="Sungevity"
143+
slug="/case/sungevity"
144+
postImageUrl={sungevity}
145+
/>
146+
</Gallery>
147+
</Layout>
148+
);
149+
150+
export default Case;

0 commit comments

Comments
 (0)