diff --git a/gatsby/.eslintrc.js b/gatsby/.eslintrc.js
index d2597b1..9559d87 100644
--- a/gatsby/.eslintrc.js
+++ b/gatsby/.eslintrc.js
@@ -2,12 +2,22 @@ module.exports = {
   globals: {
     __PATH_PREFIX__: true,
   },
-  plugins: [
-    "react"
+  'parser': 'babel-eslint', // uses babel-eslint transforms
+  'settings': {
+    'react': {
+      'version': 'detect' // detect react version
+    }
+  },
+  'env': {
+    'node': true // defines things like process.env when generating through node
+  },
+  'extends': [
+    'eslint:recommended', // use recommended configs
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended'
   ],
-  extends: [
-    `react-app`,
-    "eslint:recommended",
-    "plugin:react/recommended"
-  ]
+  'rules': {
+    'react/prop-types': 0,
+    'quotes': ['warn', 'single']
+  }
 }
diff --git a/gatsby/gatsby-config.js b/gatsby/gatsby-config.js
index 3524806..5595fe7 100644
--- a/gatsby/gatsby-config.js
+++ b/gatsby/gatsby-config.js
@@ -1,44 +1,53 @@
 module.exports = {
   siteMetadata: {
-    title: "Chuck Dries",
+    title: 'Chuck Dries',
   },
   plugins: [
-    "gatsby-plugin-sass",
-    "gatsby-plugin-image",
-    "gatsby-plugin-react-helmet",
+    'gatsby-plugin-sass',
+    'gatsby-plugin-image',
+    'gatsby-plugin-react-helmet',
     {
-      resolve: "gatsby-plugin-manifest",
+      resolve: 'gatsby-plugin-manifest',
       options: {
-        icon: "src/images/icon.png",
+        icon: 'src/images/icon.png',
       },
     },
-    "gatsby-plugin-mdx",
-    "gatsby-plugin-sharp",
-    "gatsby-transformer-sharp",
-    "gatsby-plugin-postcss",
+    'gatsby-plugin-mdx',
+    'gatsby-plugin-sharp',
+    'gatsby-transformer-sharp',
+    'gatsby-plugin-postcss',
     {
-      resolve: "gatsby-source-filesystem",
+      resolve: 'gatsby-source-filesystem',
       options: {
-        name: "images",
-        path: "./src/images/",
+        name: 'images',
+        path: './src/images/',
       },
-      __key: "images",
+      __key: 'images',
     },
     {
-      resolve: "gatsby-source-filesystem",
+      resolve: 'gatsby-source-filesystem',
       options: {
-        name: "gallery",
-        path: "./data/gallery/",
+        name: 'gallery',
+        path: './data/gallery/',
       },
-      __key: "gallery",
+      __key: 'gallery',
     },
     {
-      resolve: "gatsby-source-filesystem",
+      resolve: 'gatsby-source-filesystem',
       options: {
-        name: "pages",
-        path: "./src/pages/",
+        name: 'pages',
+        path: './src/pages/',
       },
-      __key: "pages",
+      __key: 'pages',
+    },
+    {
+      resolve: 'gatsby-plugin-eslint',
+      options: {
+        stages: ['develop'],
+        extensions: ['js', 'jsx'],
+        exclude: ['node_modules', '.cache', 'public'],
+        // Any eslint-webpack-plugin options below
+      }
     }
   ],
 };
diff --git a/gatsby/package-lock.json b/gatsby/package-lock.json
index d4c185a..f39c444 100644
--- a/gatsby/package-lock.json
+++ b/gatsby/package-lock.json
@@ -35,8 +35,13 @@
         "tailwindcss": "^2.1.2"
       },
       "devDependencies": {
+        "babel-eslint": "^10.1.0",
         "eslint": "^7.28.0",
-        "eslint-config-react-app": "^6.0.0"
+        "eslint-config-react-app": "^6.0.0",
+        "eslint-plugin-react": "^7.24.0",
+        "eslint-plugin-react-hooks": "^4.2.0",
+        "eslint-webpack-plugin": "^2.5.4",
+        "gatsby-plugin-eslint": "^3.0.0"
       }
     },
     "node_modules/@ardatan/aggregate-error": {
@@ -4190,6 +4195,34 @@
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
       "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
     },
+    "node_modules/babel-eslint": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
+      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
+      "deprecated": "babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "@babel/parser": "^7.7.0",
+        "@babel/traverse": "^7.7.0",
+        "@babel/types": "^7.7.0",
+        "eslint-visitor-keys": "^1.0.0",
+        "resolve": "^1.12.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "peerDependencies": {
+        "eslint": ">= 4.12.1"
+      }
+    },
+    "node_modules/babel-eslint/node_modules/eslint-visitor-keys": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/babel-jsx-utils": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/babel-jsx-utils/-/babel-jsx-utils-1.1.0.tgz",
@@ -11092,6 +11125,17 @@
         "node": ">=12.13.0"
       }
     },
