Normalize Code Style

.eslintrc

@@ -12,4 +12,4 @@
       "version": "detect"
     }
   }
-  }
+}

.github/dependabot.yml

@@ -1,6 +1,6 @@
 version: 2
 updates:
-- package-ecosystem: npm
+  - package-ecosystem: npm
     directory: "/"
     schedule:
       interval: daily

.gitignore

@@ -4,3 +4,5 @@ public
 
 /.fab
 /fab.zip
+
+/npm-*.log

config.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-undef
 module.exports = {
     "siteName": "KevinK.dev",
     "siteAuthor": "@Unkn0wnKevin",

gatsby-browser.js

@@ -1,12 +1,12 @@
 /* eslint-disable no-undef */
 let $ = require("jquery");
 
-$(function() {
+$(function () {
-    $(window).on("scroll", function() {
+    $(window).on("scroll", function () {
         performUpdate();
     });
 
-    $(window).on("navigate", function() {
+    $(window).on("navigate", function () {
         performUpdate();
     });
 
@@ -14,7 +14,7 @@ $(function() {
 });
 
 function performUpdate() {
-    if(window.scrollY < 15) {
+    if (window.scrollY < 15) {
         $(".topBar").addClass("homeBarTransparent");
     } else {
         $(".topBar").removeClass("homeBarTransparent");

gatsby-node.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 const path = require(`path`);
 
 exports.createPages = async ({ actions, graphql, reporter }) => {
@@ -23,9 +24,10 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     }
 
     result.data.allProjectsJson.nodes.forEach((node) => {
+        // eslint-disable-next-line no-undef
         console.log("Creating Page: ", `/${node.lang}/projects/${node.urlname}`);
 
-        if(node.lang !== "ignoreme") createPage({
+        if (node.lang !== "ignoreme") createPage({
             path: `/${node.lang}/projects/${node.urlname}`,
             component: projectTemplate,
             context: {

npm-debug.log

@@ -1,46 +0,0 @@
-0 info it worked if it ends with ok
-1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'extract' ]
-2 info using npm@3.5.2
-3 info using node@v8.10.0
-4 verbose run-script [ 'preextract', 'extract', 'postextract' ]
-5 info lifecycle kevin-k.dev@1.0.0~preextract: kevin-k.dev@1.0.0
-6 silly lifecycle kevin-k.dev@1.0.0~preextract: no script for preextract, continuing
-7 info lifecycle kevin-k.dev@1.0.0~extract: kevin-k.dev@1.0.0
-8 verbose lifecycle kevin-k.dev@1.0.0~extract: unsafe-perm in lifecycle true
-9 verbose lifecycle kevin-k.dev@1.0.0~extract: PATH: /usr/share/npm/bin/node-gyp-bin:/mnt/d/Projects/kevink-dev/node_modules/.bin:/home/kevin/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/mnt/c/Program Files/Oculus/Support/oculus-runtime:/mnt/c/VulkanSDK/1.1.121.1/Bin:/mnt/c/Program Files/NVIDIA GPU Computing Toolkit/CUDA/v8.0/bin:/mnt/c/Program Files/NVIDIA GPU Computing Toolkit/CUDA/v8.0/libnvvp:/mnt/c/Program Files/NVIDIA GPU Computing Toolkit/CUDA/v9.2/libnvvp:/mnt/c/Program Files (x86)/Common Files/Oracle/Java/javapath:/mnt/c/Program Files (x86)/Common Files/Intel/Shared Libraries/redist/intel64/compiler:/mnt/c/ProgramData/Oracle/Java/javapath:/mnt/c/WINDOWS/system32:/mnt/c/WINDOWS:/mnt/c/WINDOWS/System32/Wbem:/mnt/c/WINDOWS/System32/WindowsPowerShell/v1.0/:/mnt/c/Program Files/PuTTY/:/mnt/c/Program Files (x86)/NVIDIA Corporation/PhysX/Common:/mnt/c/Android:/mnt/c/Windows/System32:/mnt/d/CustomInstalls/libwebp-0.6.1/bin:/mnt/c/Program Files/dotnet/:/mnt/c/Program Files/Microsoft SQL Server/130/Tools/Binn/:/mnt/c/BIN:/mnt/d/CustomInstalls/WorldPainter:/mnt/c/ProgramData/ComposerSetup/bin:/mnt/c/Program Files (x86)/Windows Kits/10/Windows Performance Toolkit/:/mnt/c/Program Files (x86)/Windows Kits/8.1/Windows Performance Toolkit/:/mnt/c/WINDOWS/System32/OpenSSH/:/mnt/d/CustomInstalls/TortoiseHg/:/mnt/c/Perl64/bin/:/mnt/c/Program Files/NVIDIA Corporation/NVIDIA NvDLISR:/mnt/c/Program Files (x86)/Paragon Software/LinuxFS for Windows/:/mnt/c/Program Files (x86)/Streamlink/bin:/mnt/d/CustomInstalls/xampp/mysql/bin:/mnt/d/CustomInstalls/OracleVM VirtualBox:/mnt/c/Program Files/nodejs/:/mnt/c/ProgramData/chocolatey/bin:/mnt/c/AIRCRACK-NG:/mnt/d/Program Files (x86)/Graphviz2.38/bin:/mnt/c/Program Files/Calibre2/:/mnt/d/Program Files (x86)/Google/Cloud SDK/google-cloud-sdk/bin:/mnt/c/Program Files (x86)/Yarn/bin/:/mnt/d/HashiCorp/Vagrant/bin:/mnt/c/Program Files (x86)/GnuPG/bin:/mnt/c/WINDOWS/system32:/mnt/c/WINDOWS:/mnt/c/WINDOWS/System32/Wbem:/mnt/c/WINDOWS/System32/WindowsPowerShell/v1.0/:/mnt/c/WINDOWS/System32/OpenSSH/:/mnt/c/Program Files (x86)/ZeroTier/One/:/mnt/c/Program Files/Symfony:/mnt/c/Program Files/Git/cmd:/mnt/c/Program Files/Microsoft SQL Server/Client SDK/ODBC/170/Tools/Binn/:/mnt/c/Program Files/Docker/Docker/resources/bin:/mnt/c/ProgramData/DockerDesktop/version-bin:/mnt/c/Users/kevin/Miniconda3:/mnt/c/Users/kevin/Miniconda3/Library/mingw-w64/bin:/mnt/c/Users/kevin/Miniconda3/Library/usr/bin:/mnt/c/Users/kevin/Miniconda3/Library/bin:/mnt/c/Users/kevin/Miniconda3/Scripts:/mnt/c/Ruby24-x64/bin:/mnt/c/Ruby26-x64/bin:/mnt/c/Users/kevin/AppData/Local/Programs/Python/Python37/Scripts/:/mnt/c/Users/kevin/AppData/Local/Programs/Python/Python37/:/mnt/c/Users/kevin/AppData/Local/Programs/Python/Python36-32/Scripts/:/mnt/c/Users/kevin/AppData/Local/Programs/Python/Python36-32/:/mnt/c/Users/kevin/AppData/Local/Microsoft/WindowsApps:/mnt/c/Users/kevin/AppData/Local/atom/bin:/mnt/d/flutter/bin:/mnt/c/Users/kevin/AppData/Local/Programs/Fiddler:/mnt/c/Users/kevin/AppData/Roaming/Composer/vendor/bin:/mnt/d/CustomInstalls/GPAC:/mnt/c/Users/kevin/AppData/Local/now-cli:/mnt/c/Users/kevin/AppData/Local/GitHubDesktop/bin:/mnt/c/Program Files/CMake/bin:/mnt/c/Users/kevin/.improbable/spatial:/mnt/c/Program Files/GPAC:/mnt/d/Program Files/GPAC:/mnt/c/Users/kevin/AppData/Local/hyper/app-2.1.2/resources/bin:/mnt/c/Users/kevin/AppData/Local/Programs/Microsoft VS Code/bin:/mnt/c/Users/kevin/AppData/Roaming/npm:/mnt/c/Users/kevin/AppData/Local/Microsoft/WindowsApps:/mnt/c/Users/kevin/.dotnet/tools:/mnt/c/Users/kevin/AppData/Local/Yarn/bin:/mnt/c/Program Files (x86)/FAHClient:/mnt/c/Users/kevin/AppData/Local/Keybase/:/mnt/d/Program Files/IPFS Desktop/resources/app.asar.unpacked/src/ipfs-on-path/scripts/bin-win:/mnt/c/Users/kevin/.dotnet/tools:/snap/bin
-10 verbose lifecycle kevin-k.dev@1.0.0~extract: CWD: /mnt/d/Projects/kevink-dev
-11 silly lifecycle kevin-k.dev@1.0.0~extract: Args: [ '-c',
-11 silly lifecycle   'babel --config-file ./babel-extract.config.js -o tmp/chunk.js \'./src/**/*.{js,jsx,ts,tsx}\' && rm -rf tmp' ]
-12 silly lifecycle kevin-k.dev@1.0.0~extract: Returned: code: 1  signal: null
-13 info lifecycle kevin-k.dev@1.0.0~extract: Failed to exec extract script
-14 verbose stack Error: kevin-k.dev@1.0.0 extract: `babel --config-file ./babel-extract.config.js -o tmp/chunk.js './src/**/*.{js,jsx,ts,tsx}' && rm -rf tmp`
-14 verbose stack Exit status 1
-14 verbose stack     at EventEmitter.<anonymous> (/usr/share/npm/lib/utils/lifecycle.js:232:16)
-14 verbose stack     at emitTwo (events.js:126:13)
-14 verbose stack     at EventEmitter.emit (events.js:214:7)
-14 verbose stack     at ChildProcess.<anonymous> (/usr/share/npm/lib/utils/spawn.js:24:14)
-14 verbose stack     at emitTwo (events.js:126:13)
-14 verbose stack     at ChildProcess.emit (events.js:214:7)
-14 verbose stack     at maybeClose (internal/child_process.js:925:16)
-14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
-15 verbose pkgid kevin-k.dev@1.0.0
-16 verbose cwd /mnt/d/Projects/kevink-dev
-17 error Linux 4.4.0-18362-Microsoft
-18 error argv "/usr/bin/node" "/usr/bin/npm" "run" "extract"
-19 error node v8.10.0
-20 error npm  v3.5.2
-21 error code ELIFECYCLE
-22 error kevin-k.dev@1.0.0 extract: `babel --config-file ./babel-extract.config.js -o tmp/chunk.js './src/**/*.{js,jsx,ts,tsx}' && rm -rf tmp`
-22 error Exit status 1
-23 error Failed at the kevin-k.dev@1.0.0 extract script 'babel --config-file ./babel-extract.config.js -o tmp/chunk.js './src/**/*.{js,jsx,ts,tsx}' && rm -rf tmp'.
-23 error Make sure you have the latest version of node.js and npm installed.
-23 error If you do, this is most likely a problem with the kevin-k.dev package,
-23 error not with npm itself.
-23 error Tell the author that this fails on your system:
-23 error     babel --config-file ./babel-extract.config.js -o tmp/chunk.js './src/**/*.{js,jsx,ts,tsx}' && rm -rf tmp
-23 error You can get information on how to open an issue for this project with:
-23 error     npm bugs kevin-k.dev
-23 error Or if that isn't available, you can get their info via:
-23 error     npm owner ls kevin-k.dev
-23 error There is likely additional logging output above.
-24 verbose exit [ 1, true ]

src/_mixins.scss

@@ -10,16 +10,18 @@
 @mixin cardGeneric {
     border-radius: 5px;
     overflow: hidden;
-    box-shadow: -1px 11px 33px -10px rgba(127,127,127,0.3);
+    box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.3);
     transition: transform .25s, box-shadow .25s;
     color: $textColor;
     text-decoration: none;
     margin: 20px;
     background: $background;
 
-    &:hover, &:active, &:focus {
+    &:hover,
+    &:active,
+    &:focus {
         transform: scale(1.05);
-        box-shadow: -1px 11px 33px -10px rgba(127,127,127,0.2), -1px 11px 33px -10px rgba($accentColor, .75);
+        box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2), -1px 11px 33px -10px rgba($accentColor, .75);
     }
 }
 
@@ -33,7 +35,9 @@
     box-shadow: 0 0 33px -10px rgba($accentColor, .5);
     transition: box-shadow .25s;
 
-    &:hover, &:active, &:hover {
+    &:hover,
+    &:active,
+    &:hover {
         box-shadow: 0 0 33px -10px rgba($accentColor, .9);
     }
 }
@@ -54,7 +58,7 @@
         height: 50px;
     }
 
-    > div {
+    >div {
         display: flex;
         height: 100%;
         padding: 20px !important;
@@ -62,12 +66,12 @@
         font-size: 1.7em;
         color: white;
 
-        > span {
+        >span {
             margin-left: auto;
             margin-right: auto;
         }
 
-        > i {
+        >i {
 
             display: inline-flex;
             flex-direction: column;

src/_variables.scss

@@ -4,4 +4,5 @@ $background: #070707;
 $textColor: white;
 $layoutPadding: 20px;
 
-$mainFont: 'Anonymous Pro', monospace;
+$mainFont: 'Anonymous Pro',
+monospace;

src/components/languageSwitcher.js

@@ -1,8 +1,8 @@
 import React from "react"
-import {Link, Trans, useI18next} from 'gatsby-plugin-react-i18next';
+import { Link, Trans, useI18next } from 'gatsby-plugin-react-i18next';
 
 export default function LanguageSwitcher() {
-    const {languages, originalPath} = useI18next();
+    const { languages, originalPath } = useI18next();
 
     return (
         <div className="languageModalInner">

src/components/navigation.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types"
 import { Trans, Link } from "gatsby-plugin-react-i18next"
 import { graphql, StaticQuery } from 'gatsby'
 
-const Navigation = ({isHome, module}) => {
+const Navigation = ({ isHome, module }) => {
     return (
         <div className={"topBar" + (isHome ? " homeBar" : "")}>
             <nav className="topBarInner">
@@ -29,6 +29,6 @@ const Navigation = ({isHome, module}) => {
 Navigation.propTypes = {
     isHome: PropTypes.bool.isRequired,
     module: PropTypes.string.isRequired
-  }
+}
 
 export default Navigation;

src/components/seo.js

@@ -2,10 +2,10 @@ import React from "react"
 import PropTypes from "prop-types"
 import { Helmet } from "gatsby-plugin-react-i18next"
 import { useStaticQuery, graphql } from "gatsby"
-import {useTranslation} from 'gatsby-plugin-react-i18next';
+import { useTranslation } from 'gatsby-plugin-react-i18next';
 
 function SEO({ description, meta, title }) {
-  const {t} = useTranslation();
+  const { t } = useTranslation();
   const { site } = useStaticQuery(
     graphql`
       query {
@@ -66,8 +66,8 @@ function SEO({ description, meta, title }) {
       ].concat(meta)}
     >
       <script src="https://kit.fontawesome.com/1377f925e0.js" crossOrigin="anonymous"></script>
-        <link rel="preconnect" href="https://fonts.gstatic.com"/>
+      <link rel="preconnect" href="https://fonts.gstatic.com" />
-        <link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&family=Roboto&display=swap" rel="stylesheet"/> 
+      <link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&family=Roboto&display=swap" rel="stylesheet" />
     </Helmet>
   )
 }

src/layouts/default.js

@@ -4,7 +4,7 @@ import Navigation from "../components/navigation"
 import SEO from "../components/seo";
 
 import "./default.scss";
-import {Link, Trans} from 'gatsby-plugin-react-i18next';
+import { Link, Trans } from 'gatsby-plugin-react-i18next';
 import LanguageSwitcher from "../components/languageSwitcher";
 
 class Layout extends React.Component {

src/layouts/default.scss

@@ -4,7 +4,10 @@
     box-sizing: border-box;
 }
 
-body, html, #___gatsby, #gatsby-focus-wrapper {
+body,
+html,
+#___gatsby,
+#gatsby-focus-wrapper {
     margin: 0;
     padding: 0;
     width: 100%;
@@ -93,7 +96,10 @@ footer {
     text-align: center;
 }
 
-section > div:not(.profile), section > article, .section > div:not(.profile), .section > article {
+section>div:not(.profile),
+section>article,
+.section>div:not(.profile),
+.section>article {
     max-width: $layoutWidth;
     width: 100%;
     padding: 39px 20px;

src/pages/donate.js

@@ -1,14 +1,14 @@
-import React, {useState} from "react"
+import React, { useState } from "react"
 import Layout from "../layouts/default";
-import {useStaticQuery, graphql} from "gatsby";
+import { useStaticQuery, graphql } from "gatsby";
 import { Trans, useI18next, I18nextContext } from "gatsby-plugin-react-i18next"
 
 import styles from "./donate.module.scss";
 
 export default function DonatePage() {
   const [amount, setAmount] = useState(5);
-    const {t} = useI18next();
+  const { t } = useI18next();
-    const {path} = React.useContext(I18nextContext);
+  const { path } = React.useContext(I18nextContext);
 
   const { site, file } = useStaticQuery(
     graphql`
@@ -41,11 +41,11 @@ export default function DonatePage() {
 
           <div className={styles.priceAmount}>
             <label htmlFor="priceInput" className={styles.sronly}>Amount</label>
-                        <input type="number" min="1" placeholder="10.00" step="1" value={amount} onChange={(ev) => {setAmount(ev.target.value)}} name="priceInput" id="priceInput" />
+            <input type="number" min="1" placeholder="10.00" step="1" value={amount} onChange={(ev) => { setAmount(ev.target.value) }} name="priceInput" id="priceInput" />
             <div>€</div>
           </div>
 
-                    <a className={styles.donateButton} rel="noopener" id="payPalBtn" href={"https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business="+encodeURIComponent(site.siteMetadata.payPalMail)+"&item_name="+encodeURIComponent(site.siteMetadata.title)+"&currency_code=EUR&image_url="+(encodeURIComponent(site.siteMetadata.siteUrl+file.childImageSharp.resize.src))+"&return="+(encodeURIComponent(site.siteMetadata.siteUrl+"/"+path+"thank-you/"))+"&rm=0&cancel_return="+(encodeURIComponent(site.siteMetadata.siteUrl+"/"+path))+"&amount="+amount}><span>Donate using PayPal</span><i className="fas fa-fw fa-chevron-right" aria-hidden="true"></i></a>
+          <a className={styles.donateButton} rel="noopener" id="payPalBtn" href={"https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=" + encodeURIComponent(site.siteMetadata.payPalMail) + "&item_name=" + encodeURIComponent(site.siteMetadata.title) + "&currency_code=EUR&image_url=" + (encodeURIComponent(site.siteMetadata.siteUrl + file.childImageSharp.resize.src)) + "&return=" + (encodeURIComponent(site.siteMetadata.siteUrl + "/" + path + "thank-you/")) + "&rm=0&cancel_return=" + (encodeURIComponent(site.siteMetadata.siteUrl + "/" + path)) + "&amount=" + amount}><span>Donate using PayPal</span><i className="fas fa-fw fa-chevron-right" aria-hidden="true"></i></a>
         </article>
       </section>
     </Layout>

src/pages/donate.module.scss

@@ -5,7 +5,7 @@
     display: flex;
     width: 150px;
     margin: 20px auto;
-    border: thin solid rgba(0,0,0,.25);
+    border: thin solid rgba(0, 0, 0, .25);
     border-radius: 5px;
     overflow: hidden;
     line-height: 40px;
@@ -15,7 +15,7 @@
         border: none;
         padding-left: 10px;
         width: 1px;
-        border-right: thin solid rgba(0,0,0,.25);
+        border-right: thin solid rgba(0, 0, 0, .25);
     }
 
     div {
@@ -30,7 +30,7 @@
 
 .sronly {
     border: 0;
-    clip: rect(0,0,0,0);
+    clip: rect(0, 0, 0, 0);
     height: 1px;
     margin: -1px;
     overflow: hidden;
@@ -38,4 +38,3 @@
     position: absolute;
     width: 1px;
 }
-

src/pages/donate/thank-you.js

@@ -1,7 +1,7 @@
 import React from "react"
 import Layout from "../../layouts/default";
 import { Trans, useI18next } from "gatsby-plugin-react-i18next"
-import {useStaticQuery, graphql} from "gatsby";
+import { useStaticQuery, graphql } from "gatsby";
 
 export default function ImprintPage() {
   const { site } = useStaticQuery(
@@ -17,14 +17,14 @@ export default function ImprintPage() {
   )
 
   let contactEmail = site.siteMetadata.contactEmail;
-    const {t} = useI18next();
+  const { t } = useI18next();
   return (
     <Layout module="donate" title={t("donate")}>
       <section>
         <article>
           <h1><Trans>donateThanks</Trans></h1>
 
-                    <p><Trans contactEmail={contactEmail} i18nKey="donateThanksText">donateThanksText<a href={"mailto:"+contactEmail}>{{contactEmail}}</a></Trans></p>
+          <p><Trans contactEmail={contactEmail} i18nKey="donateThanksText">donateThanksText<a href={"mailto:" + contactEmail}>{{ contactEmail }}</a></Trans></p>
         </article>
       </section>
     </Layout>

src/pages/friends.js

@@ -20,9 +20,9 @@ query AllFriendsQuery {
   
 `
 
-const FriendsPage = ({data}) => {
+const FriendsPage = ({ data }) => {
 
-    const {t} = useI18next();
+    const { t } = useI18next();
 
     function shuffle(a) {
         for (let i = a.length - 1; i > 0; i--) {
@@ -44,8 +44,8 @@ const FriendsPage = ({data}) => {
                         {
                             shuffle(data.allFriendsJson.nodes).map((friend) => {
                                 return (
-                                    <div className={styles.friendProfile} key={friend.url+"#"+friend.name}>
+                                    <div className={styles.friendProfile} key={friend.url + "#" + friend.name}>
-                                        <div className={styles.friendImage} style={{backgroundImage: "url("+friend.imageURL+")"}}>
+                                        <div className={styles.friendImage} style={{ backgroundImage: "url(" + friend.imageURL + ")" }}>
                                             <span className={styles.friendName}>{friend.name}</span>
                                             <span className={styles.friendTitle}>{friend.profession}</span>
                                         </div>

src/pages/friends.module.scss

@@ -51,7 +51,7 @@
                 padding: 6px 0 6px 25px;
                 color: $textColor;
 
-                > i {
+                >i {
                     color: $accentColor;
                     margin-left: -25px;
                     margin-right: 5px;

src/pages/index.js

@@ -6,7 +6,7 @@ import styles from "./index.module.scss"
 import projectStyles from "./projects.module.scss"
 
 import { Trans, Link } from "gatsby-plugin-react-i18next"
-import {graphql} from "gatsby";
+import { graphql } from "gatsby";
 
 
 export const query = graphql`
@@ -47,7 +47,7 @@ class IndexPage extends React.Component {
       <Layout title="Kevin Kandlbinder" module="home" transparentTopbar={true}>
         <section className={styles.heroSection}>
           <div className={styles.profile + " profile"}>
-            <div data-bg="url(https://cdn.kevink.dev/images/kevin/kevin-kandlbinder-03.jpg)" style={{backgroundImage: "url(https://cdn.kevink.dev/images/kevin/kevin-kandlbinder-03.jpg)"}} className={styles.profileImage + " lazy"}></div>
+            <div data-bg="url(https://cdn.kevink.dev/images/kevin/kevin-kandlbinder-03.jpg)" style={{ backgroundImage: "url(https://cdn.kevink.dev/images/kevin/kevin-kandlbinder-03.jpg)" }} className={styles.profileImage + " lazy"}></div>
             <div className={styles.profileImageDummy}></div>
             <div className={styles.profileCard}>
               <span className={styles.hello}><Trans>homeHello</Trans></span>
@@ -55,11 +55,11 @@ class IndexPage extends React.Component {
               <span className={styles.description}><Trans>homeMe</Trans> <span id="descriptionType"><Trans>homeWebDeveloper</Trans></span>.</span>
 
               <div className={styles.contactLinks}>
-                <a className={styles.contactLink} href={"tel:"+meta.contactPhone}><i className="fas fa-fw fa-phone"></i>{meta.contactPhone}</a>
+                <a className={styles.contactLink} href={"tel:" + meta.contactPhone}><i className="fas fa-fw fa-phone"></i>{meta.contactPhone}</a>
-                <a className={styles.contactLink} href={"mailto:"+meta.contactEmail}><i className="far fa-fw fa-envelope"></i>{meta.contactEmail}</a>
+                <a className={styles.contactLink} href={"mailto:" + meta.contactEmail}><i className="far fa-fw fa-envelope"></i>{meta.contactEmail}</a>
                 <a className={styles.contactLink} href={meta.mapsLink} rel="noreferrer" target="_blank"><i className="fas fa-fw fa-map-marker-alt"></i><Trans>homeMyLocation</Trans></a>
-                <a className={styles.contactLink} href={"https://twitter.com/"+meta.contactTwitter} rel="noreferrer" target="_blank"><i className="fab fa-fw fa-twitter"></i>@{meta.contactTwitter}</a>
+                <a className={styles.contactLink} href={"https://twitter.com/" + meta.contactTwitter} rel="noreferrer" target="_blank"><i className="fab fa-fw fa-twitter"></i>@{meta.contactTwitter}</a>
-                <a className={styles.contactLink} href={"https://github.com/"+meta.contactGitHub} rel="noreferrer" target="_blank"><i className="fab fa-fw fa-github"></i>{meta.contactGitHub}</a>
+                <a className={styles.contactLink} href={"https://github.com/" + meta.contactGitHub} rel="noreferrer" target="_blank"><i className="fab fa-fw fa-github"></i>{meta.contactGitHub}</a>
               </div>
             </div>
           </div>
@@ -67,7 +67,7 @@ class IndexPage extends React.Component {
         <section className="aboutSection">
           <article>
             <h1><Trans>homeAboutMe</Trans></h1>
-            <p><Trans>homeAboutMeHello</Trans><br/><Trans>homeAboutMeText</Trans></p>
+            <p><Trans>homeAboutMeHello</Trans><br /><Trans>homeAboutMeText</Trans></p>
           </article>
         </section>
         <a className={styles.creditSection} href="https://unsplash.com/@jannikkiel" target="_blank" rel="noreferrer">
@@ -82,9 +82,9 @@ class IndexPage extends React.Component {
             <div className={projectStyles.projectList}>
               {this.props.data.allProjectsJson.nodes.map((project) => {
                 return (
-                        <div className={projectStyles.projectCard} key={project.lang+"/"+project.urlname}>
+                  <div className={projectStyles.projectCard} key={project.lang + "/" + project.urlname}>
                     {/*<div className="projectCardActivityIndicator activityIndicatorBlue">Live</div>*/}
-                            <div className={projectStyles.projectCardImage} style={{ backgroundImage: "url("+project.image.childImageSharp.resize.src+")" }}>
+                    <div className={projectStyles.projectCardImage} style={{ backgroundImage: "url(" + project.image.childImageSharp.resize.src + ")" }}>
                       <div className={projectStyles.projectCardMeta}>
                         <span className={projectStyles.projectCardTitle}>{project.name}</span>
                         <span className={projectStyles.projectCardTeaser}>{project.shortDescription}</span>
@@ -92,7 +92,7 @@ class IndexPage extends React.Component {
                     </div>
 
                     <div className={projectStyles.projectCardCTAContainer}>
-                                <div className={projectStyles.projectCardCTA}><Link to={"/projects/"+project.urlname}><Trans>projectView</Trans></Link></div>
+                      <div className={projectStyles.projectCardCTA}><Link to={"/projects/" + project.urlname}><Trans>projectView</Trans></Link></div>
                     </div>
                   </div>
                 );

src/pages/index.module.scss

@@ -9,7 +9,8 @@
     overflow: hidden;
     background: linear-gradient(to bottom, transparent 80%, $background), radial-gradient(ellipse at top left, #1f0ba659, transparent), radial-gradient(ellipse at bottom right, #4a086829, transparent);
 
-    @media(pointer: coarse), (pointer: none) {
+    @media(pointer: coarse),
+    (pointer: none) {
         min-height: 700px;
     }
 
@@ -59,17 +60,19 @@
             padding: 6px 0 6px 25px;
             color: $textColor;
 
-            @media(pointer: coarse), (pointer: none) {
+            @media(pointer: coarse),
+            (pointer: none) {
                 padding-top: 15px;
                 padding-bottom: 15px;
             }
         }
 
-        .contactLink:hover, .contactLink:active {
+        .contactLink:hover,
+        .contactLink:active {
             text-decoration: underline dotted rgba(0, 0, 0, .5);
         }
 
-        .contactLink > i {
+        .contactLink>i {
             color: $accentColor;
             margin-left: -25px;
             margin-right: 5px;
@@ -87,7 +90,8 @@
             color: $textColor;
         }
 
-        .profileImage, .profileImageDummy {
+        .profileImage,
+        .profileImageDummy {
             display: inline-block;
             width: 250px;
             height: 350px;
@@ -115,7 +119,9 @@
         }
 
         @media (max-width: 590px) {
-            .profileImage,.profileImageDummy {
+
+            .profileImage,
+            .profileImageDummy {
                 display: none;
             }
 
@@ -130,20 +136,22 @@
 
 }
 
-.amazonAlexaSection, .donationSection, .hireMeSection {
+.amazonAlexaSection,
+.donationSection,
+.hireMeSection {
     @include homeBanner;
 }
 
 .creditSection {
     @include homeBanner;
 
-    > div {
+    >div {
         padding: 15px !important;
         line-height: 15px;
         font-size: 1.2em;
         color: white;
 
-        > span > i {
+        >span>i {
             line-height: 15px !important;
         }
     }

src/pages/legal/about.js

@@ -4,21 +4,21 @@ import { Trans, useI18next } from "gatsby-plugin-react-i18next"
 
 export default function ImprintPage() {
 
-    const {t} = useI18next();
+    const { t } = useI18next();
     return (
         <Layout module="legal" title={t("imprint")}>
             <section>
                 <article>
                     <h1><Trans>imprint</Trans></h1>
 
-                    <p>Angaben gemäß § 5 TMG</p><p>Kevin Kandlbinder<br/>
+                    <p>Angaben gemäß § 5 TMG</p><p>Kevin Kandlbinder<br />
-                    Eichenweg 48<br/>
+                    Eichenweg 48<br />
-                    25451 Quickborn <br/>
+                    25451 Quickborn <br />
-                    </p><p> <strong>Vertreten durch: </strong><br/>
+                    </p><p> <strong>Vertreten durch: </strong><br />
-                    Kevin Kandlbinder<br/>
+                    Kevin Kandlbinder<br />
-                    </p><p><strong>Kontakt:</strong> <br/>
+                    </p><p><strong>Kontakt:</strong> <br />
-                    Telefon: +49 4106 8068004<br/>
+                    Telefon: +49 4106 8068004<br />
-                    E-Mail: <a href='mailto:contact@kevink.dev'>contact@kevink.dev</a><br/></p>
+                    E-Mail: <a href='mailto:contact@kevink.dev'>contact@kevink.dev</a><br /></p>
                 </article>
             </section>
         </Layout>

src/pages/legal/disclaimer.js

@@ -4,7 +4,7 @@ import { Trans, useI18next } from "gatsby-plugin-react-i18next"
 
 export default function DisclaimerPage() {
 
-    const {t} = useI18next();
+    const { t } = useI18next();
     return (
         <Layout module="legal" title={t("disclaimer")}>
             <section>

src/pages/projects.js

@@ -26,9 +26,9 @@ query GetProjects($language: String) {
 }
 `
 
-const ProjectsPage = ({data}) => {
+const ProjectsPage = ({ data }) => {
 
-    const {t} = useI18next();
+  const { t } = useI18next();
   return (
     <Layout module="projects" title={t("projects")} description={t("projectsDescription")}>
       <section>
@@ -40,9 +40,9 @@ const ProjectsPage = ({data}) => {
           <div className={styles.projectList}>
             {data.allProjectsJson.nodes.map((project) => {
               return (
-                                <div className={styles.projectCard} key={project.lang+project.urlname}>
+                <div className={styles.projectCard} key={project.lang + project.urlname}>
                   {/*<div className="projectCardActivityIndicator activityIndicatorBlue">Live</div>*/}
-                                    <div className={styles.projectCardImage} style={{ backgroundImage: "url("+project.image.childImageSharp.resize.src+")" }}>
+                  <div className={styles.projectCardImage} style={{ backgroundImage: "url(" + project.image.childImageSharp.resize.src + ")" }}>
                     <div className={styles.projectCardMeta}>
                       <span className={styles.projectCardTitle}>{project.name}</span>
                       <span className={styles.projectCardTeaser}>{project.shortDescription}</span>
@@ -50,7 +50,7 @@ const ProjectsPage = ({data}) => {
                   </div>
 
                   <div className={styles.projectCardCTAContainer}>
-                                        <div className={styles.projectCardCTA}><Link to={"/projects/"+project.urlname}><Trans>projectView</Trans></Link></div>
+                    <div className={styles.projectCardCTA}><Link to={"/projects/" + project.urlname}><Trans>projectView</Trans></Link></div>
                   </div>
                 </div>
               );

src/pages/projects.module.scss

@@ -83,7 +83,7 @@
         }
     }
 
-    .projectCardCTAContainer > * {
+    .projectCardCTAContainer>* {
         flex-grow: 1;
     }
 }

src/pages/social.js

@@ -19,9 +19,9 @@ query AllSocialsQuery {
   }  
 `
 
-const SocialPage = ({data}) => {
+const SocialPage = ({ data }) => {
 
-    const {t} = useI18next();
+    const { t } = useI18next();
     return (
         <Layout module="social" title={t("social")} description={t("socialDescription")}>
             <section>
@@ -35,7 +35,7 @@ const SocialPage = ({data}) => {
                             data.allSocialsJson.nodes.map((social) => {
                                 return (
                                     <a className={styles.socialCard} href={social.url} target="_blank" rel="noreferrer" key={social.url}>
-                                        <div className={styles.socialImage} style={{backgroundImage: "url("+social.image+")"}}>
+                                        <div className={styles.socialImage} style={{ backgroundImage: "url(" + social.image + ")" }}>
                                             <span className={styles.socialName}>{social.platformName}</span>
                                             <span className={styles.socialUsername}>{social.platformHandle}</span>
                                         </div>

src/server/languageRedirect.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 const config = require("../../config");
 const locale = require("locale");
 
@@ -11,9 +12,10 @@ export default ({ Router }) => {
 async function checkLang({ request }) {
     const { url } = request
 
+    // eslint-disable-next-line no-undef
     let requestURL = new URL(url);
 
-    if(requestURL.pathname.startsWith("/assets") || 
+    if (requestURL.pathname.startsWith("/assets") ||
         requestURL.pathname.startsWith("/icons") ||
         requestURL.pathname.startsWith("/manifest.webmanifest") ||
         requestURL.pathname.startsWith("/favicon") ||
@@ -25,7 +27,7 @@ async function checkLang({ request }) {
     for (let i = 0; i < config.languages.length; i++) {
         const language = config.languages[i];
 
-        if(requestURL.pathname.startsWith("/"+language)) {
+        if (requestURL.pathname.startsWith("/" + language)) {
             return;
         }
     }
@@ -34,7 +36,7 @@ async function checkLang({ request }) {
 
     let selectedLanguage = defaultLang;
 
-    if(headers.has("Accept-Language")) {
+    if (headers.has("Accept-Language")) {
         let languageHeader = headers.get("Accept-Language");
 
         let requestLocales = new locale.Locales(languageHeader);
@@ -42,7 +44,7 @@ async function checkLang({ request }) {
         selectedLanguage = requestLocales.best(supported);
     }
 
-    requestURL.pathname = "/"+selectedLanguage+requestURL.pathname;
+    requestURL.pathname = "/" + selectedLanguage + requestURL.pathname;
 
     ///return Response.redirect(requestURL.toString(), 302);
 
@@ -52,5 +54,4 @@ async function checkLang({ request }) {
             Location: requestURL.toString(),
         },
     });
-  }
+}
-  

src/templates/project.js

@@ -1,6 +1,6 @@
 import React from "react"
-import {graphql} from "gatsby"
+import { graphql } from "gatsby"
-import {Trans, useTranslation} from 'gatsby-plugin-react-i18next';
+import { Trans, useTranslation } from 'gatsby-plugin-react-i18next';
 import Layout from "../layouts/default";
 import PropTypes from "prop-types"
 
@@ -27,16 +27,16 @@ query GetProject($urlname: String!, $lang: String!) {
 }
 `
 
-const ProjectTemplate = ({data}) => {
+const ProjectTemplate = ({ data }) => {
-  const {t} = useTranslation();
+  const { t } = useTranslation();
   let project = data.allProjectsJson.nodes[0];
   let projectName = project.name;
 
   return (
-        <Layout description={project.shortDescription} title={t("project")+": "+projectName}  transparentTopbar={true}>
+    <Layout description={project.shortDescription} title={t("project") + ": " + projectName} transparentTopbar={true}>
       <section className={styles.projectHeader}>
-            <div style={{paddingTop: 0}}>
+        <div style={{ paddingTop: 0 }}>
-              <div className={styles.headerBackground} style={{backgroundImage: "url("+project.image.publicURL+")"}}></div> 
+          <div className={styles.headerBackground} style={{ backgroundImage: "url(" + project.image.publicURL + ")" }}></div>
           <header>
             <div className={styles.headerInner}>
               <h1><Trans>project</Trans>: {projectName}</h1>
@@ -49,7 +49,7 @@ const ProjectTemplate = ({data}) => {
       {project.longDescription != null ?
         <section className={styles.projectAbout}>
           <article>
-                <h1><Trans projectName={projectName} i18nKey="projectAboutHeader">projectAboutHeader{{projectName}}</Trans></h1>
+            <h1><Trans projectName={projectName} i18nKey="projectAboutHeader">projectAboutHeader{{ projectName }}</Trans></h1>
             <p>{project.longDescription}</p>
           </article>
         </section>

src/templates/project.module.scss

@@ -1,7 +1,7 @@
 @import "../variables";
 
 .projectHeader {
-    > div {
+    >div {
         padding-bottom: 0 !important;
     }
 
@@ -19,7 +19,7 @@
         left: 0;
         width: 100%;
         height: 300px;
-        background:linear-gradient(to bottom, rgba($background, .95), rgba($background, .5) 20%);
+        background: linear-gradient(to bottom, rgba($background, .95), rgba($background, .5) 20%);
 
         .headerInner {
             max-width: $layoutWidth;
@@ -68,7 +68,11 @@
         text-decoration-skip: none;
         text-decoration: underline dotted currentColor;
 
-        i.fab, i.fas, i.fa, i.far, i.fal {
+        i.fab,
+        i.fas,
+        i.fa,
+        i.far,
+        i.fal {
             display: inline;
         }
     }