Skip to content

Commit 542d791

Browse files
larsnietlarsniet
committed
Updated vacancy landingspage
1 parent 4b62200 commit 542d791

File tree

5 files changed

+116
-111
lines changed

5 files changed

+116
-111
lines changed

‎package.json‎

Lines changed: 86 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,88 @@
11
{
2-
"name": "bytecode-website",
3-
"private": false,
4-
"description": "The Bytecode Digital Agency website, released as free software",
5-
"version": "v2.6.2",
6-
"author": "Luciano Nooijen <luciano@bytecode.nl>",
7-
"keywords": [
8-
"bytecode"
9-
],
10-
"license": "AGPL-3.0",
11-
"scripts": {
12-
"start": "yarn run dev",
13-
"dev": "gatsby develop",
14-
"build": "gatsby build",
15-
"lint": "eslint --ext .jsx,.js,.ts,.tsx src",
16-
"lint:fix": "yarn run lint --fix",
17-
"test": "NODE_ENV=test jest",
18-
"test:watch": "yarn run test --watch",
19-
"test:ci": "yarn run test --coverage --ci",
20-
"serve": "gatsby serve",
21-
"reinstall": "rm -rf node_modules && yarn"
22-
},
23-
"dependencies": {
24-
"@mdx-js/mdx": "^1.6.22",
25-
"@mdx-js/react": "^1.6.22",
26-
"@types/jest": "^26.0.19",
27-
"@types/node": "^14.14.12",
28-
"@types/react": "^17.0.0",
29-
"@types/react-router-dom": "^5.1.6",
30-
"@types/react-stickynode": "^3.0.1",
31-
"@types/uuid": "^8.3.0",
32-
"axios": "^0.21.0",
33-
"babel-preset-gatsby": "^0.8.0",
34-
"change-case": "^4.1.2",
35-
"gatsby": "^2.29.1",
36-
"gatsby-image": "^2.2.18",
37-
"gatsby-mdx": "^0.6.3",
38-
"gatsby-plugin-babel": "^1.0.0",
39-
"gatsby-plugin-manifest": "^2.2.16",
40-
"gatsby-plugin-offline": "^3.0.5",
41-
"gatsby-plugin-react-helmet": "^3.1.7",
42-
"gatsby-plugin-robots-txt": "^1.5.0",
43-
"gatsby-plugin-sharp": "^2.2.21",
44-
"gatsby-plugin-sitemap": "^2.2.12",
45-
"gatsby-plugin-styled-components": "^3.1.17",
46-
"gatsby-remark-images": "^3.1.42",
47-
"gatsby-source-filesystem": "^2.1.22",
48-
"gatsby-transformer-sharp": "^2.3.12",
49-
"polished": "^4.0.5",
50-
"react": "^17.0.1",
51-
"react-dom": "^17.0.1",
52-
"react-grid-system": "^7.1.1",
53-
"react-helmet": "^6.1.0",
54-
"react-stickynode": "^3.0.5",
55-
"sharp": "^0.28.3",
56-
"styled-components": "^5.2.1",
57-
"styled-components-style-utils": "^1.2.1",
58-
"to-style": "^1.3.3",
59-
"uuid": "^8.3.2",
60-
"yarn": "^1.22.10"
61-
},
62-
"devDependencies": {
63-
"@babel/plugin-transform-modules-commonjs": "^7.12.1",
64-
"@types/react-dom": "^17.0.0",
65-
"@types/react-helmet": "^6.1.0",
66-
"@types/styled-components": "^5.1.5",
67-
"@typescript-eslint/eslint-plugin": "^4.9.1",
68-
"@typescript-eslint/parser": "^4.9.1",
69-
"eslint": "^7.15.0",
70-
"eslint-config-airbnb": "^18.2.1",
71-
"eslint-config-prettier": "^7.0.0",
72-
"eslint-plugin-import": "^2.22.1",
73-
"eslint-plugin-jest": "^24.1.3",
74-
"eslint-plugin-jsx-a11y": "^6.4.1",
75-
"eslint-plugin-prettier": "^3.2.0",
76-
"eslint-plugin-react": "^7.21.5",
77-
"eslint-plugin-security": "^1.4.0",
78-
"jest": "^26.6.3",
79-
"prettier": "^2.2.1",
80-
"react-icons": "^4.2.0",
81-
"ts-migrate": "^0.1.10",
82-
"typescript": "^4.1.2"
83-
},
84-
"repository": {
85-
"type": "git",
86-
"url": "https://github.com/BytecodeBV"
87-
}
2+
"name": "bytecode-website",
3+
"private": false,
4+
"description": "The Bytecode Digital Agency website, released as free software",
5+
"version": "v2.6.2",
6+
"author": "Luciano Nooijen <luciano@bytecode.nl>",
7+
"keywords": [
8+
"bytecode"
9+
],
10+
"license": "AGPL-3.0",
11+
"scripts": {
12+
"start": "yarn run dev",
13+
"dev": "gatsby develop",
14+
"build": "gatsby build",
15+
"lint": "eslint --ext .jsx,.js,.ts,.tsx src",
16+
"lint:fix": "yarn run lint --fix",
17+
"test": "NODE_ENV=test jest",
18+
"test:watch": "yarn run test --watch",
19+
"test:ci": "yarn run test --coverage --ci",
20+
"serve": "gatsby serve",
21+
"reinstall": "rm -rf node_modules && yarn"
22+
},
23+
"dependencies": {
24+
"@mdx-js/mdx": "^1.6.22",
25+
"@mdx-js/react": "^1.6.22",
26+
"@types/jest": "^26.0.19",
27+
"@types/node": "^14.14.12",
28+
"@types/react": "^17.0.0",
29+
"@types/react-router-dom": "^5.1.6",
30+
"@types/react-stickynode": "^3.0.1",
31+
"@types/uuid": "^8.3.0",
32+
"axios": "^0.21.0",
33+
"babel-preset-gatsby": "^0.8.0",
34+
"change-case": "^4.1.2",
35+
"gatsby": "^2.29.1",
36+
"gatsby-image": "^2.2.18",
37+
"gatsby-mdx": "^0.6.3",
38+
"gatsby-plugin-babel": "^1.0.0",
39+
"gatsby-plugin-manifest": "^2.2.16",
40+
"gatsby-plugin-offline": "^3.0.5",
41+
"gatsby-plugin-react-helmet": "^3.1.7",
42+
"gatsby-plugin-robots-txt": "^1.5.0",
43+
"gatsby-plugin-sharp": "^2.2.21",
44+
"gatsby-plugin-sitemap": "^2.2.12",
45+
"gatsby-plugin-styled-components": "^3.1.17",
46+
"gatsby-remark-images": "^3.1.42",
47+
"gatsby-source-filesystem": "^2.1.22",
48+
"gatsby-transformer-sharp": "^2.3.12",
49+
"polished": "^4.0.5",
50+
"react": "^17.0.1",
51+
"react-dom": "^17.0.1",
52+
"react-grid-system": "^7.1.1",
53+
"react-helmet": "^6.1.0",
54+
"react-stickynode": "^3.0.5",
55+
"sharp": "^0.28.3",
56+
"styled-components": "^5.2.1",
57+
"styled-components-style-utils": "^1.2.1",
58+
"to-style": "^1.3.3",
59+
"uuid": "^8.3.2",
60+
"yarn": "^1.22.10"
61+
},
62+
"devDependencies": {
63+
"@babel/plugin-transform-modules-commonjs": "^7.12.1",
64+
"@types/react-dom": "^17.0.0",
65+
"@types/react-helmet": "^6.1.0",
66+
"@types/styled-components": "^5.1.5",
67+
"@typescript-eslint/eslint-plugin": "^4.9.1",
68+
"@typescript-eslint/parser": "^4.9.1",
69+
"eslint": "^7.15.0",
70+
"eslint-config-airbnb": "^18.2.1",
71+
"eslint-config-prettier": "^7.0.0",
72+
"eslint-plugin-import": "^2.22.1",
73+
"eslint-plugin-jest": "^24.1.3",
74+
"eslint-plugin-jsx-a11y": "^6.4.1",
75+
"eslint-plugin-prettier": "^3.2.0",
76+
"eslint-plugin-react": "^7.21.5",
77+
"eslint-plugin-security": "^1.4.0",
78+
"jest": "^26.6.3",
79+
"prettier": "^2.2.1",
80+
"react-icons": "^4.2.0",
81+
"ts-migrate": "^0.1.10",
82+
"typescript": "^4.1.2"
83+
},
84+
"repository": {
85+
"type": "git",
86+
"url": "https://github.com/BytecodeBV"
87+
}
8888
}

