Update deps, fix linting issues

.eslintrc.js

@@ -1,38 +1,31 @@
-// prettier-ignore
 module.exports = {
   root: true,
   env: { es6: true, browser: true },
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
   parserOptions: { ecmaVersion: 8 },
-  extends: [
-    'eslint:recommended',
-    'plugin:import/errors',
-    'plugin:import/warnings',
-    'airbnb',
-    'prettier'
-  ],
+  extends: ['eslint:recommended', 'plugin:import/errors', 'plugin:import/warnings', 'airbnb', 'prettier'],
   plugins: ['import', 'prettier'],
   rules: {
     'max-len': ['warn', 120],
-    'comma-dangle': ['error', 'never'],
+    'comma-dangle': 'off',
     'prefer-const': 'warn',
     'camelcase': 'off',
     'no-nested-ternary': 'off',
     'no-plusplus': 'off',
     'no-restricted-globals': 'off',
-    'arrow-parens': ['error', 'as-needed', { requireForBlockBody: true }],
+    'arrow-parens': ['error', 'always'],
     'function-paren-newline': ['error', 'consistent'],
     'object-curly-newline': ['error', { consistent: true, multiline: true }],
     'global-require': 'off',
     'radix': 'off',
     'quotes': ['error', 'single', 'avoid-escape'],
     'quote-props': ['error', 'consistent'],
-    'import/no-unresolved': ['error', {
-      ignore: [
-        'redux-rest-resource',
-        'mdi-react'
-      ]
-    }],
+    'import/no-unresolved': [
+      'error',
+      {
+        ignore: ['redux-rest-resource', 'mdi-react'],
+      },
+    ],
     'react/jsx-filename-extension': ['error', { extensions: ['.js'] }],
     'react/react-in-jsx-scope': 'off',
     'react/jsx-one-expression-per-line': 'off',
@@ -43,6 +36,6 @@ module.exports = {
     'react/static-property-placement': 'off',
     'jsx-a11y/anchor-is-valid': ['error', { aspects: ['invalidHref', 'preferButton'] }],
     'jsx-a11y/label-has-for': 'off',
-    'jsx-a11y/label-has-associated-control': 'off'
-  }
+    'jsx-a11y/label-has-associated-control': 'off',
+  },
 };

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.unicodeHighlight.ambiguousCharacters": false
+}

components/CallToAction.js

@@ -3,46 +3,48 @@ import { colors } from '../config';
 
 const title = "Let's talk";
 
