From 103aca17035a9ac4738117b2c1050237514ea19b Mon Sep 17 00:00:00 2001
From: Tom Gooden <good3n@gmail.com>
Date: Fri, 14 Jan 2022 12:16:29 -0500
Subject: [PATCH] Eslint updates

---
 src/assets/styles/global.js                   |  4 +++
 src/components/Cta/Cta.component.js           |  2 +-
 src/components/Footer/Footer.component.js     |  8 ++---
 src/components/Header/Header.component.js     | 24 +++++++-------
 src/components/Header/index.js                |  2 +-
 src/components/Layout.js                      | 22 +++++++------
 .../Navigation/Navigation.component.js        |  8 ++---
 src/components/Navigation/index.js            |  2 +-
 .../ProjectRoadmap.component.js               | 20 ++++++------
 .../CheckInPortal/CheckInPortal.component.js  |  2 +-
 .../Projects/CheckInPortal/index.js           |  2 +-
 .../TherapistDirectory.component.js           |  2 +-
 .../Projects/TherapistDirectory/index.js      |  2 +-
 src/components/Seo.js                         |  5 +--
 .../ServicesBlocks.component.js               | 30 ++++++++---------
 src/pages/404.js                              | 12 +++----
 src/pages/about.js                            | 17 +++++-----
 src/pages/blog.js                             | 32 +++++++++----------
 src/pages/contact.js                          | 24 +++++++-------
 src/pages/index.js                            |  8 ++---
 src/pages/tags.js                             | 19 ++++++-----
 src/pages/thanks.js                           | 29 ++---------------
 src/pages/uses.js                             |  8 ++---
 src/utils/idk.js                              |  9 ++++--
 24 files changed, 139 insertions(+), 154 deletions(-)