‎src/containers/IconText/IconText.components.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import styled from 'styled-components';
33
export const IconStyle = styled.span`
44
margin: 0 0.5rem;
55
vertical-align: middle;
6+
font-size: 15px;
67
`;
78

89
export const IconTextContainer = styled.div`

‎src/containers/IconText/IconText.tsx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,30 @@
11
import React from 'react';
2-
import IconTextProps from './IconText.types';
2+
import { IconTextProps, IconProps } from './IconText.types';
33
import { IconTextContainer, IconStyle } from './IconText.components';
4-
import * as FontAwesome from 'react-icons/fa';
4+
import { FaRegClock, FaMapMarkerAlt } from "react-icons/fa";
55

6-
const Icon = (props: { iconName: string; size: string; color: string; }) => {
7-
const { iconName, size, color } = props;
8-
const icon = React.createElement(FontAwesome[iconName]);
9-
return <IconStyle style={{ fontSize: size, color: color }}>{icon}</IconStyle>;
10-
};
6+
// Creates the Icon
7+
const Icon: React.FC<IconProps> = ({ iconName, iconColor }) => {
8+
let icon;
9+
if (iconName === "FaMapMarkerAlt") {
10+
icon = <FaMapMarkerAlt />
11+
}
12+
if (iconName === "FaRegClock") {
13+
icon = <FaRegClock />
14+
}
15+
return <IconStyle style={{ color: iconColor }}>{icon}</IconStyle>;
16+
}
1117

18+
// Creates the Icon with Text
1219
const IconText: React.FC<IconTextProps> = ({
13-
icon,
14-
fSize,
20+
iconName,
1521
iconColor,
1622
text
1723
}) => {
1824
return (
1925
<IconTextContainer>
20-
<Icon iconName={icon} size={fSize} color={iconColor} />
21-
<span style={{ fontSize: fSize, marginBottom: (parseInt(fSize) / 3) }}>{text}</span>
26+
<Icon iconName={iconName} iconColor={iconColor} />
27+
<span style={{ fontSize: "15px" }}>{text}</span>
2228
</IconTextContainer>
2329
);
2430
};

‎src/containers/IconText/IconText.types.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
export default interface IconTextProps {
2-
icon: string;
3-
fSize: string;
1+
export interface IconTextProps {
2+
iconName: string;
43
iconColor: string;
54
text: string;
65
}
6+
7+
export interface IconProps {
8+
iconName: string;
9+
iconColor: string;
10+
}

‎src/pages/vacancy.tsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
// Global
21
import React from 'react';
32
import Layout from '../layouts/MainLayout/MainLayout';
43
import styled from 'styled-components';
54
import theme from '../styles/theme';
65
const { colors, mediaQueryMin } = theme;
76

8-
// Components
97
import IconText from '../containers/IconText/IconText';
108
import VacancyHeader from '../containers/VacancyHeader/VacancyHeader';
119
import { Container, Row, Col } from '../lib/Grid';
@@ -41,7 +39,7 @@ const VacancyList = styled.ul`
4139
margin-bottom: 40px;
4240
`;
4341

44-
const Vacancy: React.FC<Record<string, never>> = () => (
42+
const Vacancy: React.FC = () => (
4543
<Layout pageSettings={pageSettings}>
4644
<VacancyHeader
4745
subtitle="Vacature"
@@ -52,14 +50,12 @@ const Vacancy: React.FC<Record<string, never>> = () => (
5250
<Container>
5351
<IconTextContainer>
5452
<IconText
55-
icon="FaRegClock"
56-
fSize="15px"
53+
iconName="FaRegClock"
5754
iconColor={colors.primary}
5855
text="Deeltijd: 24-40 uur"
5956
/>
6057
<IconText
61-
icon="FaMapMarkerAlt"
62-
fSize="15px"
58+
iconName="FaMapMarkerAlt"
6359
iconColor={colors.primary}
6460
text="Delfgauw"
6561
/>
@@ -134,9 +130,7 @@ const Vacancy: React.FC<Record<string, never>> = () => (
134130
<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>
135131
<div style={{ marginTop: "20px" }}>
136132
<Button
137-
target="_blank"
138-
rel="noopener noreferrer"
139-
href="https://calendly.com/bytecode">
133+
href={"mailto:no-recruiters@bytecode.nl"}>
140134
Neem contact op
141135
</Button>
142136
</div>
@@ -145,7 +139,7 @@ const Vacancy: React.FC<Record<string, never>> = () => (
145139
</Col>
146140
</Row>
147141
</Container>
148-
</Layout>
142+
</Layout >
149143
);
150144

151145
export default Vacancy;

0 commit comments

Comments
 (0)