Configure & Run prettier

.devcontainer/devcontainer.json

@@ -28,9 +28,7 @@
         "EditorConfig.EditorConfig"
     ],
     // Use 'forwardPorts' to make a list of ports inside the container available locally.
-    "forwardPorts": [
+    "forwardPorts": [8000],
-        8000
-    ],
     // Use 'postCreateCommand' to run commands after the container is created.
     "postCreateCommand": "npm install",
     // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.

.eslintrc

@@ -3,10 +3,7 @@
     "rules": {
         "strict": 0
     },
-  "extends": [
+    "extends": ["eslint:recommended", "plugin:react/recommended"],
-    "eslint:recommended",
-    "plugin:react/recommended"
-  ],
     "settings": {
         "react": {
             "version": "detect"

.github/workflows/build.yaml

@@ -15,7 +15,7 @@ jobs:
             - name: Use Node.js
               uses: actions/setup-node@v2
               with:
-        node-version: '12.x'
+                  node-version: "12.x"
 
             - run: npm install
               name: Install Dependencies

.prettierignore

@@ -0,0 +1,4 @@
+/.cache
+/.vscode
+/node_modules
+/public

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": false,
+    "jsxBracketSameLine": true,
+    "endOfLine": "lf"
+}

gatsby-config.js

@@ -71,7 +71,13 @@ module.exports = {
         {
             resolve: `gatsby-plugin-offline`,
             options: {
-        precachePages: ["/", "/en", "/en/projects", "/de", "/de/projects"],
+                precachePages: [
+                    "/",
+                    "/en",
+                    "/en/projects",
+                    "/de",
+                    "/de/projects",
+                ],
                 workboxConfig: {
                     globPatterns: ["**/*"],
                 },

gatsby-node.js

@@ -25,7 +25,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}`);
+        console.log(
+            "Creating Page: ",
+            `/${node.lang}/projects/${node.urlname}`
+        );
 
         if (node.lang !== "ignoreme")
             createPage({
@@ -56,7 +59,8 @@ exports.onPostBuild = async ({ graphql, reporter }) => {
                 projects: [
                     {
                         name: "Projects Overview",
-            description: "Returns overview of all available projects",
+                        description:
+                            "Returns overview of all available projects",
                         path: "/api/projects.json",
                     },
                     {
@@ -67,7 +71,8 @@ exports.onPostBuild = async ({ graphql, reporter }) => {
                     },
                     {
                         name: "Get specific Project",
-            description: "Returns specific project in specified language",
+                        description:
+                            "Returns specific project in specified language",
                         path: "/api/projects/:lang/:slug.json",
                     },
                 ],

package.json

@@ -11,9 +11,7 @@
         "develop": "gatsby develop",
         "start": "gatsby develop",
         "build": "gatsby build --prefix-paths",
-        "build:fab": "npm run build && npm run fab:build",
+        "prettier": "npx prettier --write .",
-        "fab:build": "fab build",
-        "fab:serve": "fab serve fab.zip",
         "serve": "gatsby serve",
         "clean": "gatsby clean"
     },
@@ -63,6 +61,7 @@
         "eslint-loader": "4.0.2",
         "eslint-plugin-import": "2.23.4",
         "eslint-plugin-react": "7.24.0",
-        "gatsby-plugin-eslint": "2.0.8"
+        "gatsby-plugin-eslint": "2.0.8",
+        "prettier": "2.3.2"
     }
 }

src/components/navigation.js

@@ -49,8 +49,7 @@ const Navigation = ({ isHome }) => {
                 styles.topBar +
                 (isHome ? " " + styles.homeBar : "") +
                 (atTop ? " " + styles.homeBarTransparent : "")
-      }
+            }>
-    >
             <nav className={styles.topBarInner}>
                 <StaticQuery
                     query={graphql`
@@ -72,11 +71,13 @@ const Navigation = ({ isHome }) => {
                 <Link
                     id="navBtnProjects"
                     to="/projects"
-          activeClassName={styles.active}
+                    activeClassName={styles.active}>
-        >
                     <Trans>projects</Trans>
                 </Link>
-        <Link id="navBtnSocial" to="/social" activeClassName={styles.active}>
+                <Link
+                    id="navBtnSocial"
+                    to="/social"
+                    activeClassName={styles.active}>
                     <Trans>social</Trans>
                 </Link>
             </nav>

src/components/seo.js

@@ -63,18 +63,18 @@ function SEO({ description, meta, title }) {
                     name: "keywords",
                     content: site.siteMetadata.keywords,
                 },
-      ].concat(meta)}
+            ].concat(meta)}>
-    >
             <script
                 src="https://kit.fontawesome.com/1377f925e0.js"
