diff --git a/.codeclimate.yml b/.codeclimate.yml
deleted file mode 100644
index ac7d75f9..00000000
--- a/.codeclimate.yml
+++ /dev/null
@@ -1,5 +0,0 @@
-version: '2'
-checks:
-  method-lines:
-    config:
-      threshold: 55 # Gatsby's StaticQuery makes render functions pretty long
diff --git a/.editorconfig b/.editorconfig
deleted file mode 100644
index b444fcfc..00000000
--- a/.editorconfig
+++ /dev/null
@@ -1,14 +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/.eslintignore b/.eslintignore
index ea92f360..f490b26f 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,4 +1,6 @@
 plugins/gatsby-redirect-from
-node_modules
-public
-.cache
+node_modules/
+.cache/
+static/
+public/
+coverage/
\ No newline at end of file
diff --git a/.eslintrc b/.eslintrc
index fc16e217..6501cb73 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,34 +1,36 @@
 {
   "parser": "babel-eslint",
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:jsx-a11y/recommended",
-    "plugin:prettier/recommended"
-  ],
-  "plugins": ["react", "graphql", "prettier", "jsx-a11y"],
+  "extends": ["eslint:recommended", "prettier"],
   "parserOptions": {
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true,
-      "modules": true
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "env": { "browser": true, "node": true, "es6": true, "jest": true },
+  "settings": { "react": { "version": "detect" } },
+  "overrides": [
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "parser": "@typescript-eslint/parser",
+      "extends": [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:jsx-a11y/recommended",
+        "prettier/@typescript-eslint",
+        "plugin:prettier/recommended",
+        "plugin:react/recommended"
+      ],
+      "plugins": ["@typescript-eslint", "react", "graphql", "jsx-a11y"],
+      "rules": {
+        "object-curly-spacing": ["error", "always"],
+        "react/prop-types": "off",
+        "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/no-explicit-any": "off"
+      },
+      "parserOptions": {
+        "ecmaFeatures": { "jsx": true },
+        "ecmaVersion": 2018,
+        "sourceType": "module",
+        "project": "./tsconfig.json"
+      }
     }
-  },
-  "env": {
-    "browser": true,
-    "node": true,
-    "es6": true,
-    "jest": true
-  },
-  "rules": {
-    "quotes": ["error", "single"],
-    "semi": ["error", "never"],
-    "object-curly-spacing": ["error", "always"],
-    "prettier/prettier": "error"
-  },
-  "settings": {
-    "react": {
-      "version": "16"
-    }
-  }
+  ]
 }
diff --git a/.prettierignore b/.prettierignore
deleted file mode 100644
index 2667b906..00000000
--- a/.prettierignore
+++ /dev/null
@@ -1,4 +0,0 @@
-node_modules/
-.cache/
-static/
-public/
diff --git a/.prettierrc b/.prettierrc
index 49955e2e..338a8b9c 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,6 @@
 {
   "semi": false,
   "singleQuote": true,
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "tabWidth": 2
 }
diff --git a/.stylelintrc b/.stylelintrc
index ba14b900..350adbfc 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -2,12 +2,12 @@
   "extends": [
     "stylelint-config-standard",
     "stylelint-config-css-modules",
-    "./node_modules/prettier-stylelint/config.js"
+    "stylelint-prettier/recommended"
   ],
+  "plugins": ["stylelint-prettier"],
   "syntax": "scss",
   "rules": {
-      "indentation": 4,
-      "number-leading-zero": "never",
+      "prettier/prettier": true,
       "at-rule-no-unknown": null
   }
 }
diff --git a/.travis.yml b/.travis.yml
index 71b3b94f..11d4cf34 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,7 +1,7 @@
 dist: xenial
 language: node_js
 node_js:
-  - '11'
+  - '12'
 
 git:
   depth: 10
@@ -19,15 +19,13 @@ before_install:
 before_script:
   - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
   - chmod +x ./cc-test-reporter
-  - "./cc-test-reporter before-build"
+  - './cc-test-reporter before-build'
 
 script:
   - npm test
+  - './cc-test-reporter after-build --exit-code $TRAVIS_TEST_RESULT'
   - travis_wait 60 npm run build
 
-after_script:
-  - "./cc-test-reporter after-build --exit-code $TRAVIS_TEST_RESULT"
-
 after_success:
   - pip install --user awscli
   - export PATH=$PATH:$HOME/.local/bin
@@ -37,8 +35,8 @@ notifications:
   email: false
   slack:
     template:
-      - "%{branch} *%{result}* build (<%{build_url}|#%{build_number}>) for <%{compare_url}|%{commit}>"
-      - "Execution time: *%{duration}*"
-      - "Message: %{message}"
+      - '%{branch} *%{result}* build (<%{build_url}|#%{build_number}>) for <%{compare_url}|%{commit}>'
+      - 'Execution time: *%{duration}*'
+      - 'Message: %{message}'
     rooms:
