git sync for colleagues.

All in 1 big commit :)...
Do as I say... not as I do (in my private stuff anyway)

.editorconfig

@@ -0,0 +1,24 @@
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+charset = utf-8
+
+[Makefile]
+indent_style = tab
+indent_size = 8
+
+[{deps,tools,build}/**]
+indent_style = ignore
+indent_size = ignore
+end_of_line = ignore
+trim_trailing_whitespace = ignore
+charset = ignore
+
+[{test/fixtures,deps,build,tools/eslint,tools/gyp,tools/icu,tools/msvs}/**]
+insert_final_newline = false

.eslintignore

@@ -0,0 +1,7 @@
+*.scss
+*.d.ts
+*.spec.ts
+main.browser.ts
+idex.js
+node_modules/*
+*.e2e.*

.eslintrc

@@ -0,0 +1,65 @@
+{
+  "env": {
+    "browser": true,
+    "jest": true,
+    "es6": true
+  },
+  "plugins": ["import"],
+  "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
+  "parserOptions": {
+    "ecmaVersion": 8,
+    "sourceType": "module",
+    "requireConfigFile": false
+  },
+  "parser": "@typescript-eslint/parser",
+  "rules": {
+    "react/prop-types": 0, // ignore because of TS, most props are compile-time
+    "no-console": [
+      "error",
+      {
+        "allow": ["debug", "error"]
+      }
+    ],
+    "no-eval": "error",
+    "import/first": "error",
+    "camelcase": [
+      "error",
+      {
+        "ignoreImports": true,
+        "ignoreDestructuring": true
+      }
+    ],
+    "consistent-return": "warn",
+    "comma-dangle": ["warn", "always-multiline"],
+    "constructor-super": "error",
+    "curly": "error",
+    "eol-last": "warn",
+    "eqeqeq": ["error", "smart"],
+    "import/order": 2,
+    "new-parens": "error",
+    "no-debugger": "error",
+    "no-fallthrough": "off",
+    "max-len": [
+      "warn",
+      {
+        "code": 100
+      }
+    ],
+    "no-shadow": [
+      "error",
+      {
+        "hoist": "all"
+      }
+    ],
+    "no-trailing-spaces": "warn",
+    "no-underscore-dangle": "error",
+    "no-unsafe-finally": "error",
+    "no-var": "error",
+    "object-shorthand": "error",
+    "one-var": ["error", "never"],
+    "prefer-arrow/prefer-arrow-functions": "off",
+    "prefer-const": "error",
+    "radix": "off",
+    "space-in-parens": ["off", "never"]
+  }
+}

.gitignore

@@ -1,3 +1,43 @@
 node_modules/
 .cache/
 public
+
+# Build results
+[Dd]ebug/
+[Dd]ebugPublic/
+[Rr]elease/
+[Rr]eleases/
+x64/
+x86/
+bld/
+[Bb]in/
+[Oo]bj/
+[Ll]og/
+publish/
+build/Release
+coverage
+lib-cov
+
+# deps
+node_modules/
+__pycache__/
+
+# Logs
+logs
+*.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Mac files
+.DS_Store
+
+# randoms
+*.pyc
+dbdata
+old
+yarn-error.log
+dist
+*/test-results

.stylelintrc

@@ -0,0 +1,60 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-recommended-scss",
+    "stylelint-config-prettier"
+  ],
+  "rules": {
+    "font-family-name-quotes": "always-where-recommended",
+    "function-url-quotes": [
+      "always",
+      {
+        "except": ["empty"]
+      }
+    ],
+    "declaration-empty-line-before":[
+      "never",
+    ],
+    "comment-empty-line-before":[
+      "always",
+      {
+        "except": ["first-nested"],
+        "ignore": ["stylelint-commands"],
+        "ignoreComments": ["/BEGIN/", "/END/", "/ignore/"]
+      }
+    ],
+    "selector-max-compound-selectors": 5,
+    "color-hex-length": "long",
+    "selector-pseudo-element-colon-notation": "single",
+    "selector-attribute-quotes": "always",
+    "string-quotes": "double",
+    "max-nesting-depth": 3,
+    "selector-max-specificity": "0,3,2",
+    "declaration-no-important": true,
+    "at-rule-no-vendor-prefix": true,
+    "media-feature-name-no-vendor-prefix": true,
+    "property-no-vendor-prefix": true,
+    "selector-no-vendor-prefix": true,
+    "value-no-vendor-prefix": true,
+    "no-empty-source": null,
+    "selector-class-pattern": "[a-z-]+",
+    "selector-id-pattern": "[a-z-]+",
+    "selector-max-id": 0,
+    "selector-max-universal": 2,
+    "selector-type-no-unknown": [
+      true,
+      {
+        "ignore": ["custom-elements", "default-namespace"]
+      }
+    ],
+    "selector-pseudo-element-no-unknown": [
+      true,
+      {
+        "ignorePseudoElements": ["ng-deep"]
+      }
+    ],
+    "unit-allowed-list": ["px", "%", "em", "rem", "vw", "vh", "deg", "s"],
+    "max-empty-lines": 2,
+    "max-line-length": 120
+  }
+}

LICENSE.md