+    "node_modules/gatsby-plugin-eslint": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-eslint/-/gatsby-plugin-eslint-3.0.0.tgz",
+      "integrity": "sha512-nvyLz067k8lmhWIalhgFCzlNIjHIabYPZXpARM0k4AGRJWOPgOxc5P0T+G/TjCvtSg4+jtKotbE5ranMbxIBiw==",
+      "dev": true,
+      "peerDependencies": {
+        "eslint": "^7.18.0",
+        "eslint-webpack-plugin": "^2.4.3",
+        "gatsby": ">=2"
+      }
+    },
     "node_modules/gatsby-plugin-image": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-image/-/gatsby-plugin-image-1.6.0.tgz",
@@ -28315,6 +28359,26 @@
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
       "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
     },
+    "babel-eslint": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
+      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "@babel/parser": "^7.7.0",
+        "@babel/traverse": "^7.7.0",
+        "@babel/types": "^7.7.0",
+        "eslint-visitor-keys": "^1.0.0",
+        "resolve": "^1.12.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ=="
+        }
+      }
+    },
     "babel-jsx-utils": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/babel-jsx-utils/-/babel-jsx-utils-1.1.0.tgz",
@@ -33684,6 +33748,13 @@
         "micromatch": "^4.0.2"
       }
     },
+    "gatsby-plugin-eslint": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-eslint/-/gatsby-plugin-eslint-3.0.0.tgz",
+      "integrity": "sha512-nvyLz067k8lmhWIalhgFCzlNIjHIabYPZXpARM0k4AGRJWOPgOxc5P0T+G/TjCvtSg4+jtKotbE5ranMbxIBiw==",
+      "dev": true,
+      "requires": {}
+    },
     "gatsby-plugin-image": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-image/-/gatsby-plugin-image-1.6.0.tgz",
diff --git a/gatsby/package.json b/gatsby/package.json
index 19fcda3..f35e7e9 100644
--- a/gatsby/package.json
+++ b/gatsby/package.json
@@ -42,7 +42,12 @@
     "tailwindcss": "^2.1.2"
   },
   "devDependencies": {
+    "babel-eslint": "^10.1.0",
     "eslint": "^7.28.0",
-    "eslint-config-react-app": "^6.0.0"
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-webpack-plugin": "^2.5.4",
+    "gatsby-plugin-eslint": "^3.0.0"
   }
 }
diff --git a/gatsby/src/pages/gallery.js b/gatsby/src/pages/gallery.js
index a652346..3452852 100644
--- a/gatsby/src/pages/gallery.js
+++ b/gatsby/src/pages/gallery.js
@@ -1,10 +1,10 @@
-import * as React from "react"
+import * as React from 'react'
 import { graphql, Link } from 'gatsby'
-import { GatsbyImage, getImage } from "gatsby-plugin-image"
-import { Helmet } from "react-helmet"
-import Masonry, { ResponsiveMasonry } from "react-responsive-masonry"
+import { GatsbyImage, getImage } from 'gatsby-plugin-image'
+import { Helmet } from 'react-helmet'
+import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry'
 
-import { getMeta } from "../utils"
+import { getMeta } from '../utils'
 
 const GalleryPage = ({ data }) => {
   const images = React.useMemo(() =>
diff --git a/gatsby/src/templates/gallery-image.js b/gatsby/src/templates/gallery-image.js
index 01fd04c..b304f47 100644
--- a/gatsby/src/templates/gallery-image.js
+++ b/gatsby/src/templates/gallery-image.js
@@ -1,11 +1,11 @@
-import React from "react"
+import React from 'react'
 import { graphql } from 'gatsby'
-import { getMeta, getName } from "../utils";
-import { GatsbyImage, getImage } from "gatsby-plugin-image"
-import { Helmet } from "react-helmet";
+import { getMeta, getName } from '../utils';
+import { GatsbyImage, getImage } from 'gatsby-plugin-image'
+import { Helmet } from 'react-helmet';
 import classnames from 'classnames'
 
-const GalleryImage = ({ pageContext, data }) => {
+const GalleryImage = ({ data }) => {
   const image = data.allFile.edges[0].node
   const ar = image.childImageSharp.fluid.aspectRatio;
   console.log(ar);
@@ -26,7 +26,7 @@ const GalleryImage = ({ pageContext, data }) => {
     </Helmet>
     <div className="min-h-screen flex flex-col justify-center">
       {/* TODO: change layout by amount of empty space on side of page, not aspect ratio? */}
-      <div style={{ margin: '0 5vw' }} className={classnames("flex mx-auto", ar > 1 ? 'flex-col' : 'flex-row-reverse')}>
+      <div style={{ margin: '0 5vw' }} className={classnames('flex mx-auto', ar > 1 ? 'flex-col' : 'flex-row-reverse')}>
         <div className='flex-grow-0'>
           <h1 className="text-2xl mt-2">{name}</h1>
           <GatsbyImage