diff --git a/src/assets/styles/global.js b/src/assets/styles/global.js
index 9a939fe..1d15a1d 100644
--- a/src/assets/styles/global.js
+++ b/src/assets/styles/global.js
@@ -121,6 +121,10 @@ const GlobalStyle = createGlobalStyle`
     color: var(--color__headline);
   }
 
+  img {
+    max-width: 100%;
+  }
+
   button,
   .button,
   a.button {
diff --git a/src/components/Cta/Cta.component.js b/src/components/Cta/Cta.component.js
index b87fa29..5aa7b37 100644
--- a/src/components/Cta/Cta.component.js
+++ b/src/components/Cta/Cta.component.js
@@ -7,7 +7,7 @@ const Cta = () => (
     <h2>
       Get a <span>free quote</span> for your next project
     </h2>
-    <Link to="/contact" className="button">
+    <Link className="button" to="/contact">
       Get in touch
     </Link>
   </StyledCta>
diff --git a/src/components/Footer/Footer.component.js b/src/components/Footer/Footer.component.js
index 11eea2a..88f2d47 100644
--- a/src/components/Footer/Footer.component.js
+++ b/src/components/Footer/Footer.component.js
@@ -6,10 +6,10 @@ const Footer = () => (
   <StyledFooter>
     <div className="container">
       <OutboundLink href="https://www.linkedin.com/in/tom-gooden/">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
+        <svg fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <path
-            fill="#B6BDC6"
             d="M3.2 11.62h5.63v16.93H3.21V11.62Zm2.86-8.17c-1.93 0-3.18 1.27-3.18 2.93C2.88 8 4.1 9.3 5.97 9.3h.04C7.98 9.3 9.2 8 9.2 6.38c-.03-1.66-1.22-2.93-3.14-2.93Zm16.59 7.77a5.59 5.59 0 0 0-5.07 2.8v-2.4h-5.63c.07 1.58 0 16.93 0 16.93h5.63v-9.46c0-.5.03-1.01.18-1.37.4-1.01 1.33-2.06 2.89-2.06 2.03 0 2.85 1.55 2.85 3.83v9.06h5.63v-9.71c0-5.2-2.78-7.62-6.48-7.62Z"
+            fill="#B6BDC6"
           />
         </svg>
       </OutboundLink>
@@ -20,10 +20,10 @@ const Footer = () => (
         </svg>
       </OutboundLink> */}
       <OutboundLink href="https://github.com/good3n">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
+        <svg fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <path
-            fill="#B6BDC6"
             d="M28.9 12.52c-.96-.17-2.5-.22-4.1-.22a6.33 6.33 0 0 0-.9-5.22c.1-.45.47-2.29-.28-3.82-1.35.09-2.5.87-3.1 1.36a6.33 6.33 0 0 0-1.82-.27h-3.22c-.63 0-1.24.1-1.82.27a5.76 5.76 0 0 0-3.1-1.36 6.08 6.08 0 0 0-.27 3.82 6.28 6.28 0 0 0-.9 5.22c-1.61 0-3.14.05-4.1.22a.28.28 0 1 0 .1.54c.95-.16 2.52-.2 4.17-.2l.2.46c-1.33.1-2.58.24-3.44.39a.28.28 0 0 0 .1.55c.88-.15 2.21-.3 3.61-.4a6.33 6.33 0 0 0 3.54 2.83 4.47 4.47 0 0 0-1.59 2.09h-1.62c-3.29 0-3.7-4.2-7.49-4.2 3.55.4 1.95 6.72 7.5 6.72h1.35v6c0 1.4-.67 1.44-.72 1.44 2.87 0 2.87-2.15 2.87-2.15v-5.73s0-.72.71-.72v7.17c0 1.38-.67 1.43-.71 1.43 2.39 0 2.78-1.5 2.85-1.99h.01V20.5a.36.36 0 0 1 .72 0v6.25h.01c.07.5.47 1.99 2.85 1.99-.04 0-.71-.05-.71-1.43v-7.17c.72 0 .72.72.72.72v5.73s0 2.15 2.86 2.15c-.04 0-.71-.05-.71-1.43v-7c0-1.5-.74-2.81-1.86-3.62a6.33 6.33 0 0 0 3.54-2.84 46.62 46.62 0 0 1 3.66.41.28.28 0 0 0 .05-.55 44.3 44.3 0 0 0-3.43-.4l.2-.45a27.99 27.99 0 0 1 4.22.2c.13 0 .25-.09.27-.22a.28.28 0 0 0-.23-.32Zm-10.11 2.94h-3.52a4.01 4.01 0 0 1 0-8.02h3.52a4.01 4.01 0 1 1 0 8.02Zm-3.27-5.64v1.53a.98.98 0 1 1-1.97 0V9.82a.98.98 0 0 1 1.97 0Zm5.24 0v1.53a.98.98 0 1 1-1.97 0V9.82a.98.98 0 0 1 1.97 0Z"
+            fill="#B6BDC6"
           />
         </svg>
       </OutboundLink>
diff --git a/src/components/Header/Header.component.js b/src/components/Header/Header.component.js
index 88c3fdd..52417c5 100644
--- a/src/components/Header/Header.component.js
+++ b/src/components/Header/Header.component.js
@@ -9,30 +9,30 @@ const Header = () => (
       <div>
         <Link to="/">
           <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="48"
-            height="48"
             fill="none"
+            height="48"
+            width="48"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <path fill="#F52D86" d="M0 0h48v48H0z" />
+            <path d="M0 0h48v48H0z" fill="#F52D86" />
           </svg>
 
           <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="57"
-            height="57"
             fill="none"
+            height="57"
+            width="57"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <path fill="#711CB4" d="m0 0 57 15.93L16.19 57 0 0Z" />
+            <path d="m0 0 57 15.93L16.19 57 0 0Z" fill="#711CB4" />
           </svg>
 
           <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="56"
-            height="56"
             fill="none"
+            height="56"
+            width="56"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <circle cx="28" cy="28" r="28" fill="#53CAEE" />
+            <circle cx="28" cy="28" fill="#53CAEE" r="28" />
           </svg>
         </Link>
       </div>
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index 3e167eb..ab11000 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -1 +1 @@
-export { default as Header } from "./Header.component"
\ No newline at end of file
+export { default as Header } from './Header.component'
diff --git a/src/components/Layout.js b/src/components/Layout.js
index f172401..3c6ac05 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -1,19 +1,21 @@
 import React from 'react'
 import 'normalize.css'
+import PropTypes from 'prop-types'
 import GlobalStyle from '../assets/styles/global'
 import { Header } from './Header'
 import { Footer } from './Footer'
 
-const Layout = ({ children }) => {
-  // delete this line
-  return (
-    <>
-      <GlobalStyle />
-      <Header />
-      <main>{children}</main>
-      <Footer />
-    </>
-  )
+const Layout = ({ children }) => (
+  <>
+    <GlobalStyle />
+    <Header />
+    <main>{children}</main>
+    <Footer />
+  </>
+)
+
+Layout.propTypes = {
+  children: PropTypes.node.isRequired,
 }
 
 export default Layout
diff --git a/src/components/Navigation/Navigation.component.js b/src/components/Navigation/Navigation.component.js
index 29d41d6..ac3c294 100644
--- a/src/components/Navigation/Navigation.component.js
+++ b/src/components/Navigation/Navigation.component.js
@@ -8,10 +8,10 @@ const Navigation = () => {
   return (
     <>
       <NavToggle
+        className={isNavOpen}
         onClick={() => {
           setIsNavOpen(!isNavOpen)
         }}
-        className={isNavOpen}
       >
         <div></div>
       </NavToggle>
@@ -20,33 +20,33 @@ const Navigation = () => {
         <ul className={isNavOpen ? `true` : ``}>
           <li>
             <Link
-              to="/about/"
               activeClassName="is-active"
               onClick={() => {
                 setIsNavOpen(false)
               }}
+              to="/about/"
             >
               About
             </Link>
           </li>
           <li>
             <Link
-              to="/projects/"
               activeClassName="is-active"
               onClick={() => {
                 setIsNavOpen(false)
               }}
+              to="/projects/"
             >
               Projects
             </Link>
           </li>
           <li>
             <Link
-              to="/contact/"
               activeClassName="is-active"
               onClick={() => {
                 setIsNavOpen(false)
               }}
+              to="/contact/"
             >
               Contact
             </Link>
diff --git a/src/components/Navigation/index.js b/src/components/Navigation/index.js
index 622c518..ae8465a 100644
--- a/src/components/Navigation/index.js
+++ b/src/components/Navigation/index.js
@@ -1 +1 @@
-export { default as Navigation } from "./Navigation.component"
\ No newline at end of file
+export { default as Navigation } from './Navigation.component'
diff --git a/src/components/ProjectRoadmap/ProjectRoadmap.component.js b/src/components/ProjectRoadmap/ProjectRoadmap.component.js
index 4f8e263..39d7548 100644
--- a/src/components/ProjectRoadmap/ProjectRoadmap.component.js
+++ b/src/components/ProjectRoadmap/ProjectRoadmap.component.js
@@ -23,19 +23,19 @@ const ProjectRoadmap = () => {
       <div>
         <h2>Project roadmap</h2>
         <p>
-          The "4 D's" as some call it, a common approach to deciphering the
-          lifecycle of a website or application project. Planning is everything.
-          Without implementing and executing a real plan of action, your project
-          will begin to take on water.
+          The &quot;4 D&apos;s&quot; as some call it, a common approach to
+          deciphering the lifecycle of a website or application project.
+          Planning is everything. Without implementing and executing a real plan
+          of action, your project will begin to take on water.
         </p>
       </div>
       <div className="container">
-        <GatsbyImage image={image} alt="" />
+        <GatsbyImage alt="Lines" image={image} />
         <ul>
           <li>
             <h3>1. Discover</h3>
             <p>
-              To determine the real scope of the work, we'll work closely
+              To determine the real scope of the work, we&apos;ll work closely
               together to learn your goals and pain points. This step is
               important to ensure we identify what problems we will be solving.
             </p>
@@ -51,16 +51,16 @@ const ProjectRoadmap = () => {
           <li>
             <h3>3. Develop</h3>
             <p>
-              With the planning done, it's time to start bringing these ideas to
-              life. Each project has a strict development process to ensure
-              quality is met.
+              With the planning done, it&apos;s time to start bringing these
+              ideas to life. Each project has a strict development process to
+              ensure quality is met.
             </p>
           </li>
           <li>
             <h3>4. Deploy</h3>
             <p>
               The final phase in the roadmap. Your application will be tested
-              and then deployed. This isn't the end of the overall journey
+              and then deployed. This isn&apos;t the end of the overall journey
               however. Digital tools require ongoing attention and care.
             </p>
           </li>
diff --git a/src/components/Projects/CheckInPortal/CheckInPortal.component.js b/src/components/Projects/CheckInPortal/CheckInPortal.component.js
index 67f3a76..72cb2e0 100644
--- a/src/components/Projects/CheckInPortal/CheckInPortal.component.js
+++ b/src/components/Projects/CheckInPortal/CheckInPortal.component.js
@@ -29,8 +29,8 @@ const CheckInPortal = () => {
         <div className="grid">
           <div>
             <MainImage
-              image={image}
               alt="Tom Gooden GLPG Check-in Portal Design iPad"
+              image={image}
               objectFit="cover"
               objectPosition="50% 50%"
               style={{ maxWidth: `730px` }}
diff --git a/src/components/Projects/CheckInPortal/index.js b/src/components/Projects/CheckInPortal/index.js
index 1b67da0..4bbc16f 100644
--- a/src/components/Projects/CheckInPortal/index.js
+++ b/src/components/Projects/CheckInPortal/index.js
@@ -1 +1 @@
-export { default as CheckInPortal } from './CheckInPortal.component.js'
+export { default as CheckInPortal } from './CheckInPortal.component'
diff --git a/src/components/Projects/TherapistDirectory/TherapistDirectory.component.js b/src/components/Projects/TherapistDirectory/TherapistDirectory.component.js
index efe1567..c6d35ba 100644
--- a/src/components/Projects/TherapistDirectory/TherapistDirectory.component.js
+++ b/src/components/Projects/TherapistDirectory/TherapistDirectory.component.js
@@ -47,8 +47,8 @@ const TherapistDirectory = () => {
           </div>
           <div>
             <MainImage
-              image={image}
               alt="Tom Gooden GLPG Therapist Directory Design Laptop"
+              image={image}
               objectFit="cover"
               objectPosition="50% 50%"
               style={{ maxWidth: `1100px` }}
diff --git a/src/components/Projects/TherapistDirectory/index.js b/src/components/Projects/TherapistDirectory/index.js
index 9eb71c1..a8db0f6 100644
--- a/src/components/Projects/TherapistDirectory/index.js
+++ b/src/components/Projects/TherapistDirectory/index.js
@@ -1 +1 @@
-export { default as TherapistDirectory } from './TherapistDirectory.component.js'
+export { default as TherapistDirectory } from './TherapistDirectory.component'
diff --git a/src/components/Seo.js b/src/components/Seo.js
index 7183379..bfe5400 100644
--- a/src/components/Seo.js
+++ b/src/components/Seo.js
@@ -34,8 +34,6 @@ function Seo({ description, lang, meta, title, image }) {
       htmlAttributes={{
         lang,
       }}
-      title={title}
-      titleTemplate={`%s | ${site.siteMetadata.title}`}
       meta={[
         {
           name: `description`,
@@ -82,6 +80,8 @@ function Seo({ description, lang, meta, title, image }) {
           content: defaultImageUrl,
         },
       ].concat(meta)}
+      title={title}
+      titleTemplate={`%s | ${site.siteMetadata.title}`}
     />
   )
 }
@@ -97,6 +97,7 @@ Seo.propTypes = {
   lang: PropTypes.string,
   meta: PropTypes.arrayOf(PropTypes.object),
   title: PropTypes.string.isRequired,
+  image: PropTypes.string.isRequired,
 }
 
 export default Seo
diff --git a/src/components/ServicesBlocks/ServicesBlocks.component.js b/src/components/ServicesBlocks/ServicesBlocks.component.js
index bf18bc9..948e4f7 100644
--- a/src/components/ServicesBlocks/ServicesBlocks.component.js
+++ b/src/components/ServicesBlocks/ServicesBlocks.component.js
@@ -7,22 +7,22 @@ const ServicesBlocks = () => (
       <span>
         <h2>
           <svg
-            xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 40 37"
+            xmlns="http://www.w3.org/2000/svg"
           >
             <defs />
             <path
-              fill="#9BDEAC"
               d="M16.6666 18.6667H4.99992c-.92048 0-1.66667.7462-1.66667 1.6667v11.6667c0 .9205.74619 1.6666 1.66667 1.6666H16.6666c.9205 0 1.6667-.7461 1.6667-1.6666V20.3334c0-.9205-.7462-1.6667-1.6667-1.6667z"
+              fill="#9BDEAC"
             />
             <path
-              fill="#56CBF9"
               d="M35.0001.33325H23.3334c-.9205 0-1.6667.74619-1.6667 1.66667V13.6666c0 .9205.7462 1.6667 1.6667 1.6667h11.6667c.9205 0 1.6666-.7462 1.6666-1.6667V1.99992c0-.92048-.7461-1.66667-1.6666-1.66667z"
+              fill="#56CBF9"
             />
             <path
-              fill="#FFEA9F"
               d="M35.0001 18.6667H23.3334c-.9205 0-1.6667.7462-1.6667 1.6667v11.6667c0 .9205.7462 1.6666 1.6667 1.6666h11.6667c.9205 0 1.6666-.7461 1.6666-1.6666V20.3334c0-.9205-.7461-1.6667-1.6666-1.6667z"
+              fill="#FFEA9F"
             />
           </svg>
           Development
@@ -36,39 +36,39 @@ const ServicesBlocks = () => (
     </div>
     <div>
       <h2>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 34 34">
+        <svg fill="none" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg">
           <defs />
           <path
-            fill="#FFEA9F"
             d="M1.99992.33325H13.3333c1.1045 0 2 .89543 2 2V31.6666c0 1.1046-.8955 2-2 2H1.99992c-.92047 0-1.66667-.7462-1.66667-1.6667V1.99992c0-.92047.7462-1.66667 1.66667-1.66667z"
+            fill="#FFEA9F"
           />
           <path
-            fill="#FC0055"
             d="M18.6667 2.33325c0-1.10457.8955-2 2-2h11.3334c.9204 0 1.6666.7462 1.6666 1.66667V31.9999c0 .9205-.7462 1.6667-1.6666 1.6667H20.6667c-1.1045 0-2-.8954-2-2V2.33325z"
+            fill="#FC0055"
           />
         </svg>
         Digital Strategy
       </h2>
       <p>
         Creating a digital product or application is more than just putting good
-        ideas together. It's a thought and data driven system.
+        ideas together. It&apos;s a thought and data driven system.
       </p>
     </div>
     <div>
       <h2>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 40">
+        <svg fill="none" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
           <defs />
           <path
-            fill="#FC0055"
             d="M25 3.33325c-5.6286.00237-10.4525 4.02437-11.467 9.56085 4.8448-2.6512 10.9216-.8729 13.5729 3.972 1.6367 2.991 1.6367 6.6099 0 9.6009 6.3355-1.1606 10.5306-7.2373 9.37-13.5728C35.4611 7.35427 30.6321 3.33112 25 3.33325z"
+            fill="#FC0055"
           />
           <path
-            fill="#56CBF9"
             d="M11.6666 36.6667c4.6024 0 8.3333-3.731 8.3333-8.3334C19.9999 23.731 16.269 20 11.6666 20c-4.60239 0-8.33335 3.731-8.33335 8.3333 0 4.6024 3.73096 8.3334 8.33335 8.3334z"
+            fill="#56CBF9"
           />
           <path
-            fill="#FFEA9F"
             d="M18.3333 11.6667c-5.139.0006-9.44102 3.896-9.95 9.0097 4.2263-1.8158 9.1245.1383 10.9403 4.3647.9019 2.0991.9019 4.4765 0 6.5756 5.4955-.5464 9.5075-5.4443 8.9611-10.9398-.5086-5.1146-4.8116-9.0106-9.9514-9.0102z"
+            fill="#FFEA9F"
           />
         </svg>
         UI / UX
@@ -80,15 +80,15 @@ const ServicesBlocks = () => (
     </div>
     <div>
       <h2>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 40">
+        <svg fill="none" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
           <defs />
           <path
-            fill="#FC0055"
             d="M27.7488 6.17851l8.0139 8.01389c.7811.781.781 2.0474 0 2.8284L24.1453 28.6382c-.7811.7811-2.0474.7811-2.8285 0l-8.0138-8.0138c-.6509-.6509-.8552-1.5019-.4562-1.9008L25.848 5.72229c.3989-.39891 1.25-.19465 1.9008.45622z"
+            fill="#FC0055"
           />
           <path
-            fill="#56CBF9"
             d="M4.17851 14.4282l8.01389-8.0139c.781-.78105 2.0474-.78105 2.8284 0l20.7418 20.7418c.7811.7811.7811 2.0474 0 2.8284l-8.0139 8.0139c-.6508.6509-1.7061.6509-2.357 0L4.17851 16.7852c-.65087-.6509-.65087-1.7062 0-2.357z"
+            fill="#56CBF9"
           />
         </svg>
         Consulting
diff --git a/src/pages/404.js b/src/pages/404.js
index 9876168..25c3779 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -17,11 +17,11 @@ const NotFoundPage = () => (
     <NotFound>
       <div className="container">
         <StaticImage
-          src="../assets/images/404.png"
           alt="404 not found"
-          width={400}
-          className="lost-man"
           backgroundColor="#D5E9F6"
+          className="lost-man"
+          src="../assets/images/404.png"
+          width={400}
         />
         <h1>
           <span>4</span>
@@ -37,11 +37,11 @@ const NotFoundPage = () => (
           </span>
         </p>
         <StaticImage
-          src="../assets/images/balloon.png"
           alt="404 not found"
-          width={400}
-          className="balloon"
           backgroundColor="#D5E9F6"
+          className="balloon"
+          src="../assets/images/balloon.png"
+          width={400}
         />
       </div>
     </NotFound>
diff --git a/src/pages/about.js b/src/pages/about.js
index b1bf5ae..476ccc5 100644
--- a/src/pages/about.js
+++ b/src/pages/about.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import { Link } from 'gatsby'
-import Seo from '../components/Seo'
-import Layout from '../components/Layout'
 import styled from 'styled-components'
 import { OutboundLink } from 'gatsby-plugin-google-analytics'
+import Seo from '../components/Seo'
+import Layout from '../components/Layout'
 import whoAreYou from '../assets/images/parks-and-rec-craig-who-even-are-you.gif'
 
 const Wrapper = styled.div`
