Eslint updates

src/assets/styles/global.js

@@ -121,6 +121,10 @@ const GlobalStyle = createGlobalStyle`
     color: var(--color__headline);
   }
 
+  img {
+    max-width: 100%;
+  }
+
   button,
   .button,
   a.button {

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>

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>

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>

src/components/Header/index.js

@@ -1 +1 @@
-export { default as Header } from "./Header.component"
+export { default as Header } from './Header.component'

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

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>

src/components/Navigation/index.js

@@ -1 +1 @@
-export { default as Navigation } from "./Navigation.component"
+export { default as Navigation } from './Navigation.component'

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>

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` }}

src/components/Projects/CheckInPortal/index.js

@@ -1 +1 @@
-export { default as CheckInPortal } from './CheckInPortal.component.js'
+export { default as CheckInPortal } from './CheckInPortal.component'

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` }}

src/components/Projects/TherapistDirectory/index.js

@@ -1 +1 @@
-export { default as TherapistDirectory } from './TherapistDirectory.component.js'
+export { default as TherapistDirectory } from './TherapistDirectory.component'

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

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