@@ -0,0 +1,20 @@
+# License
+
+This repository contains a personal project which includes includes work from [PremiumLayers](https://premiumlayers.com/).
+Most of the HTML and CSS code was originally written by [PremiumLayers](https://premiumlayers.com/). I have adapted their theme to work with React.js and to fit my needs. The overall idea, and design, are property of [PremiumLayers](https://premiumlayers.com/).
+
+All of the other code (React, Javascript, PHP), apart from the libraries used, are written by myself and can be freely copied (MIT).
+If you want to copy the work in its entirety **you will have to purchase a license from [PremiumLayers](https://premiumlayers.com/) or [themeforest](https://themeforest.net/item/premium-layers-html-vcard-resume-template/7880419)**.
+
+This item is being distributed according to paragraph 3a in the [license description](license/regular-license-themeforest.pdf) and is exclusively being used for this one project (my personal website) which can be found under several domains including, but not limited to, the following list:
+
+- [rickvanlieshout.com](http://rickvanlieshout.com)
+- [mastermindzh.com](http://mastermindzh.com)
+
+## License files
+
+Below you'll find all relevant license files:
+
+- [License certificate (txt)](https://github.com/Mastermindzh/rickvanlieshout.com/blob/master/docs/licenses/license-certificate.txt)
+- [License certificate (pdf)](https://github.com/Mastermindzh/rickvanlieshout.com/blob/master/docs/licenses/regular-license-themeforest.pdf)
+- [Regular license description (pdf)](https://github.com/Mastermindzh/rickvanlieshout.com/blob/master/docs/licenses/license-certificate.pdf)

README.md

@@ -1,54 +1,9 @@
-<p align="center">
-  <a href="https://www.gatsbyjs.com/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter">
-    <img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
-  </a>
-</p>
-<h1 align="center">
-  Gatsby minimal starter
-</h1>
+# rickvanlieshout.com
 
-## 🚀 Quick start
+My personal website built with Gatsby - [rickvanlieshout.com](http://rickvanlieshout.com)
 
-1.  **Create a Gatsby site.**
+## License
 
-    Use the Gatsby CLI to create a new site, specifying the minimal starter.
+This product includes a licensed product from [PremiumLayers](https://premiumlayers.com/). Because of this you are not allowed to copy / modify the HTML / CSS code used in this project.
 
-    ```shell
-    # create a new Gatsby site using the minimal starter
-    npm init gatsby
-    ```
-
-2.  **Start developing.**
-
-    Navigate into your new site’s directory and start it up.
-
-    ```shell
-    cd my-gatsby-site/
-    npm run develop
-    ```
-
-3.  **Open the code and start customizing!**
-
-    Your site is now running at http://localhost:8000!
-
-    Edit `src/pages/index.js` to see your site update in real-time!
-
-4.  **Learn more**
-
-    - [Documentation](https://www.gatsbyjs.com/docs/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
-
-    - [Tutorials](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
-
-    - [Guides](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
-
-    - [API Reference](https://www.gatsbyjs.com/docs/api-reference/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
-
-    - [Plugin Library](https://www.gatsbyjs.com/plugins?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
-
-    - [Cheat Sheet](https://www.gatsbyjs.com/docs/cheat-sheet/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
-
-## 🚀 Quick start (Gatsby Cloud)
-
-Deploy this starter with one click on [Gatsby Cloud](https://www.gatsbyjs.com/cloud/):
-
-[<img src="https://www.gatsbyjs.com/deploynow.svg" alt="Deploy to Gatsby Cloud">](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-minimal)
+For more info please read the [license](LICENSE.md) file.

TODO.md

@@ -0,0 +1,26 @@
+# Todo
+
+## Fonts
+
+```js
+// <!-- Google Webfonts -->
+// <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700,800,700italic,600italic' rel='stylesheet' type='text/css'>
+// <link href='https://fonts.googleapis.com/css?family=Neuton:400,200,300' rel='stylesheet' type='text/css'>
+```
+
+## Colours and languages (hooks? some state thing..)
+
+## favicon
+
+## helmet
+
+<!-- code mentions META at some points (e.g disclaimer page) -->
+
+## check whether I need all the bootstrap fonts
+
+## resume
+
+- maybe transition to markdown loader?
+- add language switcher + download for both
+- add highlight to "languages I like"
+- tech turns red when hovered over link

docs/licenses/license-certificate.txt

@@ -0,0 +1,35 @@
+LICENSE CERTIFICATE : Envato Market Item
+==============================================
+
+This document certifies the purchase of:
+ONE REGULAR LICENSE
+as defined in the standard terms and conditions on Envato Market.
+
+Licensor's Author Username:
+PremiumLayers
+
+Licensee:
+Rick van Lieshout
+
+Item Title:
+Premium Layers: HTML vCard & Resume Template
+
+Item URL:
+https://themeforest.net/item/premium-layers-html-vcard-resume-template/7880419
+
+Item ID:
+7880419
+
+Item Purchase Code:
+f5a8e8b1-c38d-4e90-af03-7846d2be74ee
+
+Purchase Date:
+2014-12-01 14:24:58 UTC
+
+For any queries related to this document or license please contact Help Team via https://help.market.envato.com
+
+Envato Pty. Ltd. (ABN 11 119 159 741)
+PO Box 16122, Collins Street West, VIC 8007, Australia
+
+==== THIS IS NOT A TAX RECEIPT OR INVOICE ====
+

jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./src",
+    "checkJs": true,
+    "jsx": "react"
+  }
+}

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "description": "Rick van Lieshout",
-  "author": "Mastermindzh",
+  "author": "Rick van Lieshout <Mastermindzh> info@rickvanlieshout.com",
   "keywords": [
     "gatsby"
   ],
@@ -15,19 +15,37 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
-    "gatsby": "^3.4.1",
-    "gatsby-plugin-image": "^1.5.0",
-    "gatsby-plugin-manifest": "^3.5.0",
-    "gatsby-plugin-react-helmet": "^4.5.0",
-    "gatsby-plugin-sass": "^4.5.0",
-    "gatsby-plugin-sharp": "^3.5.0",
-    "gatsby-plugin-sitemap": "^4.1.0",
-    "gatsby-source-filesystem": "^3.5.0",
-    "gatsby-transformer-remark": "^4.2.0",
-    "gatsby-transformer-sharp": "^3.5.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "gatsby": "^4.5.4",
+    "gatsby-plugin-image": "^2.5.2",
+    "gatsby-plugin-manifest": "^4.5.2",
+    "gatsby-plugin-react-helmet": "^5.5.0",
+    "gatsby-plugin-sass": "^5.5.0",
+    "gatsby-plugin-sharp": "^4.5.2",
+    "gatsby-plugin-sitemap": "^5.5.0",
+    "gatsby-source-filesystem": "^4.5.2",
+    "gatsby-transformer-remark": "^5.5.2",
+    "gatsby-transformer-sharp": "^4.5.0",
+    "html-react-parser": "^1.4.5",
+    "react": "^17.0.2",
+    "react-bootstrap": "^0.32.4",
+    "react-cookie-consent": "^7.2.1",
+    "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
-    "sass": "^1.32.13"
-  }
+    "react-side-effect": "^2.1.1",
+    "sass": "^1.49.0"
+  },
+  "devDependencies": {
+    "@mastermindzh/prettier-config": "^1.0.0",
+    "@typescript-eslint/parser": "^5.10.0",
+    "eslint": "^8.7.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-react-app": "^7.0.0",
+    "eslint-plugin-react": "^7.28.0",
+    "prettier": "^2.5.1",
+    "stylelint": "^14.3.0",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-recommended-scss": "^5.0.2",
+    "stylelint-config-standard": "^24.0.0"
+  },
+  "prettier": "@mastermindzh/prettier-config"
 }

src/components/filters/filter-list-item.tsx

@@ -0,0 +1,11 @@
+import React, { FunctionComponent } from "react";
+
+type Props = { label: string; link?: string; onClick?: () => {} };
+
+export const FilterListItem: FunctionComponent<Props> = ({ label, link, onClick }) => {
+  return (
+    <li onClick={onClick} key={link} className="filter">
+      {link !== undefined ? <a href={link}>{label}</a> : label}
+    </li>
+  );
+};

src/components/filters/filter-list.tsx

@@ -0,0 +1,11 @@
+import React, { FunctionComponent } from "react";
+
+type Props = {};
+
+export const FilterList: FunctionComponent<Props> = ({ children }) => {
+  return (
+    <ul id="filter-list" className="clearfix">
+      {children}
+    </ul>
+  );
+};

src/components/info-panel.tsx

@@ -0,0 +1,20 @@
+import { Pill } from "models/pill";
+import React, { FunctionComponent } from "react";
+import { InfoPill } from "./info-pill";
+import { SectionTitle } from "./section-title";
+
+type Props = { title: string; pills?: Pill[] };
+
+export const InfoPanel: FunctionComponent<Props> = ({ title, pills }) => {
+  return (
+    <div className="personal-info col-md-12 no-padding">
+      <SectionTitle>{title}</SectionTitle>
+      <ul>
+        {pills !== undefined &&
+          pills.map((pill: Pill) => {
+            return <InfoPill title={pill.key} value={pill.value} link={pill.link} key={pill.key} />;
+          })}
+      </ul>
+    </div>
+  );
+};

src/components/info-pill.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { FunctionComponent } from "react";
+
+type Props = { title: string; value: string; link: string; rest?: {} };
+
+export const InfoPill: FunctionComponent<Props> = ({ title, value, link, ...rest }) => {
+  return (
+    <li>
+      <div className="p-info">
+        <em>{title}</em>
+        <span>
+          {link !== undefined ? (
+            <a href={link} {...rest}>
+              {value}
+            </a>
+          ) : (
+            value
+          )}
+        </span>
+      </div>
+    </li>
+  );
+};

src/components/section-title.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { FunctionComponent } from "react";
+
+type Props = {};
+
+export const SectionTitle: FunctionComponent<Props> = ({ children }) => {
+  return (
+    <div>
+      <h4>{children}</h4>
+      <div className="sep2" />
+    </div>
+  );
+};

src/components/section.tsx

@@ -0,0 +1,13 @@
+import React, { FunctionComponent } from "react";
+import { SectionTitle } from "./section-title";
+
+type Props = { title: string };
+
+export const Section: FunctionComponent<Props> = ({ title, children }) => {
+  return (
+    <>
+      <SectionTitle>{title}</SectionTitle>
+      {children}
+    </>
+  );
+};

src/components/social-bar.tsx

@@ -0,0 +1,28 @@
+import React, { FunctionComponent } from "react";
+import socialMediaItems from "../data/social-media";
+type Props = {};
+
+export const SocialBar: FunctionComponent<Props> = () => {
+  return (
+    <div className="socialimages">
+      <span>
+        {socialMediaItems.map((socialButton) => {
+          return (
+            <a
+              key={socialButton.service}
+              className="socialimage"
+              href={socialButton.url}
+              data-icon-text={socialButton.text}
+            >
+              <img
+                src={socialButton.grayIcon}
+                alt={`${socialButton.service} black and gray overlay`}
+              />
+              <img src={socialButton.icon} alt={`${socialButton.service} color image`} />
+            </a>
+          );
+        })}
+      </span>
+    </div>
+  );
+};

src/constants/colors.js

@@ -0,0 +1,10 @@
+export default {
+  RED: 'body-red',
+  YELLOW: 'body-yellow',
+  GREEN: 'body-green',
+  LIME: 'body-lime',
+  PINK: 'body-pink',
+  PURPLE: 'body-purple',
+  ORANGE: 'body-orange',
+  BLUE: 'body-blue',
+};

src/constants/disqus.js

@@ -0,0 +1,3 @@
+export default {
+  shortname: "rickvanlieshoutcom",
+};

src/constants/routes.js

@@ -0,0 +1,11 @@
+export const ROUTES = {
+  home: "/",
+  resume: "/resume",
+  contact: "/contact",
+  blog: "/blog",
+  search: "/blog/search",
+  portfolio: "/portfolio",
+
+  cookies: "/legal/cookies",
+  disclaimer: "/legal/disclaimer",
+};

src/data/personal-info.ts

@@ -0,0 +1,34 @@
+import { Pill } from "../models/pill";
+
+export const personalInfo: Pill[] = [
+  {
+    key: "name",
+    value: "Rick van Lieshout",
+  },
+  {
+    key: "date of birth",
+    value: "13 december 1992",
+  },
+  {
+    key: "email",
+    value: "info@rickvanlieshout.com",
+    className: "no-print",
+    link: "mailto:info@rickvanlieshout.com",
+  },
+  {
+    key: "address",
+    value: "Oss - Noord-brabant",
+  },
+  {
+    key: "phone",
+    value: "+31 6 144 36 56 2",
+    className: "no-print",
+    link: "tel:+31614436562",
+  },
+  {
+    key: "website",
+    value: "rickvanlieshout.com",
+    className: "no-print",
+    link: "https://rickvanlieshout.com",
+  },
+];

src/data/resume/en.ts

@@ -0,0 +1,118 @@
+import {
+  ah,
+  burgerszoo,
+  han4pi,
+  han,
+  helpmij,
+  inforit,
+  misoft,
+  quintor,
+  solidwinds,
+  vaa,
+} from "../../images/cv";
+
+export default {
+  education: {
+    title: "Education",
+    items: [
+      {
+        start: "2014",
+        end: "2018",
+        title: "HBO ICT / software engineering HAN - Nijmegen",
+        text: `<p>After a few rocky years I enrolled into college and I'm now trying to get a software engineering degree. I finished my first year with an average of 8.3/10 and will graduate in mid 2018.</p>`,
+      },
+      {
+        start: "2005",
+        end: "2010",
+        title: "Bilingual Senior General Secondary Education  - Maaslandcollege Oss",
+        text: ``,
+      },
+    ],
+  },
+  work: {
+    title: "Work experience",
+    items: [
+      {
+        start: "June 2016 ",
+        end: "now",
+        title: "Software engineer at INFORIT",
+        image: inforit,
+        text: `<p> In June of 2016 I started working at Inforit on a 0-hour contract, on the first of September I started my internship at Inforit as well. After the internship I continued working on the 0-hour contract until the first of July 2018 which is when I went full-time.<p><p>At Inforit I mainly work with c# and Angular though I occasionally get to dabble in nodeJS as well. I'm part of a small dynamic team which strives to deliver excellent software for the logistics sector. </p><p>I'm always striving to introduce new technologies. At Inforit one such technology has been Elasticsearch and related tools (ELK stack). Not only did I lead the research into the ELK-stack I also started introducing my colleagues to the awesome power of Docker by setting up a Linux server running the ELK stack and providing the neccessary docker files. </p><p>Later, in the summer of 2017, I also introduced <a href = "https://github.com/Mastermindzh/angular-electron-base" class="no-print">Electron</a> and Nativescript.</p>`,
+      },
+      {
+        start: "February 2018 ",
+        end: "June 2018",
+        title: "Graduate internship at VAA ICT Consultancy",
+        image: vaa,
+        text: `<p>In February of 2018 I started my graduate internship at VAA ICT Consultancy. At VAA I'm building a dynamic and interactive dash which can be configured to work with VAA's existing product lineup with the help of an adapter.</p>`,
+      },
+      {
+        start: "September 2015",
+        end: "July 2018",
+        title: "Hanflex employee",
+        image: han,
+        text: `<p>I started working for the HAN (hogeschool van Arnhem en Nijmegen) in 2015. The HAN offers us different jobs (teaching others, open door days, etc) and we are free to reply and take those. I primarily respond to the open door days and the teaching jobs. On the open door days I usually work with 3d printers and a lasercutter.</p>`,
+      },
+      {
+        start: "October 2014",
+        end: "January 2019",
+        title: "Helpmij.nl moderator",
+        image: helpmij,
+        text: `<p>I work at one of the biggest Dutch computer forums as a (paid)volunteer. My job is to make sure everyone on the forum follows the rules. We have a biannual meeting and we regularly discuss matters "behind the scenes".</p>`,
+      },
+      {
+        start: "2008",
+        end: "January 2019",
+        title: "My own company!",
+        image: misoft,
+        text: `<p>2008 was a big year for me! I upgraded "rickscomputerhulp",which was founded in 2006, to mi-soft.nl. The goal of Mi-Soft.nl is to help others with their computer problems. This can vary from fixing a broken OS install to developing a website or software solution.</p>`,
+      },
+      {
+        start: "2010",
+        end: "January 2018",
+        title: "Albert Heijn",
+        image: ah,
+        text: `<p>I started working in a local supermaket at the age of 17. Even though I started as a "stocker" I learned to work the register pretty much immediately. After a while I was asked to lead the team. This didn't work out due to personal circumstances.</p>`,
+      },
+      {
+        start: "2005",
+        end: "2010",
+        title: "Newspaper delivery boy",
+        text: `<p><strong>My first real job!</strong><br />As soon as I reached age 13 (legal minimum age for work) I started delivering newspapers. I enjoyed it so much that it quickly grew to include several newspapers. A year later my little brother also wanted to deliver newspapers and from that point on we did it together.</p>`,
+      },
+    ],
+  },
+  projects: {
+    title: "Projects",
+    items: [
+      {
+        start: "November 2017",
+        end: "January 2018",
+        title: "Burgerszoo interactive scouting expedition",
+        image: burgerszoo,
+        text: `<p>For a zoo in the Netherlands me and a couple of fellow students designed, built, and tested an interactive scouting expedition. The expedition consisted of 6 NFC scanning points that play facts when scanned, it was fully configurable by the staff thanks to an interactive web interface made with ReactJS.</p>`,
+      },
+      {
+        start: "September 2015",
+        end: "July 2018",
+        title: "Han4pi workgroup",
+        image: han4pi,
+        text: `<p>For the han4pi workgroup I worked together with 3 other students and a teacher to build a teachers module for the General Secondary Education students. All of which can be found at <a href = "https://github.com/mastermindzh/han4pi.git">github.</a>`,
+      },
+      {
+        start: "2015",
+        end: "2016",
+        title: "Solidwinds developer",
+        image: solidwinds,
+        text: `<p><strong>Because we're under a NDA I can't disclose any technical info or pictures containing sensitive data. </strong>Solidwinds is a company which executes measurements to figure out whether placing a wind turbine is a smart financial decision. Solidwinds asked us to automate the measurement collection system.</p>`,
+      },
+      {
+        start: "April 2016",
+        end: "juni 2016",
+        title: "Quintor developer",
+        image: quintor,
+        text: ` <p> During the last semester of my second year we had to develop a software product for Quintor. </p> <p> Quintor regularly sends out bulk-emails to their customers/affiliates, this used to be a very tedious and time consuming process. We were instructed to automate a large part of this process and make it accessible for a non-techy department. We did this by creating a rest (jax-rs) backend service which is called by a AngularJS front-end. I did most of the backend work and all of that can be found at <a href = "https://github.com/Mastermindzh/mailsegmentation">GitHub</a>. </p> <p> During this project we employed the "SCRUM" development method in which we set up our own sprints. </p>`,
+      },
+    ],
+  },
+};

src/data/resume/nl.ts

@@ -0,0 +1,119 @@
+import {
+  ah,
+  burgerszoo,
+  han4pi,
+  han,
+  helpmij,
+  inforit,
+  misoft,
+  quintor,
+  solidwinds,
+  vaa,
+} from "../../images/cv";
+
+export default {
+  education: {
+    title: "Opleiding",
+    items: [
+      {
+        start: "2014",
+        end: "2018",
+        title: "HBO ICT / software engineering HAN - Nijmegen",
+        text: `<p>Na een paar rommelige jaren ben ik in 2014 gestart met een HBO opleiding ICT / informatica aan de HAN in Nijmegen. Ik heb mijn propedeuse behaalt met een gemiddelde van 8.3 en verwacht af te studeren in mid 2018.</p>`,
+      },
+      {
+        start: "2005",
+        end: "2010",
+        title: "Tweetalig havo - Maaslandcollege Oss",
+        text: `<p>Het eerste jaar van mijn middelbare school carri&eacute;re was een selectiejaar waarin gekeken werd of ik de VMBO-T of HAVO opleiding moest volgen. Het 2de en 3de jaar heb ik op het reguliere havo gezeten. Net voor het einde van het 3de jaar havo is mij gevraagd of ik bij de tweetalige havo aan wilde sluiten en aangezien ik Engels een mooie en waardevolle taal vind heb ik daar ja op gezegd. Hierdoor heb ik de laatste twee jaar van mijn vijf jaar durende schooltraject tweetalige lessen gevolgd.</p>`,
+      },
+    ],
+  },
+  work: {
+    title: "Werk ervaring",
+    items: [
+      {
+        start: "Juni 2016 ",
+        end: "heden",
+        title: "Software engineer bij INFORIT",
+        image: inforit,
+        text: `<p>In juni 2016 ben ik begonnen met werken bij Inforit op basis van een 0-uren contract. Op 1 September ben ik aan mijn derdejaars stage begonnen. Na de stage heb ik doorgewerkt op 0-uur basis tot Juli 2018, daarna ben ik full-time in dienst gegaan.</p><p>Bij inforit werk ik voornamelijk met c# en Angular en heel af en toe doe ik wat werk in nodeJS. Ik maak deel uit van een klein dynamisch team wiens doel het is om kwalitatieve software te ontwikkelen voor de logistieke markt.</p><p> Ik streef er voortdurend naar om nieuwe technologi&euml;n te introduceren. Zo heb ik bijv Elasticsearch en de ELK ge&iuml;ntroduceerd. Naast het leiden van het onderzoek naar de ELK stack heb ik direct van de situatie gebruik gemaakt om Docker te introduceren door de benodigde Docker bestanden aan te maken en een Linux server in te richten met Docker ondersteuning.<p><p>Later, in de zomer van 2017, heb ik <a href = "https://github.com/Mastermindzh/angular-electron-base">Electron</a> en Nativescript geïntroduceerd.</p>`,
+      },
+      {
+        start: "Februari 2018 ",
+        end: "Juni 2018",
+        title: "Afstudeerder bij VAA ICT",
+        image: vaa,
+        text: `<p>In Februari ben ik gestart met mijn afstudeerstage bij VAA ICT Consultancy, ik bouw daar een volledig dynamisch dashboard met ReactJS wat middels een adapter aangesloten kan worden op de bestaande producten van VAA.</p>`,
+      },
+
+      {
+        start: "sept. 2015",
+        end: "juli 2018",
+        title: "Hanflex medewerker",
+        image: han,
+        text: `<p>Sinds 2015 werk ik ook voor de HAN. Hierbij gaat het over open dagen, bijeenkomsten etc. Ik help hierbij met het voorbereiden en het klaar zetten van de benodigde spullen. Ook ben ik een vraagpunt voor de bijeenkomsten en open dagen. Bij open dagen geef ik advies en deel mijn ervaringen op school,ook beantwoord ik eventuele vragen van zowel ouders als scholieren. Daarnaast sta ik in een "fablab" waar ik mensen voorlicht over het gebruik van3d printers en lasersnijders, met voorbeelden erbij.</p>`,
+      },
+      {
+        start: "okt. 2014",
+        end: "jan. 2019",
+        title: "Moderator bij Helpmij.nl",
+        image: helpmij,
+        text: `<p>Als moderatorgroep waarborgen we de sfeer en veiligheid van het forum. Om dit te doen vergaderen we twee keer in het jaar en houden we achter de schermen regelmatig gesprekken over forumzaken.</p>`,
+      },
+      {
+        start: "2008",
+        end: "jan. 2019",
+        title: "Zelfstandig mi-soft.nl",
+        image: misoft,
+        text: `<p>In 2008 heb ik "Mi-Soft" opgericht. Mi-Soft is de wat professionelere variant van "rickscomputerhulp" , die ik in 2006 had opgericht. Sinds 2006 help ik dus al mensen met hun computers, dit kan vari&euml;ren van het instellen van een nieuw stuk software tot het herinstalleren van het complete systeem. Sinds 2008 ben ik ook aan de slag gegaan met het maken van websites en software voor een selecte groep klanten. Dit doe ik, tot de dag op vandaag, er in mijn vrije tijd nog graag bij.</p>`,
+      },
+      {
+        start: "2010",
+        end: "jan. 2018",
+        title: "Albert Heijn",
+        image: ah,
+        text: `<p>Sinds 2010 werk ik in de lokale supermarkt (de Albert Heijn) als vulhulp. Ik heb vrijwel direct ook een opleiding gehad om achter de kassa te kunnen werken. Later ben ik nog in aanmerking gekomen om door te groeien als team leider, maar dit is door omstandigheden helaas niet doorgegaan.</p>`,
+      },
+      {
+        start: "2005",
+        end: "2010",
+        title: "Krantenwijk",
+        text: `<p><strong>Mijn eerste echte baantje!</strong><br />Zodra ik oud genoeg was om te mogen werken (13) heb ik een krantenwijk gehad. Naarmate ik ouder werd kwamen hier verschillende andere krantenwijken bij. Ook heb ik samengewerkt met mijn kleinere broertje.</p>`,
+      },
+    ],
+  },
+  projects: {
+    title: "Projecten",
+    items: [
+      {
+        start: "November 2017",
+        end: "Januari 2018",
+        title: "Burgerszoo interactieve speurtocht",
+        image: burgerszoo,
+        text: `<p>Voor Burgers' Zoo heb ik, samen met een aantal studenten, een project gedaan om de beleving in het park te verbeteren. Tijdens het project is er een speurtocht in elkaar gezet met verschillende NFC scanpunten voor de kinderen welke beheerd konden worden met een web interface.</p>`,
+      },
+      {
+        start: "sept. 2015",
+        end: "juli 2018",
+        title: "Han4pi werkgroep",
+        image: han4pi,
+        text: `<p>Doel van de werkgroep is om (met vier medestudenten en een docent) buiten de lestijd om een leerprogramma (applicatie, pong console, uitleg, ondersteuning en kennis) op te stellen voor middelbare scholieren. Met behulp van dit leerprogramma is het voor middelbare schooldocenten makkelijker om de scholieren in een vertrouwde "Raspberry Pi" omgeving te laten werken. Om dit allemaal een motiverende impuls te geven zijn wij bezig om met onder andere een 3D printer en een lasersnijder een eigen console te maken waar pong op gespeeld kan worden.</p>`,
+      },
+      {
+        start: "2015",
+        end: "2016",
+        title: "Solidwinds developer",
+        image: solidwinds,
+        text: `<p>Samen met een projectgroep op school hebben we gewerkt aan software voor Solidwinds. Solidwinds is een bedrijf dat windmeet-campagnes uitvoert om zo financiering te krijgen van de bank voor windmolenparken. Ik heb bij dit project voornamelijk aan de backend gewerkt.</p>`,
+      },
+      {
+        start: "april 2016",
+        end: "juni 2016",
+        title: "Quintor mailsegmentering",
+        image: quintor,
+        text: ` <p> Voor de laatste periode van het tweede jaar op school moesten we een software ontwikkel project doen voor een bedrijf. Het bedrijf waarbij mijn ontwikkelgroep terecht kwam is "Quintor". </p> <p> De opdracht die Quintor ons heeft gegeven bestaat uit het maken van een mailsegmenteringssysteem waarmee het secretariaat gemakkelijk bulk e-mails kan versturen i.c.m MailChimp. De back-end van dit systeem is een rest (jax-rs) service en de front-end wordt opgebouwt met AngularJS. (i.c.m bootstrap).Het grootste gedeelte van mijn tijd zit in het back-end, de code hiervoor is te vinden op <a href = "https://github.com/Mastermindzh/mailsegmentation">GitHub</a>. </p> <p> Tijdens dit project hebben we de "SCRUM" ontwikkelmethode toegepast en hebben we zelf onze sprints ingedeeld. </p>`,
+      },
+    ],
+  },
+};

src/data/resume/tech.ts

@@ -0,0 +1,52 @@
+export const techs = [
+  { link: "https://www.rabbitmq.com/", label: "RabbitMQ" },
+  { link: "https://kubernetes.io/", label: "Kubernetes" },
+  { link: "https://docs.docker.com/engine/swarm/", label: "Docker swarm" },
+  { link: "https://www.mongodb.com/", label: "Mongo" },
+  { link: "http://ptvgroup.com/en/", label: "PTV xServer" },
+  { link: "http://elasticsearch.org", label: "Elasticsearch" },
+  { link: "http://elastic.co/products/kibana", label: "Kibana" },
+  { link: "http://nodejs.org", label: "NodeJS" },
+  { link: "http://docker.com", label: "Docker" },
+  { link: "http://scala-lang.org/", label: "Scala " },
+  { link: "http://nativescript.org/", label: "Nativescript " },
+  { link: "http://php.net/manual/en/intro-whatis.php", label: "PHP " },
+  { link: "http://mysql.com", label: "MySQL " },
+  {
+    link: "http://microsoft.com/en-us/sql-server/sql-server-2016",
+    label: "SQL Server ",
+  },
+  { link: "http://en.wikipedia.org/wiki/Linux", label: "Linux " },
+  { link: "http://java.com/en/", label: "Java " },
+  { link: "http://angular.io/", label: "Angular " },
+  { link: "http://facebook.github.io/react/", label: "React " },
+  { link: "http://typescriptlang.org/", label: "Typescript " },
+  { link: "https://sass-lang.com/", label: "HTML / CSS / SASS / Web tools" },
+  { link: "http://python.org/", label: "Python" },
+  { link: "http://transfollow.org/en", label: "Transfollow" },
+  { link: "http://golang.org/", label: "Golang " },
+  {
+    link: "http://docs.microsoft.com/en-us/dotnet/visual-basic/",
+    label: "Visual basic ",
+  },
+  { link: "http://en.wikipedia.org/wiki/C_(programming_language)", label: "C " },
+  { link: "http://cplusplus.com/", label: "C++ " },
+  { link: "http://electron.atom.io", label: "Electron " },
+  { link: "http://en.wikipedia.org/wiki/Unified_Modeling_Language", label: "UML " },
+  { link: "http://atlassian.com/software/jira", label: "JIRA " },
+  { link: "http://atlassian.com/software/confluence", label: "Confluence " },
+  { link: "http://github.com/mastermindzh", label: "Git " },
+  { link: "http://hginit.com/", label: "Mercurial " },
+  {
+    link: "http://en.wikipedia.org/wiki/Scrum_(software_development)",
+    label: "Scrum ",
+  },
+  { link: "http://javascript.com/", label: "Javascript " },
+  { link: "http://docs.microsoft.com/en-us/dotnet/csharp/csharp", label: "C#" },
+  { link: "http://www.gnu.org/software/bash/", label: "Bash" },
+  { link: "http://jenkins.io/doc/", label: "Jenkins" },
+  { link: "http://logz.io/", label: "Logstash" },
+  { link: "http://www.tug.org/", label: "TeX" },
+  { link: "http://linux.org", label: "Linux (server & desktop)" },
+  { link: "http://en.wikipedia.org/wiki/BASIC", label: "Basic" },
+];

src/data/social-media.ts

@@ -0,0 +1,77 @@
+import {
+  blogger,
+  bwblogger,
+  bwfacebook,
+  bwgithub,
+  bwgoogleplus,
+  bwlinkedin,
+  bwrss,
+  bwtwitter,
+  bwyoutube2,
+  facebook,
+  github,
+  googleplus,
+  linkedin,
+  rss,
+  twitter,
+  youtube2,
+} from "./../images/contact/index";
+
+export default [
+  {
+    service: "youtube",
+    text: "YouTube - Rick van Lieshout",
+    url: "https://www.youtube.com/channel/UCjDWcnCf8nM2tzBbwxy5dhg",
+    icon: youtube2,
+    grayIcon: bwyoutube2,
+  },
+  {
+    service: "Google Plus",
+    text: "Google+ - rickvanlieshoutt",
+    url: "https://plus.google.com/+RickvanLieshoutt/posts",
+    icon: googleplus,
+    grayIcon: bwgoogleplus,
+  },
+  {
+    service: "Facebook",
+    text: "Facebook - misofttechnologies",
+    url: "https://www.facebook.com/rickvanlieshoutt",
+    icon: facebook,
+    grayIcon: bwfacebook,
+  },
+  {
+    service: "Github",
+    text: "Github - mastermindzh",
+    url: "https://github.com/mastermindzh",
+    icon: github,
+    grayIcon: bwgithub,
+  },
+  {
+    service: "Twitter",
+    text: "Twitter - Mastermindzh",
+    url: "https://twitter.com/mastermindzh",
+    icon: twitter,
+    grayIcon: bwtwitter,
+  },
+  {
+    service: "Linkedin",
+    text: "Linkedin - Rick van Lieshout",
+    url: "https://www.linkedin.com/in/rickvanlieshout/",
+    icon: linkedin,
+    grayIcon: bwlinkedin,
+  },
+  {
+    service: "My blog",
+    text: "Blogger - mastermindzh",
+    url: "https://rickvanlieshout.com/blogs",
+    icon: blogger,
+    grayIcon: bwblogger,
+  },
+  {
+    service: "My blog's rss feed",
+    text: "RSS - blog",
+    url: "https://rickvanlieshout.com/rss",
+    icon: rss,
+    grayIcon: bwrss,
+  },
+];

src/images/colors/index.js

@@ -0,0 +1,10 @@
+import blue from "./blue.png";
+import green from "./green.png";
+import lime from "./lime.png";
+import orange from "./orange.png";
+import pink from "./pink.png";
+import purple from "./purple.png";
+import red from "./red.png";
+import yellow from "./yellow.png";
+
+export { blue, green, lime, orange, pink, purple, red, yellow };

src/images/contact/index.ts

@@ -0,0 +1,51 @@
+import blogger from "./blogger.png";
+import bwblogger from "./bw-blogger.png";
+import bwfacebook from "./bw-facebook.png";
+import bwgithub from "./bw-github.png";
+import bwgoogleplus from "./bw-googleplus.png";
+import bwlinkedin from "./bw-linkedin.png";
+import bwrss from "./bw-rss.png";
+import bwtwitter from "./bw-twitter.png";
+import bwyoutube2 from "./bw-youtube-2.png";
+import facebook from "./facebook.png";
+import github from "./github.png";
+import googleplus from "./googleplus.png";
+import linkedin from "./linkedin.png";
+import rss from "./rss.png";
+import twitter from "./twitter.png";
+import youtube2 from "./youtube-2.png";
+import whatsapp from "./whatsapp.png";
+import bwwhatsapp from "./bw-whatsapp.png";
+import telegram from "./telegram.png";
+import bwtelegram from "./bwtelegram.png";
+import mail from "./mail.png";
+import bwmail from "./bwmail.png";
+import reddit from "./reddit.png";
+import bwreddit from "./bwreddit.png";
+
+export {
+  blogger,
+  bwblogger,
+  bwfacebook,
+  bwgithub,
+  bwgoogleplus,
+  bwlinkedin,
+  bwrss,
+  bwtwitter,
+  bwyoutube2,
+  facebook,
+  github,
+  googleplus,
+  linkedin,
+  rss,
+  twitter,
+  youtube2,
+  whatsapp,
+  bwwhatsapp,
+  telegram,
+  bwtelegram,
+  mail,
+  bwmail,
+  reddit,
+  bwreddit,
+};

src/images/cv/index.js

@@ -0,0 +1,23 @@
+import ah from "./ah.png";
+import burgerszoo from "./burgerszoo.jpg";
+import han4pi from "./han4pi.png";
+import han from "./han.png";
+import helpmij from "./helpmij.png";
+import inforit from "./inforit.png";
+import misoft from "./misoft.png";
+import quintor from "./quintor.png";
+import solidwinds from "./solidwinds.png";
+import vaa from "./vaa.png";
+
+export {
+  ah,
+  burgerszoo,
+  han4pi,
+  han,
+  helpmij,
+  inforit,
+  misoft,
+  quintor,
+  solidwinds,
+  vaa
+};

src/layout/footer.tsx

@@ -0,0 +1,171 @@
+import React, { FunctionComponent } from "react";
+import { Link } from "gatsby";
+// import { ButtonToolbar, DropdownButton, MenuItem } from "react-bootstrap";
+// import { connect } from "react-redux";
+// import {changeColor} from './../../actions/colorActions';
+
+// import COLOR from "./../../constants/colors";
+import { ROUTES } from "../constants/routes";
+// import { blue, green, lime, orange, pink, purple, red, yellow } from './../../assets/images/colors'
+
+export const Footer: FunctionComponent<{}> = () => {
+  return (
+    <footer>
+      <div className="row">
+        <div className="col-md-7">
+          <p className="footerText">
+            &copy; 2021 Rick van Lieshout
+            <span className="links">
+              <Link to={ROUTES.cookies}>cookies</Link> /{" "}
+              <Link to={ROUTES.disclaimer}> disclaimer</Link>
+            </span>
+          </p>
+        </div>
+        <div className="col-md-5">
+          <ul className="social">
+            {/* <li>
+            <ButtonToolbar>
+              <DropdownButton className="plain-dropdown" title={<img style={{ marginRight: "3px", width: "21px" }} src={`/assets/images/colors/${this.props.color.split("-")[1]}.png`} alt="select color" />} dropup id="split-button-dropup">
+                <MenuItem onSelect={() => { this.props.changeColor(COLOR.RED); }} >   <img src={red} alt="icon to change color to red" />    {colors.red}</MenuItem>
+                <MenuItem onSelect={() => { this.props.changeColor(COLOR.YELLOW); }} ><img src={yellow} alt="icon to change color to yellow" /> {colors.yellow}</MenuItem>
+                <MenuItem onSelect={() => { this.props.changeColor(COLOR.GREEN); }} > <img src={green} alt="icon to change color to green" />  {colors.green}</MenuItem>
+                <MenuItem onSelect={() => { this.props.changeColor(COLOR.LIME); }} >  <img src={lime} alt="icon to change color to lime" />   {colors.lime}</MenuItem>
+                <MenuItem onSelect={() => { this.props.changeColor(COLOR.PINK); }} >  <img src={pink} alt="icon to change color to pink" />   {colors.pink}</MenuItem>
+                <MenuItem onSelect={() => { this.props.changeColor(COLOR.PURPLE); }} ><img src={purple} alt="icon to change color to purple" /> {colors.purple}</MenuItem>
+                <MenuItem onSelect={() => { this.props.changeColor(COLOR.ORANGE); }} ><img src={orange} alt="icon to change color to orange" /> {colors.orange}</MenuItem>
+                <MenuItem onSelect={() => { this.props.changeColor(COLOR.BLUE); }} >  <img src={blue} alt="icon to change color to blue" />   {colors.blue}</MenuItem>
+              </DropdownButton>
+            </ButtonToolbar>
+          </li> */}
+            <li>
+              <a href="https://github.com/mastermindzh" id="github-footer-image">
+                <i className="fa fa-github" />
+              </a>
+            </li>
+            <li>
+              <a href="https://www.linkedin.com/in/rickvanlieshout/" id="linkedin-footer-image">
+                <i className="fa fa-linkedin" />
+              </a>
+            </li>
+            <li>
+              <a href="https://www.facebook.com/rickvanlieshoutt" id="facebook-footer-image">
+                <i className="fa fa-facebook" />
+              </a>
+            </li>
+            <li>
+              <a href="https://twitter.com/mastermindzh" id="twitter-footer-image">
+                <i className="fa fa-twitter" />
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+// class Footer extends Component {
+//   render() {
+
+//     // const colors = this.props.language === 'en'? {
+//     //   red: "red",
+//     //   yellow: "yellow",
+//     //   green: "green",
+//     //   lime: "lime",
+//     //   pink: "pink",
+//     //   purple: "purple",
+//     //   orange: "orange",
+//     //   blue: "blue",
+//     // }:
+//     // {
+//     //   red: "rood",
+//     //   yellow: "geel",
+//     //   green: "groen",
+//     //   lime: "lime",
+//     //   pink: "roze",
+//     //   purple: "paars",
+//     //   orange: "oranje",
+//     //   blue: "blauw",
+//     // }
+
+//     return (
+//       <footer>
+//         <div className="row">
+
+//           <div className="col-md-7">
+//             <p className="footerText">
+//               &copy; 2021 Rick van Lieshout
+//                 <span className="links">
+//                 <Link to={routes.cookies}>cookies</Link> /{" "}
+//                 <Link to={routes.disclaimer}> disclaimer</Link>
+//               </span>
+//             </p>
+//           </div>
+//           <div className="col-md-5">
+//             <ul className="social">
+//               {/* <li>
+//                 <ButtonToolbar>
+//                   <DropdownButton className="plain-dropdown" title={<img style={{ marginRight: "3px", width: "21px" }} src={`/assets/images/colors/${this.props.color.split("-")[1]}.png`} alt="select color" />} dropup id="split-button-dropup">
+//                     <MenuItem onSelect={() => { this.props.changeColor(COLOR.RED); }} >   <img src={red} alt="icon to change color to red" />    {colors.red}</MenuItem>
+//                     <MenuItem onSelect={() => { this.props.changeColor(COLOR.YELLOW); }} ><img src={yellow} alt="icon to change color to yellow" /> {colors.yellow}</MenuItem>
+//                     <MenuItem onSelect={() => { this.props.changeColor(COLOR.GREEN); }} > <img src={green} alt="icon to change color to green" />  {colors.green}</MenuItem>
+//                     <MenuItem onSelect={() => { this.props.changeColor(COLOR.LIME); }} >  <img src={lime} alt="icon to change color to lime" />   {colors.lime}</MenuItem>
+//                     <MenuItem onSelect={() => { this.props.changeColor(COLOR.PINK); }} >  <img src={pink} alt="icon to change color to pink" />   {colors.pink}</MenuItem>
+//                     <MenuItem onSelect={() => { this.props.changeColor(COLOR.PURPLE); }} ><img src={purple} alt="icon to change color to purple" /> {colors.purple}</MenuItem>
+//                     <MenuItem onSelect={() => { this.props.changeColor(COLOR.ORANGE); }} ><img src={orange} alt="icon to change color to orange" /> {colors.orange}</MenuItem>
+//                     <MenuItem onSelect={() => { this.props.changeColor(COLOR.BLUE); }} >  <img src={blue} alt="icon to change color to blue" />   {colors.blue}</MenuItem>
+//                   </DropdownButton>
+//                 </ButtonToolbar>
+//               </li>
+//               <li>
+//                 <ButtonToolbar>
+//                   <DropdownButton className="plain-dropdown" title={<img style={{ marginRight: "3px" }} src={this.props.language == 'en' ? flagEn : flagNl} alt="select language" />} dropup id="split-button-dropup2">
+//                     <MenuItem onSelect={() => { this.props.changeLanguage("nl"); }}><img src={flagNl} alt="dutch" /> Nederlands</MenuItem>
+//                     <MenuItem onSelect={() => { this.props.changeLanguage("en"); }}><img src={flagEn} alt="english" /> English</MenuItem>
+//                   </DropdownButton>
+//                 </ButtonToolbar>
+//               </li> */}
+//               <li>
+//                 <a href="https://github.com/mastermindzh" id="github-footer-image">
+//                   <i className="fa fa-github" />
+//                 </a>
+//               </li>
+//               <li>
+//                 <a href="https://www.linkedin.com/in/rickvanlieshout/" id="linkedin-footer-image">
+//                   <i className="fa fa-linkedin" />
+//                 </a>
+//               </li>
+//               <li>
+//                 <a href="https://www.facebook.com/rickvanlieshoutt" id="facebook-footer-image">
+//                   <i className="fa fa-facebook" />
+//                 </a>
+//               </li>
+//               <li>
+//                 <a href="https://twitter.com/mastermindzh" id="twitter-footer-image">
+//                   <i className="fa fa-twitter" />
+//                 </a>
+//               </li>
+//             </ul>
+//           </div>
+//         </div>
+//       </footer>
+//     );
+//   }
+// }
+
+// Footer.propTypes = {
+//   color: PropTypes.string,
+//   language: PropTypes.string,
+//   changeColor: PropTypes.func,
+//   changeLanguage: PropTypes.func,
+// };
+
+// // function mapStateToProps(state) {
+// //   return {
+// //     color: state.colorReducer.color,
+// //     language: state.languageReducer.language,
+// //   };
+// // }
+
+// // export default connect(mapStateToProps, { changeColor, changeLanguage,
+// // })(Footer);

src/layout/layout.tsx

@@ -0,0 +1,57 @@
+import React, { FunctionComponent } from "react";
+import PropTypes from "prop-types";
+// import CookieConsent from "react-cookie-consent";
+// import { Link } from "gatsby"
+import "./../styles/style.scss";
+import { ProfilePicture } from "./profile-pic";
+import { NavBar } from "./navigation/navbar";
+import { Footer } from "./footer";
+
+export const Layout: FunctionComponent<{}> = ({ children }) => {
+  return (
+    <div className="body-red">
+      <div className="main-content">
+        <div className="container no-padding">
+          <div className="row">
+            <div className="col-md-3 l-content">
+              <ProfilePicture />
+              <NavBar></NavBar>
+            </div>
+
+            <div className="col-md-9 r-content">
+              <div className="flexslider">
+                <div className="slides">
+                  <div className="profile">
+                    {children}
+                    <div className="clearfix" />
+                  </div>
+                </div>
+              </div>
+              <Footer />
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* <CookieConsent
+        style={{ background: "#2B373B" }}
+        buttonStyle={{
+          background: "#e74c3c",
+          color: "white",
+          fontWeight: "bolder",
+        }}
+      >
+        <span>
+          This website uses cookies to enhance the user experience.
+              <span style={{ fontSize: "10px" }}>
+            {" "}
+                Click <Link to="/cookies">here</Link> to learn more about cookies.
+              </span>
+        </span>
+      </CookieConsent> */}
+    </div>
+  );
+};
+
+Layout.propTypes = {
+  children: PropTypes.node.isRequired,
+};

src/layout/navigation/navbar.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { globalHistory } from "@reach/router";
+
+import { ROUTES } from "../../constants/routes";
+import { NavItem } from "./navitem";
+
+export const NavBar = () => {
+  const currentPathName = globalHistory.location.pathname;
+
+  return (
+    <nav>
+      <ul className="navigation">
+        <NavItem to={ROUTES.home} currentPathName={currentPathName}>
+          Profile <i className="fa fa-user" />
+        </NavItem>
+        <NavItem to={ROUTES.portfolio} currentPathName={currentPathName}>
+          Portfolio <i className="fa fa-briefcase" />
+        </NavItem>
+        <NavItem to={ROUTES.resume} currentPathName={currentPathName}>
+          Resume <i className="fa fa-file-text" />
+        </NavItem>
+        <NavItem to={`${ROUTES.blog}`} exact={false} currentPathName={currentPathName}>
+          Blog <i className="fa fa-comment" />
+        </NavItem>
+        <NavItem to={ROUTES.contact} currentPathName={currentPathName}>
+          Contact <i className="fa fa-envelope" />
+        </NavItem>
+      </ul>
+    </nav>
+  );
+};

src/layout/navigation/navitem.tsx

@@ -0,0 +1,38 @@
+import React, { FunctionComponent } from "react";
+import { Link } from "gatsby";
+
+type Props = {
+  to: string;
+  exact?: boolean;
+  activeClassName?: string;
+  className?: string;
+  activeStyle?: Object;
+  style?: Object;
+  currentPathName?: string;
+  extraActivePaths?: string[];
+};
+
+/**
+ * A <Link> wrapper that knows if it's "active" or not and sets the status on a parent li.
+ */
+
+export const NavItem: FunctionComponent<Props> = ({
+  to,
+  exact = true,
+  activeClassName = "flex-active",
+  className,
+  extraActivePaths = [],
+  currentPathName,
+  ...rest
+}) => {
+  const paths: string[] = [currentPathName, ...extraActivePaths];
+
+  const isActive = exact
+    ? paths.includes(to)
+    : paths.filter((path) => path !== "/" && (to === path || to.startsWith(path))).length > 0;
+  return (
+    <li className={isActive ? [className, activeClassName].filter((i) => i).join(" ") : className}>
+      <Link to={to} activeClassName={activeClassName} {...rest} />
+    </li>
+  );
+};

src/layout/profile-pic.tsx

@@ -0,0 +1,13 @@
+import React, { FunctionComponent } from "react";
+// @ts-ignore
+import ProfileImage from "../images/profile-avatar.png";
+
+export const ProfilePicture: FunctionComponent<{}> = () => {
+  return (
+    <div className="profile-pic" id="particles-js">
+      <div className="pic-bg">
+        <img src={ProfileImage} className="img-responsive" alt="" />
+      </div>
+    </div>
+  );
+};

src/models/pill.tsx

@@ -0,0 +1,13 @@
+/**
+ * A pill is meant to represent a key value pair with a title and an optional link
+ *
+ * @export
+ * @interface Pill
+ */
+export interface Pill {
+  key: string;
+  value: string;
+  title?: string;
+  link?: string;
+  className?: string;
+}

src/pages/blog.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Layout } from "../layout/layout";
+import { PageTitle } from "./components/page-title";
+
+export default function Blog() {
+  return (
+    <Layout>
+      <PageTitle title="Blog"></PageTitle>
+    </Layout>
+  );
+}

src/pages/components/page-title.tsx

@@ -0,0 +1,16 @@
+import React, { FunctionComponent } from "react";
+
+type Props = { title: string };
+
+export const PageTitle: FunctionComponent<Props> = ({ title, children }) => {
+  return (
+    <div className="page-head animated fadeInDown">
+      <div className="row">
+        <div className="col-md-5">
+          <h3>{title}</h3>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};

src/pages/components/profile.tsx

@@ -0,0 +1,41 @@
+import React, { FunctionComponent } from "react";
+
+const Profile: FunctionComponent<{}> = () => {
+  const linuxYears = new Date().getFullYear() - 2005;
+
+  return (
+    <div>
+      <p>
+        Some people are bookworms, I am a bitworm. I fell in love with computing a long time ago and
+        the virus could, fortunately, never be cured. Little by little, I gained experience in
+        Computer Technology, Programming and IT design.
+      </p>
+
+      <p>
+        For the past {linuxYears} years I&apos;ve been using Linux which made me appreciate
+        well-written cross-platform software. Years later I strive to provide a seamless experience
+        by doing just that... creating well-written cross-platform and web software. My language of
+        choice to do this is Javascript, hated by many, loved by some, adored by me.
+      </p>
+
+      <p>
+        Over the years I&apos;ve seen (and/or tried) a lot of programming languages, technologies,
+        techniques and software products which only made me more eager to progress in this field.
+        Change is inevitable and I aim to be one of its driving forces.
+      </p>
+      <p>
+        I&apos;ve made a habit of openly challenging assumptions / solutions (even though people
+        don&apos;t usually like their assumptions challenged). This mentality drives me to not only
+        get the best out of myself but others too, I like to cooperate with fellow developers to
+        work towards a common goal.
+      </p>
+      <p>
+        Even though software development is my main area of interest I am also passionate about
+        Linux and DevOps. Besides the two major interests I also love to dabble in hardware, hi-fi
+        and home automation.
+      </p>
+    </div>
+  );
+};
+
+export default Profile;

src/pages/components/resume/item.tsx

@@ -0,0 +1,16 @@
+import React, { FunctionComponent } from "react";
+
+type Props = { title: string; start: string; end: string; image: string };
+
+export const ResumeItem: FunctionComponent<Props> = ({ title, start, end, image, children }) => {
+  return (
+    <li>
+      {image && <img src={image} alt={`${title} - image`} />}
+      <h5>{title}</h5>
+      <span className="year">
+        <i className="fa fa-calendar" /> {start} - {end}
+      </span>
+      {children}
+    </li>
+  );
+};

src/pages/components/resume/list.tsx

@@ -0,0 +1,13 @@
+import React, { FunctionComponent } from "react";
+import { SectionTitle } from "../../../components/section-title";
+
+type Props = { title: string };
+
+export const ResumeList: FunctionComponent<Props> = ({ title, children }) => {
+  return (
+    <div className="resume-info">
+      <SectionTitle>{title}</SectionTitle>
+      <ul>{children}</ul>
+    </div>
+  );
+};