@@ -28,7 +28,6 @@ const Wrapper = styled.div`
     }
 
     img {
-      max-width: 100%;
       border-radius: 40px 0 40px 0;
     }
   }
@@ -109,12 +108,12 @@ const AboutPage = () => (
     <Wrapper className="container">
       <header>
         <div>
-          <img src={whoAreYou} alt="Who even are you" />
+          <img alt="Who even are you" src={whoAreYou} />
         </div>
         <div>
           <h1>About me</h1>
           <p>
-            My name is Tom Gooden and I'm a Michigan based Developer and
+            My name is Tom Gooden and I&apos;m a Michigan based Developer and
             Designer who specializes in custom solutions for businesses
             including internal tooling a customer facing applications.
           </p>
@@ -122,16 +121,16 @@ const AboutPage = () => (
       </header>
       <main>
         <p>
-          I’m a user-experience junkie, and for the past{' '}
-          {new Date().getFullYear() - 2007}+ years I've been professionally
+          I&apos;m a user-experience junkie, and for the past{' '}
+          {new Date().getFullYear() - 2007}+ years I&apos;ve been professionally
           creating websites and applications for businesses and governments of
           all sizes. My passion is coming up with ideas to make processes more
           efficient utilizing the JAMstack. You can usually catch me hanging out
           in the{' '}
           <OutboundLink
             href="https://discord.gg/KntFa9p"
-            target="_blank"
             rel="noopener noreferrer"
+            target="_blank"
           >
             CodeHelp discord server
           </OutboundLink>
@@ -143,8 +142,8 @@ const AboutPage = () => (
             <OutboundLink
               className="button"
               href="https://discord.gg/KntFa9p"
-              target="_blank"
               rel="noopener noreferrer"
+              target="_blank"
             >
               Join
             </OutboundLink>
diff --git a/src/pages/blog.js b/src/pages/blog.js
index 819a593..0c487eb 100644
--- a/src/pages/blog.js
+++ b/src/pages/blog.js
@@ -32,24 +32,24 @@ import Layout from '../components/Layout'
 //   }
 // `
 
