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/.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
index 2667b906..220f5418 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -2,3 +2,4 @@ node_modules/
 .cache/
 static/
 public/
+coverage/
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..b99c7822 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -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/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..adbd13f7 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 --ignore-path .prettierignore --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..5411d793
--- /dev/null
+++ b/src/components/Post/PostActions.tsx
@@ -0,0 +1,96 @@
+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'
+
+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 = ({ url, slug }: { url: string; slug: string }) => (
+  <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>
+)
+
+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,
+  url,
+  githubLink
+}: {
+  slug: string
+  url: string
+  githubLink: string
+}) {
+  const [showModal, setShowModal] = useState(false)
+
+  const toggleModal = () => {
+    setShowModal(!showModal)
+  }
+
+  return (
+    <aside className={styles.actions}>
+      <div>
+        <ActionTwitter url={url} 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 87%
rename from src/components/Post/PostMeta.jsx
rename to src/components/Post/PostMeta.tsx
index 31749afa..1e323304 100644
--- a/src/components/Post/PostMeta.jsx
+++ b/src/components/Post/PostMeta.tsx
@@ -1,11 +1,10 @@
 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'
 
-const PostMeta = ({ post, meta }) => {
+const PostMeta = ({ post, meta }: { post: any; meta: any }) => {
   const { author, updated, tags, type } = post.frontmatter
   const { date } = post.fields
 
@@ -40,7 +39,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 +54,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.module.scss b/src/components/Search/Search.module.scss
index ae573f17..114660b4 100644
--- a/src/components/Search/Search.module.scss
+++ b/src/components/Search/Search.module.scss
@@ -1,46 +1,46 @@
 @import 'variables';
 
 .search {
-    position: absolute;
-    left: $spacer / 2;
-    right: $spacer / 2;
-    top: -($spacer / 4);
-    z-index: 10;
+  position: absolute;
+  left: $spacer / 2;
+  right: $spacer / 2;
+  top: -($spacer / 4);
+  z-index: 10;
 
-    input {
-        width: 100%;
-    }
+  input {
+    width: 100%;
+  }
 
-    @media (min-width: $screen-md) {
-        left: 0;
-        right: 0;
-    }
+  @media (min-width: $screen-md) {
+    left: 0;
+    right: 0;
+  }
 }
 
 .appear,
 .enter {
-    opacity: .01;
-    transform: translate3d(0, -100px, 0);
+  opacity: 0.01;
+  transform: translate3d(0, -100px, 0);
 
-    &.appearActive,
-    &.enterActive {
-        opacity: 1;
-        transition: .2s ease-out;
-        transform: translate3d(0, 0, 0);
-    }
+  &.appearActive,
+  &.enterActive {
+    opacity: 1;
+    transition: 0.2s ease-out;
+    transform: translate3d(0, 0, 0);
+  }
 }
 
 .exit {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
 
-    &.exitActive {
-        opacity: .01;
-        transition: .2s ease-in;
-        transform: translate3d(0, -100px, 0);
-    }
+  &.exitActive {
+    opacity: 0.01;
+    transition: 0.2s ease-in;
+    transform: translate3d(0, -100px, 0);
+  }
 }
 
 :global(.hasSearchOpen) {
-    overflow: hidden;
+  overflow: hidden;
 }
diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.tsx
similarity index 89%
rename from src/components/Search/Search.jsx
rename to src/components/Search/Search.tsx
index 2a79a304..bac45bcd 100644
--- a/src/components/Search/Search.jsx
+++ b/src/components/Search/Search.tsx
@@ -8,7 +8,10 @@ import SearchResults from './SearchResults'
 
 import styles from './Search.module.scss'
 
-export default class Search extends PureComponent {
+export default class Search extends PureComponent<
+  {},
+  { searchOpen: boolean; query: string; results: string[] }
+> {
   state = {
     searchOpen: false,
     query: '',
@@ -25,14 +28,14 @@ export default class Search extends PureComponent {
     }))
   }
 
-  getSearchResults(query) {
+  getSearchResults(query: string) {
     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 => {
+  search = (event: any) => {
     const query = event.target.value
     // wildcard search https://lunrjs.com/guides/searching.html#wildcards
     const results = query.length > 1 ? this.getSearchResults(`${query}*`) : []
@@ -65,7 +68,7 @@ export default class Search extends PureComponent {
               <section className={styles.search}>
                 <SearchInput
                   value={query}
-                  onChange={this.search}
+                  onChange={() => this.search}
                   onToggle={this.toggleSearch}
                 />
               </section>
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..fe84e626
--- /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(): 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..4d0c62ac
--- /dev/null
+++ b/src/components/Search/SearchResults.tsx
@@ -0,0 +1,79 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+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 function SearchResults({
+  searchQuery,
+  results,
+  toggleSearch
+}: {
+  searchQuery: string
+  results: any
+  toggleSearch(): void
+}) {
+  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/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/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 100%
rename from src/components/atoms/Hamburger.test.jsx
rename to src/components/atoms/Hamburger.test.tsx
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.tsx
similarity index 59%
rename from src/components/atoms/SEO.jsx
rename to src/components/atoms/SEO.tsx
index 4bc46364..c4d2d685 100644
--- a/src/components/atoms/SEO.jsx
+++ b/src/components/atoms/SEO.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import { StaticQuery, graphql } from 'gatsby'
+import { graphql, useStaticQuery } from 'gatsby'
 import Helmet from 'react-helmet'
 
 const query = graphql`
@@ -28,13 +27,13 @@ const query = graphql`
 `
 
 const createSchemaOrg = (
-  blogURL,
-  title,
-  siteMeta,
-  postSEO,
-  postURL,
-  image,
-  description
+  blogURL: string,
+  title: string,
+  siteMeta: any,
+  postSEO: boolean,
+  postURL: string,
+  image: string,
+  description: string
 ) => {
   const schemaOrgJSONLD = [
     {
@@ -89,6 +88,14 @@ const MetaTags = ({
   postSEO,
   title,
   siteMeta
+}: {
+  description: string
+  image: string
+  url: string
+  schema: string
+  postSEO: boolean
+  title: string
+  siteMeta: any
 }) => (
   <Helmet
     defaultTitle={`${siteMeta.siteTitle} ¦ ${siteMeta.siteDescription}`}
@@ -130,76 +137,63 @@ const MetaTags = ({
   </Helmet>
 )
 
-MetaTags.propTypes = {
-  description: PropTypes.string,
-  image: PropTypes.string,
-  url: PropTypes.string,
-  schema: PropTypes.string,
-  postSEO: PropTypes.bool,
-  title: PropTypes.string,
-  siteMeta: PropTypes.object
+export default function SEO({
+  post,
+  slug,
+  postSEO
+}: {
+  post?: any
+  slug?: string
+  postSEO?: boolean
+}) {
+  const data = useStaticQuery(query)
+  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}
+    />
+  )
 }
-
-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/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 63%
rename from src/components/atoms/Typekit.jsx
rename to src/components/atoms/Typekit.tsx
index 5b4d00b9..6e8d29e6 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 { graphql, useStaticQuery } from 'gatsby'
 import Helmet from 'react-helmet'
 
-const TypekitScript = typekitID => (
+const TypekitScript = (typekitID: string) => (
   <script>
     {`
         (function(d) {
@@ -27,24 +27,18 @@ const query = graphql`
   }
 `
 
-const Typekit = () => (
-  <StaticQuery
-    query={query}
-    render={data => {
-      const { typekitID } = data.site.siteMetadata
+export default function Typekit() {
+  const data = useStaticQuery(query)
+  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..f453f237
--- /dev/null
+++ b/src/components/molecules/Menu.tsx
@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+import Helmet from 'react-helmet'
+import { Link, graphql, useStaticQuery } from 'gatsby'
+import Hamburger from '../atoms/Hamburger'
+import styles from './Menu.module.scss'
+
+const query = graphql`
+  query {
+    site {
+      siteMetadata {
+        menu {
+          title
+          link
+        }
+      }
+    }
+  }
+`
+
+export default function Menu() {
+  const [menuOpen, setMenuOpen] = useState(false)
+  const data = useStaticQuery(query)
+
+  const toggleMenu = () => {
+    setMenuOpen(!menuOpen)
+  }
+
+  const { menu } = data.site.siteMetadata
+
+  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..eb3fa621
--- /dev/null
+++ b/src/components/molecules/ModalThanks.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import { graphql, useStaticQuery } 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
+        }
+      }
+    }
+  }
+`
+
+export default function ModalThanks(props: any) {
+  const data = useStaticQuery(query)
+  const { author } = data.site.siteMetadata
+
+  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).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..f18a1700
--- /dev/null
+++ b/src/components/molecules/RelatedPosts.tsx
@@ -0,0 +1,70 @@
+import React 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 = 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`}>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..f5bf3b31
--- /dev/null
+++ b/src/components/molecules/Subscribe.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
+import IconLinks from './IconLinks'
+import styles from './Subscribe.module.scss'
+
+const query = graphql`
+  query {
+    site {
+      siteMetadata {
+        rss
+        jsonfeed
+      }
+    }
+  }
+`
+
+export default function Subscribe() {
+  const data = useStaticQuery(query)
+  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>
+  )
+}
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..0a37d908
--- /dev/null
+++ b/src/components/molecules/Vcard.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import { graphql, useStaticQuery } 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 function Vcard() {
+  const data = useStaticQuery(query)
+  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/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.jsx b/src/components/organisms/Footer.tsx
similarity index 95%
rename from src/components/organisms/Footer.jsx
rename to src/components/organisms/Footer.tsx
index 25b4dc90..28c37536 100644
--- a/src/components/organisms/Footer.jsx
+++ b/src/components/organisms/Footer.tsx
@@ -26,7 +26,10 @@ const query = graphql`
   }
 `
 
-export default class Footer extends PureComponent {
+export default class Footer extends PureComponent<
+  {},
+  { year: number; showModal: boolean }
+> {
   state = {
     year: null,
     showModal: false
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..ab67ea0e
--- /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/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/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 87%
rename from src/templates/Post.jsx
rename to src/templates/Post.tsx
index 6f491744..c690d704 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,20 @@ 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>
@@ -48,25 +53,10 @@ const Post = ({ data, location }) => {
 
         {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 } }) {
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/**/*"]
+}