-      - secure: "Ot7Ryl4PW0/TUo4t4Y3J6AbmxqNUtFOI72vNabNX2IdEiU78q+M3esPEkT2I/z0S2Vda9ogRkRbKa5blE2ZEo74/9CUYRXX/syPSZL9tpHDd600wmiObee469Au8dSO48n8G9U+Dm1q60O6oiEGsrrAR6fNE386QEfDhVqKKwBKHk9RcUocUO2b+0WKI7MJk+j5G4+sxv/5ax8prGx0sD6bRoGRuNpyW/MZ9uylBV2WOdmHfEY9D8GYpzVs2JqTB7xr/OL9d+puZPQSdqGfa7xtc+APFiKK//aW/ffOsNzGa4kygC94nfV4oJceMUO3v0bDpB5aXM1YG02EyQzSwpGCbtnbP9Ei/ANcGqiFjPm1/ZVAiwPzT8XZLWkFjy+sOfmF+xmszUCoRiJBVxfL0tx0d1o/JIvgA5m+/iIpro70ep0nBHTiDt2AoxaGGE9GnIT20uVXJJIdXIwTWhVx4HnkptYsFel9l2/oc24S+CnitRaCtGQCiAMNNCESL1AcHCRot/4gm3uuZLdYEA1juHUvgEEH6jG5T2XWaq4uEbDZKdu8y7YMW105FytEsyNU3Tzem4c024EIAhBshSfg5N/iwVeic47E1QAz/5RtfBNLQaEPY4TGJYJvTOaCevjYC7mKlYBEoZmsfT0uNaWqEXUxUwLg5Ih8JoLQKvH6H4fA="
+      - secure: 'Ot7Ryl4PW0/TUo4t4Y3J6AbmxqNUtFOI72vNabNX2IdEiU78q+M3esPEkT2I/z0S2Vda9ogRkRbKa5blE2ZEo74/9CUYRXX/syPSZL9tpHDd600wmiObee469Au8dSO48n8G9U+Dm1q60O6oiEGsrrAR6fNE386QEfDhVqKKwBKHk9RcUocUO2b+0WKI7MJk+j5G4+sxv/5ax8prGx0sD6bRoGRuNpyW/MZ9uylBV2WOdmHfEY9D8GYpzVs2JqTB7xr/OL9d+puZPQSdqGfa7xtc+APFiKK//aW/ffOsNzGa4kygC94nfV4oJceMUO3v0bDpB5aXM1YG02EyQzSwpGCbtnbP9Ei/ANcGqiFjPm1/ZVAiwPzT8XZLWkFjy+sOfmF+xmszUCoRiJBVxfL0tx0d1o/JIvgA5m+/iIpro70ep0nBHTiDt2AoxaGGE9GnIT20uVXJJIdXIwTWhVx4HnkptYsFel9l2/oc24S+CnitRaCtGQCiAMNNCESL1AcHCRot/4gm3uuZLdYEA1juHUvgEEH6jG5T2XWaq4uEbDZKdu8y7YMW105FytEsyNU3Tzem4c024EIAhBshSfg5N/iwVeic47E1QAz/5RtfBNLQaEPY4TGJYJvTOaCevjYC7mKlYBEoZmsfT0uNaWqEXUxUwLg5Ih8JoLQKvH6H4fA='
diff --git a/content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.css b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.css
index e507d319..eb1964f7 100644
--- a/content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.css
+++ b/content/posts/2012-07-16-using-kbd-for-fun-and-profit/post-kbd.css
@@ -1,88 +1,85 @@
 kbd {
-    font-size: 18px;
-    color: #444;
-    font-family: 'Lucida Grande', Lucida, Verdana, sans-serif;
-    font-weight: normal;
-    font-style: normal;
-    text-align: center;
-    line-height: 1em;
-    text-shadow: 0 1px 0 #fff;
-    display: inline;
-    padding: .3em .55em;
-    border-radius: 6px;
-    background-clip: padding-box;
-    border: 1px solid #bbb;
-    background-color: #f7f7f7;
-    background-image: linear-gradient(
-        to bottom,
-        rgba(0, 0, 0, .1),
-        rgba(0, 0, 0, 0)
-    );
-    background-repeat: repeat-x;
-    box-shadow: 0 2px 0 #bbb, 0 3px 1px #999, 0 3px 0 #bbb, inset 0 1px 1px #fff,
-        inset 0 -1px 3px #ccc;
+  font-size: 18px;
+  color: #444;
+  font-family: 'Lucida Grande', Lucida, Verdana, sans-serif;
+  font-weight: normal;
+  font-style: normal;
+  text-align: center;
+  line-height: 1em;
+  text-shadow: 0 1px 0 #fff;
+  display: inline;
+  padding: 0.3em 0.55em;
+  border-radius: 6px;
+  background-clip: padding-box;
+  border: 1px solid #bbb;
+  background-color: #f7f7f7;
+  background-image: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.1),
+    rgba(0, 0, 0, 0)
+  );
+  background-repeat: repeat-x;
+  box-shadow: 0 2px 0 #bbb, 0 3px 1px #999, 0 3px 0 #bbb, inset 0 1px 1px #fff,
+    inset 0 -1px 3px #ccc;
 }
 
 kbd.dark {
-    color: #eee;
-    text-shadow: 0 -1px 0 #000;
-    border-color: #000;
-    background-color: #4d4c4c;
-    background-image: linear-gradient(
-        rgba(0, 0, 0, .5),
-        rgba(0, 0, 0, 0) 80%,
-        rgba(0, 0, 0, 0)
-    );
-    background-repeat: no-repeat;
-    box-shadow: 0 2px 0 #000, 0 3px 1px #999, inset 0 1px 1px #aaa,
-        inset 0 -1px 3px #272727;
+  color: #eee;
+  text-shadow: 0 -1px 0 #000;
+  border-color: #000;
+  background-color: #4d4c4c;
+  background-image: linear-gradient(
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0) 80%,
+    rgba(0, 0, 0, 0)
+  );
+  background-repeat: no-repeat;
+  box-shadow: 0 2px 0 #000, 0 3px 1px #999, inset 0 1px 1px #aaa,
+    inset 0 -1px 3px #272727;
 }
 
 kbd.ios {
-    font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
-    color: #000;
-    border-color: rgba(0, 0, 0, .6);
-    border-top-color: rgba(0, 0, 0, .4);
-    background-color: #b7b7bc;
-    background-image: linear-gradient(to bottom, #efeff0, #b7b7bc);
-    background-repeat: repeat-x;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 2px 3px rgba(0, 0, 0, .1),
-        inset 0 1px 0 #fff;
+  font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
+  color: #000;
+  border-color: rgba(0, 0, 0, 0.6);
+  border-top-color: rgba(0, 0, 0, 0.4);
+  background-color: #b7b7bc;
+  background-image: linear-gradient(to bottom, #efeff0, #b7b7bc);
+  background-repeat: repeat-x;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 3px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 #fff;
 }
 
 kbd.android {
-    font-family: 'RobotoRegular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    color: #fff;
-    text-shadow: none;
-    padding: .3em;
-    border: 1px solid rgba(0, 0, 0, .05);
-    border-radius: 3px;
-    background-clip: padding-box;
-    background: #5e5e5e;
-    box-shadow: 0 2px 2px rgba(0, 0, 0, .3), 0 1px 0 #444,
-        inset 0 1px 0 #868686;
+  font-family: 'RobotoRegular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  color: #fff;
+  text-shadow: none;
+  padding: 0.3em;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 3px;
+  background-clip: padding-box;
+  background: #5e5e5e;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #444, inset 0 1px 0 #868686;
 }
 
 kbd.android.dark {
-    background: #222;
-    box-shadow: 0 2px 2px rgba(0, 0, 0, .7), 0 1px 0 #444,
-        inset 0 1px 0 #505050;
+  background: #222;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444, inset 0 1px 0 #505050;
 }
 
 kbd.android.color {
-    background: #083c5b;
-    box-shadow: 0 2px 2px rgba(0, 0, 0, .7), 0 1px 0 #444,
-        inset 0 1px 0 #36647b;
+  background: #083c5b;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444, inset 0 1px 0 #36647b;
 }
 
 @font-face {
-    font-family: 'RobotoRegular';
-    src: url('/media/Roboto-Regular-webfont.eot');
-    src: url('/media/Roboto-Regular-webfont.eot?#iefix')
-        format('embedded-opentype'),
-        url('/media/Roboto-Regular-webfont.woff') format('woff'),
-        url('/media/Roboto-Regular-webfont.ttf') format('truetype'),
-        url('/media/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
-    font-weight: normal;
-    font-style: normal;
+  font-family: 'RobotoRegular';
+  src: url('/media/Roboto-Regular-webfont.eot');
+  src: url('/media/Roboto-Regular-webfont.eot?#iefix')
+      format('embedded-opentype'),
+    url('/media/Roboto-Regular-webfont.woff') format('woff'),
+    url('/media/Roboto-Regular-webfont.ttf') format('truetype'),
+    url('/media/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
+  font-weight: normal;
+  font-style: normal;
 }
diff --git a/gatsby-config.js b/gatsby-config.js
index b77688ad..d979253d 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -212,6 +212,7 @@ module.exports = {
     'gatsby-plugin-catch-links',
     'gatsby-redirect-from',
     'gatsby-plugin-meta-redirect',
-    'gatsby-plugin-offline'
+    'gatsby-plugin-offline',
+    'gatsby-plugin-typescript'
   ]
 }
diff --git a/gatsby/createMarkdownFields.js b/gatsby/createMarkdownFields.js
index 561d01b1..cec54da9 100644
--- a/gatsby/createMarkdownFields.js
+++ b/gatsby/createMarkdownFields.js
@@ -2,13 +2,7 @@ const path = require('path')
 const { createFilePath } = require('gatsby-source-filesystem')
 const { repoContentPath } = require('../config')
 
-// Create slug, date & github file link for posts from file path values
-exports.createMarkdownFields = (node, createNodeField, getNode) => {
-  const fileNode = getNode(node.parent)
-  const parsedFilePath = path.parse(fileNode.relativePath)
-  const slugOriginal = createFilePath({ node, getNode })
-
-  // slug
+function createSlug(node, createNodeField, slugOriginal, parsedFilePath) {
   let slug
 
   if (parsedFilePath.name === 'index') {
@@ -22,8 +16,9 @@ exports.createMarkdownFields = (node, createNodeField, getNode) => {
     name: 'slug',
     value: slug
   })
+}
 
-  // date
+function createDate(node, createNodeField, slugOriginal) {
   // grab date from file path
   let date = new Date(slugOriginal.substring(1, 11)).toISOString() // grab date from file path
 
@@ -36,6 +31,16 @@ exports.createMarkdownFields = (node, createNodeField, getNode) => {
     name: 'date',
     value: date
   })
+}
+
+// Create slug, date & github file link for posts from file path values
+exports.createMarkdownFields = (node, createNodeField, getNode) => {
+  const fileNode = getNode(node.parent)
+  const parsedFilePath = path.parse(fileNode.relativePath)
+  const slugOriginal = createFilePath({ node, getNode })
+
+  createSlug(node, createNodeField, slugOriginal, parsedFilePath)
+  createDate(node, createNodeField, slugOriginal)
 
   // github file link
   const type = fileNode.sourceInstanceName
diff --git a/gatsby/createPages.js b/gatsby/createPages.js
index 9d38296b..d1567926 100644
--- a/gatsby/createPages.js
+++ b/gatsby/createPages.js
@@ -1,5 +1,5 @@
 const path = require('path')
-const postsTemplate = path.resolve('src/templates/Posts.jsx')
+const postsTemplate = path.resolve('src/templates/Posts.tsx')
 
 const redirects = [
   { f: '/feed', t: '/feed.xml' },
@@ -7,7 +7,7 @@ const redirects = [
 ]
 
 exports.generatePostPages = (createPage, posts, numPages) => {
-  const postTemplate = path.resolve('src/templates/Post.jsx')
+  const postTemplate = path.resolve('src/templates/Post.tsx')
 
   // Create Post pages
   posts.forEach(post => {
diff --git a/gatsby/feeds.js b/gatsby/feeds.js
index 1ad0ede9..667e88a9 100644
--- a/gatsby/feeds.js
+++ b/gatsby/feeds.js
@@ -15,8 +15,8 @@ const feedContent = edge => {
     : `${html}${footer}`
 }
 
-const generateJsonFeed = async posts => {
-  const jsonItems = await posts.map(edge => {
+async function jsonItems(posts) {
+  return await posts.map(edge => {
     const { frontmatter, fields, excerpt } = edge.node
     const { slug, date } = fields
 
@@ -33,27 +33,29 @@ const generateJsonFeed = async posts => {
       content_html: feedContent(edge)
     }
   })
+}
 
-  const jsonFeed = {
-    version: 'https://jsonfeed.org/version/1',
-    title: siteTitle,
-    description: siteDescription,
-    home_page_url: siteUrl,
-    feed_url: path.join(siteUrl, 'feed.json'),
-    user_comment:
-      'This feed allows you to read the posts from this site in any feed reader that supports the JSON Feed format. To add this feed to your reader, copy the following URL — https://kremalicious.com/feed.json — and add it your reader.',
-    favicon: path.join(siteUrl, 'favicon.ico'),
-    icon: path.join(siteUrl, 'apple-touch-icon.png'),
-    author: {
-      name: author.name,
-      url: author.uri
-    },
-    items: jsonItems
-  }
+const createJsonFeed = posts => ({
+  version: 'https://jsonfeed.org/version/1',
+  title: siteTitle,
+  description: siteDescription,
+  home_page_url: siteUrl,
+  feed_url: path.join(siteUrl, 'feed.json'),
+  user_comment:
+    'This feed allows you to read the posts from this site in any feed reader that supports the JSON Feed format. To add this feed to your reader, copy the following URL — https://kremalicious.com/feed.json — and add it your reader.',
+  favicon: path.join(siteUrl, 'favicon.ico'),
+  icon: path.join(siteUrl, 'apple-touch-icon.png'),
+  author: {
+    name: author.name,
+    url: author.uri
+  },
+  items: jsonItems(posts)
+})
 
+const generateJsonFeed = async posts => {
   await writeFile(
     path.join('./public', 'feed.json'),
-    JSON.stringify(jsonFeed),
+    JSON.stringify(createJsonFeed(posts)),
     'utf8'
   ).catch(err => {
     throw Error('\nFailed to write JSON Feed file: ', err)
diff --git a/jest.config.js b/jest.config.js
index 4c3eabea..ec1c65f2 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   transform: {
-    '^.+\\.jsx?$': '<rootDir>/jest/jest-preprocess.js'
+    '^.+\\.tsx?$': '<rootDir>/jest/jest-preprocess.js'
   },
   moduleNameMapper: {
     '.+\\.(css|styl|less|sass|scss)$': 'identity-obj-proxy',
@@ -15,5 +15,6 @@ module.exports = {
   },
   testURL: 'http://localhost',
   setupFiles: ['<rootDir>/jest/loadershim.js'],
-  setupFilesAfterEnv: ['<rootDir>/jest/setup-test-env.js']
+  setupFilesAfterEnv: ['<rootDir>/jest/setup-test-env.js'],
+  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/@types/**/*']
 }
diff --git a/jest/jest-preprocess.js b/jest/jest-preprocess.js
index 95114e53..c53f5172 100644
--- a/jest/jest-preprocess.js
+++ b/jest/jest-preprocess.js
@@ -1,5 +1,7 @@
+const { createTransformer } = require('babel-jest')
+
 const babelOptions = {
-  presets: ['babel-preset-gatsby']
+  presets: ['babel-preset-gatsby', '@babel/preset-typescript']
 }
 
-module.exports = require('babel-jest').createTransformer(babelOptions)
+module.exports = createTransformer(babelOptions)
diff --git a/jest/setup-test-env.js b/jest/setup-test-env.js
index 264828a9..5df3c44b 100644
--- a/jest/setup-test-env.js
+++ b/jest/setup-test-env.js
@@ -1 +1 @@
-import '@testing-library/jest-dom/extend-expect'
+require('@testing-library/jest-dom/extend-expect')
diff --git a/jest/testRender.js b/jest/testRender.ts
similarity index 71%
rename from jest/testRender.js
rename to jest/testRender.ts
index fe5a21fe..ad7c7a71 100644
--- a/jest/testRender.js
+++ b/jest/testRender.ts
@@ -1,6 +1,7 @@
 import { render } from '@testing-library/react'
+import { ReactElement } from 'react'
 
-const testRender = component => {
+const testRender = (component: ReactElement) => {
   it('renders without crashing', () => {
     const { container } = render(component)
 
diff --git a/package.json b/package.json
index 85d9b7aa..dd9b110d 100644
--- a/package.json
+++ b/package.json
@@ -10,17 +10,15 @@
     "start": "gatsby develop",
     "build": "gatsby build && npm run copy",
     "ssr": "npm run build && serve -s public/",
-    "rename:scrypt": "sed -i -e 's|./build/Release/scrypt|scrypt|g' node_modules/scrypt/index.js",
-    "copy": "cp -R content/media/ public",
-    "format": "run-p 'prettier -- --write' format:css",
-    "format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'",
-    "lint": "run-p --continue-on-error lint:js lint:css lint:md",
-    "lint:js": "eslint --ignore-path .gitignore --ignore-path .prettierignore --ext .js,.jsx .",
-    "lint:css": "prettier-stylelint --quiet 'src/**/*.{css,scss}'",
-    "lint:md": "markdownlint './**/*.{md,markdown}' --ignore './{node_modules,public,.cache,.git}/**/*'",
-    "prettier": "prettier '**/*.{js,jsx,yml,yaml,md}'",
     "test": "npm run lint && jest --coverage",
     "test:watch": "npm run lint && jest --coverage --watch",
+    "rename:scrypt": "sed -i -e 's|./build/Release/scrypt|scrypt|g' node_modules/scrypt/index.js",
+    "copy": "cp -R content/media/ public",
+    "lint": "run-p --continue-on-error lint:js lint:css lint:md",
+    "lint:js": "eslint --ignore-path .gitignore --ext .js,.jsx,.ts,.tsx .",
+    "lint:css": "stylelint 'src/**/*.{css,scss}'",
+    "lint:md": "markdownlint './**/*.{md,markdown}' --ignore './{node_modules,public,.cache,.git,coverage}/**/*'",
+    "format": "npm run lint:js -- --fix && npm run lint:css -- --fix",
     "deploy": "./scripts/deploy.sh",
     "new": "babel-node ./scripts/new.js"
   },
@@ -31,41 +29,42 @@
     "dms2dec": "^1.1.0",
     "fast-exif": "^1.0.1",
     "fraction.js": "^4.0.12",
-    "gatsby": "^2.15.18",
-    "gatsby-image": "^2.2.19",
-    "gatsby-plugin-catch-links": "^2.1.8",
-    "gatsby-plugin-feed": "^2.3.11",
+    "gatsby": "^2.15.28",
+    "gatsby-image": "^2.2.23",
+    "gatsby-plugin-catch-links": "^2.1.12",
+    "gatsby-plugin-feed": "^2.3.15",
     "gatsby-plugin-lunr": "^1.5.2",
-    "gatsby-plugin-manifest": "^2.2.17",
+    "gatsby-plugin-manifest": "^2.2.20",
     "gatsby-plugin-matomo": "^0.7.2",
     "gatsby-plugin-meta-redirect": "^1.1.1",
     "gatsby-plugin-offline": "^2.2.10",
-    "gatsby-plugin-react-helmet": "^3.1.6",
-    "gatsby-plugin-sass": "^2.1.13",
-    "gatsby-plugin-sharp": "^2.2.24",
-    "gatsby-plugin-sitemap": "^2.2.13",
+    "gatsby-plugin-react-helmet": "^3.1.10",
+    "gatsby-plugin-sass": "^2.1.17",
+    "gatsby-plugin-sharp": "^2.2.27",
+    "gatsby-plugin-sitemap": "^2.2.16",
     "gatsby-plugin-svgr": "^2.0.2",
+    "gatsby-plugin-typescript": "^2.1.11",
     "gatsby-plugin-webpack-size": "^1.0.0",
     "gatsby-redirect-from": "^0.2.1",
-    "gatsby-remark-autolink-headers": "^2.1.9",
-    "gatsby-remark-copy-linked-files": "^2.1.17",
-    "gatsby-remark-images": "^3.1.22",
-    "gatsby-remark-smartypants": "^2.1.7",
+    "gatsby-remark-autolink-headers": "^2.1.13",
+    "gatsby-remark-copy-linked-files": "^2.1.23",
+    "gatsby-remark-images": "^3.1.25",
+    "gatsby-remark-smartypants": "^2.1.11",
     "gatsby-remark-vscode": "^1.2.0",
-    "gatsby-source-filesystem": "^2.1.24",
-    "gatsby-source-graphql": "^2.1.12",
-    "gatsby-transformer-remark": "^2.6.23",
-    "gatsby-transformer-sharp": "^2.2.15",
-    "graphql": "^14.5.6",
+    "gatsby-source-filesystem": "^2.1.28",
+    "gatsby-source-graphql": "^2.1.17",
+    "gatsby-transformer-remark": "^2.6.26",
+    "gatsby-transformer-sharp": "^2.2.19",
+    "graphql": "^14.5.8",
     "intersection-observer": "^0.7.0",
     "js-scrypt": "^0.2.0",
     "load-script": "^1.0.0",
     "pigeon-maps": "^0.14.0",
     "pigeon-marker": "^0.3.4",
-    "react": "^16.9.0",
+    "react": "^16.10.1",
     "react-blockies": "^1.4.1",
     "react-clipboard.js": "^2.0.13",
-    "react-dom": "^16.9.0",
+    "react-dom": "^16.10.1",
     "react-helmet": "^5.2.1",
     "react-modal": "^3.10.1",
     "react-pose": "^4.0.8",
@@ -78,20 +77,31 @@
     "web3": "^1.2.1"
   },
   "devDependencies": {
-    "@babel/node": "^7.6.0",
-    "@babel/preset-env": "^7.6.0",
-    "@svgr/webpack": "^4.3.1",
+    "@babel/node": "^7.6.2",
+    "@babel/preset-env": "^7.6.2",
+    "@babel/preset-typescript": "^7.6.0",
+    "@svgr/webpack": "^4.3.3",
     "@testing-library/jest-dom": "^4.1.0",
-    "@testing-library/react": "^9.1.4",
+    "@testing-library/react": "^9.2.0",
+    "@types/jest": "^24.0.18",
+    "@types/node": "^12.7.8",
+    "@types/react": "^16.9.4",
+    "@types/react-dom": "^16.9.1",
+    "@types/react-helmet": "^5.0.11",
+    "@types/react-modal": "^3.8.3",
+    "@types/react-transition-group": "^4.2.2",
+    "@types/web3": "^1.0.20",
+    "@typescript-eslint/eslint-plugin": "^2.3.2",
+    "@typescript-eslint/parser": "^2.3.2",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
-    "eslint": "^6.4.0",
-    "eslint-config-prettier": "^6.2.0",
-    "eslint-loader": "^3.0.0",
-    "eslint-plugin-graphql": "^3.0.3",
+    "eslint": "^6.5.1",
+    "eslint-config-prettier": "^6.3.0",
+    "eslint-loader": "^3.0.2",
+    "eslint-plugin-graphql": "^3.1.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-react": "^7.15.0",
     "fs-extra": "^8.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.9.0",
@@ -104,8 +114,10 @@
     "prettier-stylelint": "^0.4.2",
     "stylelint": "^11.0.0",
     "stylelint-config-css-modules": "^1.5.0",
+    "stylelint-config-prettier": "^6.0.0",
     "stylelint-config-standard": "^19.0.0",
-    "stylelint-scss": "^3.11.0",
+    "stylelint-prettier": "^1.1.1",
+    "typescript": "^3.6.3",
     "why-did-you-update": "^1.0.6"
   },
   "engines": {
diff --git a/src/@types/declarations.d.ts b/src/@types/declarations.d.ts
new file mode 100644
index 00000000..31eab8bc
--- /dev/null
+++ b/src/@types/declarations.d.ts
@@ -0,0 +1,13 @@
+declare module '*.scss' {
+  const content: { [className: string]: string }
+  export = content
+}
+
+/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+interface SvgrComponent
+  extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}
+
+declare module '*.svg' {
+  const value: SvgrComponent
+  export default value
+}
diff --git a/src/@types/pigeon-maps.d.ts b/src/@types/pigeon-maps.d.ts
new file mode 100644
index 00000000..dd469466
--- /dev/null
+++ b/src/@types/pigeon-maps.d.ts
@@ -0,0 +1 @@
+declare module 'pigeon-maps'
diff --git a/src/@types/pigeon-marker.d.ts b/src/@types/pigeon-marker.d.ts
new file mode 100644
index 00000000..77862d53
--- /dev/null
+++ b/src/@types/pigeon-marker.d.ts
@@ -0,0 +1 @@
+declare module 'pigeon-marker'
diff --git a/src/@types/react-blockies.d.ts b/src/@types/react-blockies.d.ts
new file mode 100644
index 00000000..04fd4afe
--- /dev/null
+++ b/src/@types/react-blockies.d.ts
@@ -0,0 +1 @@
+declare module 'react-blockies'
diff --git a/src/@types/react-time.d.ts b/src/@types/react-time.d.ts
new file mode 100644
index 00000000..3681ee34
--- /dev/null
+++ b/src/@types/react-time.d.ts
@@ -0,0 +1 @@
+declare module 'react-time'
diff --git a/src/@types/remark-react.d.ts b/src/@types/remark-react.d.ts
new file mode 100644
index 00000000..63b20dd7
--- /dev/null
+++ b/src/@types/remark-react.d.ts
@@ -0,0 +1 @@
+declare module 'remark-react'
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
deleted file mode 100644
index 09f1a4fa..00000000
--- a/src/components/Layout.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Container from './atoms/Container'
-import Typekit from './atoms/Typekit'
-import Header from './organisms/Header'
-import Footer from './organisms/Footer'
-import styles from './Layout.module.scss'
-
-// if (process.env.NODE_ENV !== 'production') {
-//   const { whyDidYouUpdate } = require('why-did-you-update')
-//   whyDidYouUpdate(React)
-// }
-
-const Layout = ({ children }) => (
-  <>
-    <Typekit />
-    <Header />
-
-    <main className={styles.document} id="document">
-      <div className={styles.content}>
-        <Container>{children}</Container>
-      </div>
-    </main>
-
-    <Footer />
-  </>
-)
-
-Layout.propTypes = {
-  children: PropTypes.any.isRequired
-}
-
-export default Layout
diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss
index d5cd1266..7d1a9aa2 100644
--- a/src/components/Layout.module.scss
+++ b/src/components/Layout.module.scss
@@ -2,19 +2,19 @@
 @import 'mixins';
 
 #___gatsby {
-    // display: flex;
-    // min-height: 100vh;
-    // flex-direction: column;
-    position: relative;
+  // display: flex;
+  // min-height: 100vh;
+  // flex-direction: column;
+  position: relative;
 }
 
 .content {
-    padding: 0 $spacer / $line-height;
-    width: 100%;
+  padding: 0 $spacer / $line-height;
+  width: 100%;
 
-    @media (min-width: $screen-sm) {
-        padding: 0 ($spacer * 2);
-    }
+  @media (min-width: $screen-sm) {
+    padding: 0 ($spacer * 2);
+  }
 }
 
 // topbar and footer as fixed
@@ -22,27 +22,27 @@
 /////////////////////////////////////
 
 .document {
-    @include transition;
+  @include transition;
 
-    width: 100%;
-    padding-top: ($spacer * 2);
-    background-color: $page-background-color;
-    border-top: 1px solid rgba(255, 255, 255, .7);
-    border-bottom: 1px solid rgba(255, 255, 255, .7);
-    padding-bottom: $spacer * 2;
-    box-shadow: 0 1px 4px rgba($brand-main, .1),
-        0 -1px 4px rgba($brand-main, .2);
-    transform: translate3d(0, 0, 0);
+  width: 100%;
+  padding-top: ($spacer * 2);
+  background-color: $page-background-color;
+  border-top: 1px solid rgba(255, 255, 255, 0.7);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
+  padding-bottom: $spacer * 2;
+  box-shadow: 0 1px 4px rgba($brand-main, 0.1),
+    0 -1px 4px rgba($brand-main, 0.2);
+  transform: translate3d(0, 0, 0);
 
-    :global(.has-menu-open) & {
-        transform: translate3d(0, ($spacer * 3), 0);
-    }
+  :global(.has-menu-open) & {
+    transform: translate3d(0, ($spacer * 3), 0);
+  }
 
-    @media (min-width: $screen-sm) and (min-height: 500px) {
-        margin-top: $spacer * 2.65;
-        margin-bottom: $spacer * 19; // height of footer
-        position: relative;
-        z-index: 2;
-        min-height: 500px;
-    }
+  @media (min-width: $screen-sm) and (min-height: 500px) {
+    margin-top: $spacer * 2.65;
+    margin-bottom: $spacer * 19; // height of footer
+    position: relative;
+    z-index: 2;
+    min-height: 500px;
+  }
 }
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
new file mode 100644
index 00000000..80a4c89e
--- /dev/null
+++ b/src/components/Layout.tsx
@@ -0,0 +1,33 @@
+import React, { ReactElement } from 'react'
+import Container from './atoms/Container'
+import Typekit from './atoms/Typekit'
+import Header from './organisms/Header'
+import Footer from './organisms/Footer'
+import styles from './Layout.module.scss'
+
+// if (process.env.NODE_ENV !== 'production') {
+//   const { whyDidYouUpdate } = require('why-did-you-update')
+//   whyDidYouUpdate(React)
+// }
+
+export default function Layout({
+  children
+}: {
+  location?: Location
+  children: any
+}): ReactElement {
+  return (
+    <>
+      <Typekit />
+      <Header />
+
+      <main className={styles.document} id="document">
+        <div className={styles.content}>
+          <Container>{children}</Container>
+        </div>
+      </main>
+
+      <Footer />
+    </>
+  )
+}
diff --git a/src/components/Post/PostActions.jsx b/src/components/Post/PostActions.jsx
deleted file mode 100644
index 11812983..00000000
--- a/src/components/Post/PostActions.jsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import ModalThanks from '../molecules/ModalThanks'
-import styles from './PostActions.module.scss'
-
-import { ReactComponent as Twitter } from '../../images/twitter.svg'
-import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg'
-import { ReactComponent as GitHub } from '../../images/github.svg'
-
-const ActionContent = ({ title, text, textLink }) => (
-  <>
-    <h1 className={styles.actionTitle}>{title}</h1>
-    <p className={styles.actionText}>
-      {text} <span className={styles.link}>{textLink}</span>
-    </p>
-  </>
-)
-
-ActionContent.propTypes = {
-  title: PropTypes.string,
-  text: PropTypes.string,
-  textLink: PropTypes.string
-}
-
-const ActionTwitter = ({ url, slug }) => (
-  <a
-    className={styles.action}
-    href={`https://twitter.com/intent/tweet?text=@kremalicious&url=${url}${slug}`}
-  >
-    <Twitter />
-    <ActionContent
-      title="Have a comment?"
-      text="Hit me up"
-      textLink="@kremalicious"
-    />
-  </a>
-)
-
-ActionTwitter.propTypes = {
-  url: PropTypes.string.isRequired,
-  slug: PropTypes.string.isRequired
-}
-
-const ActionCrypto = ({ toggleModal }) => (
-  <button className={styles.action} onClick={toggleModal}>
-    <Bitcoin />
-    <ActionContent
-      title="Found something useful?"
-      text="Say thanks with"
-      textLink="Bitcoins or Ether"
-    />
-  </button>
-)
-
-ActionCrypto.propTypes = {
-  toggleModal: PropTypes.func.isRequired
-}
-
-const ActionGitHub = ({ githubLink }) => (
-  <a className={styles.action} href={githubLink}>
-    <GitHub />
-    <ActionContent
-      title="Edit on GitHub"
-      text="Contribute to this post on"
-      textLink="GitHub"
-    />
-  </a>
-)
-
-ActionGitHub.propTypes = {
-  githubLink: PropTypes.string.isRequired
-}
-
-export default class PostActions extends PureComponent {
-  state = {
-    showModal: false
-  }
-
-  static propTypes = {
-    slug: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
-    githubLink: PropTypes.string.isRequired
-  }
-
-  toggleModal = () => {
-    this.setState({ showModal: !this.state.showModal })
-  }
-
-  render() {
-    const { url, slug, githubLink } = this.props
-
-    return (
-      <aside className={styles.actions}>
-        <div>
-          <ActionTwitter url={url} slug={slug} />
-        </div>
-
-        <div>
-          <ActionCrypto toggleModal={this.toggleModal} />
-        </div>
-
-        <div>
-          <ActionGitHub githubLink={githubLink} />
-        </div>
-
-        {this.state.showModal && (
-          <ModalThanks
-            isOpen={this.state.showModal}
-            handleCloseModal={this.toggleModal}
-          />
-        )}
-      </aside>
-    )
-  }
-}
diff --git a/src/components/Post/PostActions.module.scss b/src/components/Post/PostActions.module.scss
index e4c74a3f..007c1210 100644
--- a/src/components/Post/PostActions.module.scss
+++ b/src/components/Post/PostActions.module.scss
@@ -2,95 +2,95 @@
 @import 'mixins';
 
 .actions {
-    @include breakoutviewport;
+  @include breakoutviewport;
 
-    margin-top: $spacer * 3;
-    background: rgba(#fff, .5);
-    padding-top: $spacer;
-    padding-bottom: $spacer;
-    border-radius: $border-radius;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
+  margin-top: $spacer * 3;
+  background: rgba(#fff, 0.5);
+  padding-top: $spacer;
+  padding-bottom: $spacer;
+  border-radius: $border-radius;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
 
-    @media (min-width: $screen-md) {
-        margin-left: -100%;
-        margin-right: -18%;
-        padding-left: 80%;
+  @media (min-width: $screen-md) {
+    margin-left: -100%;
+    margin-right: -18%;
+    padding-left: 80%;
+  }
+
+  > div {
+    flex: 0 0 100%;
+    border-bottom: 1px dashed rgba($brand-grey-light, 0.3);
+
+    &:last-child {
+      border-bottom: 0;
     }
 
-    > div {
-        flex: 0 0 100%;
-        border-bottom: 1px dashed rgba($brand-grey-light, .3);
+    @media (min-width: $screen-sm) {
+      flex: 0 0 33.33333%;
+      border-bottom: 0;
+      border-left: 1px dashed rgba($brand-grey-light, 0.3);
 
-        &:last-child {
-            border-bottom: 0;
-        }
-
-        @media (min-width: $screen-sm) {
-            flex: 0 0 33.33333%;
-            border-bottom: 0;
-            border-left: 1px dashed rgba($brand-grey-light, .3);
-
-            &:first-child {
-                border-left: 0;
-            }
-        }
+      &:first-child {
+        border-left: 0;
+      }
     }
+  }
 }
 
 .link {
-    transition: .2s ease-out;
-    color: $link-color;
+  transition: 0.2s ease-out;
+  color: $link-color;
 }
 
 .actionTitle {
-    font-size: $font-size-base;
-    color: $text-color;
-    margin-top: 0;
-    margin-bottom: $spacer / 4;
-    transition: color .2s ease-out;
+  font-size: $font-size-base;
+  color: $text-color;
+  margin-top: 0;
+  margin-bottom: $spacer / 4;
+  transition: color 0.2s ease-out;
 }
 
 .actionText {
-    font-size: $font-size-small;
-    color: $brand-grey-light;
-    margin-bottom: 0;
-    transition: color .2s ease-out;
+  font-size: $font-size-small;
+  color: $brand-grey-light;
+  margin-bottom: 0;
+  transition: color 0.2s ease-out;
 }
 
 .action {
-    display: block;
-    margin: 0;
-    padding-top: $spacer;
-    padding-bottom: $spacer;
-    padding-left: $spacer * 2;
-    padding-right: $spacer;
-    position: relative;
-    text-align: left;
+  display: block;
+  margin: 0;
+  padding-top: $spacer;
+  padding-bottom: $spacer;
+  padding-left: $spacer * 2;
+  padding-right: $spacer;
+  position: relative;
+  text-align: left;
 
-    &:hover,
-    &:focus {
-        .link,
-        .actionTitle,
-        .actionText {
-            color: $link-color-hover;
-        }
+  &:hover,
+  &:focus {
+    .link,
+    .actionTitle,
+    .actionText {
+      color: $link-color-hover;
     }
+  }
 
-    &:active {
-        .link,
-        .actionTitle,
-        .actionText {
-            transition: none;
-            color: $link-color-active;
-        }
+  &:active {
+    .link,
+    .actionTitle,
+    .actionText {
+      transition: none;
+      color: $link-color-active;
     }
+  }
 
-    svg {
-        position: absolute;
-        left: $spacer;
-        top: $spacer;
-        fill: $brand-grey-light;
-    }
+  svg {
+    position: absolute;
+    left: $spacer;
+    top: $spacer;
+    fill: $brand-grey-light;
+  }
 }
diff --git a/src/components/Post/PostActions.tsx b/src/components/Post/PostActions.tsx
new file mode 100644
index 00000000..0b5e159e
--- /dev/null
+++ b/src/components/Post/PostActions.tsx
@@ -0,0 +1,99 @@
+import React, { useState } from 'react'
+import ModalThanks from '../molecules/ModalThanks'
+import styles from './PostActions.module.scss'
+
+import { ReactComponent as Twitter } from '../../images/twitter.svg'
+import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg'
+import { ReactComponent as GitHub } from '../../images/github.svg'
+import { useSiteMetadata } from '../../hooks/use-site-metadata'
+
+const ActionContent = ({
+  title,
+  text,
+  textLink
+}: {
+  title: string
+  text: string
+  textLink: string
+}) => (
+  <>
+    <h1 className={styles.actionTitle}>{title}</h1>
+    <p className={styles.actionText}>
+      {text} <span className={styles.link}>{textLink}</span>
+    </p>
+  </>
+)
+
+const ActionTwitter = ({ slug }: { slug: string }) => {
+  const { siteUrl } = useSiteMetadata()
+
+  return (
+    <a
+      className={styles.action}
+      href={`https://twitter.com/intent/tweet?text=@kremalicious&url=${siteUrl}${slug}`}
+    >
+      <Twitter />
+      <ActionContent
+        title="Have a comment?"
+        text="Hit me up"
+        textLink="@kremalicious"
+      />
+    </a>
+  )
+}
+
+const ActionCrypto = ({ toggleModal }: { toggleModal(): void }) => (
+  <button className={styles.action} onClick={toggleModal}>
+    <Bitcoin />
+    <ActionContent
+      title="Found something useful?"
+      text="Say thanks with"
+      textLink="Bitcoins or Ether"
+    />
+  </button>
+)
+
+const ActionGitHub = ({ githubLink }: { githubLink: string }) => (
+  <a className={styles.action} href={githubLink}>
+    <GitHub />
+    <ActionContent
+      title="Edit on GitHub"
+      text="Contribute to this post on"
+      textLink="GitHub"
+    />
+  </a>
+)
+
+export default function PostActions({
+  slug,
+  githubLink
+}: {
+  slug: string
+  githubLink: string
+}) {
+  const [showModal, setShowModal] = useState(false)
+
+  const toggleModal = () => {
+    setShowModal(!showModal)
+  }
+
+  return (
+    <aside className={styles.actions}>
+      <div>
+        <ActionTwitter slug={slug} />
+      </div>
+
+      <div>
+        <ActionCrypto toggleModal={toggleModal} />
+      </div>
+
+      <div>
+        <ActionGitHub githubLink={githubLink} />
+      </div>
+
+      {showModal && (
+        <ModalThanks isOpen={showModal} handleCloseModal={toggleModal} />
+      )}
+    </aside>
+  )
+}
diff --git a/src/components/Post/PostContent.jsx b/src/components/Post/PostContent.tsx
similarity index 74%
rename from src/components/Post/PostContent.jsx
rename to src/components/Post/PostContent.tsx
index f4022f4c..cdbf9bf2 100644
--- a/src/components/Post/PostContent.jsx
+++ b/src/components/Post/PostContent.tsx
@@ -1,9 +1,8 @@
-import React, { Fragment } from 'react'
-import PropTypes from 'prop-types'
+import React from 'react'
 import Changelog from '../atoms/Changelog'
 
 // Remove lead paragraph from content
-const PostContent = ({ post }) => {
+const PostContent = ({ post }: { post: any }) => {
   const separator = '<!-- more -->'
   const changelog = post.frontmatter.changelog
 
@@ -19,15 +18,11 @@ const PostContent = ({ post }) => {
   }
 
   return (
-    <Fragment>
+    <>
       <div dangerouslySetInnerHTML={{ __html: content }} />
       {changelog && <Changelog repo={changelog} />}
-    </Fragment>
+    </>
   )
 }
 
-PostContent.propTypes = {
-  post: PropTypes.object
-}
-
 export default PostContent
diff --git a/src/components/Post/PostImage.jsx b/src/components/Post/PostImage.jsx
deleted file mode 100644
index 682a834e..00000000
--- a/src/components/Post/PostImage.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Image from '../atoms/Image'
-import styles from './PostImage.module.scss'
-
-const PostImage = ({ title, fluid, fixed, alt }) => (
-  <figure className={styles.postImage}>
-    <Image
-      fluid={fluid ? fluid : null}
-      fixed={fixed ? fixed : null}
-      alt={alt}
-    />
-    {title && (
-      <figcaption className={styles.postImageTitle}>{title}</figcaption>
-    )}
-  </figure>
-)
-
-PostImage.propTypes = {
-  fluid: PropTypes.object,
-  fixed: PropTypes.object,
-  alt: PropTypes.string.isRequired,
-  title: PropTypes.string
-}
-
-export default PostImage
diff --git a/src/components/Post/PostImage.module.scss b/src/components/Post/PostImage.module.scss
index 8f90d3ee..061c624c 100644
--- a/src/components/Post/PostImage.module.scss
+++ b/src/components/Post/PostImage.module.scss
@@ -2,43 +2,43 @@
 @import 'mixins';
 
 .postImageTitle {
-    transition: .1s ease-out;
-    font-size: $font-size-h3;
-    font-family: $font-family-headings;
-    line-height: $line-height-headings;
-    font-weight: $font-weight-headings;
-    font-style: normal;
-    text-align: left;
-    letter-spacing: -.02em;
-    margin: 0;
-    position: absolute;
-    top: 10%;
-    padding: $spacer / 3 $spacer;
-    background: rgba($link-color, .85);
-    color: #fff;
-    text-shadow: 0 1px 0 #000;
-    left: 0;
-    opacity: 0;
-    transform: translate3d(0, -20px, 0);
+  transition: 0.1s ease-out;
+  font-size: $font-size-h3;
+  font-family: $font-family-headings;
+  line-height: $line-height-headings;
+  font-weight: $font-weight-headings;
+  font-style: normal;
+  text-align: left;
+  letter-spacing: -0.02em;
+  margin: 0;
+  position: absolute;
+  top: 10%;
+  padding: $spacer / 3 $spacer;
+  background: rgba($link-color, 0.85);
+  color: #fff;
+  text-shadow: 0 1px 0 #000;
+  left: 0;
+  opacity: 0;
+  transform: translate3d(0, -20px, 0);
 }
 
 .postImage {
-    @include breakoutviewport();
+  @include breakoutviewport();
 
-    max-width: none;
+  max-width: none;
+  display: block;
+  margin-top: $spacer * 1.5;
+  margin-bottom: $spacer * 1.5;
+
+  a & {
+    position: relative;
     display: block;
-    margin-top: $spacer * 1.5;
-    margin-bottom: $spacer * 1.5;
+  }
 
-    a & {
-        position: relative;
-        display: block;
-    }
-
-    a:hover & {
-        .postImageTitle {
-            opacity: 1;
-            transform: translate3d(0, 0, 0);
-        }
+  a:hover & {
+    .postImageTitle {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
     }
+  }
 }
diff --git a/src/components/Post/PostImage.tsx b/src/components/Post/PostImage.tsx
new file mode 100644
index 00000000..36108a58
--- /dev/null
+++ b/src/components/Post/PostImage.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import Image from '../atoms/Image'
+import styles from './PostImage.module.scss'
+import { FluidObject, FixedObject } from 'gatsby-image'
+
+interface PostImageProps {
+  title?: string
+  fluid?: FluidObject
+  fixed?: FixedObject
+  alt: string
+}
+
+const PostImage = ({ title, fluid, fixed, alt }: PostImageProps) => (
+  <figure className={styles.postImage}>
+    <Image fluid={fluid} fixed={fixed} alt={alt} />
+    {title && (
+      <figcaption className={styles.postImageTitle}>{title}</figcaption>
+    )}
+  </figure>
+)
+
+export default PostImage
diff --git a/src/components/Post/PostLead.module.scss b/src/components/Post/PostLead.module.scss
index d52b4f02..1a514e99 100644
--- a/src/components/Post/PostLead.module.scss
+++ b/src/components/Post/PostLead.module.scss
@@ -1,10 +1,10 @@
 @import 'variables';
 
 .lead {
-    font-size: $font-size-large;
-    margin-bottom: $spacer;
+  font-size: $font-size-large;
+  margin-bottom: $spacer;
 }
 
 .index {
-    font-size: $font-size-base;
+  font-size: $font-size-base;
 }
diff --git a/src/components/Post/PostLead.jsx b/src/components/Post/PostLead.tsx
similarity index 77%
rename from src/components/Post/PostLead.jsx
rename to src/components/Post/PostLead.tsx
index 152bcfcd..9e8cf86a 100644
--- a/src/components/Post/PostLead.jsx
+++ b/src/components/Post/PostLead.tsx
@@ -1,10 +1,15 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import styles from './PostLead.module.scss'
 
 // Extract lead paragraph from content
 // Grab everything before more tag, or just first paragraph
-const PostLead = ({ post, index }) => {
+const PostLead = ({
+  post,
+  index
+}: {
+  post: { html: string }
+  index?: boolean
+}) => {
   let lead
   const content = post.html
   const separator = '<!-- more -->'
@@ -23,9 +28,4 @@ const PostLead = ({ post, index }) => {
   )
 }
 
-PostLead.propTypes = {
-  post: PropTypes.object,
-  index: PropTypes.bool
-}
-
 export default PostLead
diff --git a/src/components/Post/PostLinkActions.module.scss b/src/components/Post/PostLinkActions.module.scss
index 92903c76..9e7c8157 100644
--- a/src/components/Post/PostLinkActions.module.scss
+++ b/src/components/Post/PostLinkActions.module.scss
@@ -1,24 +1,24 @@
 @import 'variables';
 
 .postLinkActions {
-    display: flex;
-    justify-content: space-between;
-    margin-top: $spacer * 2;
+  display: flex;
+  justify-content: space-between;
+  margin-top: $spacer * 2;
 
-    a {
-        svg {
-            width: $font-size-small;
-            height: $font-size-small;
-            display: inline-block;
-            fill: $text-color-light;
-        }
-
-        &:last-child {
-            svg {
-                width: $font-size-base;
-                height: $font-size-base;
-                fill: $brand-cyan;
-            }
-        }
+  a {
+    svg {
+      width: $font-size-small;
+      height: $font-size-small;
+      display: inline-block;
+      fill: $text-color-light;
     }
+
+    &:last-child {
+      svg {
+        width: $font-size-base;
+        height: $font-size-base;
+        fill: $brand-cyan;
+      }
+    }
+  }
 }
diff --git a/src/components/Post/PostLinkActions.jsx b/src/components/Post/PostLinkActions.tsx
similarity index 75%
rename from src/components/Post/PostLinkActions.jsx
rename to src/components/Post/PostLinkActions.tsx
index 9727af9a..c08da221 100644
--- a/src/components/Post/PostLinkActions.jsx
+++ b/src/components/Post/PostLinkActions.tsx
@@ -1,12 +1,17 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 import { ReactComponent as Forward } from '../../images/forward.svg'
 import { ReactComponent as Infinity } from '../../images/infinity.svg'
 import styles from './PostLinkActions.module.scss'
 import stylesPostMore from './PostMore.module.scss'
 
-const PostLinkActions = ({ linkurl, slug }) => (
+const PostLinkActions = ({
+  linkurl,
+  slug
+}: {
+  linkurl?: string
+  slug: string
+}) => (
   <div className={styles.postLinkActions}>
     <a className={stylesPostMore.postMore} href={linkurl}>
       Go to source <Forward />
@@ -17,9 +22,4 @@ const PostLinkActions = ({ linkurl, slug }) => (
   </div>
 )
 
-PostLinkActions.propTypes = {
-  slug: PropTypes.string.isRequired,
-  linkurl: PropTypes.string
-}
-
 export default PostLinkActions
diff --git a/src/components/Post/PostMeta.module.scss b/src/components/Post/PostMeta.module.scss
index 1a600aae..f0fc7b4a 100644
--- a/src/components/Post/PostMeta.module.scss
+++ b/src/components/Post/PostMeta.module.scss
@@ -4,82 +4,82 @@
 /////////////////////////////////////
 
 .entryMeta {
-    font-size: $font-size-small;
-    margin-top: $spacer * 2;
-    color: $brand-grey-light;
+  font-size: $font-size-small;
+  margin-top: $spacer * 2;
+  color: $brand-grey-light;
 }
 
 .byline,
 .time,
 .tags,
 .categories {
-    text-align: center;
+  text-align: center;
 }
 
 .byline,
 .time {
-    font-style: italic;
+  font-style: italic;
 }
 
 .byline {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 .by {
-    display: block;
+  display: block;
 }
 
 .time {
-    margin-bottom: $spacer * 2;
+  margin-bottom: $spacer * 2;
 }
 
 // Types & Tags
 /////////////////////////////////////
 
 .type {
+  text-align: center;
+
+  a {
+    font-size: $font-size-mini;
     text-align: center;
+    color: $text-color;
+    line-height: 1;
+    text-transform: uppercase;
+    border: 1px solid $text-color;
+    border-radius: $border-radius;
+    padding: 4px 8px;
+    margin: 0;
+    display: inline-block;
 
-    a {
-        font-size: $font-size-mini;
-        text-align: center;
-        color: $text-color;
-        line-height: 1;
-        text-transform: uppercase;
-        border: 1px solid $text-color;
-        border-radius: $border-radius;
-        padding: 4px 8px;
-        margin: 0;
-        display: inline-block;
-
-        &:hover,
-        &:focus {
-            color: $link-color;
-            border-color: $link-color;
-        }
-
-        &:active {
-            background: $link-color;
-            top: 0;
-            color: #fff;
-        }
+    &:hover,
+    &:focus {
+      color: $link-color;
+      border-color: $link-color;
     }
+
+    &:active {
+      background: $link-color;
+      top: 0;
+      color: #fff;
+    }
+  }
 }
 
 .tags {
-    margin-top: $spacer / 2;
+  margin-top: $spacer / 2;
 }
 
 .tag {
-    color: $text-color;
-    margin-left: $spacer / 2;
-    margin-right: $spacer / 2;
-    margin-bottom: $spacer / 2;
-    white-space: nowrap;
-    display: inline-block;
+  color: $text-color;
+  margin-left: $spacer / 2;
+  margin-right: $spacer / 2;
+  margin-bottom: $spacer / 2;
+  white-space: nowrap;
+  display: inline-block;
 
-    &::before {
-        color: $brand-grey-light;
-        content: '#';
-        margin-right: 1px;
-    }
+  &::before {
+    color: $brand-grey-light;
+    content: '#';
+    margin-right: 1px;
+  }
 }
diff --git a/src/components/Post/PostMeta.jsx b/src/components/Post/PostMeta.tsx
similarity index 81%
rename from src/components/Post/PostMeta.jsx
rename to src/components/Post/PostMeta.tsx
index 31749afa..427e5109 100644
--- a/src/components/Post/PostMeta.jsx
+++ b/src/components/Post/PostMeta.tsx
@@ -1,20 +1,21 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 import Time from 'react-time'
 import slugify from 'slugify'
 import styles from './PostMeta.module.scss'
+import { useSiteMetadata } from '../../hooks/use-site-metadata'
 
-const PostMeta = ({ post, meta }) => {
+const PostMeta = ({ post }: { post: any }) => {
   const { author, updated, tags, type } = post.frontmatter
+  const siteMeta = useSiteMetadata()
   const { date } = post.fields
 
   return (
     <footer className={styles.entryMeta}>
       <div className={styles.byline}>
         <span className={styles.by}>by</span>
-        <a className="fn" rel="author" href={meta.author.uri}>
-          {author || meta.author.name}
+        <a className="fn" rel="author" href={siteMeta.author.uri}>
+          {author || siteMeta.author.name}
         </a>
       </div>
 
@@ -40,7 +41,7 @@ const PostMeta = ({ post, meta }) => {
 
       {tags && (
         <div className={styles.tags}>
-          {tags.map(tag => {
+          {tags.map((tag: string) => {
             const to = tag === 'goodies' ? '/goodies' : `/tags/${slugify(tag)}/`
 
             return (
@@ -55,9 +56,4 @@ const PostMeta = ({ post, meta }) => {
   )
 }
 
-PostMeta.propTypes = {
-  post: PropTypes.object.isRequired,
-  meta: PropTypes.object.isRequired
-}
-
 export default PostMeta
diff --git a/src/components/Post/PostMore.module.scss b/src/components/Post/PostMore.module.scss
index 02010faf..8f0644cd 100644
--- a/src/components/Post/PostMore.module.scss
+++ b/src/components/Post/PostMore.module.scss
@@ -1,29 +1,29 @@
 @import 'variables';
 
 .postMore {
+  display: inline-block;
+  font-family: $font-family-headings;
+  font-weight: $font-weight-headings;
+  font-size: $font-size-base * 0.9;
+  color: $link-color;
+  text-transform: uppercase;
+  margin-top: $spacer;
+
+  svg {
     display: inline-block;
-    font-family: $font-family-headings;
-    font-weight: $font-weight-headings;
-    font-size: $font-size-base * .9;
-    color: $link-color;
-    text-transform: uppercase;
-    margin-top: $spacer;
+    margin: 0;
+    top: 0.2rem;
+    position: relative;
+    width: 1.1rem;
+    height: 1.1rem;
+    fill: $text-color-light;
+    transition: 0.2s ease-out;
+  }
 
+  &:hover,
+  &:focus {
     svg {
-        display: inline-block;
-        margin: 0;
-        top: .2rem;
-        position: relative;
-        width: 1.1rem;
-        height: 1.1rem;
-        fill: $text-color-light;
-        transition: .2s ease-out;
-    }
-
-    &:hover,
-    &:focus {
-        svg {
-            transform: translate3d(.2rem, 0, 0);
-        }
+      transform: translate3d(0.2rem, 0, 0);
     }
+  }
 }
diff --git a/src/components/Post/PostMore.jsx b/src/components/Post/PostMore.tsx
similarity index 61%
rename from src/components/Post/PostMore.jsx
rename to src/components/Post/PostMore.tsx
index 8cc84ed6..2bd973be 100644
--- a/src/components/Post/PostMore.jsx
+++ b/src/components/Post/PostMore.tsx
@@ -1,19 +1,13 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 import styles from './PostMore.module.scss'
 import { ReactComponent as Caret } from '../../images/chevron-right.svg'
 
-const PostMore = ({ to, children }) => (
+const PostMore = ({ to, children }: { to: string; children: string }) => (
   <Link className={styles.postMore} to={to}>
     {children}
     <Caret />
   </Link>
 )
 
-PostMore.propTypes = {
-  to: PropTypes.string.isRequired,
-  children: PropTypes.string.isRequired
-}
-
 export default PostMore
diff --git a/src/components/Post/PostTeaser.jsx b/src/components/Post/PostTeaser.jsx
deleted file mode 100644
index c66deb1a..00000000
--- a/src/components/Post/PostTeaser.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import { Link } from 'gatsby'
-import Image from '../atoms/Image'
-import styles from './PostTeaser.module.scss'
-
-export default class PostTeaser extends PureComponent {
-  static propTypes = {
-    post: PropTypes.object.isRequired,
-    toggleSearch: PropTypes.func
-  }
-
-  render() {
-    const { post, toggleSearch } = this.props
-
-    return (
-      <li>
-        <Link to={post.fields.slug} onClick={toggleSearch && toggleSearch}>
-          {post.frontmatter.image ? (
-            <>
-              <Image
-                fluid={post.frontmatter.image.childImageSharp.fluid}
-                alt={post.frontmatter.title}
-              />
-              <h4 className={styles.postTitle}>{post.frontmatter.title}</h4>
-            </>
-          ) : (
-            <div className={styles.empty}>
-              <h4 className={styles.postTitle}>{post.frontmatter.title}</h4>
-            </div>
-          )}
-        </Link>
-      </li>
-    )
-  }
-}
diff --git a/src/components/Post/PostTeaser.module.scss b/src/components/Post/PostTeaser.module.scss
index 749f70cf..76226a38 100644
--- a/src/components/Post/PostTeaser.module.scss
+++ b/src/components/Post/PostTeaser.module.scss
@@ -1,29 +1,29 @@
 @import 'variables';
 
 .postTitle {
-    display: inline-block;
-    margin-top: $spacer / 4;
-    margin-bottom: 0;
-    font-size: $font-size-small;
-    line-height: $line-height-small;
-    color: $brand-grey-light;
-    padding-left: .2rem;
-    padding-right: .2rem;
-    transition: color .2s ease-out;
+  display: inline-block;
+  margin-top: $spacer / 4;
+  margin-bottom: 0;
+  font-size: $font-size-small;
+  line-height: $line-height-small;
+  color: $brand-grey-light;
+  padding-left: 0.2rem;
+  padding-right: 0.2rem;
+  transition: color 0.2s ease-out;
 
-    @media (min-width: $screen-md) {
-        font-size: $font-size-base;
-    }
+  @media (min-width: $screen-md) {
+    font-size: $font-size-base;
+  }
 }
 
 .empty {
-    height: 100%;
-    min-height: 80px;
-    display: flex;
-    align-items: center;
-    padding: $spacer / 4;
+  height: 100%;
+  min-height: 80px;
+  display: flex;
+  align-items: center;
+  padding: $spacer / 4;
 
-    .postTitle {
-        margin-top: 0;
-    }
+  .postTitle {
+    margin-top: 0;
+  }
 }
diff --git a/src/components/Post/PostTeaser.tsx b/src/components/Post/PostTeaser.tsx
new file mode 100644
index 00000000..ab32440f
--- /dev/null
+++ b/src/components/Post/PostTeaser.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Link } from 'gatsby'
+import Image from '../atoms/Image'
+import styles from './PostTeaser.module.scss'
+
+export default function PostTeaser({
+  post,
+  toggleSearch
+}: {
+  post: { fields: { slug: string }; frontmatter: { image: any; title: string } }
+  toggleSearch?: () => void
+}) {
+  const { image, title } = post.frontmatter
+  const { slug } = post.fields
+
+  return (
+    <li>
+      <Link to={slug} onClick={toggleSearch && toggleSearch}>
+        {image ? (
+          <>
+            <Image fluid={image.childImageSharp.fluid} alt={title} />
+            <h4 className={styles.postTitle}>{title}</h4>
+          </>
+        ) : (
+          <div className={styles.empty}>
+            <h4 className={styles.postTitle}>{title}</h4>
+          </div>
+        )}
+      </Link>
+    </li>
+  )
+}
diff --git a/src/components/Post/PostTitle.module.scss b/src/components/Post/PostTitle.module.scss
index 5675f52e..bc970961 100644
--- a/src/components/Post/PostTitle.module.scss
+++ b/src/components/Post/PostTitle.module.scss
@@ -5,32 +5,32 @@
 /////////////////////////////////////
 
 .hentry__title {
-    font-size: $font-size-h1;
-    color: $color-headings;
-    margin-top: 0;
-    margin-bottom: $spacer;
+  font-size: $font-size-h1;
+  color: $color-headings;
+  margin-top: 0;
+  margin-bottom: $spacer;
 }
 
 .hentry__title__link {
-    font-size: $font-size-h3;
+  font-size: $font-size-h3;
 
-    svg {
-        width: $font-size-base;
-        height: $font-size-base;
-        display: inline-block;
-        fill: $text-color-light;
-        vertical-align: baseline;
-    }
+  svg {
+    width: $font-size-base;
+    height: $font-size-base;
+    display: inline-block;
+    fill: $text-color-light;
+    vertical-align: baseline;
+  }
 }
 
 .linkurl {
-    @include ellipsis();
+  @include ellipsis();
 
-    width: 100%;
-    color: $text-color;
-    font-family: $font-family-base;
-    font-size: $font-size-small;
-    padding: ($spacer/4) 0;
-    margin-top: -($spacer);
-    margin-bottom: $spacer;
+  width: 100%;
+  color: $text-color;
+  font-family: $font-family-base;
+  font-size: $font-size-small;
+  padding: ($spacer/4) 0;
+  margin-top: -($spacer);
+  margin-bottom: $spacer;
 }
diff --git a/src/components/Post/PostTitle.jsx b/src/components/Post/PostTitle.tsx
similarity index 67%
rename from src/components/Post/PostTitle.jsx
rename to src/components/Post/PostTitle.tsx
index 27d7a715..8d38a05f 100644
--- a/src/components/Post/PostTitle.jsx
+++ b/src/components/Post/PostTitle.tsx
@@ -1,14 +1,23 @@
-import React, { Fragment } from 'react'
-import PropTypes from 'prop-types'
+import React from 'react'
 import { Link } from 'gatsby'
 import { ReactComponent as Forward } from '../../images/forward.svg'
 import styles from './PostTitle.module.scss'
 
-const PostTitle = ({ type, slug, linkurl, title }) => {
+export default function PostTitle({
+  type,
+  slug,
+  linkurl,
+  title
+}: {
+  type?: string
+  slug?: string
+  linkurl?: string
+  title: string
+}) {
   const linkHostname = linkurl ? new URL(linkurl).hostname : null
 
   return type === 'link' ? (
-    <Fragment>
+    <>
       <h1
         className={[styles.hentry__title, styles.hentry__title__link].join(' ')}
       >
@@ -17,7 +26,7 @@ const PostTitle = ({ type, slug, linkurl, title }) => {
         </a>
       </h1>
       <div className={styles.linkurl}>{linkHostname}</div>
-    </Fragment>
+    </>
   ) : slug ? (
     <h1 className={styles.hentry__title}>
       <Link to={slug}>{title}</Link>
@@ -26,12 +35,3 @@ const PostTitle = ({ type, slug, linkurl, title }) => {
     <h1 className={styles.hentry__title}>{title}</h1>
   )
 }
-
-PostTitle.propTypes = {
-  type: PropTypes.string,
-  title: PropTypes.string.isRequired,
-  slug: PropTypes.string,
-  linkurl: PropTypes.string
-}
-
-export default PostTitle
diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx
deleted file mode 100644
index 2a79a304..00000000
--- a/src/components/Search/Search.jsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
-import { CSSTransition } from 'react-transition-group'
-import SearchInput from './SearchInput'
-import SearchButton from './SearchButton'
-import SearchResults from './SearchResults'
-
-import styles from './Search.module.scss'
-
-export default class Search extends PureComponent {
-  state = {
-    searchOpen: false,
-    query: '',
-    results: []
-  }
-
-  static propTypes = {
-    lng: PropTypes.string.isRequired
-  }
-
-  toggleSearch = () => {
-    this.setState(prevState => ({
-      searchOpen: !prevState.searchOpen
-    }))
-  }
-
-  getSearchResults(query) {
-    if (!query || !window.__LUNR__) return []
-    const lunrIndex = window.__LUNR__[this.props.lng]
-    const results = lunrIndex.index.search(query)
-    return results.map(({ ref }) => lunrIndex.store[ref])
-  }
-
-  search = event => {
-    const query = event.target.value
-    // wildcard search https://lunrjs.com/guides/searching.html#wildcards
-    const results = query.length > 1 ? this.getSearchResults(`${query}*`) : []
-
-    this.setState({
-      results,
-      query
-    })
-  }
-
-  render() {
-    const { searchOpen, query, results } = this.state
-
-    return (
-      <>
-        <SearchButton onClick={this.toggleSearch} />
-
-        {searchOpen && (
-          <>
-            <Helmet>
-              <body className="hasSearchOpen" />
-            </Helmet>
-
-            <CSSTransition
-              appear={searchOpen}
-              in={searchOpen}
-              timeout={200}
-              classNames={styles}
-            >
-              <section className={styles.search}>
-                <SearchInput
-                  value={query}
-                  onChange={this.search}
-                  onToggle={this.toggleSearch}
-                />
-              </section>
-            </CSSTransition>
-
-            <SearchResults
-              searchQuery={query}
-              results={results}
-              toggleSearch={this.toggleSearch}
-            />
-          </>
-        )}
-      </>
-    )
-  }
-}
diff --git a/src/components/Search/Search.module.scss b/src/components/Search/Search.module.scss
deleted file mode 100644
index ae573f17..00000000
--- a/src/components/Search/Search.module.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@import 'variables';
-
-.search {
-    position: absolute;
-    left: $spacer / 2;
-    right: $spacer / 2;
-    top: -($spacer / 4);
-    z-index: 10;
-
-    input {
-        width: 100%;
-    }
-
-    @media (min-width: $screen-md) {
-        left: 0;
-        right: 0;
-    }
-}
-
-.appear,
-.enter {
-    opacity: .01;
-    transform: translate3d(0, -100px, 0);
-
-    &.appearActive,
-    &.enterActive {
-        opacity: 1;
-        transition: .2s ease-out;
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-.exit {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-
-    &.exitActive {
-        opacity: .01;
-        transition: .2s ease-in;
-        transform: translate3d(0, -100px, 0);
-    }
-}
-
-:global(.hasSearchOpen) {
-    overflow: hidden;
-}
diff --git a/src/components/Search/SearchButton.module.scss b/src/components/Search/SearchButton.module.scss
index 7229a39d..ce5f2b80 100644
--- a/src/components/Search/SearchButton.module.scss
+++ b/src/components/Search/SearchButton.module.scss
@@ -1,33 +1,33 @@
 @import 'variables';
 
 .searchButton {
-    padding: .65rem .85rem;
-    text-align: center;
-    line-height: 1;
-    vertical-align: middle;
-    display: inline-block;
-    margin-right: $spacer / 4;
+  padding: 0.65rem 0.85rem;
+  text-align: center;
+  line-height: 1;
+  vertical-align: middle;
+  display: inline-block;
+  margin-right: $spacer / 4;
 
-    &:focus {
-        outline: 0;
-    }
+  &:focus {
+    outline: 0;
+  }
 
+  svg {
+    fill: $text-color-light;
+    width: 21px;
+    height: 21px;
+  }
+
+  &:hover,
+  &:focus {
     svg {
-        fill: $text-color-light;
-        width: 21px;
-        height: 21px;
+      fill: $brand-cyan;
     }
+  }
 
-    &:hover,
-    &:focus {
-        svg {
-            fill: $brand-cyan;
-        }
-    }
-
-    &:active {
-        svg {
-            fill: darken($brand-cyan, 30%);
-        }
+  &:active {
+    svg {
+      fill: darken($brand-cyan, 30%);
     }
+  }
 }
diff --git a/src/components/Search/SearchButton.jsx b/src/components/Search/SearchButton.tsx
similarity index 89%
rename from src/components/Search/SearchButton.jsx
rename to src/components/Search/SearchButton.tsx
index 9b869ef5..8f08217f 100644
--- a/src/components/Search/SearchButton.jsx
+++ b/src/components/Search/SearchButton.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { ReactComponent as SearchIcon } from '../../images/magnifying-glass.svg'
 import styles from './SearchButton.module.scss'
 
-const SearchButton = props => (
+const SearchButton = (props: any) => (
   <button
     type="button"
     title="Search"
diff --git a/src/components/Search/SearchInput.jsx b/src/components/Search/SearchInput.jsx
deleted file mode 100644
index a9f1ed22..00000000
--- a/src/components/Search/SearchInput.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import Input from '../atoms/Input'
-import styles from './SearchInput.module.scss'
-
-export default class SearchInput extends PureComponent {
-  static propTypes = {
-    onToggle: PropTypes.func
-  }
-
-  render() {
-    return (
-      <>
-        <Input
-          className={styles.searchInput}
-          type="search"
-          placeholder="Search everything"
-          autoFocus // eslint-disable-line
-          {...this.props}
-        />
-        <button
-          className={styles.searchInputClose}
-          onClick={this.props.onToggle}
-          title="Close search"
-        >
-          &times;
-        </button>
-      </>
-    )
-  }
-}
diff --git a/src/components/Search/SearchInput.module.scss b/src/components/Search/SearchInput.module.scss
index 9e252de6..f84f46b6 100644
--- a/src/components/Search/SearchInput.module.scss
+++ b/src/components/Search/SearchInput.module.scss
@@ -1,27 +1,27 @@
 @import 'variables';
 
 .searchInput {
-    composes: input from '../atoms/Input.module.scss';
+  composes: input from '../atoms/Input.module.scss';
+  background: $input-bg-focus;
+
+  &::-webkit-search-cancel-button {
+    display: none;
+  }
+
+  &:hover {
     background: $input-bg-focus;
-
-    &::-webkit-search-cancel-button {
-        display: none;
-    }
-
-    &:hover {
-        background: $input-bg-focus;
-    }
+  }
 }
 
 .searchInputClose {
-    position: absolute;
-    right: $spacer / 2;
-    top: $spacer / 5;
-    font-size: $font-size-h3;
-    color: $brand-grey-light;
+  position: absolute;
+  right: $spacer / 2;
+  top: $spacer / 5;
+  font-size: $font-size-h3;
+  color: $brand-grey-light;
 
-    &:hover,
-    &:focus {
-        color: $link-color;
-    }
+  &:hover,
+  &:focus {
+    color: $link-color;
+  }
 }
diff --git a/src/components/Search/SearchInput.tsx b/src/components/Search/SearchInput.tsx
new file mode 100644
index 00000000..0ee9427e
--- /dev/null
+++ b/src/components/Search/SearchInput.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import Input from '../atoms/Input'
+import styles from './SearchInput.module.scss'
+
+export default function SearchInput({
+  value,
+  onToggle,
+  onChange
+}: {
+  value: string
+  onToggle(): void
+  onChange(e: Event): void
+}) {
+  return (
+    <>
+      <Input
+        className={styles.searchInput}
+        type="search"
+        placeholder="Search everything"
+        autoFocus // eslint-disable-line
+        value={value}
+        onChange={onChange}
+      />
+      <button
+        className={styles.searchInputClose}
+        onClick={onToggle}
+        title="Close search"
+      >
+        &times;
+      </button>
+    </>
+  )
+}
diff --git a/src/components/Search/SearchResults.jsx b/src/components/Search/SearchResults.jsx
deleted file mode 100644
index 832c596f..00000000
--- a/src/components/Search/SearchResults.jsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import React, { PureComponent } from 'react'
-import ReactDOM from 'react-dom'
-import PropTypes from 'prop-types'
-import { graphql, StaticQuery } from 'gatsby'
-import Container from '../atoms/Container'
-import PostTeaser from '../Post/PostTeaser'
-import SearchResultsEmpty from './SearchResultsEmpty'
-import styles from './SearchResults.module.scss'
-
-const query = graphql`
-  query {
-    allMarkdownRemark {
-      edges {
-        node {
-          id
-          frontmatter {
-            title
-            image {
-              childImageSharp {
-                ...ImageFluidThumb
-              }
-            }
-          }
-          fields {
-            slug
-          }
-        }
-      }
-    }
-  }
-`
-
-export default class SearchResults extends PureComponent {
-  static propTypes = {
-    results: PropTypes.array.isRequired,
-    searchQuery: PropTypes.string.isRequired,
-    toggleSearch: PropTypes.func.isRequired
-  }
-
-  render() {
-    const { searchQuery, results, toggleSearch } = this.props
-
-    return (
-      <StaticQuery
-        query={query}
-        render={data => {
-          const posts = data.allMarkdownRemark.edges
-
-          // creating portal to break out of DOM node we're in
-          // and render the results in content container
-          return ReactDOM.createPortal(
-            <div className={styles.searchResults}>
-              <Container>
-                {results.length > 0 ? (
-                  <ul>
-                    {results.map(page =>
-                      posts
-                        .filter(post => post.node.fields.slug === page.slug)
-                        .map(({ node }) => (
-                          <PostTeaser
-                            key={page.slug}
-                            post={node}
-                            toggleSearch={toggleSearch}
-                          />
-                        ))
-                    )}
-                  </ul>
-                ) : (
-                  <SearchResultsEmpty
-                    searchQuery={searchQuery}
-                    results={results}
-                  />
-                )}
-              </Container>
-            </div>,
-            document.getElementById('document')
-          )
-        }}
-      />
-    )
-  }
-}
diff --git a/src/components/Search/SearchResults.module.scss b/src/components/Search/SearchResults.module.scss
index f9c1502c..fca406b1 100644
--- a/src/components/Search/SearchResults.module.scss
+++ b/src/components/Search/SearchResults.module.scss
@@ -2,74 +2,74 @@
 @import 'mixins';
 
 .searchResults {
-    position: absolute;
-    left: 0;
-    right: 0;
-    z-index: 10;
-    top: 0;
-    bottom: 0;
-    background: rgba($body-background-color, .95);
-    backdrop-filter: blur(5px);
-    animation: fadein .3s;
-    overflow: scroll;
-    -webkit-overflow-scrolling: touch;
-    height: 91vh;
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  top: 0;
+  bottom: 0;
+  background: rgba($body-background-color, 0.95);
+  backdrop-filter: blur(5px);
+  animation: fadein 0.3s;
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
+  height: 91vh;
 
-    ul {
-        @include breakoutviewport;
+  ul {
+    @include breakoutviewport;
 
-        padding: $spacer $spacer / 2;
-        margin-bottom: 0;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
+    padding: $spacer $spacer / 2;
+    margin-bottom: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
 
-        @media (min-width: $screen-md) {
-            padding-left: 0;
-            padding-right: 0;
-        }
-
-        li {
-            display: block;
-            flex: 0 0 48%;
-            margin-bottom: $spacer;
-
-            @media (min-width: $screen-sm) {
-                flex-basis: 31%;
-            }
-
-            &::before {
-                display: none;
-            }
-        }
+    @media (min-width: $screen-md) {
+      padding-left: 0;
+      padding-right: 0;
     }
 
-    img {
-        margin-bottom: 0;
+    li {
+      display: block;
+      flex: 0 0 48%;
+      margin-bottom: $spacer;
+
+      @media (min-width: $screen-sm) {
+        flex-basis: 31%;
+      }
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  img {
+    margin-bottom: 0;
+  }
+
+  a {
+    display: block;
+
+    > div {
+      margin-bottom: 0;
     }
 
-    a {
-        display: block;
-
-        > div {
-            margin-bottom: 0;
-        }
-
-        &:hover,
-        &:focus {
-            h4 {
-                color: $link-color;
-            }
-        }
+    &:hover,
+    &:focus {
+      h4 {
+        color: $link-color;
+      }
     }
+  }
 }
 
 @keyframes fadein {
-    0% {
-        opacity: 0;
-    }
+  0% {
+    opacity: 0;
+  }
 
-    100% {
-        opacity: 1;
-    }
+  100% {
+    opacity: 1;
+  }
 }
diff --git a/src/components/Search/SearchResults.tsx b/src/components/Search/SearchResults.tsx
new file mode 100644
index 00000000..f65fdc2b
--- /dev/null
+++ b/src/components/Search/SearchResults.tsx
@@ -0,0 +1,70 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { graphql, useStaticQuery } from 'gatsby'
+import Container from '../atoms/Container'
+import PostTeaser from '../Post/PostTeaser'
+import SearchResultsEmpty from './SearchResultsEmpty'
+import styles from './SearchResults.module.scss'
+
+const query = graphql`
+  query {
+    allMarkdownRemark {
+      edges {
+        node {
+          id
+          frontmatter {
+            title
+            image {
+              childImageSharp {
+                ...ImageFluidThumb
+              }
+            }
+          }
+          fields {
+            slug
+          }
+        }
+      }
+    }
+  }
+`
+
+export default function SearchResults({
+  searchQuery,
+  results,
+  toggleSearch
+}: {
+  searchQuery: string
+  results: any
+  toggleSearch(): void
+}) {
+  const data = useStaticQuery(query)
+  const posts = data.allMarkdownRemark.edges
+
+  // creating portal to break out of DOM node we're in
+  // and render the results in content container
+  return ReactDOM.createPortal(
+    <div className={styles.searchResults}>
+      <Container>
+        {results.length > 0 ? (
+          <ul>
+            {results.map(page =>
+              posts
+                .filter(post => post.node.fields.slug === page.slug)
+                .map(({ node }: { node: any }) => (
+                  <PostTeaser
+                    key={page.slug}
+                    post={node}
+                    toggleSearch={toggleSearch}
+                  />
+                ))
+            )}
+          </ul>
+        ) : (
+          <SearchResultsEmpty searchQuery={searchQuery} results={results} />
+        )}
+      </Container>
+    </div>,
+    document.getElementById('document')
+  )
+}
diff --git a/src/components/Search/SearchResultsEmpty.module.scss b/src/components/Search/SearchResultsEmpty.module.scss
index f542a25a..556bcf6f 100644
--- a/src/components/Search/SearchResultsEmpty.module.scss
+++ b/src/components/Search/SearchResultsEmpty.module.scss
@@ -1,34 +1,34 @@
 @import 'variables';
 
 .empty {
-    padding-top: 15vh;
-    display: flex;
-    justify-content: center;
+  padding-top: 15vh;
+  display: flex;
+  justify-content: center;
 }
 
 .emptyMessage {
-    color: $brand-grey-light;
+  color: $brand-grey-light;
 }
 
 .emptyMessageText {
-    margin-bottom: 0;
-    position: relative;
+  margin-bottom: 0;
+  position: relative;
 
-    &::after {
-        overflow: hidden;
-        display: inline-block;
-        vertical-align: bottom;
-        animation: ellipsis steps(4, end) 1s infinite;
-        content: '\2026'; // ascii code for the ellipsis character
-        width: 0;
-        position: absolute;
-        left: 101%;
-        bottom: 0;
-    }
+  &::after {
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: bottom;
+    animation: ellipsis steps(4, end) 1s infinite;
+    content: '\2026'; // ascii code for the ellipsis character
+    width: 0;
+    position: absolute;
+    left: 101%;
+    bottom: 0;
+  }
 }
 
 @keyframes ellipsis {
-    to {
-        width: 1rem;
-    }
+  to {
+    width: 1rem;
+  }
 }
diff --git a/src/components/Search/SearchResultsEmpty.jsx b/src/components/Search/SearchResultsEmpty.tsx
similarity index 69%
rename from src/components/Search/SearchResultsEmpty.jsx
rename to src/components/Search/SearchResultsEmpty.tsx
index 9dbc5adc..09a3ed61 100644
--- a/src/components/Search/SearchResultsEmpty.jsx
+++ b/src/components/Search/SearchResultsEmpty.tsx
@@ -1,8 +1,13 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import styles from './SearchResultsEmpty.module.scss'
 
-const SearchResultsEmpty = ({ searchQuery, results }) => (
+const SearchResultsEmpty = ({
+  searchQuery,
+  results
+}: {
+  searchQuery: string
+  results: []
+}) => (
   <div className={styles.empty}>
     <header className={styles.emptyMessage}>
       <p className={styles.emptyMessageText}>
@@ -16,9 +21,4 @@ const SearchResultsEmpty = ({ searchQuery, results }) => (
   </div>
 )
 
-SearchResultsEmpty.propTypes = {
-  results: PropTypes.array.isRequired,
-  searchQuery: PropTypes.string.isRequired
-}
-
 export default SearchResultsEmpty
diff --git a/src/components/Search/index.module.scss b/src/components/Search/index.module.scss
new file mode 100644
index 00000000..114660b4
--- /dev/null
+++ b/src/components/Search/index.module.scss
@@ -0,0 +1,46 @@
+@import 'variables';
+
+.search {
+  position: absolute;
+  left: $spacer / 2;
+  right: $spacer / 2;
+  top: -($spacer / 4);
+  z-index: 10;
+
+  input {
+    width: 100%;
+  }
+
+  @media (min-width: $screen-md) {
+    left: 0;
+    right: 0;
+  }
+}
+
+.appear,
+.enter {
+  opacity: 0.01;
+  transform: translate3d(0, -100px, 0);
+
+  &.appearActive,
+  &.enterActive {
+    opacity: 1;
+    transition: 0.2s ease-out;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.exit {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+
+  &.exitActive {
+    opacity: 0.01;
+    transition: 0.2s ease-in;
+    transform: translate3d(0, -100px, 0);
+  }
+}
+
+:global(.hasSearchOpen) {
+  overflow: hidden;
+}
diff --git a/src/components/Search/index.test.tsx b/src/components/Search/index.test.tsx
new file mode 100644
index 00000000..8b4b4810
--- /dev/null
+++ b/src/components/Search/index.test.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+
+import Search from '.'
+import { useStaticQuery } from 'gatsby'
+
+describe('Search', () => {
+  beforeEach(() => {
+    useStaticQuery.mockImplementation(() => {
+      return {
+        allMarkdownRemark: {
+          edges: [
+            {
+              node: {
+                id: 'ddd',
+                frontmatter: {
+                  title: 'Hello',
+                  image: {
+                    childImageSharp: 'hello'
+                  }
+                },
+                fields: {
+                  slug: '/hello/'
+                }
+              }
+            }
+          ]
+        }
+      }
+    })
+
+    const portalRoot = document.createElement('div')
+    portalRoot.setAttribute('id', 'document')
+    document.body.appendChild(portalRoot)
+  })
+
+  it('can be opened', () => {
+    const { getByTitle, getByPlaceholderText } = render(<Search lng="en" />)
+    fireEvent.click(getByTitle('Search'))
+    fireEvent.change(getByPlaceholderText('Search everything'), {
+      target: { value: 'hello' }
+    })
+    fireEvent.click(getByTitle('Close search'))
+  })
+})
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
new file mode 100644
index 00000000..f3a4be52
--- /dev/null
+++ b/src/components/Search/index.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from 'react'
+import Helmet from 'react-helmet'
+import { CSSTransition } from 'react-transition-group'
+import SearchInput from './SearchInput'
+import SearchButton from './SearchButton'
+import SearchResults from './SearchResults'
+
+import styles from './index.module.scss'
+
+function getSearchResults(query: string, lng: string) {
+  if (!query || !window.__LUNR__) return []
+  const lunrIndex = window.__LUNR__[lng]
+  const results = lunrIndex.index.search(query)
+  return results.map(({ ref }: { ref: string }) => lunrIndex.store[ref])
+}
+
+export default function Search({ lng }: { lng: string }) {
+  const [searchOpen, setSearchOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState([])
+
+  const toggleSearch = () => {
+    setSearchOpen(!searchOpen)
+  }
+
+  const search = (event: any) => {
+    const query = event.target.value
+    // wildcard search https://lunrjs.com/guides/searching.html#wildcards
+    const results = query.length > 1 ? getSearchResults(`${query}*`, lng) : []
+    setQuery(query)
+    setResults(results)
+  }
+
+  return (
+    <>
+      <SearchButton onClick={toggleSearch} />
+
+      {searchOpen && (
+        <>
+          <Helmet>
+            <body className="hasSearchOpen" />
+          </Helmet>
+
+          <CSSTransition
+            appear={searchOpen}
+            in={searchOpen}
+            timeout={200}
+            classNames={styles}
+          >
+            <section className={styles.search}>
+              <SearchInput
+                value={query}
+                onChange={(e: Event) => search(e)}
+                onToggle={toggleSearch}
+              />
+            </section>
+          </CSSTransition>
+
+          <SearchResults
+            searchQuery={query}
+            results={results}
+            toggleSearch={toggleSearch}
+          />
+        </>
+      )}
+    </>
+  )
+}
diff --git a/src/components/Web3Donation/Account.module.scss b/src/components/Web3Donation/Account.module.scss
index d0ebeeb3..6903b641 100644
--- a/src/components/Web3Donation/Account.module.scss
+++ b/src/components/Web3Donation/Account.module.scss
@@ -1,19 +1,19 @@
 @import 'variables';
 
 .account {
-    font-size: $font-size-mini;
-    color: $brand-grey-light;
-    max-width: 8rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  font-size: $font-size-mini;
+  color: $brand-grey-light;
+  max-width: 8rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .identicon {
-    border-radius: 50%;
-    overflow: hidden;
-    display: inline-block;
-    vertical-align: middle;
-    margin-right: $spacer / 8;
-    margin-left: $spacer;
+  border-radius: 50%;
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: $spacer / 8;
+  margin-left: $spacer;
 }
diff --git a/src/components/Web3Donation/Account.jsx b/src/components/Web3Donation/Account.tsx
similarity index 68%
rename from src/components/Web3Donation/Account.jsx
rename to src/components/Web3Donation/Account.tsx
index 8f044448..1c9af6e9 100644
--- a/src/components/Web3Donation/Account.jsx
+++ b/src/components/Web3Donation/Account.tsx
@@ -1,17 +1,12 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import Blockies from 'react-blockies'
 import styles from './Account.module.scss'
 
-const Account = ({ account }) => (
+const Account = ({ account }: { account: string }) => (
   <div className={styles.account} title={account}>
     <Blockies seed={account} scale={2} size={8} className={styles.identicon} />
     {account}
   </div>
 )
 
-Account.propTypes = {
-  account: PropTypes.string.isRequired
-}
-
 export default Account
diff --git a/src/components/Web3Donation/Alerts.module.scss b/src/components/Web3Donation/Alerts.module.scss
index 1b3aa060..d1803bb9 100644
--- a/src/components/Web3Donation/Alerts.module.scss
+++ b/src/components/Web3Donation/Alerts.module.scss
@@ -2,44 +2,44 @@
 @import 'mixins';
 
 .alert {
-    font-size: $font-size-small;
+  font-size: $font-size-small;
+  display: inline-block;
+
+  &:empty {
+    display: none;
+  }
+
+  &::after {
+    overflow: hidden;
     display: inline-block;
-
-    &:empty {
-        display: none;
-    }
-
-    &::after {
-        overflow: hidden;
-        display: inline-block;
-        vertical-align: bottom;
-        animation: ellipsis steps(4, end) 1s infinite;
-        content: '\2026'; // ascii code for the ellipsis character
-        width: 0;
-        position: absolute;
-    }
+    vertical-align: bottom;
+    animation: ellipsis steps(4, end) 1s infinite;
+    content: '\2026'; // ascii code for the ellipsis character
+    width: 0;
+    position: absolute;
+  }
 }
 
 .error {
-    composes: alert;
-    color: darken($alert-error, 60%);
+  composes: alert;
+  color: darken($alert-error, 60%);
 
-    &::after {
-        display: none;
-    }
+  &::after {
+    display: none;
+  }
 }
 
 .success {
-    composes: alert;
-    color: darken($alert-success, 60%);
+  composes: alert;
+  color: darken($alert-success, 60%);
 
-    &::after {
-        display: none;
-    }
+  &::after {
+    display: none;
+  }
 }
 
 @keyframes ellipsis {
-    to {
-        width: .75rem;
-    }
+  to {
+    width: 0.75rem;
+  }
 }
diff --git a/src/components/Web3Donation/Alerts.jsx b/src/components/Web3Donation/Alerts.tsx
similarity index 59%
rename from src/components/Web3Donation/Alerts.jsx
rename to src/components/Web3Donation/Alerts.tsx
index 3ff8b278..80b7f1ab 100644
--- a/src/components/Web3Donation/Alerts.jsx
+++ b/src/components/Web3Donation/Alerts.tsx
@@ -1,8 +1,10 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
+import React from 'react'
 import styles from './Alerts.module.scss'
 
-export const alertMessages = (networkName, transactionHash) => ({
+export const alertMessages = (
+  networkName?: string,
+  transactionHash?: string
+) => ({
   noAccount:
     'Web3 detected, but no account. Are you logged into your MetaMask account?',
   noCorrectNetwork: `Please connect to <strong>Main</strong> network. You are on <strong>${networkName}</strong> right now.`,
@@ -14,31 +16,31 @@ export const alertMessages = (networkName, transactionHash) => ({
   success: 'Confirmed. You are awesome, thanks!'
 })
 
-export default class Alerts extends PureComponent {
-  static propTypes = {
-    message: PropTypes.object,
-    transactionHash: PropTypes.string
-  }
-
-  constructMessage = () => {
-    const { transactionHash, message } = this.props
-
+export default function Alerts({
+  transactionHash,
+  message
+}: {
+  transactionHash: string | null
+  message: { text: MessageChannel; status: string } | null
+}) {
+  const constructMessage = () => {
     let messageOutput
 
     if (transactionHash) {
       messageOutput =
+        message &&
         message.text +
-        '<br />' +
-        alertMessages(null, transactionHash).transaction
+          '<br />' +
+          alertMessages(null, transactionHash).transaction
     } else {
-      messageOutput = message.text
+      messageOutput = message && message.text
     }
 
     return messageOutput
   }
 
-  classes() {
-    const { status } = this.props.message
+  const classes = () => {
+    const { status } = message
 
     if (status === 'success') {
       return styles.success
@@ -48,12 +50,10 @@ export default class Alerts extends PureComponent {
     return styles.alert
   }
 
-  render() {
-    return (
-      <div
-        className={this.classes()}
-        dangerouslySetInnerHTML={{ __html: this.constructMessage() }}
-      />
-    )
-  }
+  return (
+    <div
+      className={classes()}
+      dangerouslySetInnerHTML={{ __html: constructMessage() }}
+    />
+  )
 }
diff --git a/src/components/Web3Donation/Conversion.module.scss b/src/components/Web3Donation/Conversion.module.scss
index 3caec195..6cf2c12c 100644
--- a/src/components/Web3Donation/Conversion.module.scss
+++ b/src/components/Web3Donation/Conversion.module.scss
@@ -1,11 +1,11 @@
 @import 'variables';
 
 .conversion {
-    font-size: $font-size-mini;
-    color: $brand-grey-light;
-    text-align: center;
+  font-size: $font-size-mini;
+  color: $brand-grey-light;
+  text-align: center;
 
-    span {
-        margin-left: $spacer / 2;
-    }
+  span {
+    margin-left: $spacer / 2;
+  }
 }
diff --git a/src/components/Web3Donation/Conversion.jsx b/src/components/Web3Donation/Conversion.tsx
similarity index 80%
rename from src/components/Web3Donation/Conversion.jsx
rename to src/components/Web3Donation/Conversion.tsx
index c2f0c430..e4551aae 100644
--- a/src/components/Web3Donation/Conversion.jsx
+++ b/src/components/Web3Donation/Conversion.tsx
@@ -1,13 +1,11 @@
 import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
 import { getFiat } from './utils'
 import styles from './Conversion.module.scss'
 
-export default class Conversion extends PureComponent {
-  static propTypes = {
-    amount: PropTypes.string.isRequired
-  }
-
+export default class Conversion extends PureComponent<
+  { amount: string },
+  { euro: string; dollar: string }
+> {
   state = {
     euro: '0.00',
     dollar: '0.00'
@@ -17,7 +15,7 @@ export default class Conversion extends PureComponent {
     this.getFiatResponse()
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: any) {
     const { amount } = this.props
 
     if (amount !== prevProps.amount) {
diff --git a/src/components/Web3Donation/InputGroup.jsx b/src/components/Web3Donation/InputGroup.jsx
deleted file mode 100644
index 1bc3ea20..00000000
--- a/src/components/Web3Donation/InputGroup.jsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import Input from '../atoms/Input'
-import Account from './Account'
-import Conversion from './Conversion'
-import styles from './InputGroup.module.scss'
-
-export default class InputGroup extends PureComponent {
-  static propTypes = {
-    amount: PropTypes.string.isRequired,
-    onAmountChange: PropTypes.func.isRequired,
-    sendTransaction: PropTypes.func.isRequired,
-    selectedAccount: PropTypes.string
-  }
-
-  render() {
-    const {
-      amount,
-      onAmountChange,
-      sendTransaction,
-      selectedAccount
-    } = this.props
-
-    return (
-      <div className={styles.inputGroup}>
-        <div className={styles.input}>
-          <Input
-            type="number"
-            value={amount}
-            onChange={onAmountChange}
-            min="0"
-            step="0.01"
-          />
-          <div className={styles.currency}>
-            <span>ETH</span>
-          </div>
-        </div>
-        <button className="btn btn-primary" onClick={sendTransaction}>
-          Make it rain
-        </button>
-        <div className={styles.infoline}>
-          <Conversion amount={amount} />
-          {selectedAccount && <Account account={selectedAccount} />}
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/src/components/Web3Donation/InputGroup.module.scss b/src/components/Web3Donation/InputGroup.module.scss
index 06e07cf1..fe36a928 100644
--- a/src/components/Web3Donation/InputGroup.module.scss
+++ b/src/components/Web3Donation/InputGroup.module.scss
@@ -2,97 +2,97 @@
 @import 'mixins';
 
 .inputGroup {
-    max-width: 18rem;
-    margin: auto;
-    position: relative;
-    animation: fadeIn .8s ease-out backwards;
+  max-width: 18rem;
+  margin: auto;
+  position: relative;
+  animation: fadeIn 0.8s ease-out backwards;
+
+  @media (min-width: $screen-sm) {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  button {
+    width: 100%;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-color: lighten($brand-grey-light, 10%);
 
     @media (min-width: $screen-sm) {
-        display: flex;
-        flex-wrap: wrap;
-    }
-
-    button {
-        width: 100%;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        border-color: lighten($brand-grey-light, 10%);
-
-        @media (min-width: $screen-sm) {
-            width: 50%;
-            border-top-right-radius: $border-radius;
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-            border-left: 0;
-        }
+      width: 50%;
+      border-top-right-radius: $border-radius;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-left: 0;
     }
+  }
 }
 
 .input {
-    position: relative;
+  position: relative;
+
+  @media (min-width: $screen-sm) {
+    width: 50%;
+  }
+
+  input {
+    text-align: center;
+    border: 1px solid lighten($brand-grey-light, 20%);
+    font-size: $font-size-large;
+    padding: $spacer / 3 $spacer / 3 $spacer / 3 $spacer * 1.7;
+    border-bottom: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 
     @media (min-width: $screen-sm) {
-        width: 50%;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: $border-radius;
+      border-bottom: 1px solid lighten($brand-grey-light, 20%);
+      border-right: 0;
     }
 
-    input {
-        text-align: center;
-        border: 1px solid lighten($brand-grey-light, 20%);
-        font-size: $font-size-large;
-        padding: $spacer / 3 $spacer / 3 $spacer / 3 $spacer * 1.7;
-        border-bottom: 0;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-
-        @media (min-width: $screen-sm) {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-            border-bottom-left-radius: $border-radius;
-            border-bottom: 1px solid lighten($brand-grey-light, 20%);
-            border-right: 0;
-        }
-
-        &::-webkit-inner-spin-button {
-            margin-left: -($spacer / 2);
-        }
+    &::-webkit-inner-spin-button {
+      margin-left: -($spacer / 2);
     }
+  }
 }
 
 .currency {
-    position: absolute;
-    top: 1px;
-    bottom: 1px;
-    left: 1px;
-    font-size: $font-size-small;
-    padding: $spacer / 3;
-    color: $brand-grey-light;
-    background: $brand-light;
-    border-right: 1px solid rgba($brand-grey-light, .4);
-    border-top-left-radius: $border-radius;
-    border-bottom-left-radius: $border-radius;
-    display: flex;
-    align-items: center;
+  position: absolute;
+  top: 1px;
+  bottom: 1px;
+  left: 1px;
+  font-size: $font-size-small;
+  padding: $spacer / 3;
+  color: $brand-grey-light;
+  background: $brand-light;
+  border-right: 1px solid rgba($brand-grey-light, 0.4);
+  border-top-left-radius: $border-radius;
+  border-bottom-left-radius: $border-radius;
+  display: flex;
+  align-items: center;
 }
 
 .infoline {
-    flex-basis: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: $spacer / 4;
-    animation: fadeIn .5s .8s ease-out backwards;
+  flex-basis: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: $spacer / 4;
+  animation: fadeIn 0.5s 0.8s ease-out backwards;
 }
 
 .message {
-    composes: message from './index.module.scss';
+  composes: message from './index.module.scss';
 }
 
 @keyframes fadeIn {
-    from {
-        opacity: .01;
-    }
+  from {
+    opacity: 0.01;
+  }
 
-    to {
-        opacity: 1;
-    }
+  to {
+    opacity: 1;
+  }
 }
diff --git a/src/components/Web3Donation/InputGroup.tsx b/src/components/Web3Donation/InputGroup.tsx
new file mode 100644
index 00000000..8e12877d
--- /dev/null
+++ b/src/components/Web3Donation/InputGroup.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import Input from '../atoms/Input'
+import Account from './Account'
+import Conversion from './Conversion'
+import styles from './InputGroup.module.scss'
+
+export default function InputGroup({
+  amount,
+  onAmountChange,
+  sendTransaction,
+  selectedAccount
+}: {
+  amount: string
+  onAmountChange(target: any): void
+  sendTransaction(): void
+  selectedAccount?: string | null
+}) {
+  return (
+    <div className={styles.inputGroup}>
+      <div className={styles.input}>
+        <Input
+          type="number"
+          value={amount}
+          onChange={onAmountChange}
+          min="0"
+          step="0.01"
+        />
+        <div className={styles.currency}>
+          <span>ETH</span>
+        </div>
+      </div>
+      <button className="btn btn-primary" onClick={sendTransaction}>
+        Make it rain
+      </button>
+      <div className={styles.infoline}>
+        <Conversion amount={amount} />
+        {selectedAccount && <Account account={selectedAccount} />}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/Web3Donation/index.module.scss b/src/components/Web3Donation/index.module.scss
index 93743afb..4d486c39 100644
--- a/src/components/Web3Donation/index.module.scss
+++ b/src/components/Web3Donation/index.module.scss
@@ -2,60 +2,60 @@
 @import 'mixins';
 
 .web3 {
-    @include divider;
+  @include divider;
 
-    width: 100%;
-    text-align: center;
-    margin-top: $spacer / 2;
-    margin-bottom: $spacer;
-    padding-bottom: $spacer * 1.5;
+  width: 100%;
+  text-align: center;
+  margin-top: $spacer / 2;
+  margin-bottom: $spacer;
+  padding-bottom: $spacer * 1.5;
 
-    small {
-        color: darken($alert-info, 60%);
-        margin-top: -($spacer / 2);
-        display: block;
-    }
+  small {
+    color: darken($alert-info, 60%);
+    margin-top: -($spacer / 2);
+    display: block;
+  }
 }
 
 .web3Row {
-    min-height: 77px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  min-height: 77px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-    &:empty {
-        display: none;
-    }
+  &:empty {
+    display: none;
+  }
 }
 
 .message {
-    font-size: $font-size-small;
-    position: relative;
+  font-size: $font-size-small;
+  position: relative;
 
-    &::after {
-        overflow: hidden;
-        display: inline-block;
-        vertical-align: bottom;
-        animation: ellipsis steps(4, end) 1s infinite;
-        content: '\2026'; // ascii code for the ellipsis character
-        width: 0;
-        position: absolute;
-        left: 100%;
-        bottom: 0;
-    }
+  &::after {
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: bottom;
+    animation: ellipsis steps(4, end) 1s infinite;
+    content: '\2026'; // ascii code for the ellipsis character
+    width: 0;
+    position: absolute;
+    left: 100%;
+    bottom: 0;
+  }
 }
 
 .success {
-    composes: message;
-    color: green;
+  composes: message;
+  color: green;
 
-    &::after {
-        display: none;
-    }
+  &::after {
+    display: none;
+  }
 }
 
 @keyframes ellipsis {
-    to {
-        width: .75rem;
-    }
+  to {
+    width: 0.75rem;
+  }
 }
diff --git a/src/components/Web3Donation/index.jsx b/src/components/Web3Donation/index.tsx
similarity index 100%
rename from src/components/Web3Donation/index.jsx
rename to src/components/Web3Donation/index.tsx
diff --git a/src/components/Web3Donation/utils.js b/src/components/Web3Donation/utils.ts
similarity index 80%
rename from src/components/Web3Donation/utils.js
rename to src/components/Web3Donation/utils.ts
index 0752d4ff..eacf5a1d 100644
--- a/src/components/Web3Donation/utils.js
+++ b/src/components/Web3Donation/utils.ts
@@ -1,5 +1,50 @@
 import Web3 from 'web3'
 
+export class Logger {
+  static dispatch(verb: any, ...args: any) {
+    // eslint-disable-next-line no-console
+    console[verb](...args)
+  }
+
+  static log(...args: any) {
+    Logger.dispatch('log', ...args)
+  }
+
+  static debug(...args: any) {
+    Logger.dispatch('debug', ...args)
+  }
+
+  static error(...args: any) {
+    Logger.dispatch('error', ...args)
+  }
+}
+
+export const getNetworkName = (netId: number) => {
+  let networkName
+
+  switch (netId) {
+    case 1:
+      networkName = 'Main'
+      break
+    case 2:
+      networkName = 'Morden'
+      break
+    case 3:
+      networkName = 'Ropsten'
+      break
+    case 4:
+      networkName = 'Rinkeby'
+      break
+    case 42:
+      networkName = 'Kovan'
+      break
+    default:
+      networkName = 'Private'
+  }
+
+  return networkName
+}
+
 export const getWeb3 = async () => {
   let web3
 
@@ -30,77 +75,34 @@ export const getWeb3 = async () => {
   }
 }
 
-export const getAccounts = async web3 => {
+export const getAccounts = async (web3: Web3) => {
   const ethAccounts = await web3.eth.getAccounts()
 
   return ethAccounts
 }
 
-export const getNetwork = async web3 => {
+export const getNetwork = async (web3: Web3) => {
   const netId = await web3.eth.net.getId()
   const networkName = getNetworkName(netId)
 
   return { netId, networkName }
 }
 
-export const getNetworkName = netId => {
-  let networkName
-
-  switch (netId) {
-    case 1:
-      networkName = 'Main'
-      break
-    case 2:
-      networkName = 'Morden'
-      break
-    case 3:
-      networkName = 'Ropsten'
-      break
-    case 4:
-      networkName = 'Rinkeby'
-      break
-    case 42:
-      networkName = 'Kovan'
-      break
-    default:
-      networkName = 'Private'
-  }
-
-  return networkName
-}
-
-export const getFiat = async amount => {
+export const getFiat = async (amount: number) => {
   const url = 'https://api.coinmarketcap.com/v1/ticker/ethereum/?convert=EUR'
 
   try {
     const response = await fetch(url)
     if (!response.ok) Logger.error(response.statusText)
     const data = await response.json()
+    /* eslint-disable @typescript-eslint/camelcase */
     const { price_usd, price_eur } = data[0]
     const dollar = (amount * price_usd).toFixed(2)
     const euro = (amount * price_eur).toFixed(2)
+    /* eslint-enable @typescript-eslint/camelcase */
 
     return { dollar, euro }
   } catch (error) {
     Logger.error(error)
   }
 }
-
-export class Logger {
-  static dispatch(verb, ...args) {
-    // eslint-disable-next-line no-console
-    console[verb](...args)
-  }
-
-  static log(...args) {
-    Logger.dispatch('log', ...args)
-  }
-
-  static debug(...args) {
-    Logger.dispatch('debug', ...args)
-  }
-
-  static error(...args) {
-    Logger.dispatch('error', ...args)
-  }
-}
diff --git a/src/components/atoms/Changelog.jsx b/src/components/atoms/Changelog.jsx
deleted file mode 100644
index 671a7555..00000000
--- a/src/components/atoms/Changelog.jsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { StaticQuery, graphql } from 'gatsby'
-import remark from 'remark'
-import remarkReact from 'remark-react'
-import styles from './Changelog.module.scss'
-
-const queryGithub = graphql`
-  query GitHubReposInfo {
-    github {
-      viewer {
-        repositories(first: 100, privacy: PUBLIC, isFork: false) {
-          edges {
-            node {
-              name
-              url
-              owner {
-                login
-              }
-              object(expression: "master:CHANGELOG.md") {
-                id
-                ... on GitHub_Blob {
-                  text
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-`
-
-const Changelog = ({ repo }) => (
-  <StaticQuery
-    query={queryGithub}
-    render={data => {
-      const repositoriesGitHub = data.github.viewer.repositories.edges
-
-      let repoFilteredArray = repositoriesGitHub
-        .map(({ node }) => {
-          if (node.name === repo) return node
-        })
-        .filter(n => n)
-
-      const repoMatch = repoFilteredArray[0]
-      const { object, url, owner } = repoMatch
-
-      if (repoMatch === undefined || object === undefined) return null
-
-      const changelogHtml =
-        object &&
-        remark()
-          .use(remarkReact)
-          .processSync(object.text).contents
-
-      const filePathUrl = `${url}/tree/master/CHANGELOG.md`
-      const filePathDisplay = `${owner.login}/${repo}:CHANGELOG.md`
-
-      return (
-        <div className={styles.changelog}>
-          <h2 className={styles.changelogTitle} id="changelog">
-            Changelog
-          </h2>
-          <div className={styles.changelogContent}>
-            {changelogHtml}
-            <p className={styles.changelogSource}>
-              <em>
-                sourced from{' '}
-                <a href={filePathUrl}>
-                  <code>{filePathDisplay}</code>
-                </a>
-              </em>
-            </p>
-          </div>
-        </div>
-      )
-    }}
-  />
-)
-
-Changelog.propTypes = {
-  repo: PropTypes.string.isRequired
-}
-
-export default Changelog
diff --git a/src/components/atoms/Changelog.module.scss b/src/components/atoms/Changelog.module.scss
index adb8cdbc..101ef663 100644
--- a/src/components/atoms/Changelog.module.scss
+++ b/src/components/atoms/Changelog.module.scss
@@ -1,69 +1,69 @@
 @import 'variables';
 
 .changelogTitle {
-    margin-top: $spacer * 3;
-    margin-bottom: 0;
+  margin-top: $spacer * 3;
+  margin-bottom: 0;
 }
 
 .changelogContent {
-    padding-top: $spacer * 2;
-    padding-left: $spacer / 2;
-    margin-left: $spacer / 2;
-    border-left: 1px solid $brand-grey-dimmed;
+  padding-top: $spacer * 2;
+  padding-left: $spacer / 2;
+  margin-left: $spacer / 2;
+  border-left: 1px solid $brand-grey-dimmed;
 
-    h2 {
-        position: relative;
+  h2 {
+    position: relative;
 
-        &::before {
-            content: '';
-            width: .4rem;
-            height: .4rem;
-            border-radius: 50%;
-            display: inline-block;
-            background: $color-headings;
-            position: absolute;
-            left: -($spacer / 1.5);
-            top: $font-size-large / 3;
-        }
+    &::before {
+      content: '';
+      width: 0.4rem;
+      height: 0.4rem;
+      border-radius: 50%;
+      display: inline-block;
+      background: $color-headings;
+      position: absolute;
+      left: -($spacer / 1.5);
+      top: $font-size-large / 3;
     }
+  }
 
-    h2,
-    h3 {
-        font-size: $font-size-large;
-        background: none;
-        padding: 0;
-        margin-left: 0;
-        margin-top: $spacer / 8;
-        margin-bottom: $spacer / $line-height;
-    }
+  h2,
+  h3 {
+    font-size: $font-size-large;
+    background: none;
+    padding: 0;
+    margin-left: 0;
+    margin-top: $spacer / 8;
+    margin-bottom: $spacer / $line-height;
+  }
 
-    ul {
-        font-size: $font-size-small;
-        margin-left: $spacer / 8;
-    }
+  ul {
+    font-size: $font-size-small;
+    margin-left: $spacer / 8;
+  }
 }
 
 .changelogSource {
-    font-size: $font-size-mini;
-    font-family: $font-family-base;
-    font-weight: $font-weight-base;
-    padding-top: $spacer / 2;
-    padding-bottom: $spacer / 2;
+  font-size: $font-size-mini;
+  font-family: $font-family-base;
+  font-weight: $font-weight-base;
+  padding-top: $spacer / 2;
+  padding-bottom: $spacer / 2;
 
-    &,
-    a {
-        color: $brand-grey-light;
+  &,
+  a {
+    color: $brand-grey-light;
+  }
+
+  a {
+    margin-left: $spacer / 8;
+
+    code {
+      font-size: ($font-size-mini * 0.9);
     }
 
-    a {
-        margin-left: $spacer / 8;
-
-        code {
-            font-size: ($font-size-mini * .9);
-        }
-
-        &:hover {
-            color: $link-color;
-        }
+    &:hover {
+      color: $link-color;
     }
+  }
 }
diff --git a/src/components/atoms/Changelog.tsx b/src/components/atoms/Changelog.tsx
new file mode 100644
index 00000000..35cf1ec6
--- /dev/null
+++ b/src/components/atoms/Changelog.tsx
@@ -0,0 +1,75 @@
+import React from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
+import remark from 'remark'
+import remarkReact from 'remark-react'
+import styles from './Changelog.module.scss'
+
+const queryGithub = graphql`
+  query GitHubReposInfo {
+    github {
+      viewer {
+        repositories(first: 100, privacy: PUBLIC, isFork: false) {
+          edges {
+            node {
+              name
+              url
+              owner {
+                login
+              }
+              object(expression: "master:CHANGELOG.md") {
+                id
+                ... on GitHub_Blob {
+                  text
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`
+
+export default function Changelog({ repo }: { repo: string }) {
+  const data = useStaticQuery(queryGithub)
+  const repositoriesGitHub = data.github.viewer.repositories.edges
+
+  const repoFilteredArray = repositoriesGitHub
+    .map(({ node }: { node: any }) => {
+      if (node.name === repo) return node
+    })
+    .filter((n: any) => n)
+
+  const repoMatch = repoFilteredArray[0]
+  const { object, url, owner } = repoMatch
+
+  if (repoMatch === undefined || object === undefined) return null
+
+  const changelogHtml =
+    object &&
+    remark()
+      .use(remarkReact)
+      .processSync(object.text).contents
+
+  const filePathUrl = `${url}/tree/master/CHANGELOG.md`
+  const filePathDisplay = `${owner.login}/${repo}:CHANGELOG.md`
+
+  return (
+    <div className={styles.changelog}>
+      <h2 className={styles.changelogTitle} id="changelog">
+        Changelog
+      </h2>
+      <div className={styles.changelogContent}>
+        {changelogHtml}
+        <p className={styles.changelogSource}>
+          <em>
+            sourced from{' '}
+            <a href={filePathUrl}>
+              <code>{filePathDisplay}</code>
+            </a>
+          </em>
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/atoms/Container.jsx b/src/components/atoms/Container.jsx
deleted file mode 100644
index e5aaa116..00000000
--- a/src/components/atoms/Container.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styles from './Container.module.scss'
-
-const Container = ({ children }) => (
-  <section className={styles.container}>{children}</section>
-)
-
-Container.propTypes = {
-  children: PropTypes.any.isRequired
-}
-
-export default Container
diff --git a/src/components/atoms/Container.module.scss b/src/components/atoms/Container.module.scss
index 27ede058..9f0e536d 100644
--- a/src/components/atoms/Container.module.scss
+++ b/src/components/atoms/Container.module.scss
@@ -1,5 +1,5 @@
 .container {
-    max-width: 35rem;
-    margin-left: auto;
-    margin-right: auto;
+  max-width: 35rem;
+  margin-left: auto;
+  margin-right: auto;
 }
diff --git a/src/components/atoms/Container.test.jsx b/src/components/atoms/Container.test.tsx
similarity index 100%
rename from src/components/atoms/Container.test.jsx
rename to src/components/atoms/Container.test.tsx
diff --git a/src/components/atoms/Container.tsx b/src/components/atoms/Container.tsx
new file mode 100644
index 00000000..f36143e6
--- /dev/null
+++ b/src/components/atoms/Container.tsx
@@ -0,0 +1,10 @@
+import React, { ReactElement } from 'react'
+import styles from './Container.module.scss'
+
+export default function Container({
+  children
+}: {
+  children: any
+}): ReactElement {
+  return <section className={styles.container}>{children}</section>
+}
diff --git a/src/components/atoms/Exif.jsx b/src/components/atoms/Exif.jsx
deleted file mode 100644
index ee788675..00000000
--- a/src/components/atoms/Exif.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import ExifMap from './ExifMap'
-import styles from './Exif.module.scss'
-
-export default class Exif extends PureComponent {
-  static propTypes = {
-    exif: PropTypes.object
-  }
-
-  render() {
-    const {
-      iso,
-      model,
-      fstop,
-      shutterspeed,
-      focalLength,
-      exposure,
-      gps
-    } = this.props.exif
-
-    return (
-      <>
-        <aside className={styles.exif}>
-          <div className={styles.data}>
-            {model && <span title="Camera model">{model}</span>}
-            {fstop && <span title="Aperture">{fstop}</span>}
-            {shutterspeed && <span title="Shutter speed">{shutterspeed}</span>}
-            {exposure && <span title="Exposure">{exposure}</span>}
-            {iso && <span title="ISO">{iso}</span>}
-            {focalLength && <span title="Focal length">{focalLength}</span>}
-          </div>
-          <div className={styles.map}>{gps && <ExifMap gps={gps} />}</div>
-        </aside>
-      </>
-    )
-  }
-}
diff --git a/src/components/atoms/Exif.module.scss b/src/components/atoms/Exif.module.scss
index ee1a9f35..fb5a40a0 100644
--- a/src/components/atoms/Exif.module.scss
+++ b/src/components/atoms/Exif.module.scss
@@ -2,57 +2,57 @@
 @import 'mixins';
 
 .exif {
-    margin-top: -($spacer * 1.5);
-    margin-bottom: $spacer * 2;
+  margin-top: -($spacer * 1.5);
+  margin-bottom: $spacer * 2;
 }
 
 .data {
-    @include breakoutviewport;
+  @include breakoutviewport;
 
-    font-size: $font-size-mini;
-    color: $brand-grey-light;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    text-align: center;
-    margin-bottom: -3px;
+  font-size: $font-size-mini;
+  color: $brand-grey-light;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  text-align: center;
+  margin-bottom: -3px;
+
+  span {
+    display: block;
+    flex: 1 1 20%;
+    white-space: nowrap;
+    padding: $spacer / 1.5;
+    border-bottom: 1px solid $brand-grey-dimmed;
+
+    &:first-child {
+      flex-basis: 100%;
+    }
+  }
+
+  @media (min-width: $screen-sm) {
+    margin-bottom: 0;
 
     span {
-        display: block;
-        flex: 1 1 20%;
-        white-space: nowrap;
-        padding: $spacer / 1.5;
-        border-bottom: 1px solid $brand-grey-dimmed;
+      border-left: 1px solid $brand-grey-dimmed;
+      border-bottom: 0;
+      padding: $spacer;
 
-        &:first-child {
-            flex-basis: 100%;
-        }
-    }
-
-    @media (min-width: $screen-sm) {
-        margin-bottom: 0;
-
-        span {
-            border-left: 1px solid $brand-grey-dimmed;
-            border-bottom: 0;
-            padding: $spacer;
-
-            &,
-            &:first-child {
-                flex: 1 1 auto;
-            }
-
-            &:first-child {
-                border-left: 0;
-            }
-        }
+      &,
+      &:first-child {
+        flex: 1 1 auto;
+      }
+
+      &:first-child {
+        border-left: 0;
+      }
     }
+  }
 }
 
 .map {
-    @include breakoutviewport;
-    @include media-frame;
+  @include breakoutviewport;
+  @include media-frame;
 
-    overflow: hidden;
-    height: 160px;
+  overflow: hidden;
+  height: 160px;
 }
diff --git a/src/components/atoms/Exif.test.jsx b/src/components/atoms/Exif.test.tsx
similarity index 100%
rename from src/components/atoms/Exif.test.jsx
rename to src/components/atoms/Exif.test.tsx
diff --git a/src/components/atoms/Exif.tsx b/src/components/atoms/Exif.tsx
new file mode 100644
index 00000000..2cdb5547
--- /dev/null
+++ b/src/components/atoms/Exif.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import ExifMap from './ExifMap'
+import styles from './Exif.module.scss'
+
+interface ExifProps {
+  iso: string
+  model: string
+  fstop: string
+  shutterspeed: string
+  focalLength: string
+  exposure: string
+  gps: {
+    latitude: string
+    longitude: string
+  }
+}
+
+export default function Exif({ exif }: { exif: ExifProps }) {
+  const { iso, model, fstop, shutterspeed, focalLength, exposure, gps } = exif
+
+  return (
+    <aside className={styles.exif}>
+      <div className={styles.data}>
+        {model && <span title="Camera model">{model}</span>}
+        {fstop && <span title="Aperture">{fstop}</span>}
+        {shutterspeed && <span title="Shutter speed">{shutterspeed}</span>}
+        {exposure && <span title="Exposure">{exposure}</span>}
+        {iso && <span title="ISO">{iso}</span>}
+        {focalLength && <span title="Focal length">{focalLength}</span>}
+      </div>
+      <div className={styles.map}>{gps && <ExifMap gps={gps} />}</div>
+    </aside>
+  )
+}
diff --git a/src/components/atoms/ExifMap.jsx b/src/components/atoms/ExifMap.tsx
similarity index 56%
rename from src/components/atoms/ExifMap.jsx
rename to src/components/atoms/ExifMap.tsx
index c2107739..86169074 100644
--- a/src/components/atoms/ExifMap.jsx
+++ b/src/components/atoms/ExifMap.tsx
@@ -1,5 +1,4 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
+import React, { useState } from 'react'
 import Map from 'pigeon-maps'
 import Marker from 'pigeon-marker'
 
@@ -9,7 +8,11 @@ const MAPBOX_ACCESS_TOKEN =
 const retina =
   typeof window !== 'undefined' && window.devicePixelRatio >= 2 ? '@2x' : ''
 
-const mapbox = (mapboxId, accessToken) => (x, y, z) =>
+const mapbox = (mapboxId: string, accessToken: string) => (
+  x: string,
+  y: string,
+  z: string
+) =>
   `https://api.mapbox.com/styles/v1/mapbox/${mapboxId}/tiles/256/${z}/${x}/${y}${retina}?access_token=${accessToken}`
 
 const providers = {
@@ -28,38 +31,30 @@ const providers = {
   dark: mapbox('dark-v9', MAPBOX_ACCESS_TOKEN)
 }
 
-export default class ExifMap extends PureComponent {
-  state = { zoom: 12 }
+export default function ExifMap({
+  gps
+}: {
+  gps: { latitude: string; longitude: string }
+}) {
+  const [zoom, setZoom] = useState(12)
 
-  static propTypes = {
-    gps: PropTypes.object
+  const zoomIn = () => {
+    setZoom(Math.min(zoom + 4, 20))
   }
 
-  zoomIn = () => {
-    this.setState({
-      zoom: Math.min(this.state.zoom + 4, 20)
-    })
-  }
+  const { latitude, longitude } = gps
 
-  render() {
-    const { latitude, longitude } = this.props.gps
-
-    return (
-      <Map
-        center={[latitude, longitude]}
-        zoom={this.state.zoom}
-        height={160}
-        attribution={false}
-        provider={providers['light']}
-        metaWheelZoom={true}
-        metaWheelZoomWarning={'META+wheel to zoom'}
-      >
-        <Marker
-          anchor={[latitude, longitude]}
-          payload={1}
-          onClick={this.zoomIn}
-        />
-      </Map>
-    )
-  }
+  return (
+    <Map
+      center={[latitude, longitude]}
+      zoom={zoom}
+      height={160}
+      attribution={false}
+      provider={providers['light']}
+      metaWheelZoom={true}
+      metaWheelZoomWarning={'META+wheel to zoom'}
+    >
+      <Marker anchor={[latitude, longitude]} payload={1} onClick={zoomIn} />
+    </Map>
+  )
 }
diff --git a/src/components/atoms/Hamburger.jsx b/src/components/atoms/Hamburger.jsx
deleted file mode 100644
index e173872d..00000000
--- a/src/components/atoms/Hamburger.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import styles from './Hamburger.module.scss'
-
-const Hamburger = props => (
-  <button
-    type="button"
-    title="Menu"
-    className={styles.hamburgerButton}
-    {...props}
-  >
-    <span className={styles.hamburger}>
-      <span className={styles.hamburgerLine} />
-      <span className={styles.hamburgerLine} />
-      <span className={styles.hamburgerLine} />
-    </span>
-  </button>
-)
-
-export default Hamburger
diff --git a/src/components/atoms/Hamburger.module.scss b/src/components/atoms/Hamburger.module.scss
index a2a51dad..f1e8c6c0 100644
--- a/src/components/atoms/Hamburger.module.scss
+++ b/src/components/atoms/Hamburger.module.scss
@@ -2,77 +2,77 @@
 @import 'mixins';
 
 .hamburgerLine {
-    @include transition;
+  @include transition;
 
-    display: block;
-    position: absolute;
-    height: 3px;
-    width: 100%;
-    background: $text-color-light;
-    border-radius: 20px;
-    opacity: 1;
-    left: 0;
-    transform: rotate(0deg);
+  display: block;
+  position: absolute;
+  height: 3px;
+  width: 100%;
+  background: $text-color-light;
+  border-radius: 20px;
+  opacity: 1;
+  left: 0;
+  transform: rotate(0deg);
 
+  &:nth-child(1) {
+    top: 0;
+    transform-origin: left center;
+  }
+
+  &:nth-child(2) {
+    top: 5px;
+    transform-origin: left center;
+  }
+
+  &:nth-child(3) {
+    top: 10px;
+    transform-origin: left center;
+  }
+
+  // open state
+  :global(.has-menu-open) & {
     &:nth-child(1) {
-        top: 0;
-        transform-origin: left center;
+      transform: rotate(45deg);
+      top: -1px;
     }
 
     &:nth-child(2) {
-        top: 5px;
-        transform-origin: left center;
+      width: 0%;
+      opacity: 0;
     }
 
     &:nth-child(3) {
-        top: 10px;
-        transform-origin: left center;
-    }
-
-    // open state
-    :global(.has-menu-open) & {
-        &:nth-child(1) {
-            transform: rotate(45deg);
-            top: -1px;
-        }
-
-        &:nth-child(2) {
-            width: 0%;
-            opacity: 0;
-        }
-
-        &:nth-child(3) {
-            transform: rotate(-45deg);
-            top: 12px;
-        }
+      transform: rotate(-45deg);
+      top: 12px;
     }
+  }
 }
 
 .hamburgerButton {
-    padding: .65rem .85rem;
-    text-align: center;
-    line-height: 1;
-    vertical-align: middle;
-    display: inline-block;
-    margin: 0;
-    margin-right: -($spacer / 2);
+  padding: 0.65rem 0.85rem;
+  text-align: center;
+  line-height: 1;
+  vertical-align: middle;
+  display: inline-block;
+  margin: 0;
+  margin-right: -($spacer / 2);
 
-    &:hover,
-    &:focus {
-        outline: 0;
+  &:hover,
+  &:focus {
+    outline: 0;
 
-        .hamburgerLine {
-            background: $brand-cyan;
-        }
+    .hamburgerLine {
+      background: $brand-cyan;
     }
+  }
 }
 
 .hamburger {
-    width: 18px;
-    height: 18px;
-    display: block;
-    position: relative;
-    transform: rotate(0deg);
-    cursor: pointer;
-    margin-top: 6px;
+  width: 18px;
+  height: 18px;
+  display: block;
+  position: relative;
+  transform: rotate(0deg);
+  cursor: pointer;
+  margin-top: 6px;
 }
diff --git a/src/components/atoms/Hamburger.test.jsx b/src/components/atoms/Hamburger.test.tsx
similarity index 80%
rename from src/components/atoms/Hamburger.test.jsx
rename to src/components/atoms/Hamburger.test.tsx
index a7de942d..ad48e520 100644
--- a/src/components/atoms/Hamburger.test.jsx
+++ b/src/components/atoms/Hamburger.test.tsx
@@ -5,5 +5,5 @@ import testRender from '../../../jest/testRender'
 import Hamburger from './Hamburger'
 
 describe('Hamburger', () => {
-  testRender(<Hamburger />)
+  testRender(<Hamburger onClick={() => null} />)
 })
diff --git a/src/components/atoms/Hamburger.tsx b/src/components/atoms/Hamburger.tsx
new file mode 100644
index 00000000..7b898fb9
--- /dev/null
+++ b/src/components/atoms/Hamburger.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import styles from './Hamburger.module.scss'
+
+export default function Hamburger({ onClick }: { onClick(): void }) {
+  return (
+    <button
+      type="button"
+      title="Menu"
+      className={styles.hamburgerButton}
+      onClick={onClick}
+    >
+      <span className={styles.hamburger}>
+        <span className={styles.hamburgerLine} />
+        <span className={styles.hamburgerLine} />
+        <span className={styles.hamburgerLine} />
+      </span>
+    </button>
+  )
+}
diff --git a/src/components/atoms/Image.jsx b/src/components/atoms/Image.jsx
deleted file mode 100644
index fffd4a07..00000000
--- a/src/components/atoms/Image.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import { graphql } from 'gatsby'
-import Img from 'gatsby-image'
-import styles from './Image.module.scss'
-
-export default class Image extends PureComponent {
-  static propTypes = {
-    fluid: PropTypes.object,
-    fixed: PropTypes.object,
-    alt: PropTypes.string.isRequired
-  }
-
-  render() {
-    const { fluid, fixed, alt } = this.props
-
-    return (
-      <Img
-        className={styles.imageWrap}
-        backgroundColor="#dfe8ef"
-        fluid={fluid ? fluid : null}
-        fixed={fixed ? fixed : null}
-        alt={alt}
-      />
-    )
-  }
-}
-
-export const imageSizeDefault = graphql`
-  fragment ImageFluid on ImageSharp {
-    fluid(maxWidth: 940, quality: 85) {
-      ...GatsbyImageSharpFluid_withWebp_noBase64
-    }
-  }
-`
-
-export const imageSizeThumb = graphql`
-  fragment ImageFluidThumb on ImageSharp {
-    fluid(maxWidth: 200, maxHeight: 85, quality: 85, cropFocus: CENTER) {
-      ...GatsbyImageSharpFluid_withWebp_noBase64
-    }
-  }
-`
diff --git a/src/components/atoms/Image.module.scss b/src/components/atoms/Image.module.scss
index 49d2c673..c8770970 100644
--- a/src/components/atoms/Image.module.scss
+++ b/src/components/atoms/Image.module.scss
@@ -1,20 +1,20 @@
 @import 'mixins';
 
 .imageWrap {
-    @include media-frame;
+  @include media-frame;
 
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: $spacer;
-    display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: $spacer;
+  display: block;
 
-    @media (min-width: 940px) {
-        max-width: 940px;
-        border-radius: .25rem;
-        overflow: hidden;
-    }
+  @media (min-width: 940px) {
+    max-width: 940px;
+    border-radius: 0.25rem;
+    overflow: hidden;
+  }
 
-    a:hover & {
-        border-color: $link-color !important;
-    }
+  a:hover & {
+    border-color: $link-color !important;
+  }
 }
diff --git a/src/components/atoms/Image.tsx b/src/components/atoms/Image.tsx
new file mode 100644
index 00000000..6437d4c7
--- /dev/null
+++ b/src/components/atoms/Image.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+import Img, { FixedObject, FluidObject } from 'gatsby-image'
+import styles from './Image.module.scss'
+
+export default function Image({
+  fluid,
+  fixed,
+  alt
+}: {
+  fluid?: FluidObject
+  fixed?: FixedObject
+  alt: string
+}) {
+  return (
+    <Img
+      className={styles.imageWrap}
+      backgroundColor="#dfe8ef"
+      fluid={fluid}
+      fixed={fixed}
+      alt={alt}
+    />
+  )
+}
+
+export const imageSizeDefault = graphql`
+  fragment ImageFluid on ImageSharp {
+    fluid(maxWidth: 940, quality: 85) {
+      ...GatsbyImageSharpFluid_withWebp_noBase64
+    }
+  }
+`
+
+export const imageSizeThumb = graphql`
+  fragment ImageFluidThumb on ImageSharp {
+    fluid(maxWidth: 200, maxHeight: 85, quality: 85, cropFocus: CENTER) {
+      ...GatsbyImageSharpFluid_withWebp_noBase64
+    }
+  }
+`
diff --git a/src/components/atoms/Input.jsx b/src/components/atoms/Input.jsx
deleted file mode 100644
index e329e848..00000000
--- a/src/components/atoms/Input.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-import styles from './Input.module.scss'
-
-const Input = props => <input className={styles.input} {...props} />
-
-export default Input
diff --git a/src/components/atoms/Input.module.scss b/src/components/atoms/Input.module.scss
index a1a28796..f9a6473f 100644
--- a/src/components/atoms/Input.module.scss
+++ b/src/components/atoms/Input.module.scss
@@ -1,32 +1,32 @@
 @import 'variables';
 
 .input {
-    display: block;
-    width: 100%;
-    padding: $padding-base-vertical $padding-base-horizontal;
-    font-size: $input-font-size;
-    font-weight: $input-font-weight;
-    line-height: $line-height;
-    color: $input-color;
-    background-color: $input-bg;
-    background-image: none; // Reset unusual Firefox-on-Android default style
-    border: 0;
-    border-radius: $input-border-radius;
-    box-shadow: none;
-    transition: all ease-in-out .15s;
-    appearance: none;
+  display: block;
+  width: 100%;
+  padding: $padding-base-vertical $padding-base-horizontal;
+  font-size: $input-font-size;
+  font-weight: $input-font-weight;
+  line-height: $line-height;
+  color: $input-color;
+  background-color: $input-bg;
+  background-image: none; // Reset unusual Firefox-on-Android default style
+  border: 0;
+  border-radius: $input-border-radius;
+  box-shadow: none;
+  transition: all ease-in-out 0.15s;
+  appearance: none;
 
-    &:hover {
-        background: lighten($input-bg, 30%);
-    }
+  &:hover {
+    background: lighten($input-bg, 30%);
+  }
 
-    &:focus {
-        background-color: $input-bg-focus;
-        border-color: $input-border-focus;
-        outline: 0;
-    }
+  &:focus {
+    background-color: $input-bg-focus;
+    border-color: $input-border-focus;
+    outline: 0;
+  }
 
-    &[disabled] {
-        color: $brand-grey-dimmed;
-    }
+  &[disabled] {
+    color: $brand-grey-dimmed;
+  }
 }
diff --git a/src/components/atoms/Input.test.jsx b/src/components/atoms/Input.test.tsx
similarity index 100%
rename from src/components/atoms/Input.test.jsx
rename to src/components/atoms/Input.test.tsx
diff --git a/src/components/atoms/Input.tsx b/src/components/atoms/Input.tsx
new file mode 100644
index 00000000..0bdbb0c8
--- /dev/null
+++ b/src/components/atoms/Input.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import styles from './Input.module.scss'
+
+export default function Input(props: any) {
+  return <input className={styles.input} {...props} />
+}
diff --git a/src/components/atoms/Modal.jsx b/src/components/atoms/Modal.jsx
deleted file mode 100644
index 2fb59437..00000000
--- a/src/components/atoms/Modal.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import ReactModal from 'react-modal'
-
-import styles from './Modal.module.scss'
-
-ReactModal.setAppElement('#___gatsby')
-
-export default class Modal extends PureComponent {
-  static propTypes = {
-    title: PropTypes.string,
-    isOpen: PropTypes.bool,
-    handleCloseModal: PropTypes.func.isRequired,
-    children: PropTypes.node.isRequired
-  }
-
-  render() {
-    if (!this.props.isOpen) {
-      return null
-    }
-
-    const { children, title, handleCloseModal } = this.props
-
-    return (
-      <ReactModal
-        overlayClassName={styles.modal}
-        className={styles.modal__content}
-        htmlOpenClassName={styles.isModalOpen}
-        shouldReturnFocusAfterClose={false}
-        {...this.props}
-      >
-        {title && <h1 className={styles.modal__title}>{title}</h1>}
-        {children}
-        <button className={styles.modal__close} onClick={handleCloseModal}>
-          &times;
-        </button>
-      </ReactModal>
-    )
-  }
-}
diff --git a/src/components/atoms/Modal.module.scss b/src/components/atoms/Modal.module.scss
index 76cddab7..3bf22e3b 100644
--- a/src/components/atoms/Modal.module.scss
+++ b/src/components/atoms/Modal.module.scss
@@ -1,111 +1,111 @@
 @import 'variables';
 
 .modal {
-    position: fixed;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 9;
-    background: rgba($body-background-color, .95);
-    backdrop-filter: blur(5px);
-    animation: fadein .3s;
-    padding: $spacer;
+  position: fixed;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9;
+  background: rgba($body-background-color, 0.95);
+  backdrop-filter: blur(5px);
+  animation: fadein 0.3s;
+  padding: $spacer;
 
-    @media (min-width: $screen-sm) {
-        display: flex;
-        align-items: flex-start;
-        justify-content: center;
-        padding-top: 6vh;
-    }
+  @media (min-width: $screen-sm) {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: 6vh;
+  }
 }
 
 .modal__content {
-    outline: 0;
-    background: transparent;
-    position: relative;
-    border-radius: $border-radius;
-    border: 1px solid rgba($brand-grey-light, .4);
-    box-shadow: 0 5px 30px rgba($brand-grey-light, .2);
-    padding: 0 $spacer / 2 $spacer / 2;
-    max-width: 100%;
+  outline: 0;
+  background: transparent;
+  position: relative;
+  border-radius: $border-radius;
+  border: 1px solid rgba($brand-grey-light, 0.4);
+  box-shadow: 0 5px 30px rgba($brand-grey-light, 0.2);
+  padding: 0 $spacer / 2 $spacer / 2;
+  max-width: 100%;
 
-    @media (min-width: $screen-md) {
-        max-width: $screen-sm;
-        padding: 0 $spacer $spacer;
-    }
+  @media (min-width: $screen-md) {
+    max-width: $screen-sm;
+    padding: 0 $spacer $spacer;
+  }
 }
 
 .modal__close {
-    display: block;
-    cursor: pointer;
-    background: transparent;
-    border: 0;
-    appearance: none;
-    line-height: 1;
-    font-size: $font-size-h2;
-    padding: 4px;
-    position: absolute;
-    top: 0;
-    right: ($spacer/4);
-    color: $brand-grey-light;
-    font-weight: 500;
-    outline: 0;
+  display: block;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  appearance: none;
+  line-height: 1;
+  font-size: $font-size-h2;
+  padding: 4px;
+  position: absolute;
+  top: 0;
+  right: ($spacer/4);
+  color: $brand-grey-light;
+  font-weight: 500;
+  outline: 0;
 
-    &:hover,
-    &:focus {
-        color: $brand-grey;
-    }
+  &:hover,
+  &:focus {
+    color: $brand-grey;
+  }
 }
 
 .isModalOpen {
-    // Prevent background scrolling when modal is open
-    overflow: hidden;
+  // Prevent background scrolling when modal is open
+  overflow: hidden;
 
-    // more cross-browser backdrop-filter
-    // body > div:first-child {
-    //     transition: filter .85s ease-out;
-    //     filter: blur(5px);
-    // }
+  // more cross-browser backdrop-filter
+  // body > div:first-child {
+  //     transition: filter .85s ease-out;
+  //     filter: blur(5px);
+  // }
 }
 
 .modal__title {
-    font-size: $font-size-h4;
-    margin-top: $spacer / 2;
-    margin-bottom: $spacer / 2;
-    margin-left: -($spacer / 2);
-    margin-right: -($spacer / 2);
-    border-bottom: 1px solid rgba($brand-grey-light, .4);
-    padding: 0 $spacer;
-    padding-bottom: ($spacer/2);
+  font-size: $font-size-h4;
+  margin-top: $spacer / 2;
+  margin-bottom: $spacer / 2;
+  margin-left: -($spacer / 2);
+  margin-right: -($spacer / 2);
+  border-bottom: 1px solid rgba($brand-grey-light, 0.4);
+  padding: 0 $spacer;
+  padding-bottom: ($spacer/2);
 
-    @media (min-width: $screen-md) {
-        margin-left: -($spacer);
-        margin-right: -($spacer);
-    }
+  @media (min-width: $screen-md) {
+    margin-left: -($spacer);
+    margin-right: -($spacer);
+  }
 }
 
 //
 // Overlay/content animations
 //
 @keyframes fadein {
-    0% {
-        opacity: 0;
-    }
+  0% {
+    opacity: 0;
+  }
 
-    100% {
-        opacity: 1;
-    }
+  100% {
+    opacity: 1;
+  }
 }
 
 @keyframes fadeout {
-    0% {
-        opacity: 1;
-    }
+  0% {
+    opacity: 1;
+  }
 
-    100% {
-        opacity: 0;
-    }
+  100% {
+    opacity: 0;
+  }
 }
diff --git a/src/components/atoms/Modal.tsx b/src/components/atoms/Modal.tsx
new file mode 100644
index 00000000..79d18861
--- /dev/null
+++ b/src/components/atoms/Modal.tsx
@@ -0,0 +1,38 @@
+import React, { ReactChildren } from 'react'
+import ReactModal from 'react-modal'
+
+import styles from './Modal.module.scss'
+
+ReactModal.setAppElement('#___gatsby')
+
+export default function Modal({
+  title,
+  isOpen,
+  handleCloseModal,
+  children,
+  ...props
+}: {
+  title?: string
+  isOpen?: boolean
+  handleCloseModal: any
+  children: ReactChildren
+}) {
+  if (!isOpen) return null
+
+  return (
+    <ReactModal
+      overlayClassName={styles.modal}
+      className={styles.modal__content}
+      htmlOpenClassName={styles.isModalOpen}
+      shouldReturnFocusAfterClose={false}
+      isOpen={isOpen}
+      {...props}
+    >
+      {title && <h1 className={styles.modal__title}>{title}</h1>}
+      {children}
+      <button className={styles.modal__close} onClick={handleCloseModal}>
+        &times;
+      </button>
+    </ReactModal>
+  )
+}
diff --git a/src/components/atoms/Qr.jsx b/src/components/atoms/Qr.jsx
deleted file mode 100644
index d65e9f3c..00000000
--- a/src/components/atoms/Qr.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { QRCode } from 'react-qr-svg'
-import Clipboard from 'react-clipboard.js'
-import { ReactComponent as IconClipboard } from '../../images/clipboard.svg'
-
-import styles from './Qr.module.scss'
-
-const onCopySuccess = e => {
-  e.trigger.classList.add(styles.copied)
-}
-
-const Qr = ({ address, title }) => (
-  <>
-    {title && <h4>{title}</h4>}
-    <QRCode
-      bgColor="transparent"
-      fgColor="#6b7f88"
-      level="Q"
-      style={{ width: 120 }}
-      value={address}
-      className={styles.qr}
-    />
-
-    <pre className={styles.code}>
-      <code>{address}</code>
-      <Clipboard
-        data-clipboard-text={address}
-        button-title="Copy to clipboard"
-        onSuccess={e => onCopySuccess(e)}
-        className={styles.button}
-      >
-        <IconClipboard />
-      </Clipboard>
-    </pre>
-  </>
-)
-
-Qr.propTypes = {
-  address: PropTypes.string.isRequired,
-  title: PropTypes.string
-}
-
-export default Qr
diff --git a/src/components/atoms/Qr.module.scss b/src/components/atoms/Qr.module.scss
index 880b4977..81759aec 100644
--- a/src/components/atoms/Qr.module.scss
+++ b/src/components/atoms/Qr.module.scss
@@ -1,54 +1,54 @@
 @import 'variables';
 
 .qr {
-    margin-bottom: $spacer / 2;
+  margin-bottom: $spacer / 2;
 }
 
 .code {
-    margin: 0;
-    position: relative;
-    padding: 0;
-    padding-right: 2rem;
+  margin: 0;
+  position: relative;
+  padding: 0;
+  padding-right: 2rem;
 
-    code {
-        padding: $spacer / 2;
-        font-size: .65rem;
-        text-align: center;
-    }
+  code {
+    padding: $spacer / 2;
+    font-size: 0.65rem;
+    text-align: center;
+  }
 }
 
 .button {
-    margin: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    border: 0;
-    box-shadow: none;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    background: rgba($brand-grey, .3);
-    padding: $spacer / 3;
+  margin: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  border: 0;
+  box-shadow: none;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  background: rgba($brand-grey, 0.3);
+  padding: $spacer / 3;
 
+  svg {
+    width: 1rem;
+    height: 1rem;
+    fill: $brand-grey-light;
+    transition: 0.15s ease-out;
+  }
+
+  &:hover {
     svg {
-        width: 1rem;
-        height: 1rem;
-        fill: $brand-grey-light;
-        transition: .15s ease-out;
-    }
-
-    &:hover {
-        svg {
-            fill: $brand-grey-dimmed;
-        }
+      fill: $brand-grey-dimmed;
     }
+  }
 }
 
 .copied {
-    background: green;
+  background: green;
 
-    // stylelint-disable-next-line no-descending-specificity
-    svg {
-        fill: $brand-grey-dimmed;
-    }
+  // stylelint-disable-next-line no-descending-specificity
+  svg {
+    fill: $brand-grey-dimmed;
+  }
 }
diff --git a/src/components/atoms/Qr.tsx b/src/components/atoms/Qr.tsx
new file mode 100644
index 00000000..92e6e7cd
--- /dev/null
+++ b/src/components/atoms/Qr.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import { QRCode } from 'react-qr-svg'
+import Clipboard from 'react-clipboard.js'
+import { ReactComponent as IconClipboard } from '../../images/clipboard.svg'
+
+import styles from './Qr.module.scss'
+
+const onCopySuccess = (e: any) => {
+  e.trigger.classList.add(styles.copied)
+}
+
+export default function Qr({
+  address,
+  title
+}: {
+  address: string
+  title?: string
+}) {
+  return (
+    <>
+      {title && <h4>{title}</h4>}
+      <QRCode
+        bgColor="transparent"
+        fgColor="#6b7f88"
+        level="Q"
+        style={{ width: 120 }}
+        value={address}
+        className={styles.qr}
+      />
+
+      <pre className={styles.code}>
+        <code>{address}</code>
+        <Clipboard
+          data-clipboard-text={address}
+          button-title="Copy to clipboard"
+          onSuccess={e => onCopySuccess(e)}
+          className={styles.button}
+        >
+          <IconClipboard />
+        </Clipboard>
+      </pre>
+    </>
+  )
+}
diff --git a/src/components/atoms/SEO.jsx b/src/components/atoms/SEO.jsx
deleted file mode 100644
index 4bc46364..00000000
--- a/src/components/atoms/SEO.jsx
+++ /dev/null
@@ -1,205 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { StaticQuery, graphql } from 'gatsby'
-import Helmet from 'react-helmet'
-
-const query = graphql`
-  query {
-    site {
-      siteMetadata {
-        siteTitle
-        siteDescription
-        siteUrl
-        author {
-          name
-          twitter
-        }
-      }
-    }
-
-    logo: allFile(filter: { name: { eq: "apple-touch-icon" } }) {
-      edges {
-        node {
-          relativePath
-        }
-      }
-    }
-  }
-`
-
-const createSchemaOrg = (
-  blogURL,
-  title,
-  siteMeta,
-  postSEO,
-  postURL,
-  image,
-  description
-) => {
-  const schemaOrgJSONLD = [
-    {
-      '@context': 'http://schema.org',
-      '@type': 'WebSite',
-      url: blogURL,
-      name: title,
-      alternateName: siteMeta.titleAlt ? siteMeta.titleAlt : ''
-    }
-  ]
-
-  if (postSEO) {
-    schemaOrgJSONLD.push(
-      {
-        '@context': 'http://schema.org',
-        '@type': 'BreadcrumbList',
-        itemListElement: [
-          {
-            '@type': 'ListItem',
-            position: 1,
-            item: {
-              '@id': postURL,
-              name: title,
-              image
-            }
-          }
-        ]
-      },
-      {
-        '@context': 'http://schema.org',
-        '@type': 'BlogPosting',
-        url: blogURL,
-        name: title,
-        alternateName: siteMeta.titleAlt ? siteMeta.titleAlt : '',
-        headline: title,
-        image: {
-          '@type': 'ImageObject',
-          url: image
-        },
-        description
-      }
-    )
-  }
-  return schemaOrgJSONLD
-}
-
-const MetaTags = ({
-  description,
-  image,
-  url,
-  schema,
-  postSEO,
-  title,
-  siteMeta
-}) => (
-  <Helmet
-    defaultTitle={`${siteMeta.siteTitle} ¦ ${siteMeta.siteDescription}`}
-    titleTemplate={`%s ¦ ${siteMeta.siteTitle}`}
-  >
-    <html lang="en" />
-
-    {/* General tags */}
-    <meta name="description" content={description} />
-    <meta name="image" content={image} />
-    <link rel="canonical" href={url} />
-
-    {/* Schema.org tags */}
-    <script type="application/ld+json">{schema}</script>
-
-    {/* OpenGraph tags */}
-    <meta property="og:url" content={url} />
-    {postSEO && <meta property="og:type" content="article" />}
-    <meta property="og:title" content={title} />
-    <meta property="og:description" content={description} />
-    <meta property="og:image" content={image} />
-
-    {/* Twitter Card tags */}
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta
-      name="twitter:creator"
-      content={siteMeta.author.twitter ? siteMeta.author.twitter : ''}
-    />
-    <meta name="twitter:title" content={title} />
-    <meta name="twitter:description" content={description} />
-    <meta name="twitter:image" content={image} />
-
-    <link
-      rel="alternate"
-      title="JSON Feed"
-      type="application/json"
-      href={`${siteMeta.siteUrl}/feed.json`}
-    />
-  </Helmet>
-)
-
-MetaTags.propTypes = {
-  description: PropTypes.string,
-  image: PropTypes.string,
-  url: PropTypes.string,
-  schema: PropTypes.string,
-  postSEO: PropTypes.bool,
-  title: PropTypes.string,
-  siteMeta: PropTypes.object
-}
-
-const SEO = ({ post, slug, postSEO }) => (
-  <StaticQuery
-    query={query}
-    render={data => {
-      const siteMeta = data.site.siteMetadata
-      const logo = data.logo.edges[0].node.relativePath
-
-      let title
-      let description
-      let image
-      let postURL
-
-      if (postSEO) {
-        const postMeta = post.frontmatter
-        title = `${postMeta.title} ¦ ${siteMeta.siteTitle}`
-        description = postMeta.description ? postMeta.description : post.excerpt
-        image = postMeta.image
-          ? postMeta.image.childImageSharp.fluid.src
-          : `/${logo}`
-        postURL = `${siteMeta.siteUrl}${slug}`
-      } else {
-        title = `${siteMeta.siteTitle} ¦ ${siteMeta.siteDescription}`
-        description = siteMeta.siteDescription
-        image = `/${logo}`
-      }
-
-      image = `${siteMeta.siteUrl}${image}`
-      const blogURL = siteMeta.siteUrl
-      const url = postSEO ? postURL : blogURL
-
-      let schema = createSchemaOrg(
-        blogURL,
-        title,
-        siteMeta,
-        postSEO,
-        postURL,
-        image,
-        description
-      )
-      schema = JSON.stringify(schema)
-
-      return (
-        <MetaTags
-          description={description}
-          image={image}
-          url={url}
-          schema={schema}
-          postSEO={postSEO}
-          title={title}
-          siteMeta={siteMeta}
-        />
-      )
-    }}
-  />
-)
-
-SEO.propTypes = {
-  post: PropTypes.object,
-  slug: PropTypes.string,
-  postSEO: PropTypes.bool
-}
-
-export default SEO
diff --git a/src/components/atoms/SEO.tsx b/src/components/atoms/SEO.tsx
new file mode 100644
index 00000000..f2f9191b
--- /dev/null
+++ b/src/components/atoms/SEO.tsx
@@ -0,0 +1,185 @@
+import React from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
+import Helmet from 'react-helmet'
+import { useSiteMetadata } from '../../hooks/use-site-metadata'
+
+const query = graphql`
+  query {
+    logo: allFile(filter: { name: { eq: "apple-touch-icon" } }) {
+      edges {
+        node {
+          relativePath
+        }
+      }
+    }
+  }
+`
+
+const createSchemaOrg = (
+  blogURL: string,
+  title: string,
+  postSEO: boolean,
+  postURL: string,
+  image: string,
+  description: string
+) => {
+  const schemaOrgJSONLD = [
+    {
+      '@context': 'http://schema.org',
+      '@type': 'WebSite',
+      url: blogURL,
+      name: title
+    }
+  ]
+
+  if (postSEO) {
+    schemaOrgJSONLD.push(
+      {
+        '@context': 'http://schema.org',
+        '@type': 'BreadcrumbList',
+        itemListElement: [
+          {
+            '@type': 'ListItem',
+            position: 1,
+            item: {
+              '@id': postURL,
+              name: title,
+              image
+            }
+          }
+        ]
+      },
+      {
+        '@context': 'http://schema.org',
+        '@type': 'BlogPosting',
+        url: blogURL,
+        name: title,
+        headline: title,
+        image: {
+          '@type': 'ImageObject',
+          url: image
+        },
+        description
+      }
+    )
+  }
+  return schemaOrgJSONLD
+}
+
+const MetaTags = ({
+  description,
+  image,
+  url,
+  schema,
+  postSEO,
+  title
+}: {
+  description: string
+  image: string
+  url: string
+  schema: string
+  postSEO: boolean
+  title: string
+}) => {
+  const { siteTitle, siteDescription, siteUrl, author } = useSiteMetadata()
+
+  return (
+    <Helmet
+      defaultTitle={`${siteTitle} ¦ ${siteDescription}`}
+      titleTemplate={`%s ¦ ${siteTitle}`}
+    >
+      <html lang="en" />
+
+      {/* General tags */}
+      <meta name="description" content={description} />
+      <meta name="image" content={image} />
+      <link rel="canonical" href={url} />
+
+      {/* Schema.org tags */}
+      <script type="application/ld+json">{schema}</script>
+
+      {/* OpenGraph tags */}
+      <meta property="og:url" content={url} />
+      {postSEO && <meta property="og:type" content="article" />}
+      <meta property="og:title" content={title} />
+      <meta property="og:description" content={description} />
+      <meta property="og:image" content={image} />
+
+      {/* Twitter Card tags */}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta
+        name="twitter:creator"
+        content={author.twitter ? author.twitter : ''}
+      />
+      <meta name="twitter:title" content={title} />
+      <meta name="twitter:description" content={description} />
+      <meta name="twitter:image" content={image} />
+
+      <link
+        rel="alternate"
+        title="JSON Feed"
+        type="application/json"
+        href={`${siteUrl}/feed.json`}
+      />
+    </Helmet>
+  )
+}
+
+export default function SEO({
+  post,
+  slug,
+  postSEO
+}: {
+  post?: any
+  slug?: string
+  postSEO?: boolean
+}) {
+  const data = useStaticQuery(query)
+  const logo = data.logo.edges[0].node.relativePath
+  const { siteTitle, siteUrl, siteDescription } = useSiteMetadata()
+
+  let title
+  let description
+  let image
+  let postURL
+
+  if (postSEO) {
+    const postMeta = post.frontmatter
+    title = `${postMeta.title} ¦ ${siteTitle}`
+    description = postMeta.description ? postMeta.description : post.excerpt
+    image = postMeta.image
+      ? postMeta.image.childImageSharp.fluid.src
+      : `/${logo}`
+    postURL = `${siteUrl}${slug}`
+  } else {
+    title = `${siteTitle} ¦ ${siteDescription}`
+    description = siteDescription
+    image = `/${logo}`
+  }
+
+  image = `${siteUrl}${image}`
+  const blogURL = siteUrl
+  const url = postSEO ? postURL : blogURL
+
+  let schema = createSchemaOrg(
+    blogURL,
+    title,
+    postSEO,
+    postURL,
+    image,
+    description
+  )
+
+  schema = JSON.stringify(schema)
+
+  return (
+    <MetaTags
+      description={description}
+      image={image}
+      url={url}
+      schema={schema}
+      postSEO={postSEO}
+      title={title}
+    />
+  )
+}
diff --git a/src/components/atoms/Transitions.js b/src/components/atoms/Transitions.ts
similarity index 100%
rename from src/components/atoms/Transitions.js
rename to src/components/atoms/Transitions.ts
diff --git a/src/components/atoms/Typekit.jsx b/src/components/atoms/Typekit.tsx
similarity index 56%
rename from src/components/atoms/Typekit.jsx
rename to src/components/atoms/Typekit.tsx
index 5b4d00b9..3ed4e0ac 100644
--- a/src/components/atoms/Typekit.jsx
+++ b/src/components/atoms/Typekit.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import { StaticQuery, graphql } from 'gatsby'
 import Helmet from 'react-helmet'
+import { useSiteMetadata } from '../../hooks/use-site-metadata'
 
-const TypekitScript = typekitID => (
+const TypekitScript = (typekitID: string) => (
   <script>
     {`
         (function(d) {
@@ -17,34 +17,17 @@ const TypekitScript = typekitID => (
   </script>
 )
 
-const query = graphql`
-  query {
-    site {
-      siteMetadata {
-        typekitID
-      }
-    }
-  }
-`
+export default function Typekit() {
+  const { typekitID } = useSiteMetadata()
 
-const Typekit = () => (
-  <StaticQuery
-    query={query}
-    render={data => {
-      const { typekitID } = data.site.siteMetadata
+  return (
+    typekitID && (
+      <Helmet>
+        <link rel="dns-prefetch" href="https://use.typekit.net/" />
+        <link rel="dns-prefetch" href="https://p.typekit.net/" />
 
-      return (
-        typekitID && (
-          <Helmet>
-            <link rel="dns-prefetch" href="https://use.typekit.net/" />
-            <link rel="dns-prefetch" href="https://p.typekit.net/" />
-
-            {TypekitScript(typekitID)}
-          </Helmet>
-        )
-      )
-    }}
-  />
-)
-
-export default Typekit
+        {TypekitScript(typekitID)}
+      </Helmet>
+    )
+  )
+}
diff --git a/src/components/molecules/Featured.jsx b/src/components/molecules/Featured.jsx
deleted file mode 100644
index 8014677e..00000000
--- a/src/components/molecules/Featured.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react'
-import { Link, graphql, StaticQuery } from 'gatsby'
-import Image from '../atoms/Image'
-import styles from './Featured.module.scss'
-
-const query = graphql`
-  query {
-    allMarkdownRemark(
-      filter: { frontmatter: { featured: { eq: true } } }
-      sort: { fields: [fields___date], order: DESC }
-    ) {
-      edges {
-        node {
-          id
-          frontmatter {
-            title
-            image {
-              childImageSharp {
-                ...ImageFluidThumb
-              }
-            }
-          }
-          fields {
-            slug
-          }
-        }
-      }
-    }
-  }
-`
-
-const Featured = () => (
-  <StaticQuery
-    query={query}
-    render={data => (
-      <div className={styles.featured}>
-        {data.allMarkdownRemark.edges.map(({ node }) => {
-          const { title, image } = node.frontmatter
-          const { slug } = node.fields
-
-          return (
-            <article className={styles.featuredItem} key={node.id}>
-              <Link to={slug}>
-                <Image fluid={image.childImageSharp.fluid} alt={title} />
-                <h1 className={styles.featuredTitle}>{title}</h1>
-              </Link>
-            </article>
-          )
-        })}
-      </div>
-    )}
-  />
-)
-
-export default Featured
diff --git a/src/components/molecules/Featured.module.scss b/src/components/molecules/Featured.module.scss
index 3b6fb5ca..5b601ee2 100644
--- a/src/components/molecules/Featured.module.scss
+++ b/src/components/molecules/Featured.module.scss
@@ -2,84 +2,84 @@
 @import 'mixins';
 
 .featured {
-    @include breakoutviewport;
-    @include divider;
+  @include breakoutviewport;
+  @include divider;
 
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    padding-left: $spacer;
-    padding-right: $spacer;
-    margin-bottom: -($spacer);
-    padding-bottom: $spacer * $line-height;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding-left: $spacer;
+  padding-right: $spacer;
+  margin-bottom: -($spacer);
+  padding-bottom: $spacer * $line-height;
 
-    @media (min-width: $screen-xs) {
-        padding-bottom: $spacer * 3;
-        margin-top: $spacer * $line-height;
-    }
+  @media (min-width: $screen-xs) {
+    padding-bottom: $spacer * 3;
+    margin-top: $spacer * $line-height;
+  }
 
-    @media (min-width: $screen-md) {
-        padding-left: 0;
-        padding-right: 0;
-        justify-content: initial;
-    }
+  @media (min-width: $screen-md) {
+    padding-left: 0;
+    padding-right: 0;
+    justify-content: initial;
+  }
 }
 
 .featuredTitle {
-    transition: .1s ease-out;
-    font-size: $font-size-base;
-    margin: 0;
-    position: absolute;
-    top: 25%;
-    min-width: 45%;
-    text-align: right;
-    padding: $spacer / 3;
-    background: rgba($link-color, .85);
-    color: #fff;
-    text-shadow: 0 1px 0 #000;
-    left: 0;
-    opacity: 0;
-    transform: translate3d(0, -20px, 0);
+  transition: 0.1s ease-out;
+  font-size: $font-size-base;
+  margin: 0;
+  position: absolute;
+  top: 25%;
+  min-width: 45%;
+  text-align: right;
+  padding: $spacer / 3;
+  background: rgba($link-color, 0.85);
+  color: #fff;
+  text-shadow: 0 1px 0 #000;
+  left: 0;
+  opacity: 0;
+  transform: translate3d(0, -20px, 0);
 }
 
 .featuredItem {
-    position: relative;
-    max-width: 12rem;
-    flex: 0 0 48%;
-    margin-bottom: $spacer / 2;
+  position: relative;
+  max-width: 12rem;
+  flex: 0 0 48%;
+  margin-bottom: $spacer / 2;
+
+  &:last-child {
+    margin-bottom: 0;
+    display: none;
+  }
+
+  @media (min-width: $screen-xs) {
+    flex: 1;
+    max-width: none;
+    margin-left: $spacer / 2;
 
     &:last-child {
-        margin-bottom: 0;
-        display: none;
+      display: block;
     }
 
-    @media (min-width: $screen-xs) {
-        flex: 1;
-        max-width: none;
-        margin-left: $spacer / 2;
-
-        &:last-child {
-            display: block;
-        }
-
-        &:first-child {
-            margin-left: 0;
-        }
+    &:first-child {
+      margin-left: 0;
     }
+  }
 
-    a {
-        display: block;
+  a {
+    display: block;
 
-        &:hover,
-        &:focus {
-            .featuredTitle {
-                opacity: 1;
-                transform: translate3d(0, 0, 0);
-            }
-        }
+    &:hover,
+    &:focus {
+      .featuredTitle {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+      }
     }
+  }
 
-    :global(.gatsby-image-wrapper) {
-        margin-bottom: 0;
-    }
+  :global(.gatsby-image-wrapper) {
+    margin-bottom: 0;
+  }
 }
diff --git a/src/components/molecules/Featured.tsx b/src/components/molecules/Featured.tsx
new file mode 100644
index 00000000..6864bbfa
--- /dev/null
+++ b/src/components/molecules/Featured.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import { Link, graphql, useStaticQuery } from 'gatsby'
+import Image from '../atoms/Image'
+import styles from './Featured.module.scss'
+
+const query = graphql`
+  query {
+    allMarkdownRemark(
+      filter: { frontmatter: { featured: { eq: true } } }
+      sort: { fields: [fields___date], order: DESC }
+    ) {
+      edges {
+        node {
+          id
+          frontmatter {
+            title
+            image {
+              childImageSharp {
+                ...ImageFluidThumb
+              }
+            }
+          }
+          fields {
+            slug
+          }
+        }
+      }
+    }
+  }
+`
+
+export default function Featured() {
+  const data = useStaticQuery(query)
+
+  return (
+    <div className={styles.featured}>
+      {data.allMarkdownRemark.edges.map(({ node }: { node: any }) => {
+        const { title, image } = node.frontmatter
+        const { slug } = node.fields
+
+        return (
+          <article className={styles.featuredItem} key={node.id}>
+            <Link to={slug}>
+              <Image fluid={image.childImageSharp.fluid} alt={title} />
+              <h1 className={styles.featuredTitle}>{title}</h1>
+            </Link>
+          </article>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/src/components/molecules/IconLinks.jsx b/src/components/molecules/IconLinks.jsx
deleted file mode 100644
index 8c866dda..00000000
--- a/src/components/molecules/IconLinks.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import styles from './IconLinks.module.scss'
-
-import { ReactComponent as Twitter } from '../../images/twitter.svg'
-import { ReactComponent as Github } from '../../images/github.svg'
-import { ReactComponent as Facebook } from '../../images/facebook.svg'
-import { ReactComponent as Rss } from '../../images/rss.svg'
-import { ReactComponent as Jsonfeed } from '../../images/jsonfeed.svg'
-
-class NetworkIcon extends PureComponent {
-  static propTypes = {
-    link: PropTypes.string.isRequired
-  }
-
-  render() {
-    const { link } = this.props
-    let Icon
-
-    if (link.includes('twitter')) {
-      Icon = <Twitter className={styles.twitter} />
-    } else if (link.includes('github')) {
-      Icon = <Github className={styles.github} />
-    } else if (link.includes('facebook')) {
-      Icon = <Facebook className={styles.facebook} />
-    } else if (link.includes('feed.xml')) {
-      Icon = <Rss className={styles.rss} />
-    } else if (link.includes('feed.json')) {
-      Icon = <Jsonfeed className={styles.json} />
-    }
-
-    return Icon
-  }
-}
-
-export default class IconLinks extends PureComponent {
-  static propTypes = {
-    links: PropTypes.array.isRequired
-  }
-
-  render() {
-    return (
-      <p>
-        {this.props.links.map(link => (
-          <a key={link} className={styles.link} href={link} title={link}>
-            <NetworkIcon link={link} />
-          </a>
-        ))}
-      </p>
-    )
-  }
-}
diff --git a/src/components/molecules/IconLinks.module.scss b/src/components/molecules/IconLinks.module.scss
index 7e89bbc4..e8e98b4d 100644
--- a/src/components/molecules/IconLinks.module.scss
+++ b/src/components/molecules/IconLinks.module.scss
@@ -1,44 +1,44 @@
 @import 'variables';
 
 .link {
-    text-align: center;
-    width: 2rem;
-    padding: $spacer / 4;
-    margin: 0;
-    display: inline-block;
-    color: $text-color-light;
+  text-align: center;
+  width: 2rem;
+  padding: $spacer / 4;
+  margin: 0;
+  display: inline-block;
+  color: $text-color-light;
 
-    &:first-child {
-        margin-left: 0;
-    }
+  &:first-child {
+    margin-left: 0;
+  }
 
-    &:last-child {
-        margin-right: 0;
-    }
+  &:last-child {
+    margin-right: 0;
+  }
 
-    svg {
-        transition: color .3s ease-in-out;
-        display: block;
-        margin: 0 auto;
-    }
+  svg {
+    transition: color 0.3s ease-in-out;
+    display: block;
+    margin: 0 auto;
+  }
 }
 
 .twitter:hover {
-    fill: #019ad2;
+  fill: #019ad2;
 }
 
 .facebook:hover {
-    fill: #3b5998;
+  fill: #3b5998;
 }
 
 .github:hover {
-    fill: #333;
+  fill: #333;
 }
 
 .rss:hover {
-    fill: #e15a00;
+  fill: #e15a00;
 }
 
 .json:hover {
-    fill: #8be028;
+  fill: #8be028;
 }
diff --git a/src/components/molecules/IconLinks.tsx b/src/components/molecules/IconLinks.tsx
new file mode 100644
index 00000000..7b21e1e2
--- /dev/null
+++ b/src/components/molecules/IconLinks.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import styles from './IconLinks.module.scss'
+
+import { ReactComponent as Twitter } from '../../images/twitter.svg'
+import { ReactComponent as Github } from '../../images/github.svg'
+import { ReactComponent as Facebook } from '../../images/facebook.svg'
+import { ReactComponent as Rss } from '../../images/rss.svg'
+import { ReactComponent as Jsonfeed } from '../../images/jsonfeed.svg'
+
+function NetworkIcon({ link }: { link: string }) {
+  let Icon
+
+  if (link.includes('twitter')) {
+    Icon = <Twitter className={styles.twitter} />
+  } else if (link.includes('github')) {
+    Icon = <Github className={styles.github} />
+  } else if (link.includes('facebook')) {
+    Icon = <Facebook className={styles.facebook} />
+  } else if (link.includes('feed.xml')) {
+    Icon = <Rss className={styles.rss} />
+  } else if (link.includes('feed.json')) {
+    Icon = <Jsonfeed className={styles.json} />
+  }
+
+  return Icon
+}
+
+export default function IconLinks({ links }: { links: string[] }) {
+  return (
+    <p>
+      {links.map((link: string) => (
+        <a key={link} className={styles.link} href={link} title={link}>
+          <NetworkIcon link={link} />
+        </a>
+      ))}
+    </p>
+  )
+}
diff --git a/src/components/molecules/Menu.jsx b/src/components/molecules/Menu.jsx
deleted file mode 100644
index c3278cb8..00000000
--- a/src/components/molecules/Menu.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, { PureComponent, Fragment } from 'react'
-import Helmet from 'react-helmet'
-import { Link, StaticQuery, graphql } from 'gatsby'
-import Hamburger from '../atoms/Hamburger'
-import styles from './Menu.module.scss'
-
-const query = graphql`
-  query {
-    site {
-      siteMetadata {
-        menu {
-          title
-          link
-        }
-      }
-    }
-  }
-`
-
-export default class Menu extends PureComponent {
-  state = {
-    menuOpen: false
-  }
-
-  toggleMenu = () => {
-    this.setState(prevState => ({
-      menuOpen: !prevState.menuOpen
-    }))
-  }
-
-  isMenuOpen = () => this.state.menuOpen === true
-
-  render() {
-    return (
-      <Fragment>
-        <Helmet>
-          <body className={this.isMenuOpen() ? 'has-menu-open' : null} />
-        </Helmet>
-        <StaticQuery
-          query={query}
-          render={data => {
-            const { menu } = data.site.siteMetadata
-
-            const MenuItems = menu.map(item => (
-              <li key={item.title}>
-                <Link onClick={this.toggleMenu} to={item.link}>
-                  {item.title}
-                </Link>
-              </li>
-            ))
-
-            return (
-              <Fragment>
-                <Hamburger onClick={this.toggleMenu} />
-                <ul className={styles.menu}>{MenuItems}</ul>
-              </Fragment>
-            )
-          }}
-        />
-      </Fragment>
-    )
-  }
-}
diff --git a/src/components/molecules/Menu.module.scss b/src/components/molecules/Menu.module.scss
index f63b747e..44bd9f56 100644
--- a/src/components/molecules/Menu.module.scss
+++ b/src/components/molecules/Menu.module.scss
@@ -2,46 +2,46 @@
 @import 'mixins';
 
 .menu {
-    @include divider-top;
+  @include divider-top;
 
-    margin-top: 0;
-    padding-top: $spacer / 2;
-    position: absolute;
-    top: calc(100% + #{$spacer / 2});
-    left: 0;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    width: 100%;
+  margin-top: 0;
+  padding-top: $spacer / 2;
+  position: absolute;
+  top: calc(100% + #{$spacer / 2});
+  left: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
 
-    li {
-        list-style: none;
-        flex: 0 0 50%;
+  li {
+    list-style: none;
+    flex: 0 0 50%;
 
-        @media (min-width: $screen-xs) {
-            flex-basis: 33%;
-        }
-
-        &::before {
-            display: none;
-        }
+    @media (min-width: $screen-xs) {
+      flex-basis: 33%;
     }
 
-    opacity: 0;
-
-    :global(.has-menu-open) & {
-        opacity: 1;
+    &::before {
+      display: none;
     }
+  }
 
-    a {
-        color: $text-color;
-        line-height: 1;
-        text-transform: uppercase;
-        margin: 0;
-        font-size: $font-size-small;
-        text-shadow: 0 1px 0 rgba(#fff, .5);
-        padding: $padding-base-horizontal;
-        display: block;
-        text-align: center;
-    }
+  opacity: 0;
+
+  :global(.has-menu-open) & {
+    opacity: 1;
+  }
+
+  a {
+    color: $text-color;
+    line-height: 1;
+    text-transform: uppercase;
+    margin: 0;
+    font-size: $font-size-small;
+    text-shadow: 0 1px 0 rgba(#fff, 0.5);
+    padding: $padding-base-horizontal;
+    display: block;
+    text-align: center;
+  }
 }
diff --git a/src/components/molecules/Menu.tsx b/src/components/molecules/Menu.tsx
new file mode 100644
index 00000000..201a7a85
--- /dev/null
+++ b/src/components/molecules/Menu.tsx
@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import Helmet from 'react-helmet'
+import { Link } from 'gatsby'
+import Hamburger from '../atoms/Hamburger'
+import styles from './Menu.module.scss'
+import { useSiteMetadata } from '../../hooks/use-site-metadata'
+
+export default function Menu() {
+  const [menuOpen, setMenuOpen] = useState(false)
+  const { menu } = useSiteMetadata()
+
+  const toggleMenu = () => {
+    setMenuOpen(!menuOpen)
+  }
+
+  const MenuItems = menu.map((item: any) => (
+    <li key={item.title}>
+      <Link onClick={toggleMenu} to={item.link}>
+        {item.title}
+      </Link>
+    </li>
+  ))
+
+  return (
+    <>
+      <Helmet>
+        <body className={menuOpen ? 'has-menu-open' : null} />
+      </Helmet>
+      <Hamburger onClick={toggleMenu} />
+      <ul className={styles.menu}>{MenuItems}</ul>
+    </>
+  )
+}
diff --git a/src/components/molecules/ModalThanks.jsx b/src/components/molecules/ModalThanks.jsx
deleted file mode 100644
index de16af84..00000000
--- a/src/components/molecules/ModalThanks.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { PureComponent } from 'react'
-import { StaticQuery, graphql } from 'gatsby'
-
-import Web3Donation from '../Web3Donation'
-import Qr from '../atoms/Qr'
-import Modal from '../atoms/Modal'
-import styles from './ModalThanks.module.scss'
-
-const query = graphql`
-  query {
-    site {
-      siteMetadata {
-        author {
-          bitcoin
-          ether
-        }
-      }
-    }
-  }
-`
-
-class ModalThanks extends PureComponent {
-  render() {
-    return (
-      <StaticQuery
-        query={query}
-        render={data => {
-          const { author } = data.site.siteMetadata
-
-          return (
-            <Modal
-              {...this.props}
-              contentLabel="Say thanks with Bitcoin or Ether"
-              title="Say thanks"
-            >
-              <div className={styles.modalThanks}>
-                <Web3Donation address={author.ether} />
-
-                <header>
-                  <h4>Any other wallets</h4>
-                  <p>Send Bitcoin or Ether from any wallet.</p>
-                </header>
-
-                {Object.keys(author).map((address, i) => (
-                  <div key={i} className={styles.coin}>
-                    <Qr title={address} address={author[address]} />
-                  </div>
-                ))}
-              </div>
-            </Modal>
-          )
-        }}
-      />
-    )
-  }
-}
-
-export default ModalThanks
diff --git a/src/components/molecules/ModalThanks.module.scss b/src/components/molecules/ModalThanks.module.scss
index 6b59682c..67570bb6 100644
--- a/src/components/molecules/ModalThanks.module.scss
+++ b/src/components/molecules/ModalThanks.module.scss
@@ -1,42 +1,42 @@
 @import 'variables';
 
 .modalThanks {
-    @media (min-width: $screen-sm) {
-        display: flex;
-        justify-content: space-between;
-        flex-wrap: wrap;
-    }
+  @media (min-width: $screen-sm) {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  h4 {
+    text-align: center;
+    margin: 0;
+    margin-bottom: $spacer / 2;
+    color: $brand-grey;
+    text-transform: capitalize;
+  }
+
+  header {
+    width: 100%;
+    text-align: center;
+    margin-bottom: $spacer;
 
     h4 {
-        text-align: center;
-        margin: 0;
-        margin-bottom: $spacer / 2;
-        color: $brand-grey;
-        text-transform: capitalize;
+      font-size: $font-size-large;
+      margin-top: 0;
+      margin-bottom: $spacer / 6;
     }
 
-    header {
-        width: 100%;
-        text-align: center;
-        margin-bottom: $spacer;
-
-        h4 {
-            font-size: $font-size-large;
-            margin-top: 0;
-            margin-bottom: $spacer / 6;
-        }
-
-        p {
-            color: $brand-grey-light;
-        }
+    p {
+      color: $brand-grey-light;
     }
+  }
 }
 
 .coin {
-    margin-top: $spacer;
+  margin-top: $spacer;
 
-    @media (min-width: $screen-sm) {
-        width: 48%;
-        margin-top: 0;
-    }
+  @media (min-width: $screen-sm) {
+    width: 48%;
+    margin-top: 0;
+  }
 }
diff --git a/src/components/molecules/ModalThanks.tsx b/src/components/molecules/ModalThanks.tsx
new file mode 100644
index 00000000..4e4e2676
--- /dev/null
+++ b/src/components/molecules/ModalThanks.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import { useSiteMetadata } from '../../hooks/use-site-metadata'
+
+import Web3Donation from '../Web3Donation'
+import Qr from '../atoms/Qr'
+import Modal from '../atoms/Modal'
+import styles from './ModalThanks.module.scss'
+
+export default function ModalThanks(props: any) {
+  const { author } = useSiteMetadata()
+
+  return (
+    <Modal
+      {...props}
+      contentLabel="Say thanks with Bitcoin or Ether"
+      title="Say thanks"
+    >
+      <div className={styles.modalThanks}>
+        <Web3Donation address={author.ether} />
+
+        <header>
+          <h4>Any other wallets</h4>
+          <p>Send Bitcoin or Ether from any wallet.</p>
+        </header>
+
+        {Object.keys(author)
+          .filter(key => key === 'bitcoin' || key === 'ether')
+          .map((address, i) => (
+            <div key={i} className={styles.coin}>
+              <Qr title={address} address={author[address]} />
+            </div>
+          ))}
+      </div>
+    </Modal>
+  )
+}
diff --git a/src/components/molecules/Pagination.module.scss b/src/components/molecules/Pagination.module.scss
index 63da475b..2e48ef90 100644
--- a/src/components/molecules/Pagination.module.scss
+++ b/src/components/molecules/Pagination.module.scss
@@ -1,43 +1,43 @@
 @import 'variables';
 
 .pagination {
-    display: flex;
-    margin-top: $spacer * 2;
-    margin-bottom: $spacer;
-    justify-content: center;
+  display: flex;
+  margin-top: $spacer * 2;
+  margin-bottom: $spacer;
+  justify-content: center;
 
-    > div {
-        &:first-child {
-            margin-right: $spacer;
-        }
-
-        &:last-child {
-            margin-left: $spacer;
-            text-align: right;
-        }
+  > div {
+    &:first-child {
+      margin-right: $spacer;
     }
+
+    &:last-child {
+      margin-left: $spacer;
+      text-align: right;
+    }
+  }
 }
 
 .number {
-    text-align: center;
-    width: 2rem;
-    height: 2rem;
-    line-height: 1.7;
-    display: inline-block;
-    border-radius: 50%;
-    border: 1px solid transparent;
+  text-align: center;
+  width: 2rem;
+  height: 2rem;
+  line-height: 1.7;
+  display: inline-block;
+  border-radius: 50%;
+  border: 1px solid transparent;
 
-    &:hover,
-    &:focus {
-        background: rgba(255, 255, 255, .3);
-        border-color: darken($brand-grey-dimmed, 5%);
-    }
+  &:hover,
+  &:focus {
+    background: rgba(255, 255, 255, 0.3);
+    border-color: darken($brand-grey-dimmed, 5%);
+  }
 }
 
 .current {
-    composes: number;
-    cursor: default;
-    pointer-events: none;
-    border: 1px solid darken($brand-grey-dimmed, 5%);
-    color: $brand-grey-light;
+  composes: number;
+  cursor: default;
+  pointer-events: none;
+  border: 1px solid darken($brand-grey-dimmed, 5%);
+  color: $brand-grey-light;
 }
diff --git a/src/components/molecules/Pagination.jsx b/src/components/molecules/Pagination.tsx
similarity index 72%
rename from src/components/molecules/Pagination.jsx
rename to src/components/molecules/Pagination.tsx
index 9fdcc013..9a1670d6 100644
--- a/src/components/molecules/Pagination.jsx
+++ b/src/components/molecules/Pagination.tsx
@@ -1,9 +1,8 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 import styles from './Pagination.module.scss'
 
-const PageNumber = ({ i, current }) => (
+const PageNumber = ({ i, current }: { i: number; current?: boolean }) => (
   <Link
     className={current ? styles.current : styles.number}
     to={i === 0 ? '' : `/page/${i + 1}`}
@@ -12,12 +11,13 @@ const PageNumber = ({ i, current }) => (
   </Link>
 )
 
-PageNumber.propTypes = {
-  i: PropTypes.number.isRequired,
-  current: PropTypes.bool
-}
-
-const PrevNext = ({ prevPagePath, nextPagePath }) => {
+const PrevNext = ({
+  prevPagePath,
+  nextPagePath
+}: {
+  prevPagePath?: string
+  nextPagePath?: string
+}) => {
   const link = prevPagePath || nextPagePath
   const rel = prevPagePath ? 'prev' : 'next'
   const title = prevPagePath ? 'Newer Posts' : 'Older Posts'
@@ -29,19 +29,23 @@ const PrevNext = ({ prevPagePath, nextPagePath }) => {
   )
 }
 
-PrevNext.propTypes = {
-  prevPagePath: PropTypes.string,
-  nextPagePath: PropTypes.string
-}
-
-const Pagination = ({ pageContext }) => {
+export default function Pagination({
+  pageContext
+}: {
+  pageContext: {
+    currentPageNumber: number
+    numPages: number
+    prevPage?: number
+    nextPage?: number
+  }
+}) {
   const { currentPageNumber, numPages, prevPage, nextPage } = pageContext
   const isFirst = currentPageNumber === 1
   const isLast = currentPageNumber === numPages
   const prevPagePath = currentPageNumber === 2 ? '/' : `/page/${prevPage}`
   const nextPagePath = `/page/${nextPage}`
 
-  return nextPage > 1 ? (
+  return nextPage && nextPage > 1 ? (
     <div className={styles.pagination}>
       <div>{!isFirst && <PrevNext prevPagePath={prevPagePath} />}</div>
       <div>
@@ -57,9 +61,3 @@ const Pagination = ({ pageContext }) => {
     </div>
   ) : null
 }
-
-Pagination.propTypes = {
-  pageContext: PropTypes.object.isRequired
-}
-
-export default Pagination
diff --git a/src/components/molecules/RelatedPosts.jsx b/src/components/molecules/RelatedPosts.jsx
deleted file mode 100644
index 12e5dfe0..00000000
--- a/src/components/molecules/RelatedPosts.jsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import { graphql, StaticQuery } from 'gatsby'
-import PostTeaser from '../Post/PostTeaser'
-import styles from './RelatedPosts.module.scss'
-
-const query = graphql`
-  query {
-    allMarkdownRemark(sort: { order: DESC, fields: [fields___date] }) {
-      edges {
-        node {
-          id
-          frontmatter {
-            title
-            type
-            linkurl
-            tags
-            image {
-              childImageSharp {
-                ...ImageFluidThumb
-              }
-            }
-          }
-          fields {
-            slug
-            date(formatString: "MMMM DD, YYYY")
-          }
-        }
-      }
-    }
-  }
-`
-
-const postsWithDataFilter = (postsArray, key, valuesToFind) => {
-  const newArray = postsArray.filter(post => {
-    const frontmatterKey = post.node.frontmatter[key]
-
-    if (
-      frontmatterKey !== null &&
-      frontmatterKey.some(r => valuesToFind.includes(r))
-    ) {
-      return post
-    }
-  })
-  return newArray
-}
-
-class RelatedPosts extends PureComponent {
-  shufflePosts = () => {
-    this.forceUpdate()
-  }
-
-  render() {
-    return (
-      <StaticQuery
-        query={query}
-        render={data => {
-          const posts = data.allMarkdownRemark.edges
-          const filteredPosts = postsWithDataFilter(
-            posts,
-            'tags',
-            this.props.tags
-          )
-
-          return (
-            <aside className={styles.relatedPosts}>
-              <h1 className={styles.title}>Related Posts</h1>
-              <ul>
-                {filteredPosts
-                  .sort(() => 0.5 - Math.random())
-                  .slice(0, 6)
-                  .map(({ node }) => (
-                    <PostTeaser key={node.id} post={node} />
-                  ))}
-              </ul>
-              <button
-                className={`${styles.button} btn`}
-                onClick={this.shufflePosts}
-              >
-                Refresh Related Posts
-              </button>
-            </aside>
-          )
-        }}
-      />
-    )
-  }
-}
-
-RelatedPosts.propTypes = {
-  tags: PropTypes.array.isRequired
-}
-
-export default RelatedPosts
diff --git a/src/components/molecules/RelatedPosts.module.scss b/src/components/molecules/RelatedPosts.module.scss
index bac23abc..86c70a95 100644
--- a/src/components/molecules/RelatedPosts.module.scss
+++ b/src/components/molecules/RelatedPosts.module.scss
@@ -2,63 +2,63 @@
 @import 'mixins';
 
 .relatedPosts {
-    margin-top: -($spacer * 2);
+  margin-top: -($spacer * 2);
+  margin-bottom: $spacer;
+
+  @media (min-width: $screen-md) {
+    @include breakoutviewport;
+  }
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 0;
+    margin: 0;
+  }
+
+  li {
+    display: block;
+    flex: 0 0 48%;
     margin-bottom: $spacer;
 
-    @media (min-width: $screen-md) {
-        @include breakoutviewport;
+    @media (min-width: $screen-sm) {
+      flex-basis: 31%;
     }
 
-    ul {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        padding: 0;
-        margin: 0;
+    &::before {
+      display: none;
+    }
+  }
+
+  img {
+    margin-bottom: 0;
+  }
+
+  a {
+    display: block;
+
+    > div {
+      margin-bottom: 0;
     }
 
-    li {
-        display: block;
-        flex: 0 0 48%;
-        margin-bottom: $spacer;
-
-        @media (min-width: $screen-sm) {
-            flex-basis: 31%;
-        }
-
-        &::before {
-            display: none;
-        }
-    }
-
-    img {
-        margin-bottom: 0;
-    }
-
-    a {
-        display: block;
-
-        > div {
-            margin-bottom: 0;
-        }
-
-        &:hover,
-        &:focus {
-            h4 {
-                color: $link-color;
-            }
-        }
+    &:hover,
+    &:focus {
+      h4 {
+        color: $link-color;
+      }
     }
+  }
 }
 
 .title {
-    @include heading-band;
+  @include heading-band;
 
-    font-size: $font-size-h3;
+  font-size: $font-size-h3;
 }
 
 .button {
-    margin: auto;
-    display: block;
-    margin-top: $spacer / 2;
+  margin: auto;
+  display: block;
+  margin-top: $spacer / 2;
 }
diff --git a/src/components/molecules/RelatedPosts.tsx b/src/components/molecules/RelatedPosts.tsx
new file mode 100644
index 00000000..466508f1
--- /dev/null
+++ b/src/components/molecules/RelatedPosts.tsx
@@ -0,0 +1,78 @@
+import React, { useState } from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
+import PostTeaser from '../Post/PostTeaser'
+import styles from './RelatedPosts.module.scss'
+
+const query = graphql`
+  query {
+    allMarkdownRemark(sort: { order: DESC, fields: [fields___date] }) {
+      edges {
+        node {
+          id
+          frontmatter {
+            title
+            type
+            linkurl
+            tags
+            image {
+              childImageSharp {
+                ...ImageFluidThumb
+              }
+            }
+          }
+          fields {
+            slug
+            date(formatString: "MMMM DD, YYYY")
+          }
+        }
+      }
+    }
+  }
+`
+
+const postsWithDataFilter = (
+  postsArray: [],
+  key: string,
+  valuesToFind: string[]
+) => {
+  const newArray = postsArray.filter((post: any) => {
+    const frontmatterKey = post.node.frontmatter[key]
+
+    if (
+      frontmatterKey !== null &&
+      frontmatterKey.some((r: string) => valuesToFind.includes(r))
+    ) {
+      return post
+    }
+  })
+  return newArray
+}
+
+export default function RelatedPosts({ tags }: { tags: string[] }) {
+  const data = useStaticQuery(query)
+  const posts = data.allMarkdownRemark.edges
+  const [filteredPosts, setFilteredPosts] = useState(
+    postsWithDataFilter(posts, 'tags', tags)
+  )
+
+  function refreshPosts() {
+    setFilteredPosts(postsWithDataFilter(posts, 'tags', tags))
+  }
+
+  return (
+    <aside className={styles.relatedPosts}>
+      <h1 className={styles.title}>Related Posts</h1>
+      <ul>
+        {filteredPosts
+          .sort(() => 0.5 - Math.random())
+          .slice(0, 6)
+          .map(({ node }: { node: any }) => (
+            <PostTeaser key={node.id} post={node} />
+          ))}
+      </ul>
+      <button className={`${styles.button} btn`} onClick={refreshPosts}>
+        Refresh Related Posts
+      </button>
+    </aside>
+  )
+}
diff --git a/src/components/molecules/Subscribe.jsx b/src/components/molecules/Subscribe.jsx
deleted file mode 100644
index b38a227b..00000000
--- a/src/components/molecules/Subscribe.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react'
-import { StaticQuery, graphql } from 'gatsby'
-import IconLinks from './IconLinks'
-import styles from './Subscribe.module.scss'
-
-const query = graphql`
-  query {
-    site {
-      siteMetadata {
-        rss
-        jsonfeed
-      }
-    }
-  }
-`
-
-const Subscribe = () => (
-  <StaticQuery
-    query={query}
-    render={data => {
-      const { rss, jsonfeed } = data.site.siteMetadata
-
-      const links = [rss, jsonfeed]
-
-      return (
-        <aside className={styles.subscribe}>
-          <h1 className={styles.title}>Subscribe</h1>
-          <IconLinks links={links} />
-        </aside>
-      )
-    }}
-  />
-)
-
-export default Subscribe
diff --git a/src/components/molecules/Subscribe.module.scss b/src/components/molecules/Subscribe.module.scss
index b8bb4460..dcf1890a 100644
--- a/src/components/molecules/Subscribe.module.scss
+++ b/src/components/molecules/Subscribe.module.scss
@@ -2,15 +2,15 @@
 
 // Subscribe component
 .subscribe {
-    margin: $spacer auto;
+  margin: $spacer auto;
 
-    p {
-        text-align: center;
-        margin: 0;
-    }
+  p {
+    text-align: center;
+    margin: 0;
+  }
 }
 
 .title {
-    font-size: $font-size-h5;
-    margin-bottom: $spacer / 2;
+  font-size: $font-size-h5;
+  margin-bottom: $spacer / 2;
 }
diff --git a/src/components/molecules/Subscribe.tsx b/src/components/molecules/Subscribe.tsx
new file mode 100644
index 00000000..c0e2aa2b
--- /dev/null
+++ b/src/components/molecules/Subscribe.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import IconLinks from './IconLinks'
+import styles from './Subscribe.module.scss'
+import { useSiteMetadata } from '../../hooks/use-site-metadata'
+
+export default function Subscribe() {
+  const { rss, jsonfeed } = useSiteMetadata()
+  const links = [rss, jsonfeed]
+
+  return (
+    <aside className={styles.subscribe}>
+      <h1 className={styles.title}>Subscribe</h1>
+      <IconLinks links={links} />
+    </aside>
+  )
+}
diff --git a/src/components/molecules/Vcard.jsx b/src/components/molecules/Vcard.jsx
deleted file mode 100644
index 73ee28b5..00000000
--- a/src/components/molecules/Vcard.jsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { PureComponent } from 'react'
-import { StaticQuery, graphql } from 'gatsby'
-import Img from 'gatsby-image'
-import IconLinks from './IconLinks'
-import styles from './Vcard.module.scss'
-
-const query = graphql`
-  query {
-    site {
-      siteMetadata {
-        author {
-          name
-          uri
-          twitter
-          github
-          facebook
-        }
-      }
-    }
-
-    avatar: allFile(filter: { name: { eq: "avatar" } }) {
-      edges {
-        node {
-          childImageSharp {
-            fixed(width: 80, height: 80, quality: 90) {
-              ...GatsbyImageSharpFixed_withWebp_noBase64
-            }
-          }
-        }
-      }
-    }
-  }
-`
-
-export default class Vcard extends PureComponent {
-  render() {
-    return (
-      <StaticQuery
-        query={query}
-        render={data => {
-          const {
-            twitter,
-            github,
-            facebook,
-            name,
-            uri
-          } = data.site.siteMetadata.author
-
-          const avatar = data.avatar.edges[0].node.childImageSharp.fixed
-          const links = [twitter, github, facebook]
-
-          return (
-            <div className="vcard author">
-              <Img
-                className={styles.avatar}
-                fixed={avatar}
-                alt="avatar"
-                width="80"
-                height="80"
-              />
-              <p className={styles.description}>
-                Blog of designer &amp; developer{' '}
-                <a className="fn" rel="author" href={uri}>
-                  {name}
-                </a>
-              </p>
-
-              <IconLinks links={links} />
-            </div>
-          )
-        }}
-      />
-    )
-  }
-}
diff --git a/src/components/molecules/Vcard.module.scss b/src/components/molecules/Vcard.module.scss
index 82845646..9f025617 100644
--- a/src/components/molecules/Vcard.module.scss
+++ b/src/components/molecules/Vcard.module.scss
@@ -2,23 +2,23 @@
 @import 'mixins';
 
 .avatar {
-    @include media-frame;
+  @include media-frame;
 
-    margin-bottom: ($spacer / 2);
+  margin-bottom: ($spacer / 2);
 
-    &,
-    img {
-        border-radius: 50%;
-        overflow: hidden;
-    }
+  &,
+  img {
+    border-radius: 50%;
+    overflow: hidden;
+  }
 }
 
 .description {
-    font-size: $font-size-h5;
-    margin-top: 0;
-    margin-bottom: ($spacer / 4);
+  font-size: $font-size-h5;
+  margin-top: 0;
+  margin-bottom: ($spacer / 4);
 
-    a {
-        display: block;
-    }
+  a {
+    display: block;
+  }
 }
diff --git a/src/components/molecules/Vcard.tsx b/src/components/molecules/Vcard.tsx
new file mode 100644
index 00000000..68a5765e
--- /dev/null
+++ b/src/components/molecules/Vcard.tsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
+import Img from 'gatsby-image'
+import IconLinks from './IconLinks'
+import styles from './Vcard.module.scss'
+import { useSiteMetadata } from '../../hooks/use-site-metadata'
+
+const query = graphql`
+  query {
+    avatar: allFile(filter: { name: { eq: "avatar" } }) {
+      edges {
+        node {
+          childImageSharp {
+            fixed(width: 80, height: 80, quality: 90) {
+              ...GatsbyImageSharpFixed_withWebp_noBase64
+            }
+          }
+        }
+      }
+    }
+  }
+`
+
+export default function Vcard() {
+  const data = useStaticQuery(query)
+  const { twitter, github, facebook, name, uri } = useSiteMetadata().author
+  const avatar = data.avatar.edges[0].node.childImageSharp.fixed
+  const links = [twitter, github, facebook]
+
+  return (
+    <div className="vcard author">
+      <Img
+        className={styles.avatar}
+        fixed={avatar}
+        alt="avatar"
+        width="80"
+        height="80"
+      />
+      <p className={styles.description}>
+        Blog of designer &amp; developer{' '}
+        <a className="fn" rel="author" href={uri}>
+          {name}
+        </a>
+      </p>
+
+      <IconLinks links={links} />
+    </div>
+  )
+}
diff --git a/src/components/organisms/Footer.jsx b/src/components/organisms/Footer.jsx
deleted file mode 100644
index 25b4dc90..00000000
--- a/src/components/organisms/Footer.jsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, { PureComponent } from 'react'
-import { StaticQuery, graphql } from 'gatsby'
-
-import Container from '../atoms/Container'
-import Vcard from '../molecules/Vcard'
-import Subscribe from '../molecules/Subscribe'
-import ModalThanks from '../molecules/ModalThanks'
-
-import { ReactComponent as Github } from '../../images/github.svg'
-import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg'
-
-import styles from './Footer.module.scss'
-
-const query = graphql`
-  query {
-    site {
-      siteMetadata {
-        author {
-          name
-          uri
-          bitcoin
-          github
-        }
-      }
-    }
-  }
-`
-
-export default class Footer extends PureComponent {
-  state = {
-    year: null,
-    showModal: false
-  }
-
-  toggleModal = () => {
-    this.setState({ showModal: !this.state.showModal })
-  }
-
-  componentDidMount() {
-    const year = new Date().getFullYear()
-    this.setState({ year })
-  }
-
-  render() {
-    return (
-      <StaticQuery
-        query={query}
-        render={data => {
-          const { name, uri, bitcoin, github } = data.site.siteMetadata.author
-
-          return (
-            <footer role="contentinfo" className={styles.footer}>
-              <Container>
-                <Vcard />
-                <Subscribe />
-
-                <section className={styles.copyright}>
-                  <p>
-                    &copy; 2005&ndash;
-                    {this.state.year + ' '}
-                    <a href={uri} rel="me">
-                      {name}
-                    </a>
-                  </p>
-
-                  <p>
-                    <a href={`${github}/blog`}>
-                      <Github />
-                      View source
-                    </a>
-                    <button className={styles.btc} onClick={this.toggleModal}>
-                      <Bitcoin />
-                      <code>{bitcoin}</code>
-                    </button>
-                  </p>
-
-                  {this.state.showModal && (
-                    <ModalThanks
-                      isOpen={this.state.showModal}
-                      handleCloseModal={this.toggleModal}
-                    />
-                  )}
-                </section>
-              </Container>
-            </footer>
-          )
-        }}
-      />
-    )
-  }
-}
diff --git a/src/components/organisms/Footer.module.scss b/src/components/organisms/Footer.module.scss
index 2d968f87..b7f2e1c2 100644
--- a/src/components/organisms/Footer.module.scss
+++ b/src/components/organisms/Footer.module.scss
@@ -2,57 +2,57 @@
 @import 'mixins';
 
 .footer {
-    text-align: center;
-    padding-top: $spacer * 2;
-    color: $text-color-light;
-    line-height: $spacer;
+  text-align: center;
+  padding-top: $spacer * 2;
+  color: $text-color-light;
+  line-height: $spacer;
 
-    @media (min-width: $screen-sm) and (min-height: 500px) {
-        position: fixed;
-        width: 100%;
-        border: 0;
-        will-change: transform;
-        z-index: 0;
-        bottom: 0;
-        box-shadow: none;
-    }
+  @media (min-width: $screen-sm) and (min-height: 500px) {
+    position: fixed;
+    width: 100%;
+    border: 0;
+    will-change: transform;
+    z-index: 0;
+    bottom: 0;
+    box-shadow: none;
+  }
 
-    svg {
-        fill: $brand-grey-light;
-    }
+  svg {
+    fill: $brand-grey-light;
+  }
 }
 
 .copyright {
-    padding-top: $spacer;
-    padding-bottom: $spacer;
+  padding-top: $spacer;
+  padding-bottom: $spacer;
 
-    p {
-        margin-bottom: 0;
-        font-size: $font-size-mini;
-    }
+  p {
+    margin-bottom: 0;
+    font-size: $font-size-mini;
+  }
 
-    svg {
-        width: 15px;
-        height: 15px;
-        margin-right: .2em;
-        margin-bottom: -2px;
-        display: inline-block;
-    }
+  svg {
+    width: 15px;
+    height: 15px;
+    margin-right: 0.2em;
+    margin-bottom: -2px;
+    display: inline-block;
+  }
 }
 
 .btc {
-    margin-left: ($spacer / 2);
+  margin-left: ($spacer / 2);
 
-    // stylelint-disable-next-line
-    svg {
-        width: 10px;
-        margin-right: 0;
-    }
+  // stylelint-disable-next-line
+  svg {
+    width: 10px;
+    margin-right: 0;
+  }
 
-    code {
-        font-size: .6rem;
-        background: none;
-        color: $link-color;
-        padding: 0;
-    }
+  code {
+    font-size: 0.6rem;
+    background: none;
+    color: $link-color;
+    padding: 0;
+  }
 }
diff --git a/src/components/organisms/Footer.tsx b/src/components/organisms/Footer.tsx
new file mode 100644
index 00000000..be7b8712
--- /dev/null
+++ b/src/components/organisms/Footer.tsx
@@ -0,0 +1,67 @@
+import React, { useState } from 'react'
+import Container from '../atoms/Container'
+import Vcard from '../molecules/Vcard'
+import Subscribe from '../molecules/Subscribe'
+import ModalThanks from '../molecules/ModalThanks'
+
+import { ReactComponent as Github } from '../../images/github.svg'
+import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg'
+
+import styles from './Footer.module.scss'
+import { useSiteMetadata } from '../../hooks/use-site-metadata'
+
+function Copyright({
+  toggleModal,
+  showModal
+}: {
+  toggleModal(): void
+  showModal: boolean
+}) {
+  const { name, uri, bitcoin, github } = useSiteMetadata().author
+  const year = new Date().getFullYear()
+
+  return (
+    <section className={styles.copyright}>
+      <p>
+        &copy; 2005&ndash;
+        {year + ' '}
+        <a href={uri} rel="me">
+          {name}
+        </a>
+      </p>
+
+      <p>
+        <a href={`${github}/blog`}>
+          <Github />
+          View source
+        </a>
+        <button className={styles.btc} onClick={toggleModal}>
+          <Bitcoin />
+          <code>{bitcoin}</code>
+        </button>
+      </p>
+
+      {showModal && (
+        <ModalThanks isOpen={showModal} handleCloseModal={toggleModal} />
+      )}
+    </section>
+  )
+}
+
+export default function Footer() {
+  const [showModal, setShowModal] = useState(false)
+
+  const toggleModal = () => {
+    setShowModal(!showModal)
+  }
+
+  return (
+    <footer role="contentinfo" className={styles.footer}>
+      <Container>
+        <Vcard />
+        <Subscribe />
+        <Copyright showModal={showModal} toggleModal={toggleModal} />
+      </Container>
+    </footer>
+  )
+}
diff --git a/src/components/organisms/Header.jsx b/src/components/organisms/Header.jsx
deleted file mode 100644
index 18b76d90..00000000
--- a/src/components/organisms/Header.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { PureComponent } from 'react'
-import { Link } from 'gatsby'
-import Container from '../atoms/Container'
-import Search from '../Search/Search'
-import Menu from '../molecules/Menu'
-
-import styles from './Header.module.scss'
-
-export default class Header extends PureComponent {
-  render() {
-    return (
-      <header role="banner" className={styles.header}>
-        <Container>
-          <div className={styles.header__content}>
-            <h1 className={styles.title}>
-              <Link className={styles.header__logo} to="/">
-                kremalicious
-              </Link>
-            </h1>
-
-            <nav role="navigation" className={styles.nav}>
-              <Search lng="en" />
-              <Menu />
-            </nav>
-          </div>
-        </Container>
-      </header>
-    )
-  }
-}
diff --git a/src/components/organisms/Header.module.scss b/src/components/organisms/Header.module.scss
index bcd4973b..cbd69b9d 100644
--- a/src/components/organisms/Header.module.scss
+++ b/src/components/organisms/Header.module.scss
@@ -2,88 +2,88 @@
 @import 'mixins';
 
 .header {
-    margin-top: ($spacer/2);
-    margin-bottom: ($spacer/2);
+  margin-top: ($spacer/2);
+  margin-bottom: ($spacer/2);
 
-    @media (min-width: $screen-sm) and (min-height: 500px) {
-        position: fixed;
-        width: 100%;
-        z-index: 1;
-        top: 0;
-        border: 0;
-        will-change: transform;
-    }
+  @media (min-width: $screen-sm) and (min-height: 500px) {
+    position: fixed;
+    width: 100%;
+    z-index: 1;
+    top: 0;
+    border: 0;
+    will-change: transform;
+  }
 }
 
 .header__content {
-    @include breakoutviewport;
+  @include breakoutviewport;
 
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    padding: 0 $spacer;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 $spacer;
 
-    @media (min-width: $screen-md) {
-        padding: 0;
-    }
+  @media (min-width: $screen-md) {
+    padding: 0;
+  }
 }
 
 // Logo
 /////////////////////////////////////
 
 .logo {
-    display: block;
-    background-image: url('../../images/logo.png');
-    background-repeat: no-repeat;
-    background-position: left top;
-    width: 47px;
-    height: 31px;
+  display: block;
+  background-image: url('../../images/logo.png');
+  background-repeat: no-repeat;
+  background-position: left top;
+  width: 47px;
+  height: 31px;
 
-    @media (min-width: $screen-sm) {
-        width: 183px;
-    }
+  @media (min-width: $screen-sm) {
+    width: 183px;
+  }
 
-    @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
-        background-image: url('../../images/logo@2x.png');
-        background-size: 183px 62px;
-    }
+  @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
+    background-image: url('../../images/logo@2x.png');
+    background-size: 183px 62px;
+  }
 
-    @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 344dpi) {
-        background-image: url('../../images/logo@3x.png');
-        background-size: 183px 62px;
-    }
+  @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 344dpi) {
+    background-image: url('../../images/logo@3x.png');
+    background-size: 183px 62px;
+  }
 }
 
 .title {
-    margin-top: $spacer / 5;
-    margin-bottom: 0;
-    // display toned down logo
-    // by default
-    @extend .logo;
+  margin-top: $spacer / 5;
+  margin-bottom: 0;
+  // display toned down logo
+  // by default
+  @extend .logo;
 }
 
 .header__logo {
-    @include hide-text;
-    // repeat logo
-    // but display hover version
-    @extend .logo;
+  @include hide-text;
+  // repeat logo
+  // but display hover version
+  @extend .logo;
 
-    background-position: left bottom;
+  background-position: left bottom;
 
-    // hide by default
-    opacity: 0;
-    // show smooooothly on hover
-    &:hover {
-        opacity: 1;
-        transform: none;
-    }
+  // hide by default
+  opacity: 0;
+  // show smooooothly on hover
+  &:hover {
+    opacity: 1;
+    transform: none;
+  }
 
-    &:active {
-        top: 0;
-        box-shadow: none;
-    }
+  &:active {
+    top: 0;
+    box-shadow: none;
+  }
 }
 
 .nav {
-    display: inline-block;
+  display: inline-block;
 }
diff --git a/src/components/organisms/Header.tsx b/src/components/organisms/Header.tsx
new file mode 100644
index 00000000..d04a61f7
--- /dev/null
+++ b/src/components/organisms/Header.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { Link } from 'gatsby'
+import Container from '../atoms/Container'
+import Search from '../Search'
+import Menu from '../molecules/Menu'
+
+import styles from './Header.module.scss'
+
+export default function Header() {
+  return (
+    <header role="banner" className={styles.header}>
+      <Container>
+        <div className={styles.header__content}>
+          <h1 className={styles.title}>
+            <Link className={styles.header__logo} to="/">
+              kremalicious
+            </Link>
+          </h1>
+
+          <nav role="navigation" className={styles.nav}>
+            <Search lng="en" />
+            <Menu />
+          </nav>
+        </div>
+      </Container>
+    </header>
+  )
+}
diff --git a/src/hooks/use-site-metadata.ts b/src/hooks/use-site-metadata.ts
new file mode 100644
index 00000000..48110ebe
--- /dev/null
+++ b/src/hooks/use-site-metadata.ts
@@ -0,0 +1,38 @@
+import { useStaticQuery, graphql } from 'gatsby'
+
+const query = graphql`
+  query {
+    site {
+      siteMetadata {
+        siteTitle
+        siteTitleShort
+        siteDescription
+        siteUrl
+        author {
+          name
+          email
+          uri
+          twitter
+          github
+          facebook
+          bitcoin
+          ether
+        }
+        typekitID
+        menu {
+          title
+          link
+        }
+        rss
+        jsonfeed
+        itemsPerPage
+        repoContentPath
+      }
+    }
+  }
+`
+
+export const useSiteMetadata = () => {
+  const { site } = useStaticQuery(query)
+  return site.siteMetadata
+}
diff --git a/src/pages/404.module.scss b/src/pages/404.module.scss
index af5d4245..d53ce88a 100644
--- a/src/pages/404.module.scss
+++ b/src/pages/404.module.scss
@@ -1,76 +1,76 @@
 @import 'variables';
 
 .wrapper {
-    text-align: center;
-    margin-bottom: $spacer * 4;
+  text-align: center;
+  margin-bottom: $spacer * 4;
 }
 
 .title {
-    font-size: $font-size-h3;
-    margin-top: 0;
-    margin-bottom: $spacer / 4;
+  font-size: $font-size-h3;
+  margin-top: 0;
+  margin-bottom: $spacer / 4;
 }
 
 .text {
-    font-size: $font-size-base;
-    color: $brand-grey-light;
+  font-size: $font-size-base;
+  color: $brand-grey-light;
 }
 
 // HAL needs a size
 $hal-size: 72px;
 
 .hal9000 {
+  width: $hal-size;
+  height: $hal-size;
+  border-radius: $hal-size;
+  background: #444;
+  padding: 1.5em;
+  margin: $spacer auto;
+  position: relative;
+  border: 4px solid #ccc;
+  box-shadow: inset 0 0 10px #000;
+
+  // eye
+  &::before {
+    content: '';
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
+    display: block;
+    background: red;
+    box-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red, 0 0 20px red,
+      0 0 25px red, 0 0 30px red, 0 0 40px red;
+    animation: halpulse 7s infinite;
+  }
+
+  // gloss
+  &::after {
+    content: '';
+    position: absolute;
     width: $hal-size;
     height: $hal-size;
     border-radius: $hal-size;
-    background: #444;
-    padding: 1.5em;
-    margin: $spacer auto;
-    position: relative;
-    border: 4px solid #ccc;
-    box-shadow: inset 0 0 10px #000;
-
-    // eye
-    &::before {
-        content: '';
-        width: 100%;
-        height: 100%;
-        border-radius: 100%;
-        display: block;
-        background: red;
-        box-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red, 0 0 20px red,
-            0 0 25px red, 0 0 30px red, 0 0 40px red;
-        animation: halpulse 7s infinite;
-    }
-
-    // gloss
-    &::after {
-        content: '';
-        position: absolute;
-        width: $hal-size;
-        height: $hal-size;
-        border-radius: $hal-size;
-        left: 0;
-        top: 0;
-        background-image: linear-gradient(
-            135deg,
-            rgba(255, 255, 255, .07) 0%,
-            rgba(255, 255, 255, .07) 40%,
-            rgba(255, 255, 255, 0) 41%
-        );
-    }
+    left: 0;
+    top: 0;
+    background-image: linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.07) 0%,
+      rgba(255, 255, 255, 0.07) 40%,
+      rgba(255, 255, 255, 0) 41%
+    );
+  }
 }
 
 @keyframes halpulse {
-    0% {
-        opacity: 1;
-    }
+  0% {
+    opacity: 1;
+  }
 
-    50% {
-        opacity: .6;
-    }
+  50% {
+    opacity: 0.6;
+  }
 
-    100% {
-        opacity: 1;
-    }
+  100% {
+    opacity: 1;
+  }
 }
diff --git a/src/pages/404.jsx b/src/pages/404.tsx
similarity index 82%
rename from src/pages/404.jsx
rename to src/pages/404.tsx
index 3440446f..1172f9d1 100644
--- a/src/pages/404.jsx
+++ b/src/pages/404.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 import Page from '../templates/Page'
 import styles from './404.module.scss'
@@ -10,7 +9,7 @@ const page = {
   }
 }
 
-const NotFound = ({ location }) => (
+const NotFound = ({ location }: { location: Location }) => (
   <Page title={page.frontmatter.title} post={page} location={location}>
     <div className={styles.hal9000} />
 
@@ -24,8 +23,4 @@ const NotFound = ({ location }) => (
   </Page>
 )
 
-NotFound.propTypes = {
-  location: PropTypes.object.isRequired
-}
-
 export default NotFound
diff --git a/src/pages/goodies.module.scss b/src/pages/goodies.module.scss
index 61474506..814d77af 100644
--- a/src/pages/goodies.module.scss
+++ b/src/pages/goodies.module.scss
@@ -2,36 +2,36 @@
 @import 'mixins';
 
 .image {
-    @include breakoutviewport;
+  @include breakoutviewport;
 
-    max-width: none;
+  max-width: none;
 }
 
 .goodie {
-    @include divider;
+  @include divider;
 
-    padding-top: $spacer;
-    padding-bottom: $spacer * 2;
+  padding-top: $spacer;
+  padding-bottom: $spacer * 2;
 
-    &:first-of-type {
-        padding-top: 0;
+  &:first-of-type {
+    padding-top: 0;
+  }
+
+  &:last-child {
+    border-bottom: 0;
+    padding-bottom: 0;
+
+    &::before {
+      display: none;
     }
+  }
 
-    &:last-child {
-        border-bottom: 0;
-        padding-bottom: 0;
-
-        &::before {
-            display: none;
-        }
-    }
-
-    a {
-        display: block;
-    }
+  a {
+    display: block;
+  }
 }
 
 .title {
-    margin-top: 0;
-    margin-bottom: $spacer;
+  margin-top: 0;
+  margin-bottom: $spacer;
 }
diff --git a/src/pages/goodies.jsx b/src/pages/goodies.tsx
similarity index 72%
rename from src/pages/goodies.jsx
rename to src/pages/goodies.tsx
index 05db8313..ab33eb93 100644
--- a/src/pages/goodies.jsx
+++ b/src/pages/goodies.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { graphql, Link } from 'gatsby'
 import PostImage from '../components/Post/PostImage'
 import Page from '../templates/Page'
 import styles from './goodies.module.scss'
+import { FluidObject } from 'gatsby-image'
 
 const page = {
   frontmatter: {
@@ -13,10 +13,17 @@ const page = {
   }
 }
 
-const Goodies = ({ data, location }) => {
-  const edges = data.goodies.edges
+interface GoodieNode {
+  id: string
+  fields: { slug: string }
+  frontmatter: {
+    title: string
+    image: { childImageSharp: { fluid: FluidObject } }
+  }
+}
 
-  const GoodiesThumbs = edges.map(({ node }) => {
+const GoodiesThumbs = ({ edges }: { edges: [{ node: GoodieNode }] }) =>
+  edges.map(({ node }: { node: GoodieNode }) => {
     const { title, image } = node.frontmatter
     const { slug } = node.fields
 
@@ -32,20 +39,20 @@ const Goodies = ({ data, location }) => {
     )
   })
 
+export default function Goodies({
+  data,
+  location
+}: {
+  data: { goodies: { edges: [{ node: GoodieNode }] } }
+  location: Location
+}) {
   return (
     <Page title={page.frontmatter.title} post={page} location={location}>
-      {GoodiesThumbs}
+      <GoodiesThumbs edges={data.goodies.edges} />
     </Page>
   )
 }
 
-Goodies.propTypes = {
-  location: PropTypes.object.isRequired,
-  data: PropTypes.object
-}
-
-export default Goodies
-
 export const goodiesQuery = graphql`
   query {
     goodies: allMarkdownRemark(
diff --git a/src/pages/photos.module.scss b/src/pages/photos.module.scss
index 4bffb426..76dbaebd 100644
--- a/src/pages/photos.module.scss
+++ b/src/pages/photos.module.scss
@@ -2,25 +2,25 @@
 @import 'mixins';
 
 .photos {
-    @include breakoutviewport;
+  @include breakoutviewport;
 
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    padding-left: $spacer;
-    padding-right: $spacer;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding-left: $spacer;
+  padding-right: $spacer;
 
-    @media (min-width: $screen-md) {
-        padding-left: 0;
-        padding-right: 0;
-    }
+  @media (min-width: $screen-md) {
+    padding-left: 0;
+    padding-right: 0;
+  }
 }
 
 .photo {
-    flex: 0 0 48%;
-    margin-bottom: 4%;
+  flex: 0 0 48%;
+  margin-bottom: 4%;
 
-    a {
-        display: block;
-    }
+  a {
+    display: block;
+  }
 }
diff --git a/src/pages/photos.jsx b/src/pages/photos.tsx
similarity index 76%
rename from src/pages/photos.jsx
rename to src/pages/photos.tsx
index e5b8e1cc..bae83446 100644
--- a/src/pages/photos.jsx
+++ b/src/pages/photos.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { graphql, Link } from 'gatsby'
 import Image from '../components/atoms/Image'
 import Page from '../templates/Page'
 
 import styles from './photos.module.scss'
+import { FluidObject } from 'gatsby-image'
 
 const page = {
   frontmatter: {
@@ -13,10 +13,17 @@ const page = {
   }
 }
 
-const Photos = ({ data, location }) => {
-  const edges = data.photos.edges
+interface PhotoNode {
+  id: string
+  fields: { slug: string }
+  frontmatter: {
+    title: string
+    image: { childImageSharp: { fluid: FluidObject } }
+  }
+}
 
-  const PhotoThumbs = edges.map(({ node }) => {
+const PhotoThumbs = ({ edges }: { edges: [{ node: PhotoNode }] }) =>
+  edges.map(({ node }) => {
     const { title, image } = node.frontmatter
     const { slug } = node.fields
 
@@ -31,6 +38,13 @@ const Photos = ({ data, location }) => {
     )
   })
 
+export default function Photos({
+  data,
+  location
+}: {
+  data: { photos: { edges: [{ node: PhotoNode }] } }
+  location: Location
+}) {
   return (
     <Page
       title={page.frontmatter.title}
@@ -38,18 +52,11 @@ const Photos = ({ data, location }) => {
       location={location}
       section={styles.photos}
     >
-      {PhotoThumbs}
+      <PhotoThumbs edges={data.photos.edges} />
     </Page>
   )
 }
 
-Photos.propTypes = {
-  location: PropTypes.object.isRequired,
-  data: PropTypes.object
-}
-
-export default Photos
-
 export const photosQuery = graphql`
   query {
     photos: allMarkdownRemark(
diff --git a/src/styles/_alerts.scss b/src/styles/_alerts.scss
index 9e6a1548..0fa3ecbb 100644
--- a/src/styles/_alerts.scss
+++ b/src/styles/_alerts.scss
@@ -1,41 +1,41 @@
 @import 'variables';
 
 .alert {
-    padding: $spacer / 2;
-    margin-bottom: $spacer;
-    border-radius: $border-radius;
-    border: 1px solid transparent;
-    box-shadow: 0 1px 3px rgba($brand-grey, .1), inset 0 1px 0 #fff;
+  padding: $spacer / 2;
+  margin-bottom: $spacer;
+  border-radius: $border-radius;
+  border: 1px solid transparent;
+  box-shadow: 0 1px 3px rgba($brand-grey, 0.1), inset 0 1px 0 #fff;
 
-    @media (min-width: $screen-sm) {
-        padding: $spacer;
-    }
+  @media (min-width: $screen-sm) {
+    padding: $spacer;
+  }
 
-    > p,
-    > ul {
-        margin-bottom: 0;
-    }
+  > p,
+  > ul {
+    margin-bottom: 0;
+  }
 
-    > p + p {
-        margin-top: $spacer;
-    }
+  > p + p {
+    margin-top: $spacer;
+  }
 }
 
 .alert-success {
-    color: darken($alert-success, 60%);
-    background: $alert-success;
-    border-color: darken($alert-success, 10%);
+  color: darken($alert-success, 60%);
+  background: $alert-success;
+  border-color: darken($alert-success, 10%);
 }
 
 .alert-danger,
 .alert-error {
-    color: darken($alert-error, 60%);
-    background: $alert-error;
-    border-color: darken($alert-error, 10%);
+  color: darken($alert-error, 60%);
+  background: $alert-error;
+  border-color: darken($alert-error, 10%);
 }
 
 .alert-info {
-    color: darken($alert-info, 60%);
-    background: $alert-info;
-    border-color: darken($alert-info, 10%);
+  color: darken($alert-info, 60%);
+  background: $alert-info;
+  border-color: darken($alert-info, 10%);
 }
diff --git a/src/styles/_buttons.scss b/src/styles/_buttons.scss
index 444131eb..9e5c214f 100644
--- a/src/styles/_buttons.scss
+++ b/src/styles/_buttons.scss
@@ -3,229 +3,229 @@
 
 .btn,
 a.btn {
-    text-align: center;
-    display: block;
-    margin-bottom: 0;
-    touch-action: manipulation;
-    cursor: pointer;
-    background-image: none; // Reset unusual Firefox-on-Android default style
-    white-space: nowrap;
-    user-select: none;
-    transition: .2s ease-in-out;
+  text-align: center;
+  display: block;
+  margin-bottom: 0;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none; // Reset unusual Firefox-on-Android default style
+  white-space: nowrap;
+  user-select: none;
+  transition: 0.2s ease-in-out;
 
-    // Default Button
-    @include button-size(
-        $padding-base-vertical,
-        $padding-base-horizontal,
-        $font-size-small,
-        $line-height,
-        $border-radius
-    );
+  // Default Button
+  @include button-size(
+    $padding-base-vertical,
+    $padding-base-horizontal,
+    $font-size-small,
+    $line-height,
+    $border-radius
+  );
 
-    background-color: rgba(255, 255, 255, .1);
-    border: 1px solid rgba(94, 131, 162, .3);
-    border-bottom-color: rgba(94, 131, 162, .4);
-    font-family: $font-family-headings;
-    font-weight: $font-weight-headings;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(94, 131, 162, 0.3);
+  border-bottom-color: rgba(94, 131, 162, 0.4);
+  font-family: $font-family-headings;
+  font-weight: $font-weight-headings;
+  color: $brand-grey;
+  text-transform: uppercase;
+  box-shadow: 0 1px 3px rgba($brand-grey-light, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.7);
+
+  @media (min-width: $screen-sm) {
+    max-width: 20rem;
+  }
+
+  &:hover,
+  &:focus {
+    outline: 0;
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+
+  &:active {
     color: $brand-grey;
-    text-transform: uppercase;
-    box-shadow: 0 1px 3px rgba($brand-grey-light, .1),
-        inset 0 1px 0 rgba(255, 255, 255, .7);
+    border-color: rgba(94, 131, 162, 0.3);
+    background-color: transparent;
+    box-shadow: 0 1px 0 #fff;
+    transition: none;
+    outline: 0;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  // Disabled State
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.6;
+    box-shadow: none;
+  }
+
+  // grid buttons
+  &.col2,
+  &.col3 {
+    margin-bottom: $spacer / 2;
 
     @media (min-width: $screen-sm) {
-        max-width: 20rem;
+      margin-bottom: 0;
     }
+  }
 
-    &:hover,
-    &:focus {
-        outline: 0;
-        background-color: rgba(255, 255, 255, .5);
-    }
-
-    &:active {
-        color: $brand-grey;
-        border-color: rgba(94, 131, 162, .3);
-        background-color: transparent;
-        box-shadow: 0 1px 0 #fff;
-        transition: none;
-        outline: 0;
-    }
-
-    &:focus {
-        outline: 0;
-    }
-
-    // Disabled State
-    &.disabled,
-    &[disabled],
-    fieldset[disabled] & {
-        cursor: not-allowed;
-        pointer-events: none;
-        opacity: .6;
-        box-shadow: none;
-    }
-
-    // grid buttons
-    &.col2,
-    &.col3 {
-        margin-bottom: $spacer / 2;
-
-        @media (min-width: $screen-sm) {
-            margin-bottom: 0;
-        }
-    }
-
-    span {
-        font-size: .9rem;
-        color: rgba(19, 56, 50, .6);
-        margin-left: .3em;
-    }
+  span {
+    font-size: 0.9rem;
+    color: rgba(19, 56, 50, 0.6);
+    margin-left: 0.3em;
+  }
 }
 
 button.link {
-    color: $link-color;
+  color: $link-color;
 
-    &:hover,
-    &:focus {
-        outline: 0;
-        color: lighten($link-color, 10%);
-    }
+  &:hover,
+  &:focus {
+    outline: 0;
+    color: lighten($link-color, 10%);
+  }
 
-    &:active {
-        transition: none;
-        color: darken($link-color, 10%);
-    }
+  &:active {
+    transition: none;
+    color: darken($link-color, 10%);
+  }
 }
 
 // Primary Button
 .btn-primary,
 a.btn-primary {
-    @extend .btn;
+  @extend .btn;
 
+  color: darken($link-color, 50%);
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+  background: lighten($link-color, 15%);
+  border-color: $link-color;
+  box-shadow: 0 1px 3px rgba($brand-grey-light, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.4);
+
+  &:hover,
+  &:focus {
     color: darken($link-color, 50%);
-    text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
-    background: lighten($link-color, 15%);
-    border-color: $link-color;
-    box-shadow: 0 1px 3px rgba($brand-grey-light, .4),
-        inset 0 1px 0 rgba(255, 255, 255, .4);
+    background-color: lighten($link-color, 25%);
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+  }
 
-    &:hover,
-    &:focus {
-        color: darken($link-color, 50%);
-        background-color: lighten($link-color, 25%);
-        text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
-    }
-
-    &:active {
-        color: darken($link-color, 50%);
-        border-color: darken($link-color, 10%);
-        background-color: lighten($link-color, 15%);
-    }
+  &:active {
+    color: darken($link-color, 50%);
+    border-color: darken($link-color, 10%);
+    background-color: lighten($link-color, 15%);
+  }
 }
 
 .btn-block {
-    display: block;
+  display: block;
 }
 
 // Close button
 /////////////////////////////////////
 
 .close {
-    text-align: center;
-    display: block;
-    color: lighten($brand-grey-light, 50%);
-    line-height: 1;
-    font-size: $font-size-large;
-    padding: 3px;
+  text-align: center;
+  display: block;
+  color: lighten($brand-grey-light, 50%);
+  line-height: 1;
+  font-size: $font-size-large;
+  padding: 3px;
+  cursor: pointer;
+
+  &button {
     cursor: pointer;
+    background: transparent;
+    border: 0;
+    -webkit-appearance: none;
+  }
 
-    &button {
-        cursor: pointer;
-        background: transparent;
-        border: 0;
-        -webkit-appearance: none;
-    }
+  &:hover,
+  &:focus {
+    color: lighten($brand-grey-light, 20%);
+    cursor: pointer;
+    outline: 0;
+  }
 
-    &:hover,
-    &:focus {
-        color: lighten($brand-grey-light, 20%);
-        cursor: pointer;
-        outline: 0;
-    }
-
-    &:active {
-        background: none;
-        color: $brand-grey-light;
-        transition: none;
-    }
+  &:active {
+    background: none;
+    color: $brand-grey-light;
+    transition: none;
+  }
 }
 
 // some helper classes for old content
 /////////////////////////////////////
 
 .content-download {
-    text-align: center;
-    display: block;
-    margin-top: $spacer;
-    margin-bottom: $spacer;
+  text-align: center;
+  display: block;
+  margin-top: $spacer;
+  margin-bottom: $spacer;
+
+  @media (min-width: $screen-xs) {
+    display: flex;
+  }
+
+  a {
+    @extend .btn;
+
+    margin-bottom: $spacer / 2;
 
     @media (min-width: $screen-xs) {
-        display: flex;
+      flex: 1;
+      margin-left: $spacer / 2;
+      margin-bottom: 0;
     }
 
-    a {
-        @extend .btn;
-
-        margin-bottom: $spacer / 2;
-
-        @media (min-width: $screen-xs) {
-            flex: 1;
-            margin-left: $spacer / 2;
-            margin-bottom: 0;
-        }
-
-        &:first-child {
-            margin-left: 0;
-        }
-
-        &:only-child {
-            margin-left: auto;
-            margin-right: auto;
-        }
-
-        span {
-            font-size: $font-size-mini;
-            color: $text-color-light;
-        }
+    &:first-child {
+      margin-left: 0;
     }
 
-    .icon-download,
-    .icon-heart,
-    .icon-wordpress,
-    .icon-github,
-    .icon-eye {
-        &::before {
-            content: '';
-            width: $font-size-large;
-            height: $font-size-large;
-            display: inline-block;
-            margin-right: .3rem;
-            margin-bottom: -.25rem;
-            opacity: .5;
-            background: url('../images/arrow-with-circle-down.svg') no-repeat
-                left center;
-        }
+    &:only-child {
+      margin-left: auto;
+      margin-right: auto;
     }
 
-    .icon-heart::before {
-        background-image: url('../images/heart.svg');
+    span {
+      font-size: $font-size-mini;
+      color: $text-color-light;
     }
+  }
 
-    .icon-github::before {
-        background-image: url('../images/github.svg');
+  .icon-download,
+  .icon-heart,
+  .icon-wordpress,
+  .icon-github,
+  .icon-eye {
+    &::before {
+      content: '';
+      width: $font-size-large;
+      height: $font-size-large;
+      display: inline-block;
+      margin-right: 0.3rem;
+      margin-bottom: -0.25rem;
+      opacity: 0.5;
+      background: url('../images/arrow-with-circle-down.svg') no-repeat left
+        center;
     }
+  }
 
-    .icon-eye::before {
-        background-image: url('../images/eye.svg');
-    }
+  .icon-heart::before {
+    background-image: url('../images/heart.svg');
+  }
+
+  .icon-github::before {
+    background-image: url('../images/github.svg');
+  }
+
+  .icon-eye::before {
+    background-image: url('../images/eye.svg');
+  }
 }
diff --git a/src/styles/_code.scss b/src/styles/_code.scss
index a5a168b7..1e8d9fde 100644
--- a/src/styles/_code.scss
+++ b/src/styles/_code.scss
@@ -4,130 +4,130 @@ code,
 kbd,
 pre,
 samp {
-    font-family: $font-family-monospace;
-    font-size: $font-size-small;
+  font-family: $font-family-monospace;
+  font-size: $font-size-small;
 }
 
 code,
 kbd {
-    padding: .1rem;
+  padding: 0.1rem;
 }
 
 code,
 samp {
-    white-space: normal;
-    color: inherit;
-    background-color: rgba($code-bg, .05);
-    border-radius: $border-radius;
+  white-space: normal;
+  color: inherit;
+  background-color: rgba($code-bg, 0.05);
+  border-radius: $border-radius;
 }
 
 kbd {
-    color: $kbd-color;
-    background-color: $kbd-bg;
-    border-radius: $border-radius;
-    border: 1px solid $kbd-bg;
-    box-shadow: inset 0 1px 0 rgba(#fff, .4);
-    padding: .15rem .4rem;
+  color: $kbd-color;
+  background-color: $kbd-bg;
+  border-radius: $border-radius;
+  border: 1px solid $kbd-bg;
+  box-shadow: inset 0 1px 0 rgba(#fff, 0.4);
+  padding: 0.15rem 0.4rem;
 }
 
 pre {
-    position: relative;
-    display: block;
-    padding: 0;
-    margin-bottom: $spacer;
-    line-height: $line-height;
-    color: $code-color;
-    background-color: $code-bg;
-    border-radius: $border-radius;
+  position: relative;
+  display: block;
+  padding: 0;
+  margin-bottom: $spacer;
+  line-height: $line-height;
+  color: $code-color;
+  background-color: $code-bg;
+  border-radius: $border-radius;
 
-    // make 'em scrollable
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-    max-height: 800px;
+  // make 'em scrollable
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  max-height: 800px;
+
+  @media (min-width: $screen-sm) {
+    margin-left: -($spacer);
+    margin-right: -($spacer);
+  }
+
+  code {
+    font-size: 0.8rem;
+    padding: $spacer / 2;
+    white-space: pre;
+    display: block;
+    color: inherit;
+    overflow-wrap: normal;
+    word-wrap: normal;
+    word-break: normal;
+    float: left;
 
     @media (min-width: $screen-sm) {
-        margin-left: -($spacer);
-        margin-right: -($spacer);
+      padding: $spacer;
     }
+  }
 
-    code {
-        font-size: .8rem;
-        padding: $spacer / 2;
-        white-space: pre;
-        display: block;
-        color: inherit;
-        overflow-wrap: normal;
-        word-wrap: normal;
-        word-break: normal;
-        float: left;
+  &::-webkit-scrollbar {
+    width: 0.35rem;
+    height: 0.35rem;
+  }
 
-        @media (min-width: $screen-sm) {
-            padding: $spacer;
-        }
-    }
+  &::-webkit-scrollbar-thumb {
+    background: rgba($brand-main, 0.8);
+    border-radius: $border-radius;
+  }
 
-    &::-webkit-scrollbar {
-        width: .35rem;
-        height: .35rem;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: rgba($brand-main, .8);
-        border-radius: $border-radius;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: rgba($brand-main, .2);
-        border-bottom-left-radius: $border-radius;
-        border-bottom-right-radius: $border-radius;
-    }
+  &::-webkit-scrollbar-track {
+    background: rgba($brand-main, 0.2);
+    border-bottom-left-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+  }
 }
 
 pre[data-language]::before {
-    background: $brand-grey;
-    border-radius: 0 0 $border-radius $border-radius;
-    color: $brand-grey-dimmed;
-    font-size: $font-size-mini;
-    font-family: $font-family-base;
-    letter-spacing: .05em;
-    line-height: 1;
-    padding: .25rem .5rem;
-    position: absolute;
-    right: $spacer / 2;
-    top: 0;
+  background: $brand-grey;
+  border-radius: 0 0 $border-radius $border-radius;
+  color: $brand-grey-dimmed;
+  font-size: $font-size-mini;
+  font-family: $font-family-base;
+  letter-spacing: 0.05em;
+  line-height: 1;
+  padding: 0.25rem 0.5rem;
+  position: absolute;
+  right: $spacer / 2;
+  top: 0;
 }
 
 pre[data-language='js']::before {
-    content: 'js';
+  content: 'js';
 }
 
 pre[data-language='bash'] {
+  &::before {
+    content: 'bash';
+  }
+
+  .vscode-highlight-line:only-child {
+    padding-left: 0.5rem;
+    display: block;
+
     &::before {
-        content: 'bash';
-    }
-
-    .vscode-highlight-line:only-child {
-        padding-left: .5rem;
-        display: block;
-
-        &::before {
-            content: '$';
-            opacity: .5;
-            display: inline-block;
-            margin-left: -.5rem;
-            margin-right: .5rem;
-        }
+      content: '$';
+      opacity: 0.5;
+      display: inline-block;
+      margin-left: -0.5rem;
+      margin-right: 0.5rem;
     }
+  }
 }
 
 pre[data-language='html']::before {
-    content: 'html';
+  content: 'html';
 }
 
 pre[data-language='css']::before {
-    content: 'css';
+  content: 'css';
 }
 
 pre[data-language='php']::before {
-    content: 'php';
+  content: 'php';
 }
diff --git a/src/styles/_content.scss b/src/styles/_content.scss
index 0e95de7a..ef912b3d 100644
--- a/src/styles/_content.scss
+++ b/src/styles/_content.scss
@@ -1,17 +1,17 @@
 .gatsby-resp-image-figure,
 .gatsby-resp-image-wrapper {
-    margin-bottom: $spacer;
+  margin-bottom: $spacer;
 }
 
 .anchor {
-    margin-top: $spacer / 3;
-    font-size: $font-size-large;
-    color: $brand-grey-light;
-    font-weight: 700;
+  margin-top: $spacer / 3;
+  font-size: $font-size-large;
+  color: $brand-grey-light;
+  font-weight: 700;
 
-    span {
-        transition: opacity .2s ease-out;
-    }
+  span {
+    transition: opacity 0.2s ease-out;
+  }
 }
 
 h1,
@@ -20,13 +20,13 @@ h3,
 h4,
 h5,
 h6 {
-    .anchor span {
-        opacity: 0;
-    }
+  .anchor span {
+    opacity: 0;
+  }
 
-    &:hover {
-        .anchor span {
-            opacity: 1;
-        }
+  &:hover {
+    .anchor span {
+      opacity: 1;
     }
+  }
 }
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index c84ed71d..31f58a5b 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -4,9 +4,9 @@
 /////////////////////////////////////
 
 @mixin aligncenter() {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 // Toggling content
@@ -14,217 +14,217 @@
 
 // Hide from both screenreaders and browsers: h5bp.com/u
 @mixin hide() {
-    display: none !important;
-    visibility: hidden;
+  display: none !important;
+  visibility: hidden;
 }
 
 @mixin show() {
-    display: block;
-    visibility: visible;
+  display: block;
+  visibility: visible;
 }
 
 // Hide only visually, but have it available for screenreaders: h5bp.com/v
 @mixin visuallyhidden() {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
 
-    // Extends the .visuallyhidden class to allow the
-    // element to be focusable when navigated to via the keyboard: h5bp.com/p
-    &.focusable:active,
-    &.focusable:focus {
-        clip: auto;
-        height: auto;
-        margin: 0;
-        overflow: visible;
-        position: static;
-        width: auto;
-    }
+  // Extends the .visuallyhidden class to allow the
+  // element to be focusable when navigated to via the keyboard: h5bp.com/p
+  &.focusable:active,
+  &.focusable:focus {
+    clip: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    position: static;
+    width: auto;
+  }
 }
 
 // Hide visually and from screenreaders, but maintain layout
 @mixin invisible() {
-    visibility: hidden;
+  visibility: hidden;
 }
 
 // CSS image replacement
 /////////////////////////////////////
 
 @mixin hide-text() {
-    font: 0/0 a; // stylelint-disable font-family-no-missing-generic-family-keyword
-    color: transparent;
-    text-shadow: none;
-    background-color: transparent;
-    border: 0;
+  font: 0/0 a; // stylelint-disable font-family-no-missing-generic-family-keyword
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
 }
 
 // Text overflow
 /////////////////////////////////////
 
 @mixin ellipsis() {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 // Default transition
 /////////////////////////////////////
 
 @mixin transition() {
-    transition: all ease-in-out .15s;
+  transition: all ease-in-out 0.15s;
 }
 
 // Dashed Dividers
 /////////////////////////////////////
 
 @mixin divider() {
-    position: relative;
-    border-bottom: 1px dashed lighten($brand-grey-light, 20%);
-    margin-top: $spacer * $line-height;
-    margin-bottom: $spacer * $line-height;
+  position: relative;
+  border-bottom: 1px dashed lighten($brand-grey-light, 20%);
+  margin-top: $spacer * $line-height;
+  margin-bottom: $spacer * $line-height;
 
-    &::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        height: 1px;
-        bottom: -2px;
-        width: 100%;
-        border-bottom: 1px dashed #fff;
-    }
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    height: 1px;
+    bottom: -2px;
+    width: 100%;
+    border-bottom: 1px dashed #fff;
+  }
 }
 
 @mixin divider-top() {
-    position: relative;
-    border-top: 1px dashed lighten($brand-grey-light, 20%);
-    margin-top: $spacer * $line-height;
-    margin-bottom: $spacer * $line-height;
+  position: relative;
+  border-top: 1px dashed lighten($brand-grey-light, 20%);
+  margin-top: $spacer * $line-height;
+  margin-bottom: $spacer * $line-height;
 
-    &::after {
-        content: '';
-        position: absolute;
-        left: 0;
-        height: 1px;
-        top: 0;
-        width: 100%;
-        border-bottom: 1px dashed #fff;
-    }
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    height: 1px;
+    top: 0;
+    width: 100%;
+    border-bottom: 1px dashed #fff;
+  }
 }
 
 // Heading band
 /////////////////////////////////////
 
 @mixin heading-band() {
-    display: inline-block;
-    background: rgba(255, 255, 255, .5);
-    padding: ($spacer/2) $spacer ($spacer/2) 100%;
-    margin-left: -100%;
+  display: inline-block;
+  background: rgba(255, 255, 255, 0.5);
+  padding: ($spacer/2) $spacer ($spacer/2) 100%;
+  margin-left: -100%;
 }
 
 // Layout breakout
 /////////////////////////////////////
 
 @mixin breakoutviewport() {
-    margin-left: calc(-50vw + 50%);
-    margin-right: calc(-50vw + 50%);
+  margin-left: calc(-50vw + 50%);
+  margin-right: calc(-50vw + 50%);
 
-    @media (min-width: $screen-md) {
-        @include breakoutviewport--base();
-    }
+  @media (min-width: $screen-md) {
+    @include breakoutviewport--base();
+  }
 }
 
 @mixin breakoutviewport--base() {
-    margin-left: -($spacer * 4);
-    margin-right: -($spacer * 4);
+  margin-left: -($spacer * 4);
+  margin-right: -($spacer * 4);
 }
 
 @mixin breakoutviewport--full() {
-    margin-left: calc(-50vw + 50%);
-    margin-right: calc(-50vw + 50%);
+  margin-left: calc(-50vw + 50%);
+  margin-right: calc(-50vw + 50%);
 }
 
 // Button sizing
 /////////////////////////////////////
 
 @mixin button-size(
-    $padding-vertical,
-    $padding-horizontal,
-    $font-size,
-    $line-height,
-    $border-radius
+  $padding-vertical,
+  $padding-horizontal,
+  $font-size,
+  $line-height,
+  $border-radius
 ) {
-    padding: $padding-vertical $padding-horizontal;
-    font-size: $font-size;
-    line-height: $line-height;
-    border-radius: $border-radius;
+  padding: $padding-vertical $padding-horizontal;
+  font-size: $font-size;
+  line-height: $line-height;
+  border-radius: $border-radius;
 }
 
 // Form control sizing
 /////////////////////////////////////
 
 @mixin input-size(
-    $padding-vertical,
-    $padding-horizontal,
-    $font-size,
-    $line-height,
-    $border-radius
+  $padding-vertical,
+  $padding-horizontal,
+  $font-size,
+  $line-height,
+  $border-radius
 ) {
-    padding: $padding-vertical $padding-horizontal;
-    font-size: $font-size;
-    line-height: $line-height;
-    border-radius: $border-radius;
+  padding: $padding-vertical $padding-horizontal;
+  font-size: $font-size;
+  line-height: $line-height;
+  border-radius: $border-radius;
 
-    &input[type='search'] {
-        background-size: $font-size;
-        background-position: $padding-vertical center;
-        padding-left: ($padding-vertical * 4);
-    }
+  &input[type='search'] {
+    background-size: $font-size;
+    background-position: $padding-vertical center;
+    padding-left: ($padding-vertical * 4);
+  }
 
-    &select {
-        line-height: $input-height;
-    }
+  &select {
+    line-height: $input-height;
+  }
 
-    &textarea,
-    &select[multiple] {
-        height: auto;
-    }
+  &textarea,
+  &select[multiple] {
+    height: auto;
+  }
 }
 
 // Placeholder text
 /////////////////////////////////////
 
 @mixin placeholder($color: $input-color-placeholder) {
-    &::-moz-placeholder {
-        color: $color;
-        opacity: 1; // Override Firefox's unusual default opacity; See https//github.com/twbs/bootstrap/pull/11526
-    }
+  &::-moz-placeholder {
+    color: $color;
+    opacity: 1; // Override Firefox's unusual default opacity; See https//github.com/twbs/bootstrap/pull/11526
+  }
 
-    &::-webkit-input-placeholder {
-        color: $color;
-    }
+  &::-webkit-input-placeholder {
+    color: $color;
+  }
 
-    &:-ms-input-placeholder {
-        color: $color;
-    }
+  &:-ms-input-placeholder {
+    color: $color;
+  }
 }
 
 // Image frame style
 /////////////////////////////////////
 
 @mixin media-frame() {
-    @include transition();
+  @include transition();
 
-    border-top: 2px solid transparent;
-    border-bottom: 2px solid transparent;
-    border-radius: $border-radius;
-    box-shadow: 0 1px 3px rgba($brand-grey, .2);
+  border-top: 2px solid transparent;
+  border-bottom: 2px solid transparent;
+  border-radius: $border-radius;
+  box-shadow: 0 1px 3px rgba($brand-grey, 0.2);
 
-    @media (min-width: $screen-sm) {
-        border: 2px solid transparent;
-    }
+  @media (min-width: $screen-sm) {
+    border: 2px solid transparent;
+  }
 }
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 1b33b3c1..6b3e6dd1 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,5 +1,5 @@
 $imageMaxWidth: 940px;
-$easing: cubic-bezier(.75, 0, .08, 1);
+$easing: cubic-bezier(0.75, 0, 0.08, 1);
 
 // Colors
 /////////////////////////////////////
@@ -45,8 +45,8 @@ $font-size-root: 18px;
 
 $font-size-base: 1rem;
 $font-size-large: 1.15rem;
-$font-size-small: .85rem;
-$font-size-mini: .7rem;
+$font-size-small: 0.85rem;
+$font-size-mini: 0.7rem;
 
 $font-size-h1: 2.5rem;
 $font-size-h2: 2rem;
@@ -59,18 +59,18 @@ $line-height: 1.5;
 $line-height-small: 1.1428571429;
 
 $font-family-base: 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue',
-    Helvetica, Arial, sans-serif;
+  Helvetica, Arial, sans-serif;
 $font-weight-base: 400;
 $font-color-base: $text-color;
 
 $font-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas,
-    'Courier New', monospace;
+  'Courier New', monospace;
 
 // Headings
 /////////////////////////////////////
 
 $font-family-headings: 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue',
-    Helvetica, Arial, sans-serif;
+  Helvetica, Arial, sans-serif;
 $font-weight-headings: 500;
 $line-height-headings: 1.1;
 
@@ -81,7 +81,7 @@ $color-headings--dark: $brand-main-light;
 /////////////////////////////////////
 
 $spacer: ($font-size-base * $line-height);
-$padding-base-vertical: .75rem;
+$padding-base-vertical: 0.75rem;
 $padding-base-horizontal: 1.25rem;
 
 $border-radius: 3px;
@@ -105,7 +105,7 @@ $screen-lg: 87.5em;
 // Forms
 /////////////////////////////////////
 
-$input-bg: rgba(#fff, .85);
+$input-bg: rgba(#fff, 0.85);
 $input-bg-focus: #fff;
 $input-bg-disabled: $brand-grey-light;
 
@@ -113,7 +113,7 @@ $input-font-size: $font-size-base;
 $input-font-weight: $font-weight-base;
 
 $input-color: $font-color-base;
-$input-color-placeholder: rgba(46, 79, 92, .3);
+$input-color-placeholder: rgba(46, 79, 92, 0.3);
 
 $input-border: $brand-grey-light;
 $input-border-radius: $border-radius;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index b5887b56..1586524c 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -2,57 +2,57 @@
 @import 'mixins';
 
 * {
-    &,
-    &::before,
-    &::after {
-        box-sizing: border-box;
-    }
+  &,
+  &::before,
+  &::after {
+    box-sizing: border-box;
+  }
 }
 
 html,
 body {
-    margin: 0;
-    padding: 0;
-    background: $body-background-color;
+  margin: 0;
+  padding: 0;
+  background: $body-background-color;
 }
 
 html {
-    font-size: $font-size-root;
+  font-size: $font-size-root;
 }
 
 body {
-    font-family: $font-family-base;
-    font-weight: $font-weight-base;
-    font-size: $font-size-base;
-    line-height: $line-height;
-    color: $font-color-base;
-    text-rendering: optimizeLegibility;
-    letter-spacing: -.01em;
-    font-feature-settings: 'liga', 'kern';
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    min-height: 100vh;
-    transition: background .6s $easing;
+  font-family: $font-family-base;
+  font-weight: $font-weight-base;
+  font-size: $font-size-base;
+  line-height: $line-height;
+  color: $font-color-base;
+  text-rendering: optimizeLegibility;
+  letter-spacing: -0.01em;
+  font-feature-settings: 'liga', 'kern';
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  min-height: 100vh;
+  transition: background 0.6s $easing;
 
-    // handling long text, like URLs
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    word-break: break-word;
+  // handling long text, like URLs
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
 
-    &.dark {
-        background-color: $body-background-color--dark;
-        color: $text-color--dark;
-    }
+  &.dark {
+    background-color: $body-background-color--dark;
+    color: $text-color--dark;
+  }
 }
 
 p,
 ul,
 ol {
-    margin: 0 0 $spacer;
+  margin: 0 0 $spacer;
 }
 
 p:last-child {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 // Reset fonts for relevant elements
@@ -62,24 +62,24 @@ input,
 button,
 select,
 textarea {
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
 }
 
 // Reset default button element
 button {
-    padding: 0;
-    cursor: pointer;
-    background: transparent;
-    border: 0;
-    -webkit-appearance: none;
-    outline: 0;
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  outline: 0;
 
-    &:active {
-        transition: none;
-        text-shadow: none;
-    }
+  &:active {
+    transition: none;
+    text-shadow: none;
+  }
 }
 
 // Headings
@@ -87,62 +87,62 @@ button {
 
 h1,
 h2 {
-    margin-top: $spacer * $line-height;
-    margin-bottom: $spacer * 2;
+  margin-top: $spacer * $line-height;
+  margin-bottom: $spacer * 2;
 }
 
 h3,
 h4,
 h5,
 h6 {
-    margin-top: $spacer * $line-height;
-    margin-bottom: $spacer;
+  margin-top: $spacer * $line-height;
+  margin-bottom: $spacer;
 }
 
 h1 {
-    font-size: $font-size-h2;
+  font-size: $font-size-h2;
 
-    @media (min-width: $screen-xs) {
-        font-size: $font-size-h1;
-    }
+  @media (min-width: $screen-xs) {
+    font-size: $font-size-h1;
+  }
 }
 
 h2 {
-    @include heading-band();
+  @include heading-band();
 
-    font-size: $font-size-h3;
+  font-size: $font-size-h3;
 
-    @media (min-width: $screen-xs) {
-        font-size: $font-size-h2;
-    }
+  @media (min-width: $screen-xs) {
+    font-size: $font-size-h2;
+  }
 }
 
 h3 {
-    font-size: $font-size-h4;
+  font-size: $font-size-h4;
 
-    @media (min-width: $screen-xs) {
-        font-size: $font-size-h3;
-    }
+  @media (min-width: $screen-xs) {
+    font-size: $font-size-h3;
+  }
 }
 
 h4 {
-    font-size: $font-size-h5;
+  font-size: $font-size-h5;
 
-    @media (min-width: $screen-xs) {
-        font-size: $font-size-h4;
-    }
+  @media (min-width: $screen-xs) {
+    font-size: $font-size-h4;
+  }
 }
 
 h5 {
-    font-size: $font-size-h6;
+  font-size: $font-size-h6;
 
-    @media (min-width: $screen-xs) {
-        font-size: $font-size-h5;
-    }
+  @media (min-width: $screen-xs) {
+    font-size: $font-size-h5;
+  }
 }
 
 h6 {
-    font-size: $font-size-h6;
+  font-size: $font-size-h6;
 }
 
 h1,
@@ -151,41 +151,41 @@ h3,
 h4,
 h5,
 h6 {
-    font-family: $font-family-headings;
-    line-height: $line-height-headings;
-    color: $color-headings;
-    font-weight: $font-weight-headings;
-    letter-spacing: -.02em;
+  font-family: $font-family-headings;
+  line-height: $line-height-headings;
+  color: $color-headings;
+  font-weight: $font-weight-headings;
+  letter-spacing: -0.02em;
 
-    .dark & {
-        color: $color-headings--dark;
-    }
+  .dark & {
+    color: $color-headings--dark;
+  }
 }
 
 // Links
 /////////////////////////////////////
 
 a {
-    color: $link-color;
-    text-decoration: none;
-    transition: .2s ease-out;
+  color: $link-color;
+  text-decoration: none;
+  transition: 0.2s ease-out;
 
-    h1 &,
-    h2 &,
-    h3 & {
-        color: $color-headings;
-    }
+  h1 &,
+  h2 &,
+  h3 & {
+    color: $color-headings;
+  }
 
-    &:hover,
-    &:focus {
-        outline: 0;
-        color: $link-color-hover;
-    }
+  &:hover,
+  &:focus {
+    outline: 0;
+    color: $link-color-hover;
+  }
 
-    &:active {
-        transition: none;
-        color: $link-color-active;
-    }
+  &:active {
+    transition: none;
+    color: $link-color-active;
+  }
 }
 
 // Responsive Media
@@ -199,75 +199,75 @@ audio,
 embed,
 canvas,
 picture {
-    max-width: 100%;
-    height: auto;
-    margin: 0 auto;
-    display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+  display: block;
 }
 
 img {
-    vertical-align: middle;
+  vertical-align: middle;
 }
 
 figcaption {
-    font-size: $font-size-small;
-    color: $brand-grey;
-    font-style: italic;
-    text-align: center;
-    margin-top: -($spacer / $line-height);
+  font-size: $font-size-small;
+  color: $brand-grey;
+  font-style: italic;
+  text-align: center;
+  margin-top: -($spacer / $line-height);
 }
 
 // Lists
 /////////////////////////////////////
 
 ul {
-    li {
-        &::before {
-            content: ' \2015'; // horizontal bar: ― &#8213;
-        }
+  li {
+    &::before {
+      content: ' \2015'; // horizontal bar: ― &#8213;
     }
+  }
 }
 
 ol {
-    counter-reset: ol-counter;
+  counter-reset: ol-counter;
 
-    li {
-        &::before {
-            content: counter(ol-counter) '.';
-            counter-increment: ol-counter;
-        }
+  li {
+    &::before {
+      content: counter(ol-counter) '.';
+      counter-increment: ol-counter;
     }
+  }
 
-    ul li::before {
-        display: none;
-    }
+  ul li::before {
+    display: none;
+  }
 }
 
 ul,
 ol {
-    margin-top: 0;
-    margin-bottom: $spacer;
-    padding-left: $spacer;
-    list-style: none;
+  margin-top: 0;
+  margin-bottom: $spacer;
+  padding-left: $spacer;
+  list-style: none;
 
-    li {
-        position: relative;
+  li {
+    position: relative;
 
-        // stylelint-disable no-descending-specificity
-        &::before {
-            position: absolute;
-            left: -($spacer);
-            top: -1px;
-            color: $text-color-light;
-            user-select: none;
-        }
-        // stylelint-enable no-descending-specificity
+    // stylelint-disable no-descending-specificity
+    &::before {
+      position: absolute;
+      left: -($spacer);
+      top: -1px;
+      color: $text-color-light;
+      user-select: none;
     }
+    // stylelint-enable no-descending-specificity
+  }
 
-    ul,
-    ol {
-        margin-bottom: 0;
-    }
+  ul,
+  ol {
+    margin-bottom: 0;
+  }
 }
 
 // Inline typography
@@ -276,92 +276,92 @@ ol {
 b,
 strong,
 .bold {
-    font-weight: 700;
-    font-style: normal;
+  font-weight: 700;
+  font-style: normal;
 }
 
 em,
 .italic {
-    font-style: italic;
+  font-style: italic;
 }
 
 abbr[title],
 dfn {
-    text-transform: none;
-    font-style: normal;
-    font-size: inherit;
-    border-bottom: 1px dashed $brand-grey-dimmed;
-    cursor: help;
-    font-feature-settings: inherit;
+  text-transform: none;
+  font-style: normal;
+  font-size: inherit;
+  border-bottom: 1px dashed $brand-grey-dimmed;
+  cursor: help;
+  font-feature-settings: inherit;
 }
 
 mark {
-    background: #fffaab;
-    color: $text-color;
+  background: #fffaab;
+  color: $text-color;
 }
 
 hr {
-    margin: 0;
-    border: 0;
+  margin: 0;
+  border: 0;
 
-    @include divider();
+  @include divider();
 }
 
 // Quotes
 /////////////////////////////////////
 
 q {
-    font-style: italic;
+  font-style: italic;
 }
 
 cite {
-    font-style: normal;
-    text-transform: uppercase;
+  font-style: normal;
+  text-transform: uppercase;
 }
 
 // stylelint-disable no-descending-specificity
 blockquote,
 blockquote > p {
-    font-style: italic;
-    color: $brand-grey-light;
+  font-style: italic;
+  color: $brand-grey-light;
 }
 // stylelint-enable no-descending-specificity
 
 blockquote {
-    margin: 0 0 $spacer;
-    position: relative;
-    padding-left: $spacer * 1.25;
+  margin: 0 0 $spacer;
+  position: relative;
+  padding-left: $spacer * 1.25;
 
-    // quotation marks
-    &::before {
-        content: '“';
-        font-size: 300%;
-        color: lighten($brand-grey-light, 20%);
-        position: absolute;
-        left: -10px;
-        top: -20px;
+  // quotation marks
+  &::before {
+    content: '“';
+    font-size: 300%;
+    color: lighten($brand-grey-light, 20%);
+    position: absolute;
+    left: -10px;
+    top: -20px;
 
-        @media (min-width: $screen-xs) {
-            left: 0;
-        }
-
-        @media (min-width: $screen-lg) {
-            top: -30px;
-        }
+    @media (min-width: $screen-xs) {
+      left: 0;
     }
+
+    @media (min-width: $screen-lg) {
+      top: -30px;
+    }
+  }
 }
 
 // Selection
 /////////////////////////////////////
 
 ::-moz-selection {
-    background: #2e4f5c;
-    color: #fff;
+  background: #2e4f5c;
+  color: #fff;
 }
 
 ::selection {
-    background: #2e4f5c;
-    color: #fff;
+  background: #2e4f5c;
+  color: #fff;
 }
 
 // More basic elements
diff --git a/src/templates/Page.module.scss b/src/templates/Page.module.scss
index 94fd577b..4bf0a5f3 100644
--- a/src/templates/Page.module.scss
+++ b/src/templates/Page.module.scss
@@ -1,6 +1,6 @@
 @import 'variables';
 
 .pageTitle {
-    composes: archiveTitle from '../templates/Posts.module.scss';
-    margin-bottom: $spacer * 2;
+  composes: archiveTitle from '../templates/Posts.module.scss';
+  margin-bottom: $spacer * 2;
 }
diff --git a/src/templates/Page.jsx b/src/templates/Page.tsx
similarity index 61%
rename from src/templates/Page.jsx
rename to src/templates/Page.tsx
index db47129f..fb2fe4f4 100644
--- a/src/templates/Page.jsx
+++ b/src/templates/Page.tsx
@@ -1,11 +1,22 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
 import SEO from '../components/atoms/SEO'
 import Layout from '../components/Layout'
 import styles from './Page.module.scss'
 
-const Page = ({ title, location, section, children, post }) => {
+export default function Page({
+  title,
+  location,
+  section,
+  children,
+  post
+}: {
+  title: string
+  children: any
+  section?: string
+  location?: any
+  post?: any
+}) {
   return (
     <>
       <Helmet title={title} />
@@ -18,13 +29,3 @@ const Page = ({ title, location, section, children, post }) => {
     </>
   )
 }
-
-Page.propTypes = {
-  title: PropTypes.string.isRequired,
-  children: PropTypes.any.isRequired,
-  section: PropTypes.string,
-  location: PropTypes.object,
-  post: PropTypes.object
-}
-
-export default Page
diff --git a/src/templates/Post.module.scss b/src/templates/Post.module.scss
index a0997ead..7d913b1f 100644
--- a/src/templates/Post.module.scss
+++ b/src/templates/Post.module.scss
@@ -2,11 +2,11 @@
 @import 'mixins';
 
 .hentry {
-    width: 100%;
-    padding-top: $spacer;
-    padding-bottom: $spacer * 3;
+  width: 100%;
+  padding-top: $spacer;
+  padding-bottom: $spacer * 3;
 
-    &:only-child {
-        padding-bottom: $spacer;
-    }
+  &:only-child {
+    padding-bottom: $spacer;
+  }
 }
diff --git a/src/templates/Post.jsx b/src/templates/Post.tsx
similarity index 78%
rename from src/templates/Post.jsx
rename to src/templates/Post.tsx
index 6f491744..db634e94 100644
--- a/src/templates/Post.jsx
+++ b/src/templates/Post.tsx
@@ -1,5 +1,4 @@
-import React, { Fragment } from 'react'
-import PropTypes from 'prop-types'
+import React from 'react'
 import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
 import Layout from '../components/Layout'
@@ -15,14 +14,19 @@ import Exif from '../components/atoms/Exif'
 import RelatedPosts from '../components/molecules/RelatedPosts'
 import styles from './Post.module.scss'
 
-const Post = ({ data, location }) => {
+export default function Post({
+  data,
+  location
+}: {
+  data: any
+  location: Location
+}) {
   const { markdownRemark: post } = data
-  const meta = data.site.siteMetadata
   const { title, image, type, linkurl, style, tags } = post.frontmatter
   const { slug, githubLink } = post.fields
 
   return (
-    <Fragment>
+    <>
       <Helmet title={title}>
         {style && <link rel="stylesheet" href={style.publicURL} />}
       </Helmet>
@@ -42,31 +46,16 @@ const Post = ({ data, location }) => {
           {type !== 'photo' && <PostContent post={post} />}
 
           {type === 'link' && <PostLinkActions slug={slug} linkurl={linkurl} />}
-          <PostActions slug={slug} url={meta.siteUrl} githubLink={githubLink} />
-          <PostMeta post={post} meta={meta} />
+          <PostActions slug={slug} githubLink={githubLink} />
+          <PostMeta post={post} />
         </article>
 
         {type === 'post' && <RelatedPosts tags={tags} />}
       </Layout>
-    </Fragment>
+    </>
   )
 }
 
-PostLead.propTypes = {
-  post: PropTypes.object.isRequired
-}
-
-PostContent.propTypes = {
-  post: PropTypes.object.isRequired
-}
-
-Post.propTypes = {
-  data: PropTypes.object.isRequired,
-  location: PropTypes.object.isRequired
-}
-
-export default Post
-
 export const pageQuery = graphql`
   query BlogPostBySlug($slug: String!) {
     markdownRemark(fields: { slug: { eq: $slug } }) {
@@ -110,15 +99,5 @@ export const pageQuery = graphql`
       }
       rawMarkdownBody
     }
-
-    site {
-      siteMetadata {
-        siteUrl
-        author {
-          name
-          uri
-        }
-      }
-    }
   }
 `
diff --git a/src/templates/Posts.module.scss b/src/templates/Posts.module.scss
index 3f985716..5867385a 100644
--- a/src/templates/Posts.module.scss
+++ b/src/templates/Posts.module.scss
@@ -2,35 +2,35 @@
 @import 'mixins';
 
 .hentry {
-    @include divider;
+  @include divider;
 
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-top: $spacer * 2;
-    padding-bottom: $spacer * 2;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: $spacer * 2;
+  padding-bottom: $spacer * 2;
 
-    @media (min-width: $screen-sm) {
-        padding-top: $spacer * 3;
-        padding-bottom: $spacer * 3;
+  @media (min-width: $screen-sm) {
+    padding-top: $spacer * 3;
+    padding-bottom: $spacer * 3;
 
-        &:first-of-type {
-            padding-top: $spacer * 4;
-        }
+    &:first-of-type {
+      padding-top: $spacer * 4;
     }
+  }
 
-    :global(.gatsby-image-wrapper) {
-        max-height: 100vh;
-    }
+  :global(.gatsby-image-wrapper) {
+    max-height: 100vh;
+  }
 }
 
 .archiveTitle {
-    @include heading-band();
+  @include heading-band();
 
-    font-size: $font-size-h3;
-    margin-top: 0;
-    margin-bottom: 0;
+  font-size: $font-size-h3;
+  margin-top: 0;
+  margin-bottom: 0;
 
-    @media (min-width: $screen-md) {
-        margin-left: -117%;
-    }
+  @media (min-width: $screen-md) {
+    margin-left: -117%;
+  }
 }
diff --git a/src/templates/Posts.jsx b/src/templates/Posts.tsx
similarity index 86%
rename from src/templates/Posts.jsx
rename to src/templates/Posts.tsx
index ae74e4c3..f4936026 100644
--- a/src/templates/Posts.jsx
+++ b/src/templates/Posts.tsx
@@ -1,5 +1,4 @@
-import React, { Fragment } from 'react'
-import PropTypes from 'prop-types'
+import React from 'react'
 import { Link, graphql } from 'gatsby'
 import Layout from '../components/Layout'
 import PostImage from '../components/Post/PostImage'
@@ -13,11 +12,19 @@ import Pagination from '../components/molecules/Pagination'
 import Featured from '../components/molecules/Featured'
 import styles from './Posts.module.scss'
 
-const Posts = ({ data, location, pageContext }) => {
+export default function Posts({
+  data,
+  location,
+  pageContext
+}: {
+  data: any
+  location: Location
+  pageContext: { tag: string; currentPageNumber: number; numPages: number }
+}) {
   const edges = data.allMarkdownRemark.edges
   const { tag, currentPageNumber, numPages } = pageContext
 
-  const PostsList = edges.map(({ node }) => {
+  const PostsList = edges.map(({ node }: { node: any }) => {
     const { type, linkurl, title, image } = node.frontmatter
     const { slug } = node.fields
 
@@ -38,17 +45,17 @@ const Posts = ({ data, location, pageContext }) => {
         )}
 
         {type === 'post' && (
-          <Fragment>
+          <>
             <PostLead post={node} index />
             <PostMore to={slug}>Continue Reading</PostMore>
-          </Fragment>
+          </>
         )}
 
         {type === 'link' && (
-          <Fragment>
+          <>
             <PostContent post={node} />
             <PostLinkActions slug={slug} linkurl={linkurl} />
-          </Fragment>
+          </>
         )}
       </article>
     )
@@ -70,14 +77,6 @@ const Posts = ({ data, location, pageContext }) => {
   )
 }
 
-Posts.propTypes = {
-  data: PropTypes.object.isRequired,
-  pageContext: PropTypes.object.isRequired,
-  location: PropTypes.object.isRequired
-}
-
-export default Posts
-
 export const indexQuery = graphql`
   query($tag: String, $skip: Int, $limit: Int) {
     allMarkdownRemark(
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..46ad7239
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "esModuleInterop": true,
+    "module": "commonjs",
+    "target": "esnext",
+    "strict": true,
+    "jsx": "react",
+    "lib": ["dom", "esnext"],
+    "noEmit": true
+  },
+  "exclude": ["node_modules", "public", ".cache", "*.js"],
+  "include": ["./src/**/*"]
+}