-const BlogListPage = (
+const BlogListPage = () =>
+  // {
+  //   data: {
+  //     allMarkdownRemark: { edges },
+  //   },
+  // }
   {
-    //   data: {
-    //     allMarkdownRemark: { edges },
-    //   },
+    //   const Posts = edges
+    //     .filter((edge) => !!edge.node.frontmatter.date) // You can filter your posts based on some criteria
+    //     .map((edge) => <PostLink key={edge.node.id} post={edge.node} />)
+    return (
+      <Layout>
+        <div className="container">
+          <p>This page is under construction</p>
+        </div>
+      </Layout>
+    )
   }
-) => {
-  //   const Posts = edges
-  //     .filter((edge) => !!edge.node.frontmatter.date) // You can filter your posts based on some criteria
-  //     .map((edge) => <PostLink key={edge.node.id} post={edge.node} />)
-  return (
-    <Layout>
-      <div className="container">
-        <p>This page is under construction</p>
-      </div>
-    </Layout>
-  )
-}
 //     <Layout>
 //       <div className="container">
 //         <h1>Blog</h1>
diff --git a/src/pages/contact.js b/src/pages/contact.js
index bedf976..3c23418 100644
--- a/src/pages/contact.js
+++ b/src/pages/contact.js
@@ -1,8 +1,8 @@
 import React from 'react'
