From 0b5a905ae6bd64fb23702b2d3e121ea0a564c05c Mon Sep 17 00:00:00 2001
From: Kevin Kandlbinder <kevin@kevink.dev>
Date: Mon, 18 Oct 2021 16:57:20 +0200
Subject: [PATCH] Run prettier

---
 config.js                             |   8 +-
 gatsby-config.js                      |  10 +-
 locales/de/translation.json           |  86 +++++++-------
 locales/en/translation.json           |  86 +++++++-------
 src/_mixins.scss                      |   4 +-
 src/components/languageSwitcher.js    |   6 +-
 src/components/navigation.js          |  99 ++++++++++------
 src/components/navigation.module.scss |  10 +-
 src/components/seo.js                 | 157 ++++++++++++++------------
 src/helpers/useSiteMetadata.js        |  66 +++++------
 src/layouts/default.js                |   6 +-
 src/layouts/default.scss              |   3 -
 src/pages/about.js                    |  48 +++++---
 src/pages/donate.js                   |   2 +-
 src/pages/friends.js                  |  20 +++-
 src/pages/index.js                    |  72 +++++++-----
 src/pages/index.module.scss           |  19 ++--
 src/pages/projects.js                 |  69 ++++++-----
 src/pages/social.js                   |  12 +-
 src/templates/project.js              |  21 ++--
 20 files changed, 452 insertions(+), 352 deletions(-)

diff --git a/config.js b/config.js
index 7c0964d..a1a54c0 100644
--- a/config.js
+++ b/config.js
@@ -23,5 +23,11 @@ module.exports = {
     height: "168 cm",
     nationality: "Germany",
     personImage: "./content/images/kevin-kandlbinder-04.jpg",
-    sameAs: ["https://mastodon.1in1.net/@kevin", "https://github.com/Unkn0wnCat", "https://unkn0wncat.net/", "https://twitter.com/@Unkn0wnKevin", "https://unsplash.com/@unkn0wncat"]
+    sameAs: [
+        "https://mastodon.1in1.net/@kevin",
+        "https://github.com/Unkn0wnCat",
+        "https://unkn0wncat.net/",
+        "https://twitter.com/@Unkn0wnKevin",
+        "https://unsplash.com/@unkn0wncat",
+    ],
 };