-        crossOrigin="anonymous"
+                crossOrigin="anonymous"></script>
-      ></script>
             <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"
             />
-      <meta name="battery-savings" content="allow-reduced-framerate"></meta>
+            <meta
+                name="battery-savings"
+                content="allow-reduced-framerate"></meta>
         </Helmet>
     );
 }

src/pages/404.js

@@ -9,8 +9,8 @@ const NotFoundPage = () => {
                 <article>
                     <h1>Page not found</h1>
                     <p>
-            Whoops... That page doesn&apos;t exist, so you may as well{" "}
+                        Whoops... That page doesn&apos;t exist, so you may as
-            <Link to="/">go home</Link>.
+                        well <Link to="/">go home</Link>.
                     </p>
                 </article>
             </section>

src/pages/donate.js

@@ -62,13 +62,13 @@ const DonatePage = (props) => {
                     <p style={{ display: "block", textAlign: "center" }}>
                         <GitHubButton
                             href={
-                "https://github.com/sponsors/" + site.siteMetadata.contactGitHub
+                                "https://github.com/sponsors/" +
+                                site.siteMetadata.contactGitHub
                             }
                             data-color-scheme="no-preference: light; light: dark; dark: dark;"
                             data-icon="octicon-heart"
                             data-size="large"
-              aria-label="Sponsor @Unkn0wnCat on GitHub"
+                            aria-label="Sponsor @Unkn0wnCat on GitHub">
-            >
                             <Trans>sponsorGitHub</Trans>
                         </GitHubButton>
                     </p>
@@ -107,20 +107,27 @@ const DonatePage = (props) => {
                             encodeURIComponent(site.siteMetadata.title) +
                             "&currency_code=EUR&image_url=" +
                             encodeURIComponent(
-                site.siteMetadata.siteUrl + file.childImageSharp.resize.src
+                                site.siteMetadata.siteUrl +
+                                    file.childImageSharp.resize.src
                             ) +
                             "&return=" +
                             encodeURIComponent(
-                site.siteMetadata.siteUrl + "/" + path + "thank-you/"
+                                site.siteMetadata.siteUrl +
+                                    "/" +
+                                    path +
+                                    "thank-you/"
                             ) +
                             "&rm=0&cancel_return=" +
-              encodeURIComponent(site.siteMetadata.siteUrl + "/" + path) +
+                            encodeURIComponent(
+                                site.siteMetadata.siteUrl + "/" + path
+                            ) +
                             "&amount=" +
                             amount
-            }
+                        }>
-          >
                         <span>Donate using PayPal</span>
-            <i className="fas fa-fw fa-chevron-right" aria-hidden="true"></i>
+                        <i
+                            className="fas fa-fw fa-chevron-right"
+                            aria-hidden="true"></i>
                     </a>
                 </article>
             </section>

src/pages/donate/thank-you.js

@@ -37,9 +37,13 @@ const ThankYouPage = (props) => {
                     </h1>
 
                     <p>
-            <Trans contactEmail={contactEmail} i18nKey="donateThanksText">
+                        <Trans
+                            contactEmail={contactEmail}
+                            i18nKey="donateThanksText">
                             donateThanksText
-              <a href={"mailto:" + contactEmail}>{{ contactEmail }}</a>
+                            <a href={"mailto:" + contactEmail}>
+                                {{ contactEmail }}
+                            </a>
                         </Trans>
                     </p>
                 </article>

src/pages/friends.js

@@ -52,37 +52,80 @@ const FriendsPage = ({ data }) => {
                     </p>
 
                     <div className={styles.friendsList}>
-            {/*shuffle(*/data.allFriendsJson.nodes/*)*/.map((friend) => {
+                        {
+                            /*shuffle(*/ data.allFriendsJson.nodes /*)*/
+                                .map((friend) => {
                                     return (
                                         <div
                                             className={styles.friendProfile}
-                  key={friend.url + "#" + friend.name}
+                                            key={
-                >
+                                                friend.url + "#" + friend.name
+                                            }>
                                             <div
                                                 className={styles.friendImage}
-                    style={{ backgroundImage: "url(" + friend.imageURL + ")" }}
+                                                style={{
-                    key={friend.url + "#" + friend.name + "#image"}
+                                                    backgroundImage:
-                  >
+                                                        "url(" +
-                    <span className={styles.friendName} key={friend.url + "#" + friend.name + "#name"}>{friend.name}</span>
+                                                        friend.imageURL +
-                    <span className={styles.friendTitle} key={friend.url + "#" + friend.name + "#profession"}>
+                                                        ")",
+                                                }}
+                                                key={
+                                                    friend.url +
+                                                    "#" +
+                                                    friend.name +
+                                                    "#image"
+                                                }>
+                                                <span
+                                                    className={
+                                                        styles.friendName
+                                                    }
+                                                    key={
+                                                        friend.url +
+                                                        "#" +
+                                                        friend.name +
+                                                        "#name"
+                                                    }>
+                                                    {friend.name}
+                                                </span>
+                                                <span
+                                                    className={
+                                                        styles.friendTitle
+                                                    }
+                                                    key={
+                                                        friend.url +
+                                                        "#" +
+                                                        friend.name +
+                                                        "#profession"
+                                                    }>
                                                     {friend.profession}
                                                 </span>
                                             </div>
 
-                  <div className={styles.contactLinks} key={friend.url + "#" + friend.name + "#links"}>
+                                            <div
+                                                className={styles.contactLinks}
+                                                key={
+                                                    friend.url +
+                                                    "#" +
+                                                    friend.name +
+                                                    "#links"
+                                                }>
                                                 <a
-                      className={styles.contactLink}
+                                                    className={
+                                                        styles.contactLink
+                                                    }
                                                     href={friend.url}
                                                     target="_blank"
-                      rel="noreferrer"
+                                                    rel="noreferrer">
-                    >
+                                                    <i
-                      <i className="fas fa-globe-europe" aria-hidden="true"></i>{" "}
+                                                        className="fas fa-globe-europe"
+                                                        aria-hidden="true"></i>{" "}
                                                     {friend.url}
                                                 </a>
                                             </div>
                                         </div>
                                     );
-            })}
+                                })
+                        }
                     </div>
                 </article>
             </section>

src/pages/index.js

@@ -12,7 +12,6 @@ import { MDXRenderer } from "gatsby-plugin-mdx";
 import anime from "animejs";
 import { tsParticles } from "tsparticles";
 
-
 import * as particleConfig from "./index.particles.json";
 
 export const query = graphql`
@@ -57,7 +56,9 @@ export const query = graphql`
             }
         }
         file(
-      sourceInstanceName: {eq: "textblocks"}, relativeDirectory: {eq: "home/about"}, name: {eq: $language}
+            sourceInstanceName: { eq: "textblocks" }
+            relativeDirectory: { eq: "home/about" }
+            name: { eq: $language }
         ) {
             id
             childMdx {
@@ -107,7 +108,9 @@ const IndexPage = (props) => {
     return (
         <Layout title="Kevin Kandlbinder" transparentTopbar={true}>
             <section className={styles.heroSection}>
-        <div className={styles.heroSectionBg} id="particle-container"></div>
+                <div
+                    className={styles.heroSectionBg}
+                    id="particle-container"></div>
                 <div className={styles.heroSectionBgOver}></div>
                 <div className={styles.profile + " profile"}>
                     <div
@@ -116,8 +119,7 @@ const IndexPage = (props) => {
                             backgroundImage:
                                 "url(https://cdn.kevink.dev/images/kevin/kevin-kandlbinder-03.jpg)",
                         }}
-            className={styles.profileImage + " lazy"}
+                        className={styles.profileImage + " lazy"}></div>
-          ></div>
                     <div className={styles.profileImageDummy}></div>
                     <div className={styles.profileCard}>
                         <span className={styles.hello}>
@@ -136,16 +138,14 @@ const IndexPage = (props) => {
                             <a
                                 className={styles.contactLink}
                                 href={"tel:" + meta.contactPhone}
-                rel="me"
+                                rel="me">
-              >
                                 <i className="fas fa-fw fa-phone"></i>
                                 {meta.contactPhone}
                             </a>
                             <a
                                 className={styles.contactLink}
                                 href={"mailto:" + meta.contactEmail}
-                rel="me"
+                                rel="me">
-              >
                                 <i className="far fa-fw fa-envelope"></i>
                                 {meta.contactEmail}
                             </a>
@@ -153,8 +153,7 @@ const IndexPage = (props) => {
                                 className={styles.contactLink}
                                 href={meta.mapsLink}
                                 rel="noreferrer "
-                target="_blank"
+                                target="_blank">
-              >
                                 <i className="fas fa-fw fa-map-marker-alt"></i>
                                 <Trans>homeMyLocation</Trans>
                             </a>
@@ -162,17 +161,17 @@ const IndexPage = (props) => {
                                 className={styles.contactLink}
                                 href={meta.contactMastodonHref}
                                 rel="noreferrer me"
-                target="_blank"
+                                target="_blank">
-              >
                                 <i className="fab fa-fw fa-mastodon"></i>
                                 {meta.contactMastodon}
                             </a>
                             <a
                                 className={styles.contactLink}
-                href={"https://github.com/" + meta.contactGitHub}
+                                href={
+                                    "https://github.com/" + meta.contactGitHub
+                                }
                                 rel="noreferrer me"
-                target="_blank"
+                                target="_blank">
-              >
                                 <i className="fab fa-fw fa-github"></i>
                                 {meta.contactGitHub}
                             </a>
@@ -189,8 +188,7 @@ const IndexPage = (props) => {
                 className={styles.creditSection}
                 href="https://unsplash.com/@jannikkiel"
                 target="_blank"
-        rel="noreferrer"
+                rel="noreferrer">
-      >
                 <div>
                     <span>
                         <i className="fas fa-fw fa-camera"></i>{" "}
@@ -210,20 +208,31 @@ const IndexPage = (props) => {
                                 <Link
                                     className={projectStyles.projectCard}
                                     key={project.lang + "/" + project.urlname}
-                  to={"/projects/" + project.urlname}
+                                    to={"/projects/" + project.urlname}>
-                >
                                     <div
-                    className={projectStyles.projectCardImage}
+                                        className={
+                                            projectStyles.projectCardImage
+                                        }
                                         style={{
                                             backgroundImage:
-                        "url(" + project.image.childImageSharp.resize.src + ")",
+                                                "url(" +
-                    }}
+                                                project.image.childImageSharp
-                  >
+                                                    .resize.src +
-                    <div className={projectStyles.projectCardMeta}>
+                                                ")",
-                      <span className={projectStyles.projectCardTitle}>
+                                        }}>
+                                        <div
+                                            className={
+                                                projectStyles.projectCardMeta
+                                            }>
+                                            <span
+                                                className={
+                                                    projectStyles.projectCardTitle
+                                                }>
                                                 {project.name}
                                             </span>
-                      <span>{project.shortDescription}</span>
+                                            <span>
+                                                {project.shortDescription}
+                                            </span>
                                         </div>
                                     </div>
                                 </Link>

src/pages/index.module.scss

@@ -6,7 +6,8 @@
     height: 600px;
     overflow: hidden;
 
-    .heroSectionBg, .heroSectionBgOver {
+    .heroSectionBg,
+    .heroSectionBgOver {
         position: absolute;
         width: 100%;
         max-width: unset;
@@ -22,7 +23,20 @@
         /*background: radial-gradient(ellipse at top left, #1f0ba659, transparent),
             radial-gradient(ellipse at bottom right, #4a086829, transparent);*/
 
-        background: linear-gradient(45deg, #000850 0%, #000320 100%), radial-gradient(100% 225% at 100% 0%, #FF6928 0%, #000000 100%), linear-gradient(225deg, #FF7A00 0%, #000000 100%), linear-gradient(135deg, #CDFFEB 10%, #CDFFEB 35%, #009F9D 35%, #009F9D 60%, #07456F 60%, #07456F 67%, #0F0A3C 67%, #0F0A3C 100%);
+        background: linear-gradient(45deg, #000850 0%, #000320 100%),
+            radial-gradient(100% 225% at 100% 0%, #ff6928 0%, #000000 100%),
+            linear-gradient(225deg, #ff7a00 0%, #000000 100%),
+            linear-gradient(
+                135deg,
+                #cdffeb 10%,
+                #cdffeb 35%,
+                #009f9d 35%,
+                #009f9d 60%,
+                #07456f 60%,
+                #07456f 67%,
+                #0f0a3c 67%,
+                #0f0a3c 100%
+            );
         background-blend-mode: screen, overlay, hard-light, normal;
     }
 

src/pages/legal/about.js

@@ -46,7 +46,10 @@ export default function ImprintPage() {
                         <strong>Kontakt:</strong> <br />
                         Telefon: +49 4106 8068004
                         <br />
-            E-Mail: <a href="mailto:contact@kevink.dev">contact@kevink.dev</a>
+                        E-Mail:{" "}
+                        <a href="mailto:contact@kevink.dev">
+                            contact@kevink.dev
+                        </a>
                         <br />
                     </p>
                 </article>

src/pages/legal/disclaimer.js

@@ -30,62 +30,69 @@ export default function DisclaimerPage() {
                     <h2>Haftung für Inhalte</h2>
 
                     <p>
-            Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte
+                        Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für
-            auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach
+                        eigene Inhalte auf diesen Seiten nach den allgemeinen
-            §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht
+                        Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir
-            verpflichtet, übermittelte oder gespeicherte fremde Informationen zu
+                        als Diensteanbieter jedoch nicht verpflichtet,
+                        übermittelte oder gespeicherte fremde Informationen zu
                         überwachen oder nach Umständen zu forschen, die auf eine
                         rechtswidrige Tätigkeit hinweisen.
                     </p>
 
                     <p>
-            Verpflichtungen zur Entfernung oder Sperrung der Nutzung von
+                        Verpflichtungen zur Entfernung oder Sperrung der Nutzung
-            Informationen nach den allgemeinen Gesetzen bleiben hiervon
+                        von Informationen nach den allgemeinen Gesetzen bleiben
-            unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem
+                        hiervon unberührt. Eine diesbezügliche Haftung ist
-            Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei
+                        jedoch erst ab dem Zeitpunkt der Kenntnis einer
-            Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese
+                        konkreten Rechtsverletzung möglich. Bei Bekanntwerden
+                        von entsprechenden Rechtsverletzungen werden wir diese
                         Inhalte umgehend entfernen.
                     </p>
 
                     <h2>Haftung für Links</h2>
 
                     <p>
-            Unser Angebot enthält Links zu externen Websites Dritter, auf deren
+                        Unser Angebot enthält Links zu externen Websites
-            Inhalte wir keinen Einfluss haben. Deshalb können wir für diese
+                        Dritter, auf deren Inhalte wir keinen Einfluss haben.
-            fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der
+                        Deshalb können wir für diese fremden Inhalte auch keine
-            verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber
+                        Gewähr übernehmen. Für die Inhalte der verlinkten Seiten
-            der Seiten verantwortlich. Die verlinkten Seiten wurden zum
+                        ist stets der jeweilige Anbieter oder Betreiber der
-            Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft.
+                        Seiten verantwortlich. Die verlinkten Seiten wurden zum
-            Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht
+                        Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße
-            erkennbar.
+                        überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der
+                        Verlinkung nicht erkennbar.
                     </p>
 
                     <p>
-            Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist
+                        Eine permanente inhaltliche Kontrolle der verlinkten
-            jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht
+                        Seiten ist jedoch ohne konkrete Anhaltspunkte einer
-            zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir
+                        Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von
-            derartige Links umgehend entfernen.
+                        Rechtsverletzungen werden wir derartige Links umgehend
+                        entfernen.
                     </p>
 
                     <h2>Urheberrecht</h2>
 
                     <p>
-            Die durch die Seitenbetreiber erstellten Inhalte und Werke auf
+                        Die durch die Seitenbetreiber erstellten Inhalte und
-            diesen Seiten unterliegen dem deutschen Urheberrecht. Die
+                        Werke auf diesen Seiten unterliegen dem deutschen
-            Vervielfältigung, Bearbeitung, Verbreitung und jede Art der
+                        Urheberrecht. Die Vervielfältigung, Bearbeitung,
-            Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der
+                        Verbreitung und jede Art der Verwertung außerhalb der
-            schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers.
+                        Grenzen des Urheberrechtes bedürfen der schriftlichen
-            Downloads und Kopien dieser Seite sind nur für den privaten, nicht
+                        Zustimmung des jeweiligen Autors bzw. Erstellers.
-            kommerziellen Gebrauch gestattet.
+                        Downloads und Kopien dieser Seite sind nur für den
+                        privaten, nicht kommerziellen Gebrauch gestattet.
                     </p>
 
                     <p>
-            Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt
+                        Soweit die Inhalte auf dieser Seite nicht vom Betreiber
-            wurden, werden die Urheberrechte Dritter beachtet. Insbesondere
+                        erstellt wurden, werden die Urheberrechte Dritter
-            werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie
+                        beachtet. Insbesondere werden Inhalte Dritter als solche
-            trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten
+                        gekennzeichnet. Sollten Sie trotzdem auf eine
-            wir um einen entsprechenden Hinweis. Bei Bekanntwerden von
+                        Urheberrechtsverletzung aufmerksam werden, bitten wir um
-            Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.
+                        einen entsprechenden Hinweis. Bei Bekanntwerden von
+                        Rechtsverletzungen werden wir derartige Inhalte umgehend
+                        entfernen.
                     </p>
                 </article>
             </section>

src/pages/projects.js

@@ -55,20 +55,26 @@ const ProjectsPage = ({ data }) => {
                                 <Link
                                     className={styles.projectCard}
                                     key={project.lang + project.urlname}
-                  to={"/projects/" + project.urlname}
+                                    to={"/projects/" + project.urlname}>
-                >
                                     <div
                                         className={styles.projectCardImage}
                                         style={{
                                             backgroundImage:
-                        "url(" + project.image.childImageSharp.resize.src + ")",
+                                                "url(" +
-                    }}
+                                                project.image.childImageSharp
-                  >
+                                                    .resize.src +
+                                                ")",
+                                        }}>
                                         <div className={styles.projectCardMeta}>
-                      <span className={styles.projectCardTitle}>
+                                            <span
+                                                className={
+                                                    styles.projectCardTitle
+                                                }>
                                                 {project.name}
                                             </span>
-                      <span>{project.shortDescription}</span>
+                                            <span>
+                                                {project.shortDescription}
+                                            </span>
                                         </div>
                                     </div>
                                 </Link>

src/pages/social.js

@@ -52,12 +52,13 @@ const SocialPage = ({ data }) => {
                                     href={social.url}
                                     target="_blank"
                                     rel="noreferrer me"
-                  key={social.url}
+                                    key={social.url}>
-                >
                                     <div
                                         className={styles.socialImage}
-                    style={{ backgroundImage: "url(" + social.image + ")" }}
+                                        style={{
-                  >
+                                            backgroundImage:
+                                                "url(" + social.image + ")",
+                                        }}>
                                         <span className={styles.socialName}>
                                             {social.platformName}
                                         </span>

src/templates/project.js

@@ -36,7 +36,9 @@ export const query = graphql`
             }
         }
         file(
-      sourceInstanceName: {eq: "projectTextblocks"}, relativeDirectory: {eq: $urlname}, name: {eq: $language}
+            sourceInstanceName: { eq: "projectTextblocks" }
+            relativeDirectory: { eq: $urlname }
+            name: { eq: $language }
         ) {
             id
             childMdx {
@@ -57,14 +59,15 @@ const ProjectTemplate = ({ data }) => {
         <Layout
             description={project.shortDescription}
             title={t("project") + ": " + projectName}
-      transparentTopbar={true}
+            transparentTopbar={true}>
-    >
             <section className={styles.projectHeader}>
                 <div style={{ paddingTop: 0 }}>
                     <div
                         className={styles.headerBackground}
-            style={{ backgroundImage: "url(" + project.image.publicURL + ")" }}
+                        style={{
-          ></div>
+                            backgroundImage:
+                                "url(" + project.image.publicURL + ")",
+                        }}></div>
                     <header>
                         <div className={styles.headerInner}>
                             <h1>
@@ -89,8 +92,13 @@ const ProjectTemplate = ({ data }) => {
                         <h1>Links</h1>
                         <div className={styles.linkList}>
                             {project.links.github !== null ? (
-                <a href={project.links.github} target="_blank" rel="noreferrer">
+                                <a
-                  <i className="fab fa-github" aria-hidden="true"></i>{" "}
+                                    href={project.links.github}
+                                    target="_blank"
+                                    rel="noreferrer">
+                                    <i
+                                        className="fab fa-github"
+                                        aria-hidden="true"></i>{" "}
                                     <Trans>projectViewGitHub</Trans>
                                 </a>
                             ) : null}
@@ -98,12 +106,10 @@ const ProjectTemplate = ({ data }) => {
                                 <a
                                     href={project.links.website}
                                     target="_blank"
-                  rel="noreferrer"
+                                    rel="noreferrer">
-                >
                                     <i
                                         className="fas fa-external-link-alt"
-                    aria-hidden="true"
+                                        aria-hidden="true"></i>{" "}
-                  ></i>{" "}
                                     <Trans>projectViewWebsite</Trans>
                                 </a>
                             ) : null}