+import styled from 'styled-components'
 import Layout from '../components/Layout'
 import Seo from '../components/Seo'
 import { ProjectRoadmap } from '../components/ProjectRoadmap'
-import styled from 'styled-components'
 
 const Contact = styled.div`
   margin: 5rem 0;
@@ -124,20 +124,20 @@ const ContactPage = () => {
             </p>
           </div>
           <form
-            method="POST"
-            data-netlify="true"
-            netlify-honeypot="bot-field"
             action="/thanks"
+            data-netlify="true"
+            method="POST"
             name="contact"
+            netlify-honeypot="bot-field"
           >
             <input name="form-name" type="hidden" value="contact" />
-            <input name="bot-field" type="hidden" placeholder="Phone" />
+            <input name="bot-field" placeholder="Phone" type="hidden" />
 
             <div>
               <label htmlFor="name">
                 Your name{' '}
                 <span>
-                  <input id="name" name="name" type="text" required />
+                  <input id="name" name="name" required type="text" />
                 </span>
               </label>
             </div>
@@ -145,7 +145,7 @@ const ContactPage = () => {
               <label htmlFor="email">
                 Email{' '}
                 <span>
-                  <input id="email" name="email" type="email" required />
+                  <input id="email" name="email" required type="email" />
                 </span>
               </label>
             </div>
@@ -164,13 +164,13 @@ const ContactPage = () => {
                     <option value="hello">Just saying hey!</option>
                   </select>
                   <svg
-                    xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 21.825 21.825"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
                     <defs />
                     <path
-                      fill="#1e201d"
                       d="M16.791 13.254a1.112 1.112 0 011.587 0 1.14 1.14 0 010 1.587l-6.65 6.651a1.14 1.14 0 01-.809.333c-.317 0-.603-.127-.81-.333l-6.65-6.651c-.444-.444-.444-1.143 0-1.587s1.143-.444 1.587 0l4.746 4.762V1.111A1.116 1.116 0 0110.918 0c.619 0 1.111.492 1.111 1.111v16.904l4.762-4.761z"
+                      fill="#1e201d"
                     />
                   </svg>
                 </span>
@@ -178,7 +178,7 @@ const ContactPage = () => {
             </div>
             <div>
               <label htmlFor="budget">
-                What's your budget?
+                What&apos;s your budget?
                 <span>
                   <select id="budget" name="budget" required>
                     <option value="2k-5k">$2,500-$5,000</option>
@@ -188,13 +188,13 @@ const ContactPage = () => {
                     <option value="na">n/a</option>
                   </select>
                   <svg
-                    xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 21.825 21.825"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
                     <defs />
                     <path
-                      fill="#1e201d"
                       d="M16.791 13.254a1.112 1.112 0 011.587 0 1.14 1.14 0 010 1.587l-6.65 6.651a1.14 1.14 0 01-.809.333c-.317 0-.603-.127-.81-.333l-6.65-6.651c-.444-.444-.444-1.143 0-1.587s1.143-.444 1.587 0l4.746 4.762V1.111A1.116 1.116 0 0110.918 0c.619 0 1.111.492 1.111 1.111v16.904l4.762-4.761z"
+                      fill="#1e201d"
                     />
                   </svg>
                 </span>
diff --git a/src/pages/index.js b/src/pages/index.js
index a3d68b7..f207aff 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -37,7 +37,7 @@ const IndexPage = () => (
               viewBox="0 0 16 16"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <path fill="#F52D86" d="M0 0h16v16H0z" />
+              <path d="M0 0h16v16H0z" fill="#F52D86" />
             </svg>
             <Link to="/uses">Uses</Link>
             <svg
@@ -45,7 +45,7 @@ const IndexPage = () => (
               viewBox="0 0 16 16"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <circle cx="8" cy="8" r="8" fill="#53CAEE" />
+              <circle cx="8" cy="8" fill="#53CAEE" r="8" />
             </svg>
             <Link to="/projects">Projects</Link>
             <svg
@@ -53,7 +53,7 @@ const IndexPage = () => (
               viewBox="0 0 17 15"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <path fill="#711CB4" d="m8.24 0 8.17 14.46H.21L8.24 0Z" />
+              <path d="m8.24 0 8.17 14.46H.21L8.24 0Z" fill="#711CB4" />
             </svg>
             <Link to="/contact">Contact</Link>
           </nav>
@@ -74,7 +74,7 @@ const IndexPage = () => (
               fill="#711CB4"
               fillOpacity=".1"
             />
-            <path fill="#53CAEE" fillOpacity=".1" d="M0 28h268v268H0z" />
+            <path d="M0 28h268v268H0z" fill="#53CAEE" fillOpacity=".1" />
             <circle
               cx="313.5"
               cy="216.5"
diff --git a/src/pages/tags.js b/src/pages/tags.js
index 24613e7..fe2e349 100644
--- a/src/pages/tags.js
+++ b/src/pages/tags.js
@@ -4,16 +4,15 @@ import React from 'react'
 import Layout from '../components/Layout'
 // import { Link, graphql } from 'gatsby'
 
-const TagsPage = (
-  {
-    //   data: {
-    //     allMarkdownRemark: { group },
-    //     site: {
-    //       siteMetadata: { title },
-    //     },
-    //   },
-  }
-) => (
+const TagsPage = () => (
+  // {
+  //   data: {
+  //     allMarkdownRemark: { group },
+  //     site: {
+  //       siteMetadata: { title },
+  //     },
+  //   },
+  // }
   <Layout>
     <div className="container">
       <p>This page is under construction</p>
diff --git a/src/pages/thanks.js b/src/pages/thanks.js
index 44922d7..70904cb 100644
--- a/src/pages/thanks.js
+++ b/src/pages/thanks.js
@@ -1,17 +1,13 @@
 import React from 'react'
 import { Link } from 'gatsby'
+import styled from 'styled-components'
 import Layout from '../components/Layout'
 import Seo from '../components/Seo'
-import styled from 'styled-components'
 import cobraKai from '../assets/images/send-it-to-the-internet.gif'
 
 const Thanks = styled.div`
   text-align: center;
 
