Skip to content

Commit 3e78fef

Browse files
committed
Created sticky element on vacancy
1 parent c68d9b5 commit 3e78fef

File tree

6 files changed

+124
-25
lines changed

6 files changed

+124
-25
lines changed

package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"@types/node": "^14.14.12",
2828
"@types/react": "^17.0.0",
2929
"@types/react-router-dom": "^5.1.6",
30+
"@types/react-stickynode": "^3.0.1",
3031
"@types/uuid": "^8.3.0",
3132
"axios": "^0.21.0",
3233
"babel-preset-gatsby": "^0.8.0",
@@ -50,6 +51,7 @@
5051
"react-dom": "^17.0.1",
5152
"react-grid-system": "^7.1.1",
5253
"react-helmet": "^6.1.0",
54+
"react-stickynode": "^3.0.5",
5355
"sharp": "^0.28.3",
5456
"styled-components": "^5.2.1",
5557
"styled-components-style-utils": "^1.2.1",

src/containers/Vacancy/VacancyHeader.components.tsx renamed to src/containers/VacancyHeader/VacancyHeader.components.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ export const VacancyHeaderInformation = styled.div`
3636
align-items: center;
3737
& > * {
3838
width: 50%;
39-
padding: 1em;
4039
justify-content: center;
4140
}
4241
}
File renamed without changes.
File renamed without changes.

src/pages/vacancy.tsx

Lines changed: 74 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React from 'react';
22
import Layout from '../layouts/MainLayout/MainLayout';
33
import IconText from '../containers/IconText/IconText';
4-
import VacancyHeader from '../containers/Vacancy/VacancyHeader';
4+
import VacancyHeader from '../containers/VacancyHeader/VacancyHeader';
55
import Container from '../containers/Container';
66
import theme from '../styles/theme';
7+
import Sticky from 'react-stickynode';
8+
79

810
const { colors } = theme;
911

@@ -22,7 +24,7 @@ const Vacancy: React.FC<Record<string, never>> = () => (
2224
/>
2325

2426
<Container>
25-
<div>
27+
<div style={{ marginBottom: "20px" }}>
2628
<IconText
2729
icon="FaRegClock"
2830
fSize="15px"
@@ -37,26 +39,78 @@ const Vacancy: React.FC<Record<string, never>> = () => (
3739
/>
3840
</div>
3941

42+
<div style={{
43+
display: "flex",
44+
}}>
45+
<div style={{ maxWidth: "calc(66.66% - 5px)" }}>
46+
<p style={{ marginBottom: "50px" }}>
47+
Wij, het team van Bytecode, zijn op zoek naar een medior/senior backend/full-stack developer ter uitbreiding van ons team. Onze sterke voorkeur gaat uit naar een ontwikkelaar met HBO/WO werk- en denkniveau, maar een opleiding op dit niveau is geen eis.
48+
</p>
49+
50+
<h3>Over Bytecode</h3>
51+
<p>
52+
Bytecode is een softwareontwikkelingspartner voor start-ups, waarbij de rol van “interim CTO en technische partner” wordt ingenomen. Daarnaast zijn we bezig met verschillende eigen (open-source) onderzoeksprojecten, om betere software te kunnen ontwikkelen voor klanten en intern.
53+
</p>
54+
<p>
55+
Bytecode is opgericht door twee softwareontwikkelaars en kenmerkt zich door een informeel, open en hecht team waarbij iedereen zelf bepaalt waar en wanneer gewerkt wordt. Er heerst een cultuur van continue verbetering, zowel aan de technische kant als aan de business-kant.
56+
</p>
57+
<p>
58+
Ons team bestaat uit jonge mensen die gespecialiseerd zijn in development, (UX/UI) design, marketing en sales. Onze visie is dat elk potentievol idee een kans van slagen moet krijgen. Dit bereiken we door samen te werken als een team, waarbij we advies geven en passende technologie creëren.
59+
</p>
60+
<p>
61+
Spreekt een jong, hecht team jou aan? Heb jij ook behoefte aan gezamelijke lunches op kantoor? Ben je net zo competitief in ping-pong als wij, en sta jij ook te springen voor gezellige teamuitjes? Dan ben je bij Bytecode aan het juiste adres!
62+
</p>
63+
64+
<h3>Wat ga je doen bij Bytecode?</h3>
65+
<p>
66+
In jouw samenwerking met andere developers ga je bijdragen aan de (door-)ontwikkeling van softwareprojecten, zowel voor klanten als bij interne projecten. Je zult voornamelijk bezig zijn met het implementeren van features in de Go-applicaties en het maken van client SDKs voor de frontend. Ook is er de mogelijkheid om bij te dragen aan automatisering van projecten en processen, zoals automatisering van deployments.
67+
</p>
68+
69+
<h3>De technieken waarmee je bekend bent (of die je graag wil leren)</h3>
70+
<ul>
71+
<li>Golang (voor ontwikkeling van server-applicaties)</li>
72+
<li>Relationele databases: voornamelijk PostgreSQL</li>
73+
<li>Typescript/Javascript: React (Native), NodeJS (voor het bouwen van client SDKs)</li>
74+
<li>Automatisering via CI/CD (GitLab CI)</li>
75+
<li>Infrastructure-as-Code: Terraform, Ansible</li>
76+
<li>Git (GitLab)</li>
77+
<li>Linux/Unix</li>
78+
<li>Computer science fundamentals</li>
79+
</ul>
4080

41-
<p>
42-
Wij, het team van Bytecode, zijn op zoek naar een medior/senior backend/full-stack developer ter uitbreiding van ons team. Onze sterke voorkeur gaat uit naar een ontwikkelaar met HBO/WO werk- en denkniveau, maar een opleiding op dit niveau is geen eis.
43-
</p>
44-
45-
<h2>Over Bytecode</h2>
46-
<p>
47-
Bytecode is een softwareontwikkelingspartner voor start-ups, waarbij de rol van “interim CTO en technische partner” wordt ingenomen. Daarnaast zijn we bezig met verschillende eigen (open-source) onderzoeksprojecten, om betere software te kunnen ontwikkelen voor klanten en intern.
48-
</p>
49-
<p>
50-
Bytecode is opgericht door twee softwareontwikkelaars en kenmerkt zich door een informeel, open en hecht team waarbij iedereen zelf bepaalt waar en wanneer gewerkt wordt. Er heerst een cultuur van continue verbetering, zowel aan de technische kant als aan de business-kant.
51-
</p>
52-
<p>
53-
Ons team bestaat uit jonge mensen die gespecialiseerd zijn in development, (UX/UI) design, marketing en sales. Onze visie is dat elk potentievol idee een kans van slagen moet krijgen. Dit bereiken we door samen te werken als een team, waarbij we advies geven en passende technologie creëren.
54-
</p>
55-
<p>
56-
Spreekt een jong, hecht team jou aan? Heb jij ook behoefte aan gezamelijke lunches op kantoor? Ben je net zo competitief in ping-pong als wij, en sta jij ook te springen voor gezellige teamuitjes? Dan ben je bij Bytecode aan het juiste adres!
57-
</p>
81+
<h3>Wat jij belangrijk vindt in je werk</h3>
82+
<ul>
83+
<li>Communicatie: je houdt van duidelijke afspraken en komt deze na</li>
84+
<li>Schone code en softwarearchitectuur: je wil technical debt voorkomen</li>
85+
<li>Je zoekt de balans tussen samenwerken en individueel/autonoom werken</li>
86+
<li>Om de kwaliteit van code te waarborgen werk je graag met code reviews</li>
87+
<li>Je hecht waarde aan de security van de applicaties waar je aan werkt</li>
88+
<li>Naast development denk je ook graag mee over strategie (voor klanten en intern)</li>
89+
<li>Je hebt affiniteit voor vrije en open-source software</li>
90+
</ul>
91+
92+
<h3>Wat bieden wij?</h3>
93+
<ul id="bottom">
94+
<li>Een marktconform salaris en vergoeding van reiskosten</li>
95+
<li>Een contract voor 32/40 uur per week</li>
96+
<li>Snel uitzicht op een vast contract</li>
97+
<li>Toffe projecten om aan te werken, van klanten en intern</li>
98+
<li>Mogelijkheid om bij te dragen aan open-source projecten</li>
99+
<li>Ruimte om te groeien op persoonlijk en professioneel vlak</li>
100+
<li>Flexibiliteit in werktijden, werkdagen en werkplek</li>
101+
<li>Mogelijkheid om nieuwe technieken te leren en uit te proberen</li>
102+
</ul>
103+
</div>
104+
105+
<div style={{ padding: "5px 50px", minWidth: "calc(33.33% - 5px)" }}>
106+
<Sticky top={100} bottomBoundary="#bottom">
107+
<h4>Interesse?</h4>
108+
<span style={{ color: "grey" }}>Stuur ons een e-mail met je motivatie, cv en eventueel je LinkedIn of Github-profiel naar no-recruiters@bytecode.nl</span>
109+
</Sticky>
110+
</div>
111+
</div>
58112
</Container>
59-
</Layout>
113+
</Layout >
60114
);
61115

62116
export default Vacancy;

yarn.lock

Lines changed: 48 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2380,6 +2380,13 @@
23802380
"@types/history" "*"
23812381
"@types/react" "*"
23822382

2383+
"@types/react-stickynode@^3.0.1":
2384+
version "3.0.1"
2385+
resolved "https://registry.npmjs.org/@types/react-stickynode/-/react-stickynode-3.0.1.tgz"
2386+
integrity sha512-7B4UYE+/yEOp2p0mUbu/O0w1UuGiPzSB3RbkjA3UQcaF+k3VaiKdaTdah32PerfEV2WhvmvVeXnNpsm4PsDd5g==
2387+
dependencies:
2388+
"@types/react" "*"
2389+
23832390
"@types/react@*", "@types/react@^17.0.0":
23842391
version "17.0.8"
23852392
resolved "https://registry.npmjs.org/@types/react/-/react-17.0.8.tgz"
@@ -4412,6 +4419,11 @@ class-utils@^0.3.5:
44124419
isobject "^3.0.0"
44134420
static-extend "^0.1.1"
44144421

4422+
classnames@^2.0.0:
4423+
version "2.3.1"
4424+
resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz"
4425+
integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
4426+
44154427
clean-stack@^2.0.0:
44164428
version "2.2.0"
44174429
resolved "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz"
@@ -6481,7 +6493,7 @@ event-target-shim@^5.0.0:
64816493
resolved "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz"
64826494
integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
64836495

6484-
eventemitter3@^3.1.0:
6496+
eventemitter3@^3.0.0, eventemitter3@^3.1.0:
64856497
version "3.1.2"
64866498
resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz"
64876499
integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==
@@ -12438,6 +12450,11 @@ pend@~1.2.0:
1243812450
resolved "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz"
1243912451
integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
1244012452

12453+
performance-now@^2.1.0:
12454+
version "2.1.0"
12455+
resolved "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz"
12456+
integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
12457+
1244112458
phin@^2.9.1:
1244212459
version "2.9.3"
1244312460
resolved "https://registry.npmjs.org/phin/-/phin-2.9.3.tgz"
@@ -13060,7 +13077,7 @@ prompts@^2.0.1, prompts@^2.3.2:
1306013077
kleur "^3.0.3"
1306113078
sisteransi "^1.0.5"
1306213079

13063-
prop-types@^15.6.1, prop-types@^15.7.2:
13080+
prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.7.2:
1306413081
version "15.7.2"
1306513082
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz"
1306613083
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -13251,6 +13268,13 @@ quick-lru@^4.0.1:
1325113268
resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz"
1325213269
integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
1325313270

13271+
raf@^3.0.0:
13272+
version "3.4.1"
13273+
resolved "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz"
13274+
integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
13275+
dependencies:
13276+
performance-now "^2.1.0"
13277+
1325413278
randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
1325513279
version "2.1.0"
1325613280
resolved "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz"
@@ -13382,7 +13406,7 @@ react-hot-loader@^4.12.21:
1338213406

1338313407
react-icons@^4.2.0:
1338413408
version "4.2.0"
13385-
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
13409+
resolved "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz"
1338613410
integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
1338713411

1338813412
react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1:
@@ -13410,6 +13434,17 @@ react-side-effect@^2.1.0:
1341013434
resolved "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz"
1341113435
integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
1341213436

13437+
react-stickynode@^3.0.5:
13438+
version "3.0.5"
13439+
resolved "https://registry.npmjs.org/react-stickynode/-/react-stickynode-3.0.5.tgz"
13440+
integrity sha512-8MfIA1oo4R651ArTwuRHqdIFl1nilIbw7nLdRVoXmaitProb/r26gZLfQ+HSamzauvZjzx1V5gijcjZA6UB/mQ==
13441+
dependencies:
13442+
classnames "^2.0.0"
13443+
core-js "^3.6.5"
13444+
prop-types "^15.6.0"
13445+
shallowequal "^1.0.0"
13446+
subscribe-ui-event "^2.0.6"
13447+
1341313448
react@^17.0.1:
1341413449
version "17.0.2"
1341513450
resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
@@ -14357,7 +14392,7 @@ shallow-compare@^1.2.2:
1435714392
resolved "https://registry.npmjs.org/shallow-compare/-/shallow-compare-1.2.2.tgz"
1435814393
integrity sha512-LUMFi+RppPlrHzbqmFnINTrazo0lPNwhcgzuAXVVcfy/mqPDrQmHAyz5bvV0gDAuRFrk804V0HpQ6u9sZ0tBeg==
1435914394

14360-
shallowequal@^1.1.0:
14395+
shallowequal@^1.0.0, shallowequal@^1.1.0:
1436114396
version "1.1.0"
1436214397
resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz"
1436314398
integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
@@ -15220,6 +15255,15 @@ stylehacks@^4.0.0:
1522015255
postcss "^7.0.0"
1522115256
postcss-selector-parser "^3.0.0"
1522215257

15258+
subscribe-ui-event@^2.0.6:
15259+
version "2.0.7"
15260+
resolved "https://registry.npmjs.org/subscribe-ui-event/-/subscribe-ui-event-2.0.7.tgz"
15261+
integrity sha512-Acrtf9XXl6lpyHAWYeRD1xTPUQHDERfL4GHeNuYAtZMc4Z8Us2iDBP0Fn3xiRvkQ1FO+hx+qRLmPEwiZxp7FDQ==
15262+
dependencies:
15263+
eventemitter3 "^3.0.0"
15264+
lodash "^4.17.15"
15265+
raf "^3.0.0"
15266+
1522315267
subscriptions-transport-ws@^0.9.18:
1522415268
version "0.9.18"
1522515269
resolved "https://registry.npmjs.org/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.18.tgz"

0 commit comments

Comments
 (0)