-const CallToAction = ({ children }) => (
-  <div className="container">
-    {children}
-    <a className="call-to-action" href="/contact" title={`${title}!`}>
-      {title}
-    </a>
-    <style jsx>{`
-      .container {
-        text-align: center;
-        margin: 2em 0 0.5em;
-      }
-
-      .call-to-action {
-        display: inline-block;
-        font: 24px/2 'Poiret One', sans-serif;
-        text-transform: uppercase;
-        text-decoration: none;
-        color: ${colors.darkGray};
-        border: 2px solid ${colors.darkGray};
-        padding: 0 16px;
-        transition: background 0.2s;
-
-        &:hover {
-          color: white;
-          background: ${colors.darkGray};
+function CallToAction({ children }) {
+  return (
+    <div className="container">
+      {children}
+      <a className="call-to-action" href="/contact" title={`${title}!`}>
+        {title}
+      </a>
+      <style jsx>{`
+        .container {
+          text-align: center;
+          margin: 2em 0 0.5em;
         }
 
-        @media (min-width: 500px) {
-          font-size: 36px;
-          padding: 0 20px;
+        .call-to-action {
+          display: inline-block;
+          font: 24px/2 'Poiret One', sans-serif;
+          text-transform: uppercase;
+          text-decoration: none;
+          color: ${colors.darkGray};
+          border: 2px solid ${colors.darkGray};
+          padding: 0 16px;
+          transition: background 0.2s;
+
+          &:hover {
+            color: white;
+            background: ${colors.darkGray};
+          }
+
+          @media (min-width: 500px) {
+            font-size: 36px;
+            padding: 0 20px;
+          }
+
+          @media (min-width: 1000px) {
+            font-size: 52px;
+            padding: 0 24px;
+          }
         }
-
-        @media (min-width: 1000px) {
-          font-size: 52px;
-          padding: 0 24px;
-        }
-      }
-    `}</style>
-  </div>
-);
+      `}</style>
+    </div>
+  );
+}
 
 CallToAction.propTypes = {
   children: PropTypes.node.isRequired,

components/Card.js

@@ -1,27 +1,29 @@
 import PropTypes from 'prop-types';
 
-const Card = ({ children }) => (
-  <div className="container">
-    {children}
-    <style jsx>{`
-      .container {
-        flex: 0 0 auto;
-        width: 50%;
-        box-sizing: border-box;
-        padding: 10px;
+function Card({ children }) {
+  return (
+    <div className="container">
+      {children}
+      <style jsx>{`
+        .container {
+          flex: 0 0 auto;
+          width: 50%;
+          box-sizing: border-box;
+          padding: 10px;
 
-        @media (min-width: 768px) {
-          width: 25%;
-        }
+          @media (min-width: 768px) {
+            width: 25%;
+          }
 
-        /* quite improbable */
-        @media (max-width: 350px) {
-          width: 100%;
+          /* quite improbable */
+          @media (max-width: 350px) {
+            width: 100%;
+          }
         }
-      }
-    `}</style>
-  </div>
-);
+      `}</style>
+    </div>
+  );
+}
 
 Card.propTypes = {
   children: PropTypes.node.isRequired,

components/Cards.js

@@ -1,18 +1,20 @@
 import PropTypes from 'prop-types';
 
-const Cards = ({ children }) => (
-  <div className="container">
-    {children}
-    <style jsx>{`
-      .container {
-        margin: 0 -10px;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-      }
-    `}</style>
-  </div>
-);
+function Cards({ children }) {
+  return (
+    <div className="container">
+      {children}
+      <style jsx>{`
+        .container {
+          margin: 0 -10px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+        }
+      `}</style>
+    </div>
+  );
+}
 
 Cards.propTypes = {
   children: PropTypes.node.isRequired,

components/ContactLink.js

@@ -1,65 +1,67 @@
 import PropTypes from 'prop-types';
 import { colors } from '../config';
 
-const ContactLink = ({ type, href, title, detail }) => (
-  <a className="link" href={href} target="_blank" rel="noopener noreferrer" title={title}>
-    <i className={`icon icon-${type}`} />
-    {detail ? <div className="detail">{detail}</div> : null}
-    <style jsx>{`
-      .link {
-        display: inline-block;
-        text-decoration: none;
-        margin: 12px 0;
+function ContactLink({ type, href, title, detail }) {
+  return (
+    <a className="link" href={href} target="_blank" rel="noopener noreferrer" title={title}>
+      <i className={`icon icon-${type}`} />
+      {detail ? <div className="detail">{detail}</div> : null}
+      <style jsx>{`
+        .link {
+          display: inline-block;
+          text-decoration: none;
+          margin: 12px 0;
 
-        &:hover {
-          .icon {
-            background: ${colors.blue};
-          }
+          &:hover {
+            .icon {
+              background: ${colors.blue};
+            }
 
-          .icon-skype {
-            background: ${colors.skype};
-          }
+            .icon-skype {
+              background: ${colors.skype};
+            }
 
-          .icon-behance {
-            background: ${colors.behance};
-          }
+            .icon-behance {
+              background: ${colors.behance};
+            }
 
-          .icon-linkedin {
-            background: ${colors.linkedin};
-          }
+            .icon-linkedin {
+              background: ${colors.linkedin};
+            }
 
-          .icon-facebook {
-            background: ${colors.facebook};
-          }
+            .icon-facebook {
+              background: ${colors.facebook};
+            }
 
-          .icon-google {
-            background: ${colors.google};
-          }
+            .icon-google {
+              background: ${colors.google};
+            }
 
-          .detail {
-            color: ${colors.blue};
+            .detail {
+              color: ${colors.blue};
+            }
           }
         }
-      }
 
-      .icon {
-        display: inline-block;
-        font-size: 24px;
-        padding: 10px;
-        color: white;
-        background: ${colors.mediumGray};
-        border-radius: 50%;
-        transition: background 0.2s;
-        margin: 4px 12px;
-      }
+        .icon {
+          display: inline-block;
+          font-size: 24px;
+          padding: 10px;
+          color: white;
+          background: ${colors.mediumGray};
+          border-radius: 50%;
+          transition: background 0.2s;
+          margin: 4px 12px;
+        }
 
-      .detail {
-        color: ${colors.text};
-        transition: background 0.2s;
-      }
-    `}</style>
-  </a>
-);
+        .detail {
+          color: ${colors.text};
+          transition: background 0.2s;
+        }
+      `}</style>
+    </a>
+  );
+}
 
 ContactLink.propTypes = {
   type: PropTypes.string.isRequired,

components/Content.js

@@ -1,23 +1,25 @@
 import PropTypes from 'prop-types';
 
-const Content = ({ backgroundColor, children }) => (
-  <div className="wrapper" style={{ background: backgroundColor }}>
-    <div className="container">{children}</div>
-    <style jsx>{`
-      .wrapper {
-        padding: 20px 10px;
-        background: white linear-gradient(90deg, #e6e6e6 0%, #fafafa 16%, white 50%, #fafafa 84%, #e6e6e6 100%);
-      }
+function Content({ backgroundColor, children }) {
+  return (
+    <div className="wrapper" style={{ background: backgroundColor }}>
+      <div className="container">{children}</div>
+      <style jsx>{`
+        .wrapper {
+          padding: 20px 10px;
+          background: white linear-gradient(90deg, #e6e6e6 0%, #fafafa 16%, white 50%, #fafafa 84%, #e6e6e6 100%);
+        }
 
-      @media (min-width: 1000px) {
-        .container {
-          width: 980px;
-          margin: auto;
+        @media (min-width: 1000px) {
+          .container {
+            width: 980px;
+            margin: auto;
+          }
         }
-      }
-    `}</style>
-  </div>
-);
+      `}</style>
+    </div>
+  );
+}
 
 Content.propTypes = {
   backgroundColor: PropTypes.string,