-  h1 {
-    font-size: var(--font-size__h0);
-  }
-
   a {
     color: var(--color_blue);
     font-weight: bold;
@@ -24,7 +20,7 @@ const Thanks = styled.div`
   }
 `
 
-const ThanksPage = ({ data }) => (
+const ThanksPage = () => (
   <Layout>
     <Seo title="Thank you!" />
     <Thanks className="container">
@@ -35,27 +31,6 @@ const ThanksPage = ({ data }) => (
       </p>
       <Link to="/">Back home</Link>
       <img alt="Send it to the internet!" src={cobraKai} />
-
-      {/*
-        <ul>
-          <li>MacBookPro 15" 2015 and 15" 2018</li>
-          <li>Monitors</li>
-          <li>Keyboard &amp; Mouse</li>
-          <li>Webcam / Mic</li>
-          <li>Desk / Chair</li>
-          <li>Alfred</li>
-          <li>VS Code</li>
-          <li>Dracula Theme</li>
-          <li>Fira Code</li>
-          <li>Sketch</li>
-          <li>Discord / Slack</li>
-          <li>Screaming Frog</li>
-          <li>GatsbyJS</li>
-          <li>Firefox</li>
-          <li>SVGOMG</li>
-          <li>Dropbox</li>
-          <li>Backpack</li>
-        </ul> */}
     </Thanks>
   </Layout>
 )
diff --git a/src/pages/uses.js b/src/pages/uses.js
index 24364dc..b8ab81f 100644
--- a/src/pages/uses.js
+++ b/src/pages/uses.js
@@ -32,22 +32,22 @@ const UsesPage = () => {
             </p>
           </div>
           <StaticImage
-            src="../assets/images/uses.jpeg"
             alt="Tom Gooden Uses"
+            height={470}
             objectFit="cover"
             objectPosition="center -50px"
-            height={470}
+            src="../assets/images/uses.jpeg"
           />
         </header>
         <div className="container container--skinny">
           <div className="grid">
             {uniques.map(({ categories, column }) => (
               <div key={column}>
-                {categories.map(({ name, items }) => (
+                {categories.map(({ name, items: catItems }) => (
                   <div key={name}>
                     <h2>{name}</h2>
                     <ul>
-                      {items.map(({ title, description, link }) => {
+                      {catItems.map(({ title, description, link }) => {
                         const fromLink =
                           link +
                           (link.match(/\?./) ? `&` : `?`) +
diff --git a/src/utils/idk.js b/src/utils/idk.js
index 0260511..39129bb 100644
--- a/src/utils/idk.js
+++ b/src/utils/idk.js
@@ -1,17 +1,22 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 export const ListItem = ({ text }) => (
   <li>
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
       <defs />
       <path
+        d="M21 12H3m14-4l4 4-4-4zm4 4l-4 4 4-4z"
         stroke="#56CBF9"
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeWidth="2"
-        d="M21 12H3m14-4l4 4-4-4zm4 4l-4 4 4-4z"
       />
     </svg>
     <span>{text}</span>
   </li>
 )
+
+ListItem.propTypes = {
+  text: PropTypes.string.isRequired,
+}