diff --git a/gatsby-config.js b/gatsby-config.js
index ffd3afa..c45367c 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -23,7 +23,7 @@ module.exports = {
         height: extConfig.height,
         nationality: extConfig.nationality,
         personImage: extConfig.personImage,
-        sameAs: extConfig.sameAs
+        sameAs: extConfig.sameAs,
     },
     plugins: [
         `gatsby-plugin-eslint`,
@@ -34,15 +34,15 @@ module.exports = {
         {
             resolve: `gatsby-plugin-remote-images`,
             options: {
-                nodeType: 'SocialsJson',
-                imagePath: 'image',
+                nodeType: "SocialsJson",
+                imagePath: "image",
             },
         },
         {
             resolve: `gatsby-plugin-remote-images`,
             options: {
-                nodeType: 'FriendsJson',
-                imagePath: 'imageURL',
+                nodeType: "FriendsJson",
+                imagePath: "imageURL",
             },
         },
         {
diff --git a/locales/de/translation.json b/locales/de/translation.json
index 181eca8..9de77f7 100644
--- a/locales/de/translation.json
+++ b/locales/de/translation.json
@@ -1,45 +1,45 @@
 {
-  "siteDescription": "Hallo, ich bin Kevin Kandlbinder, ein Entwickler und Hobby-Fotograf aus Norddeutschland.",
-  "imprint": "Impressum",
-  "datasec": "Datenschutz",
-  "disclaimer": "Disclaimer",
-  "projects": "Projekte",
-  "project": "Projekt",
-  "social": "Soziales",
-  "homeHello": "Hallo, ich bin",
-  "homeMe": "Ich bin",
-  "homeWebDeveloper": "Web Developer",
-  "homeMyLocation": "Quickborn, Schleswig-Holstein, Deutschland",
-  "donationCatchphrase": "Gefällt dir was du siehst? Spende doch etwas.",
-  "homeImageCredit": "Portrait aufgenommen von Jannik Kiel",
-  "de": "Deutsch",
-  "en": "Englisch",
-  "projectAboutHeader": "Über {{projectName}}",
-  "projectViewGitHub": "Auf GitHub anschauen",
-  "projectViewWebsite": "Projekt-Website anschauen",
-  "projectsDescription": "Das ist woran ich grade arbeite oder woran ich gearbeitet habe.",
-  "projectView": "Anschauen",
-  "socialDescriptionWithLink": "Finde mich auf anderen Plattformen oder <1>besuche meine Freunde</1>!",
-  "socialDescription": "Finde mich auf anderen Plattformen!",
-  "friends": "Freunde",
-  "friendsDescription": "In dieser Liste stehen Freunde von mir und meiner Seite. Schau doch bei ihnen mal rein, wenn du mehr interessante Projekte sehen willst.",
-  "donateThanksText": "Ich finde es schön, dass du meine Arbeit schön findest und das zeigst! Sende mir gerne eine E-Mail an <1>{{contactEmail}}</1> wenn du mit mir über irgendwas reden möchtest!",
-  "donateThanks": "Danke für die Spende!",
-  "donateDescription": "Hey! Es sieht so aus als würdest du über eine Spende nachdenken. Das ist nett! Wenn du ein bestimmtes Projekt unterstützen willst, schreibe deine Wünsche gerne in den Spendenkommentar.",
-  "donate": "Spenden",
-  "featuredProjects": "Vorgestellte Projekte",
-  "seeMore": "Mehr Projekte erkunden",
-  "donateGitHub": "Du kannst mich mit dem folgenden Button ganz einfach über GitHub Sponsors unterstützen!",
-  "donatePayPal": "Wenn du mich lieber über PayPal unterstützen willst ist hier der Button für dich:",
-  "sponsorGitHub": "Über GitHub unterstützen",
-  "mySkills": "Meine Fähigkeiten",
-  "about": "Über",
-  "explore": "Erkunde",
-  "myProjects": "meine Projekte",
-  "discover": "Entdecke",
-  "mySocials": "meine Accounts",
-  "learn": "Erfahre",
-  "moreAboutMe": "mehr über mich",
-  "home": "Home",
-  "menu": "Menü"
+    "siteDescription": "Hallo, ich bin Kevin Kandlbinder, ein Entwickler und Hobby-Fotograf aus Norddeutschland.",
+    "imprint": "Impressum",
+    "datasec": "Datenschutz",
+    "disclaimer": "Disclaimer",
+    "projects": "Projekte",
+    "project": "Projekt",
+    "social": "Soziales",
+    "homeHello": "Hallo, ich bin",
+    "homeMe": "Ich bin",
+    "homeWebDeveloper": "Web Developer",
+    "homeMyLocation": "Quickborn, Schleswig-Holstein, Deutschland",
+    "donationCatchphrase": "Gefällt dir was du siehst? Spende doch etwas.",
+    "homeImageCredit": "Portrait aufgenommen von Jannik Kiel",
+    "de": "Deutsch",
+    "en": "Englisch",
+    "projectAboutHeader": "Über {{projectName}}",
+    "projectViewGitHub": "Auf GitHub anschauen",
+    "projectViewWebsite": "Projekt-Website anschauen",
+    "projectsDescription": "Das ist woran ich grade arbeite oder woran ich gearbeitet habe.",
+    "projectView": "Anschauen",
+    "socialDescriptionWithLink": "Finde mich auf anderen Plattformen oder <1>besuche meine Freunde</1>!",
+    "socialDescription": "Finde mich auf anderen Plattformen!",
+    "friends": "Freunde",
+    "friendsDescription": "In dieser Liste stehen Freunde von mir und meiner Seite. Schau doch bei ihnen mal rein, wenn du mehr interessante Projekte sehen willst.",
+    "donateThanksText": "Ich finde es schön, dass du meine Arbeit schön findest und das zeigst! Sende mir gerne eine E-Mail an <1>{{contactEmail}}</1> wenn du mit mir über irgendwas reden möchtest!",
+    "donateThanks": "Danke für die Spende!",
+    "donateDescription": "Hey! Es sieht so aus als würdest du über eine Spende nachdenken. Das ist nett! Wenn du ein bestimmtes Projekt unterstützen willst, schreibe deine Wünsche gerne in den Spendenkommentar.",
+    "donate": "Spenden",
+    "featuredProjects": "Vorgestellte Projekte",
+    "seeMore": "Mehr Projekte erkunden",
+    "donateGitHub": "Du kannst mich mit dem folgenden Button ganz einfach über GitHub Sponsors unterstützen!",
+    "donatePayPal": "Wenn du mich lieber über PayPal unterstützen willst ist hier der Button für dich:",
+    "sponsorGitHub": "Über GitHub unterstützen",
+    "mySkills": "Meine Fähigkeiten",
+    "about": "Über",
+    "explore": "Erkunde",
+    "myProjects": "meine Projekte",
+    "discover": "Entdecke",
+    "mySocials": "meine Accounts",
+    "learn": "Erfahre",
+    "moreAboutMe": "mehr über mich",
+    "home": "Home",
+    "menu": "Menü"
 }
diff --git a/locales/en/translation.json b/locales/en/translation.json
index 892ec13..20c7a49 100644
--- a/locales/en/translation.json
+++ b/locales/en/translation.json
@@ -1,45 +1,45 @@
 {
-  "siteDescription": "Hello, I am Kevin Kandlbinder, a developer and hobby photographer from northern Germany.",
-  "imprint": "Imprint",
-  "datasec": "Data Protection",
-  "disclaimer": "Disclaimer",
-  "projects": "Projects",
-  "project": "Project",
-  "social": "Social",
-  "homeHello": "Hello, I am",
-  "homeMe": "I am",
-  "homeWebDeveloper": "a web developer",
-  "homeMyLocation": "Quickborn, Schleswig-Holstein, Germany",
-  "donationCatchphrase": "Like what you're seeing? Consider donating.",
-  "homeImageCredit": "Portrait taken by Jannik Kiel",
-  "de": "German",
-  "en": "English",
-  "projectAboutHeader": "About {{projectName}}",
-  "projectViewGitHub": "View on GitHub",
-  "projectViewWebsite": "View Project-Website",
-  "projectsDescription": "This is what I am working on or have worked on.",
-  "projectView": "View",
-  "socialDescriptionWithLink": "Find me on other platforms or <1>visit my friends</1>!",
-  "socialDescription": "Find me on other platforms!",
-  "friends": "Friends",
-  "friendsDescription": "In this list you can find friends of mine and this site. Feel free to check them out for more interesting projects.",
-  "donate": "Donate",
-  "donateDescription": "Hey! It looks like you're thinking about donating to me. That's nice of you! If you want your donation to go towards a specific project, feel free to write your wishes into the donation comment.",
-  "donateThanks": "Thanks for donating!",
-  "donateThanksText": "I really appreciate you appreciating my work and showing it! Feel free to mail me at <1>{{contactEmail}}</1> if you have anything you want to talk about!",
-  "featuredProjects": "Featured Projects",
-  "seeMore": "Explore more Projects",
-  "donateGitHub": "You can very easily support me via GitHub Sponsors using the following button!",
-  "donatePayPal": "If you'd rather support me via PayPal the following button is for you:",
-  "sponsorGitHub": "Sponsor using GitHub",
-  "mySkills": "My Skills",
-  "about": "About",
-  "explore": "Explore",
-  "myProjects": "my projects",
-  "discover": "Discover",
-  "mySocials": "my socials",
-  "learn": "Learn",
-  "moreAboutMe": "more about me",
-  "home": "Home",
-  "menu": "Menu"
+    "siteDescription": "Hello, I am Kevin Kandlbinder, a developer and hobby photographer from northern Germany.",
+    "imprint": "Imprint",
+    "datasec": "Data Protection",
+    "disclaimer": "Disclaimer",
+    "projects": "Projects",
+    "project": "Project",
+    "social": "Social",
+    "homeHello": "Hello, I am",
+    "homeMe": "I am",
+    "homeWebDeveloper": "a web developer",
+    "homeMyLocation": "Quickborn, Schleswig-Holstein, Germany",
+    "donationCatchphrase": "Like what you're seeing? Consider donating.",
+    "homeImageCredit": "Portrait taken by Jannik Kiel",
+    "de": "German",
+    "en": "English",
+    "projectAboutHeader": "About {{projectName}}",
+    "projectViewGitHub": "View on GitHub",
+    "projectViewWebsite": "View Project-Website",
+    "projectsDescription": "This is what I am working on or have worked on.",
+    "projectView": "View",
+    "socialDescriptionWithLink": "Find me on other platforms or <1>visit my friends</1>!",
+    "socialDescription": "Find me on other platforms!",
+    "friends": "Friends",
+    "friendsDescription": "In this list you can find friends of mine and this site. Feel free to check them out for more interesting projects.",
+    "donate": "Donate",
+    "donateDescription": "Hey! It looks like you're thinking about donating to me. That's nice of you! If you want your donation to go towards a specific project, feel free to write your wishes into the donation comment.",
+    "donateThanks": "Thanks for donating!",
+    "donateThanksText": "I really appreciate you appreciating my work and showing it! Feel free to mail me at <1>{{contactEmail}}</1> if you have anything you want to talk about!",
+    "featuredProjects": "Featured Projects",
+    "seeMore": "Explore more Projects",
+    "donateGitHub": "You can very easily support me via GitHub Sponsors using the following button!",
+    "donatePayPal": "If you'd rather support me via PayPal the following button is for you:",
+    "sponsorGitHub": "Sponsor using GitHub",
+    "mySkills": "My Skills",
+    "about": "About",
+    "explore": "Explore",
+    "myProjects": "my projects",
+    "discover": "Discover",
+    "mySocials": "my socials",
+    "learn": "Learn",
+    "moreAboutMe": "more about me",
+    "home": "Home",
+    "menu": "Menu"
 }
diff --git a/src/_mixins.scss b/src/_mixins.scss
index 3fcfae6..52170f9 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -54,10 +54,10 @@
     justify-content: center;
     text-shadow: 0 0 10px black;
 
-    @media(prefers-color-scheme: light) {
+    @media (prefers-color-scheme: light) {
         background-color: $accentColor;
     }
-    
+
     svg {
         margin-left: 10px;
     }
diff --git a/src/components/languageSwitcher.js b/src/components/languageSwitcher.js
index 71e28a6..9bb5673 100644
--- a/src/components/languageSwitcher.js
+++ b/src/components/languageSwitcher.js
@@ -7,7 +7,11 @@ export default function LanguageSwitcher() {
     const { languages, originalPath } = useI18next();
 
     return (
-        <div className={styles.languageModal} id="languageChooser" role="dialog">
+        <div
+            className={styles.languageModal}
+            id="languageChooser"
+            role="dialog"
+        >
             <div className={styles.languageModalInner}>
                 <h2>
                     Languages (
diff --git a/src/components/navigation.js b/src/components/navigation.js
index 31cc1d8..2c7743c 100644
--- a/src/components/navigation.js
+++ b/src/components/navigation.js
@@ -7,44 +7,55 @@ import { createPortal } from "react-dom";
 
 import * as styles from "./navigation.module.scss";
 import { X } from "lucide-react";
-import { Fade as Hamburger } from 'hamburger-react';
+import { Fade as Hamburger } from "hamburger-react";
 
-const OffScreenNav = ({active, close}) => {
-    if(typeof window === "undefined") {
+const OffScreenNav = ({ active, close }) => {
+    if (typeof window === "undefined") {
         return null;
     }
 
-    return createPortal(<div className={styles.offscreenNav + " " + (active ? styles.active : "")}>
-        <div className={styles.inner}>
-            <button className={styles.close} onClick={close}><X/></button>
-            <span><Trans>menu</Trans></span>
-            <Link to="/" activeClassName={styles.active}>
-                <Trans>home</Trans>
-            </Link>
-            <Link
-                id="navBtnProjects"
-                to="/about"
-                activeClassName={styles.active}
-            >
-                <Trans>about</Trans>
-            </Link>
-            <Link
-                id="navBtnProjects"
-                to="/projects"
-                activeClassName={styles.active}
-            >
-                <Trans>projects</Trans>
-            </Link>
-            <Link
-                id="navBtnSocial"
-                to="/social"
-                activeClassName={styles.active}
-            >
-                <Trans>social</Trans>
-            </Link>
-        </div>
-    </div>, window.document.body)
-}
+    return createPortal(
+        <div
+            className={
+                styles.offscreenNav + " " + (active ? styles.active : "")
+            }
+        >
+            <div className={styles.inner}>
+                <button className={styles.close} onClick={close}>
+                    <X />
+                </button>
+                <span>
+                    <Trans>menu</Trans>
+                </span>
+                <Link to="/" activeClassName={styles.active}>
+                    <Trans>home</Trans>
+                </Link>
+                <Link
+                    id="navBtnProjects"
+                    to="/about"
+                    activeClassName={styles.active}
+                >
+                    <Trans>about</Trans>
+                </Link>
+                <Link
+                    id="navBtnProjects"
+                    to="/projects"
+                    activeClassName={styles.active}
+                >
+                    <Trans>projects</Trans>
+                </Link>
+                <Link
+                    id="navBtnSocial"
+                    to="/social"
+                    activeClassName={styles.active}
+                >
+                    <Trans>social</Trans>
+                </Link>
+            </div>
+        </div>,
+        window.document.body
+    );
+};
 
 const Navigation = ({ isHome }) => {
     let [atTop, setAtTop] = useState(false);
@@ -96,7 +107,10 @@ const Navigation = ({ isHome }) => {
             }
         >
             <nav className={styles.topBarInner}>
-                <OffScreenNav active={offscreenNavActive} close={closeOffscreenNav} />
+                <OffScreenNav
+                    active={offscreenNavActive}
+                    close={closeOffscreenNav}
+                />
                 <StaticQuery
                     query={graphql`
                         query {
@@ -108,7 +122,11 @@ const Navigation = ({ isHome }) => {
                         }
                     `}
                     render={(data) => (
-                        <Link to="/" activeClassName={styles.active} className={styles.logo}>
+                        <Link
+                            to="/"
+                            activeClassName={styles.active}
+                            className={styles.logo}
+                        >
                             {data.site.siteMetadata.title}
                         </Link>
                     )}
@@ -135,7 +153,14 @@ const Navigation = ({ isHome }) => {
                 >
                     <Trans>social</Trans>
                 </Link>
-                <div className={styles.hamburger}><Hamburger toggle={setOffscreenNavActive} toggled={offscreenNavActive} rounded size={30} /></div>
+                <div className={styles.hamburger}>
+                    <Hamburger
+                        toggle={setOffscreenNavActive}
+                        toggled={offscreenNavActive}
+                        rounded
+                        size={30}
+                    />
+                </div>
             </nav>
         </div>
     );
diff --git a/src/components/navigation.module.scss b/src/components/navigation.module.scss
index 2a98fd4..bf36288 100644
--- a/src/components/navigation.module.scss
+++ b/src/components/navigation.module.scss
@@ -13,7 +13,7 @@
     color: white;
     overflow: auto;
     opacity: 0;
-    transition: opacity .25s, left .25s;
+    transition: opacity 0.25s, left 0.25s;
     pointer-events: none;
     overscroll-behavior: contain;
 
@@ -23,7 +23,7 @@
         pointer-events: auto;
     }
 
-    @media(prefers-color-scheme: light) {
+    @media (prefers-color-scheme: light) {
         background-color: rgba($lightBackground, 0.9);
         color: black;
     }
@@ -61,7 +61,7 @@
                 border-left: 3px solid white;
                 border-right: 3px solid white;
 
-                @media(prefers-color-scheme: light) {
+                @media (prefers-color-scheme: light) {
                     border-left: 3px solid black;
                     border-right: 3px solid black;
                 }
@@ -113,7 +113,7 @@
             display: none;
             height: 43px;
 
-            @media(max-width: 500px) {
+            @media (max-width: 500px) {
                 display: block;
             }
         }
@@ -139,7 +139,7 @@
                 }
             }
 
-            @media(max-width: 500px) {
+            @media (max-width: 500px) {
                 &:not(.logo) {
                     display: none;
                 }
diff --git a/src/components/seo.js b/src/components/seo.js
index f76cd97..bbbf22b 100644
--- a/src/components/seo.js
+++ b/src/components/seo.js
@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Helmet } from "gatsby-plugin-react-i18next";
 import { useStaticQuery, graphql } from "gatsby";
-import { useLocation } from "@reach/router"
+import { useLocation } from "@reach/router";
 import { useTranslation } from "gatsby-plugin-react-i18next";
 import useSiteMetadata from "../helpers/useSiteMetadata";
 
@@ -27,58 +27,60 @@ function SEO({ description, meta, title, speakable, image, children }) {
     const siteMeta = useSiteMetadata();
     const location = useLocation();
 
-
     return (
-        <Helmet
-            title={title}
-            titleTemplate={`%s | ${site.siteMetadata.title}`}
-        >
+        <Helmet title={title} titleTemplate={`%s | ${site.siteMetadata.title}`}>
             <meta
                 name="battery-savings"
                 content="allow-reduced-framerate"
             ></meta>
-            {
-                [
-                    {
-                        name: `description`,
-                        content: metaDescription,
-                    },
-                    {
-                        property: `og:title`,
-                        content: title,
-                    },
-                    {
-                        property: `og:description`,
-                        content: metaDescription,
-                    },
-                    {
-                        property: `og:type`,
-                        content: `website`,
-                    },
-                    {
-                        name: `twitter:card`,
-                        content: `summary`,
-                    },
-                    {
-                        name: `twitter:creator`,
-                        content: site.siteMetadata.author,
-                    },
-                    {
-                        name: `twitter:title`,
-                        content: title,
-                    },
-                    {
-                        name: `twitter:description`,
-                        content: metaDescription,
-                    },
-                    {
-                        name: "keywords",
-                        content: site.siteMetadata.keywords,
-                    },
-                ].concat(meta).map((m) => {
-                    return <meta key={m.name} name={m.name} content={m.content}></meta>;
-                })
-            }
+            {[
+                {
+                    name: `description`,
+                    content: metaDescription,
+                },
+                {
+                    property: `og:title`,
+                    content: title,
+                },
+                {
+                    property: `og:description`,
+                    content: metaDescription,
+                },
+                {
+                    property: `og:type`,
+                    content: `website`,
+                },
+                {
+                    name: `twitter:card`,
+                    content: `summary`,
+                },
+                {
+                    name: `twitter:creator`,
+                    content: site.siteMetadata.author,
+                },
+                {
+                    name: `twitter:title`,
+                    content: title,
+                },
+                {
+                    name: `twitter:description`,
+                    content: metaDescription,
+                },
+                {
+                    name: "keywords",
+                    content: site.siteMetadata.keywords,
+                },
+            ]
+                .concat(meta)
+                .map((m) => {
+                    return (
+                        <meta
+                            key={m.name}
+                            name={m.name}
+                            content={m.content}
+                        ></meta>
+                    );
+                })}
             <script
                 async
                 defer
@@ -86,40 +88,45 @@ function SEO({ description, meta, title, speakable, image, children }) {
                 src="https://analytics.kevink.dev/js/plausible.js"
             ></script>
 
-            {
-                image && [
-                    <meta name="twitter:image" content={siteMeta.siteUrl + image} key="twimg"/>,
-                    <meta name="og:image" content={siteMeta.siteUrl + image} key="ogimg"/>,
-                ]
-            }
-
+            {image && [
+                <meta
+                    name="twitter:image"
+                    content={siteMeta.siteUrl + image}
+                    key="twimg"
+                />,
+                <meta
+                    name="og:image"
+                    content={siteMeta.siteUrl + image}
+                    key="ogimg"
+                />,
+            ]}
 
             <script type="application/ld+json">
                 {JSON.stringify({
                     "@context": "https://schema.org/",
                     "@type": "WebPage",
-                    "name": title,
-                    "url": siteMeta.siteUrl+location.pathname,
-                    "speakable": speakable,
-                    "image": siteMeta.siteUrl + image,
-                    "about": {
+                    name: title,
+                    url: siteMeta.siteUrl + location.pathname,
+                    speakable: speakable,
+                    image: siteMeta.siteUrl + image,
+                    about: {
                         "@type": "Person",
-                        "name": siteMeta.givenName + " " + siteMeta.familyName,
-                        "givenName": siteMeta.givenName,
-                        "familyName": siteMeta.familyName,
-                        "birthDate": siteMeta.birthDate,
-                        "address": siteMeta.address,
-                        "email": siteMeta.contactEmail,
-                        "telephone": siteMeta.contactPhone,
-                        "gender": siteMeta.gender,
-                        "height": siteMeta.height,
-                        "nationality": {
+                        name: siteMeta.givenName + " " + siteMeta.familyName,
+                        givenName: siteMeta.givenName,
+                        familyName: siteMeta.familyName,
+                        birthDate: siteMeta.birthDate,
+                        address: siteMeta.address,
+                        email: siteMeta.contactEmail,
+                        telephone: siteMeta.contactPhone,
+                        gender: siteMeta.gender,
+                        height: siteMeta.height,
+                        nationality: {
                             "@type": "Country",
-                            "name": siteMeta.nationality
+                            name: siteMeta.nationality,
                         },
-                        "image": siteMeta.siteUrl + "/owner.jpg",
-                        "sameAs": siteMeta.sameAs
-                    }
+                        image: siteMeta.siteUrl + "/owner.jpg",
+                        sameAs: siteMeta.sameAs,
+                    },
                 })}
             </script>
 
@@ -139,7 +146,7 @@ SEO.propTypes = {
     title: PropTypes.string.isRequired,
     speakable: PropTypes.any,
     image: PropTypes.string,
-    children: PropTypes.any
+    children: PropTypes.any,
 };
 
 export default SEO;
diff --git a/src/helpers/useSiteMetadata.js b/src/helpers/useSiteMetadata.js
index 11ab675..24820d2 100644
--- a/src/helpers/useSiteMetadata.js
+++ b/src/helpers/useSiteMetadata.js
@@ -1,37 +1,37 @@
-import { useStaticQuery, graphql } from 'gatsby';
+import { useStaticQuery, graphql } from "gatsby";
 
 const useSiteMetadata = () => {
-  const { site } = useStaticQuery(
-  graphql`
-    query {
-    site {
-      siteMetadata {
-        title
-        keywords
-        author
-        siteUrl
-        payPalMail
-        contactEmail
-        contactPhone
-        mapsLink
-        contactTwitter
-        contactGitHub
-        contactMastodon
-        contactMastodonHref
-        givenName
-        familyName
-        birthDate
-        address
-        gender
-        height
-        nationality
-        sameAs
-      }
-    }
-    }
-  `,
-  );
-  return site.siteMetadata;
+    const { site } = useStaticQuery(
+        graphql`
+            query {
+                site {
+                    siteMetadata {
+                        title
+                        keywords
+                        author
+                        siteUrl
+                        payPalMail
+                        contactEmail
+                        contactPhone
+                        mapsLink
+                        contactTwitter
+                        contactGitHub
+                        contactMastodon
+                        contactMastodonHref
+                        givenName
+                        familyName
+                        birthDate
+                        address
+                        gender
+                        height
+                        nationality
+                        sameAs
+                    }
+                }
+            }
+        `
+    );
+    return site.siteMetadata;
 };
 
-export default useSiteMetadata;
\ No newline at end of file
+export default useSiteMetadata;
diff --git a/src/layouts/default.js b/src/layouts/default.js
index 96bb1c6..9275714 100644
--- a/src/layouts/default.js
+++ b/src/layouts/default.js
@@ -18,7 +18,9 @@ class Layout extends React.Component {
                     title={this.props.title}
                     image={this.props.image}
                     speakable={this.props.speakable}
-                >{this.props.seoAdditional ?? null}</SEO>
+                >
+                    {this.props.seoAdditional ?? null}
+                </SEO>
                 <Navigation isHome={this.props.transparentTopbar} />
                 <div id="content" role="main">
                     {this.props.children}
@@ -61,7 +63,7 @@ Layout.propTypes = {
     children: PropTypes.any.isRequired,
     seoAdditional: PropTypes.any,
     image: PropTypes.string,
-    speakable: PropTypes.any
+    speakable: PropTypes.any,
 };
 
 export default Layout;
diff --git a/src/layouts/default.scss b/src/layouts/default.scss
index b4b3a69..678ee7c 100644
--- a/src/layouts/default.scss
+++ b/src/layouts/default.scss
@@ -2,8 +2,6 @@
 @import "~@fontsource/fira-code/700.css";
 @import "../variables";
 
-
-
 * {
     box-sizing: border-box;
 }
@@ -69,7 +67,6 @@ section > article,
 }
 
 article {
-
     a {
         color: $accentColor;
         text-decoration: underline dotted currentColor;
diff --git a/src/pages/about.js b/src/pages/about.js
index c55cc72..9664e0c 100644
--- a/src/pages/about.js
+++ b/src/pages/about.js
@@ -34,7 +34,10 @@ export const query = graphql`
                 name
                 image {
                     childImageSharp {
-                        gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
+                        gatsbyImageData(
+                            placeholder: BLURRED
+                            layout: FULL_WIDTH
+                        )
                     }
                 }
                 shortDescription
@@ -65,7 +68,7 @@ export const query = graphql`
 `;
 
 const AboutPage = (props) => {
-    const {t} = useTranslation();
+    const { t } = useTranslation();
 
     React.useEffect(() => {
         if (typeof window === "undefined") return;
@@ -99,15 +102,15 @@ const AboutPage = (props) => {
     let file = props.data.file;
 
     return (
-        <Layout title={t("about")} description={t("siteDescription")}
-        image={"/owner.jpg"}
-        speakable={{
-            "@type": "SpeakableSpecification",
-            "xPath": [
-                "article"
-            ]
-        }}>
-            
+        <Layout
+            title={t("about")}
+            description={t("siteDescription")}
+            image={"/owner.jpg"}
+            speakable={{
+                "@type": "SpeakableSpecification",
+                xPath: ["article"],
+            }}
+        >
             <section className={styles.aboutSection} id="about">
                 <article>
                     <div className={styles.aboutText}>
@@ -166,10 +169,20 @@ const AboutPage = (props) => {
                                             projectStyles.projectCardImage
                                         }
                                     >
-                                        <div className={
-                                            projectStyles.projectCardBg
-                                        }>
-                                            <GatsbyImage image={project.image.childImageSharp.gatsbyImageData} objectFit="cover" style={{height: "100%"}}></GatsbyImage>
+                                        <div
+                                            className={
+                                                projectStyles.projectCardBg
+                                            }
+                                        >
+                                            <GatsbyImage
+                                                image={
+                                                    project.image
+                                                        .childImageSharp
+                                                        .gatsbyImageData
+                                                }
+                                                objectFit="cover"
+                                                style={{ height: "100%" }}
+                                            ></GatsbyImage>
                                         </div>
                                         <div
                                             className={
@@ -193,8 +206,7 @@ const AboutPage = (props) => {
                         })}
                     </div>
                     <Link to="/projects" className={styles.seeMoreButton}>
-                        <Trans>seeMore</Trans>{" "}
-                        <ArrowRight/>
+                        <Trans>seeMore</Trans> <ArrowRight />
                     </Link>
                 </article>
             </section>
@@ -203,7 +215,7 @@ const AboutPage = (props) => {
                     <span>
                         <Trans>donationCatchphrase</Trans>
                     </span>
-                    <ArrowRight/>
+                    <ArrowRight />
                 </div>
             </Link>
         </Layout>
diff --git a/src/pages/donate.js b/src/pages/donate.js
index a56934f..6af0a73 100644
--- a/src/pages/donate.js
+++ b/src/pages/donate.js
@@ -128,7 +128,7 @@ const DonatePage = (props) => {
                         }
                     >
                         <span>Donate using PayPal</span>
-                        <ArrowRight/>
+                        <ArrowRight />
                     </a>
                 </article>
             </section>
diff --git a/src/pages/friends.js b/src/pages/friends.js
index a76a40b..903177c 100644
--- a/src/pages/friends.js
+++ b/src/pages/friends.js
@@ -17,7 +17,11 @@ export const query = graphql`
                 url
                 localImage {
                     childImageSharp {
-                    gatsbyImageData(height: 300, width: 300, placeholder: BLURRED)
+                        gatsbyImageData(
+                            height: 300
+                            width: 300
+                            placeholder: BLURRED
+                        )
                     }
                 }
             }
@@ -75,8 +79,14 @@ const FriendsPage = ({ data }) => {
                                                     "#image"
                                                 }
                                             >
-                                                <div className={styles.friendBg}>
-                                                    <GatsbyImage image={getImage(friend.localImage)}></GatsbyImage>
+                                                <div
+                                                    className={styles.friendBg}
+                                                >
+                                                    <GatsbyImage
+                                                        image={getImage(
+                                                            friend.localImage
+                                                        )}
+                                                    ></GatsbyImage>
                                                 </div>
                                                 <span
                                                     className={
@@ -88,7 +98,7 @@ const FriendsPage = ({ data }) => {
                                                         friend.name +
                                                         "#name"
                                                     }
-                                                > 
+                                                >
                                                     {friend.name}
                                                 </span>
                                                 <span
@@ -123,7 +133,7 @@ const FriendsPage = ({ data }) => {
                                                     target="_blank"
                                                     rel="noreferrer"
                                                 >
-                                                    <Globe2 height={20}/>{" "}
+                                                    <Globe2 height={20} />{" "}
                                                     {friend.url}
                                                 </a>
                                             </div>
diff --git a/src/pages/index.js b/src/pages/index.js
index e0501c8..459da83 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -10,7 +10,15 @@ import { StaticImage } from "gatsby-plugin-image";
 
 import anime from "animejs";
 
-import { ArrowRight, AtSign, Camera, Github, Mail, MapPin, Phone } from "lucide-react";
+import {
+    ArrowRight,
+    AtSign,
+    Camera,
+    Github,
+    Mail,
+    MapPin,
+    Phone,
+} from "lucide-react";
 import { useTranslation } from "react-i18next";
 
 export const query = graphql`
@@ -39,7 +47,7 @@ export const query = graphql`
 `;
 
 const IndexPage = (props) => {
-    const {t} = useTranslation();
+    const { t } = useTranslation();
 
     React.useEffect(() => {
         if (typeof window === "undefined") return;
@@ -74,14 +82,16 @@ const IndexPage = (props) => {
     let meta = props.data.site.siteMetadata;
 
     return (
-        <Layout title="Kevin Kandlbinder" transparentTopbar={true} description={t("siteDescription")}
-        image={"/owner.jpg"}
-        speakable={{
-            "@type": "SpeakableSpecification",
-            "xPath": [
-                "article"
-            ]
-        }}>
+        <Layout
+            title="Kevin Kandlbinder"
+            transparentTopbar={true}
+            description={t("siteDescription")}
+            image={"/owner.jpg"}
+            speakable={{
+                "@type": "SpeakableSpecification",
+                xPath: ["article"],
+            }}
+        >
             <section className={styles.heroSection}>
                 <div
                     className={styles.heroSectionBg}
@@ -89,10 +99,15 @@ const IndexPage = (props) => {
                 ></div>
                 <div className={styles.heroSectionBgOver}></div>
                 <div className={styles.profile + " profile"}>
-                    <div
-                        className={styles.profileImage}
-                    >
-                        <StaticImage src={"../../content/images/kevin-kandlbinder-04.jpg"} width={250} height={350} placeholder="blurred"></StaticImage>
+                    <div className={styles.profileImage}>
+                        <StaticImage
+                            src={
+                                "../../content/images/kevin-kandlbinder-04.jpg"
+                            }
+                            width={250}
+                            height={350}
+                            placeholder="blurred"
+                        ></StaticImage>
                     </div>
                     <div className={styles.profileImageDummy}></div>
                     <div className={styles.profileCard}>
@@ -122,7 +137,7 @@ const IndexPage = (props) => {
                                 href={"mailto:" + meta.contactEmail}
                                 rel="me"
                             >
-                                <Mail width={20}/>
+                                <Mail width={20} />
                                 {meta.contactEmail}
                             </a>
                             <a
@@ -140,7 +155,7 @@ const IndexPage = (props) => {
                                 rel="noreferrer me"
                                 target="_blank"
                             >
-                                <AtSign width={20}/>
+                                <AtSign width={20} />
                                 {meta.contactMastodon}
                             </a>
                             <a
@@ -151,7 +166,7 @@ const IndexPage = (props) => {
                                 rel="noreferrer me"
                                 target="_blank"
                             >
-                                <Github width={20}/>
+                                <Github width={20} />
                                 {meta.contactGitHub}
                             </a>
                         </div>
@@ -161,24 +176,30 @@ const IndexPage = (props) => {
                 <div className={styles.landingCta}>
                     <Link to={"/projects"}>
                         <div>
-                            <span className={styles.ctaAccent}>{t("explore")}</span>{" "}
+                            <span className={styles.ctaAccent}>
+                                {t("explore")}
+                            </span>{" "}
                             <span>{t("myProjects")}</span>
                         </div>
-                        <ArrowRight/>
+                        <ArrowRight />
                     </Link>
                     <Link to={"/social"}>
                         <div>
-                            <span className={styles.ctaAccent}>{t("discover")}</span>{" "}
+                            <span className={styles.ctaAccent}>
+                                {t("discover")}
+                            </span>{" "}
                             <span>{t("mySocials")}</span>
                         </div>
-                        <ArrowRight/>
+                        <ArrowRight />
                     </Link>
                     <Link to={"/about"}>
                         <div>
-                            <span className={styles.ctaAccent}>{t("learn")}</span>{" "}
+                            <span className={styles.ctaAccent}>
+                                {t("learn")}
+                            </span>{" "}
                             <span>{t("moreAboutMe")}</span>
                         </div>
-                        <ArrowRight/>
+                        <ArrowRight />
                     </Link>
                 </div>
             </section>
@@ -190,10 +211,9 @@ const IndexPage = (props) => {
             >
                 <div>
                     <span>
-                        <Camera/>{" "}
-                        <Trans>homeImageCredit</Trans>
+                        <Camera /> <Trans>homeImageCredit</Trans>
                     </span>
-                    <ArrowRight/>
+                    <ArrowRight />
                 </div>
             </a>
         </Layout>
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 78db74c..a4e72ec 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -51,7 +51,6 @@
                 #0f0a3c 100%
             );
         background-blend-mode: screen, overlay, hard-light, normal;
-
     }
 
     .heroSectionBgOver {
@@ -60,10 +59,9 @@
         /*background-color: $background;
         transition: background-color 0.25s, box-shadow 0.25s;*/
 
-        @media(max-width: 950px) {
+        @media (max-width: 950px) {
             display: none;
         }
-        
 
         @media (prefers-color-scheme: light) {
             background-color: $lightBackground;
@@ -74,8 +72,8 @@
         position: relative;
         display: flex;
         justify-content: space-around;
-        
-        @media(max-width: 1000px) {
+
+        @media (max-width: 1000px) {
             flex-direction: column;
             bottom: 0;
         }
@@ -92,7 +90,7 @@
             border-radius: 10px;
             align-items: center;
 
-            @media(max-width: 1000px) {
+            @media (max-width: 1000px) {
                 margin: 10px;
                 font-size: 1.2em;
             }
@@ -315,9 +313,7 @@
                         color: #886af5;
                     }
 
-
-                    @media(prefers-color-scheme: light) {
-
+                    @media (prefers-color-scheme: light) {
                         &.skill_os {
                             color: #2b66e5;
                         }
@@ -329,15 +325,14 @@
                         &.skill_framework {
                             color: #db1e31;
                         }
-    
+
                         &.skill_platform {
                             color: #aa4f12;
                         }
-    
+
                         &.skill_program {
                             color: #17681b;
                         }
-
                     }
                 }
             }
diff --git a/src/pages/projects.js b/src/pages/projects.js
index 2a72a5f..84e1bfe 100644
--- a/src/pages/projects.js
+++ b/src/pages/projects.js
@@ -20,7 +20,10 @@ export const query = graphql`
                 name
                 image {
                     childImageSharp {
-                        gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
+                        gatsbyImageData(
+                            placeholder: BLURRED
+                            layout: FULL_WIDTH
+                        )
                     }
                     publicURL
                 }
@@ -43,27 +46,33 @@ const ProjectsPage = ({ data }) => {
     const { t } = useI18next();
     const meta = useSiteMetadata();
     return (
-        <Layout title={t("projects")} description={t("projectsDescription")} seoAdditional={
-            
-            <script type="application/ld+json">
-                {JSON.stringify(
-                    {
-                        "@context":"https://schema.org",
-                        "@type":"ItemList",
-                        "itemListElement":data.allProjectsJson.nodes.map((project, i) => {
-                            return {
-                                "@type":"ListItem",
-                                "position":i,
-                                "url": meta.siteUrl+"/projects/"+project.urlname,
-                                "image": project.image.publicURL,
-                                "name": project.name,
-                                "description": project.shortDescription
+        <Layout
+            title={t("projects")}
+            description={t("projectsDescription")}
+            seoAdditional={
+                <script type="application/ld+json">
+                    {JSON.stringify({
+                        "@context": "https://schema.org",
+                        "@type": "ItemList",
+                        itemListElement: data.allProjectsJson.nodes.map(
+                            (project, i) => {
+                                return {
+                                    "@type": "ListItem",
+                                    position: i,
+                                    url:
+                                        meta.siteUrl +
+                                        "/projects/" +
+                                        project.urlname,
+                                    image: project.image.publicURL,
+                                    name: project.name,
+                                    description: project.shortDescription,
+                                };
                             }
-                        })
-                    }
-                )}
-            </script>
-        }>
+                        ),
+                    })}
+                </script>
+            }
+        >
             <section>
                 <article>
                     <h1>
@@ -82,13 +91,17 @@ const ProjectsPage = ({ data }) => {
                                     key={project.lang + project.urlname}
                                     to={"/projects/" + project.urlname}
                                 >
-                                    <div
-                                        className={styles.projectCardImage}
-                                    >
-                                        <div className={
-                                            styles.projectCardBg
-                                        }>
-                                            <GatsbyImage image={project.image.childImageSharp.gatsbyImageData} objectFit="cover" style={{height: "100%"}}></GatsbyImage>
+                                    <div className={styles.projectCardImage}>
+                                        <div className={styles.projectCardBg}>
+                                            <GatsbyImage
+                                                image={
+                                                    project.image
+                                                        .childImageSharp
+                                                        .gatsbyImageData
+                                                }
+                                                objectFit="cover"
+                                                style={{ height: "100%" }}
+                                            ></GatsbyImage>
                                         </div>
                                         <div className={styles.projectCardMeta}>
                                             <span
diff --git a/src/pages/social.js b/src/pages/social.js
index 85fcf3c..5a98804 100644
--- a/src/pages/social.js
+++ b/src/pages/social.js
@@ -16,7 +16,7 @@ export const query = graphql`
                 url
                 localImage {
                     childImageSharp {
-                    gatsbyImageData(height: 300, width: 300)
+                        gatsbyImageData(height: 300, width: 300)
                     }
                 }
             }
@@ -59,11 +59,13 @@ const SocialPage = ({ data }) => {
                                     rel="noreferrer me"
                                     key={social.url}
                                 >
-                                    <div
-                                        className={styles.socialImage}
-                                    >
+                                    <div className={styles.socialImage}>
                                         <div className={styles.socialBg}>
-                                            <GatsbyImage image={getImage(social.localImage)}></GatsbyImage>
+                                            <GatsbyImage
+                                                image={getImage(
+                                                    social.localImage
+                                                )}
+                                            ></GatsbyImage>
                                         </div>
                                         <span className={styles.socialName}>
                                             {social.platformName}
diff --git a/src/templates/project.js b/src/templates/project.js
index a56e90d..dd862d5 100644
--- a/src/templates/project.js
+++ b/src/templates/project.js
@@ -24,7 +24,10 @@ export const query = graphql`
                 }
                 image {
                     childImageSharp {
-                        gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
+                        gatsbyImageData(
+                            placeholder: BLURRED
+                            layout: FULL_WIDTH
+                        )
                     }
                     publicURL
                 }
@@ -69,10 +72,14 @@ const ProjectTemplate = ({ data }) => {
         >
             <section className={styles.projectHeader}>
                 <div style={{ paddingTop: 0 }}>
-                    <div
-                        className={styles.headerBackground}
-                    >
-                       <GatsbyImage image={project.image.childImageSharp.gatsbyImageData} style={{width: "100%", height: "100%"}} objectFit="cover"></GatsbyImage> 
+                    <div className={styles.headerBackground}>
+                        <GatsbyImage
+                            image={
+                                project.image.childImageSharp.gatsbyImageData
+                            }
+                            style={{ width: "100%", height: "100%" }}
+                            objectFit="cover"
+                        ></GatsbyImage>
                     </div>
                     <header>
                         <div className={styles.headerInner}>
@@ -103,7 +110,7 @@ const ProjectTemplate = ({ data }) => {
                                     target="_blank"
                                     rel="noreferrer"
                                 >
-                                    <Github height={15}/>{" "}
+                                    <Github height={15} />{" "}
                                     <Trans>projectViewGitHub</Trans>
                                 </a>
                             ) : null}
@@ -113,7 +120,7 @@ const ProjectTemplate = ({ data }) => {
                                     target="_blank"
                                     rel="noreferrer"
                                 >
-                                    <ExternalLink height={15}/>{" "}
+                                    <ExternalLink height={15} />{" "}
                                     <Trans>projectViewWebsite</Trans>
                                 </a>
                             ) : null}