diff --git a/.editorconfig b/.editorconfig
deleted file mode 100644
index e57fcd1..0000000
--- a/.editorconfig
+++ /dev/null
@@ -1,13 +0,0 @@
-# EditorConfig is awesome: http://EditorConfig.org
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
-charset = utf-8
-trim_trailing_whitespace = true
-
-[*.scss]
-indent_size = 4
diff --git a/.eslintrc b/.eslintrc
index 6481acf..2f53f71 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -22,16 +22,13 @@
     "jest": true
   },
   "rules": {
-    "quotes": ["error", "single"],
-    "semi": ["error", "never"],
-    "object-curly-spacing": ["error", "always"],
     "prettier/prettier": "error",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn"
   },
   "settings": {
     "react": {
-      "version": "16"
+      "version": "detect"
     }
   }
 }
diff --git a/.prettierignore b/.prettierignore
deleted file mode 100644
index 2667b90..0000000
--- a/.prettierignore
+++ /dev/null
@@ -1,4 +0,0 @@
-node_modules/
-.cache/
-static/
-public/
diff --git a/.prettierrc b/.prettierrc
index 49955e2..338a8b9 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,6 @@
 {
   "semi": false,
   "singleQuote": true,
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "tabWidth": 2
 }
diff --git a/README.md b/README.md
index ce0a2bb..4538a53 100644
--- a/README.md
+++ b/README.md
@@ -60,11 +60,10 @@ If you want to know how, have a look at the respective components:
 
 All displayed project content is powered by one YAML file where all the portfolio's projects are defined. The project description itself is transformed from Markdown written inside the YAML file into HTML on build time.
 
-Gatsby automatically creates pages from each item in that file utilizing the [`Project.jsx`](src/templates/Project.jsx) template.
+Gatsby automatically creates pages from each item in that file utilizing the [`{ProjectsYaml.slug}.jsx`](src/pages/{ProjectsYaml.slug}.jsx) template.
 
 - [`content/projects.yml`](content/projects.yml)
-- [`gatsby-node.js`](gatsby-node.js)
-- [`src/templates/Project.jsx`](src/templates/Project.jsx)
+- [`src/pages/{ProjectsYaml.slug}.jsx`](src/pages/{ProjectsYaml.slug}.jsx)
 
 ### 🐱 GitHub repositories
 
diff --git a/gatsby-node.js b/gatsby-node.js
index 8172b76..3a3f6b6 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 
-const path = require('path')
+// const path = require('path')
 const remark = require('remark')
 const parse = require('remark-parse')
 const html = require('remark-html')
@@ -136,35 +136,3 @@ exports.onCreateNode = ({ node, actions }) => {
     })
   }
 }
-
-//
-// Create project pages from projects.yml
-//
-exports.createPages = async ({ actions, graphql }) => {
-  const { createPage } = actions
-  const template = path.resolve('src/components/templates/Project.jsx')
-
-  const result = await graphql(`
-    {
-      allProjectsYaml {
-        edges {
-          node {
-            slug
-          }
-        }
-      }
-    }
-  `)
-
-  if (result.errors) throw result.errors
-
-  result.data.allProjectsYaml.edges.forEach(({ node }) => {
-    const { slug } = node
-
-    createPage({
-      path: slug,
-      component: template,
-      context: { slug }
-    })
-  })
-}
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index 3511e29..80662d7 100644
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import posed, { PoseGroup } from 'react-pose'
-import shortid from 'shortid'
 import { fadeIn } from './atoms/Transitions'
 import Typekit from './atoms/Typekit'
 import HostnameCheck from './atoms/HostnameCheck'
@@ -24,10 +23,12 @@ Layout.propTypes = {
   }).isRequired
 }
 
+const timeout = 200
+const RoutesContainer = posed.div(fadeIn)
+
 export default function Layout({ children, location }) {
   const { allowedHosts } = useMeta()
-  const timeout = 200
-  const RoutesContainer = posed.div(fadeIn)
+
   const isHomepage =
     location.pathname === '/' ||
     location.pathname === '/offline-plugin-app-shell-fallback/'
@@ -41,7 +42,7 @@ export default function Layout({ children, location }) {
 
       <PoseGroup animateOnMount={process.env.NODE_ENV !== 'test' && true}>
         <RoutesContainer
-          key={shortid.generate()}
+          key={location.pathname}
           delay={timeout}
           delayChildren={timeout}
         >
diff --git a/src/components/molecules/ProjectLinks.module.css b/src/components/molecules/ProjectLinks.module.css
index 1ebf506..3b19768 100644
--- a/src/components/molecules/ProjectLinks.module.css
+++ b/src/components/molecules/ProjectLinks.module.css
@@ -24,5 +24,5 @@
 }
 
 .title {
-  composes: metatitle from '../templates/Project.module.css';
+  composes: metatitle from '../../pages/{ProjectsYaml.slug}.module.css';
 }
diff --git a/src/components/molecules/ProjectTechstack.module.css b/src/components/molecules/ProjectTechstack.module.css
index 2b9ab7e..028caa9 100644
--- a/src/components/molecules/ProjectTechstack.module.css
+++ b/src/components/molecules/ProjectTechstack.module.css
@@ -19,5 +19,5 @@
 }
 
 .title {
-  composes: metatitle from '../templates/Project.module.css';
+  composes: metatitle from '../../pages/{ProjectsYaml.slug}.module.css';
 }
diff --git a/src/components/templates/Project.test.jsx b/src/pages/__tests__/Project.test.jsx
similarity index 92%
rename from src/components/templates/Project.test.jsx
rename to src/pages/__tests__/Project.test.jsx
index edd5669..747f450 100644
--- a/src/components/templates/Project.test.jsx
+++ b/src/pages/__tests__/Project.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import { createHistory, createMemorySource } from '@reach/router'
-import Project from './Project'
+import Project from '../{ProjectsYaml.slug}'
 import project from '../../../jest/__fixtures__/project.json'
 
 describe('Project', () => {
diff --git a/src/components/templates/Project.jsx b/src/pages/{ProjectsYaml.slug}.jsx
similarity index 86%
rename from src/components/templates/Project.jsx
rename to src/pages/{ProjectsYaml.slug}.jsx
index fd500a5..109270b 100644
--- a/src/components/templates/Project.jsx
+++ b/src/pages/{ProjectsYaml.slug}.jsx
@@ -1,13 +1,13 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { graphql } from 'gatsby'
-import FullWidth from '../atoms/FullWidth'
-import ProjectImage from '../atoms/ProjectImage'
-import ProjectTechstack from '../molecules/ProjectTechstack'
-import ProjectLinks from '../molecules/ProjectLinks'
-import ProjectNav from '../molecules/ProjectNav'
-import SEO from '../atoms/SEO'
-import styles from './Project.module.css'
+import FullWidth from '../components/atoms/FullWidth'
+import ProjectImage from '../components/atoms/ProjectImage'
+import ProjectTechstack from '../components/molecules/ProjectTechstack'
+import ProjectLinks from '../components/molecules/ProjectLinks'
+import ProjectNav from '../components/molecules/ProjectNav'
+import SEO from '../components/atoms/SEO'
+import styles from './{ProjectsYaml.slug}.module.css'
 
 class ProjectMeta extends PureComponent {
   static propTypes = {
diff --git a/src/components/templates/Project.module.css b/src/pages/{ProjectsYaml.slug}.module.css
similarity index 100%
rename from src/components/templates/Project.module.css
rename to src/pages/{ProjectsYaml.slug}.module.css