diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..2a745da
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "i18n-ally.localesPaths": "locales"
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 06879f7..8e10284 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12511,9 +12511,9 @@
       }
     },
     "gatsby-plugin-sass": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/gatsby-plugin-sass/-/gatsby-plugin-sass-4.0.1.tgz",
-      "integrity": "sha512-QZiak/7eL58QUZy+y5zTlTWk+qiE/xtXa/eS+CvHP09hbxtGeVn2Ea3XQ9upHxM2TjKaWQJ00EjnKnoVKoxzVQ==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-sass/-/gatsby-plugin-sass-4.0.0.tgz",
+      "integrity": "sha512-q2FIQFFU7FMgX8jMGUCsBMUcmdNdVertE1HnViiriB1x5FagUJUUJe9Z6Irq14h0LfSL2Z1Lg8iQzgxSX30djw==",
       "requires": {
         "@babel/runtime": "^7.12.5",
         "resolve-url-loader": "^3.1.2",
diff --git a/package.json b/package.json
index c33d36e..d5df975 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "gatsby-plugin-react-helmet": "4.0.0",
     "gatsby-plugin-react-i18next": "1.0.4",
     "gatsby-plugin-robots-txt": "1.5.5",
-    "gatsby-plugin-sass": "4.0.1",
+    "gatsby-plugin-sass": "^4.0.0",
     "gatsby-plugin-sharp": "3.0.0",
     "gatsby-plugin-sitemap": "3.0.0",
     "gatsby-source-filesystem": "3.0.0",
diff --git a/src/pages/donate.js b/src/pages/donate.js
index 40e2d63..ed2c710 100644
--- a/src/pages/donate.js
+++ b/src/pages/donate.js
@@ -1,69 +1,69 @@
-import React, { useState } from "react"
-import Layout from "../layouts/default";
-import { graphql } from "gatsby";
-import { Trans, useI18next, I18nextContext } from "gatsby-plugin-react-i18next"
-import PropTypes from "prop-types"
-
-import styles from "./donate.module.scss";
-
-export const query = graphql`
-query ($language: String!) {
-  site {
-    siteMetadata {
-      title
-      siteUrl
-      payPalMail
-    }
-  }
-  file(relativePath: {eq: "images/pplogo.png"}) {
-      childImageSharp {
-          resize(width: 240, height: 240, fit: CONTAIN) {
-              src
-          }
-      }
-  }
-  locales: allLocale(filter: {language: {eq: $language}}) {
-    edges {
-      node {
-        ns
-        data
-        language
-      }
-    }
-  }
-}
-`;
-
-function DonatePage(props) {
-  const [amount, setAmount] = useState(5);
-  const { t } = useI18next();
-  const { path } = React.useContext(I18nextContext);
-
-  const { site, file } = props.data;
-
-  return (
-    <Layout module="donate" title={t("donate")} description={t("donationCatchphrase")}>
-      <section>
-        <article>
-          <h1><Trans>donate</Trans></h1>
-
-          <p><Trans>donateDescription</Trans></p>
-
-          <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" />
-            <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>
-        </article>
-      </section>
-    </Layout>
-  );
-}
-
-DonatePage.propTypes = {
-  data: PropTypes.object.isRequired
-};
-
+import React, { useState } from "react"
+import Layout from "../layouts/default";
+import { graphql } from "gatsby";
+import { Trans, useI18next, I18nextContext } from "gatsby-plugin-react-i18next"
+import PropTypes from "prop-types"
+
+import * as styles from "./donate.module.scss";
+
+export const query = graphql`
+query ($language: String!) {
+  site {
+    siteMetadata {
+      title
+      siteUrl
+      payPalMail
+    }
+  }
+  file(relativePath: {eq: "images/pplogo.png"}) {
+      childImageSharp {
+          resize(width: 240, height: 240, fit: CONTAIN) {
+              src
+          }
+      }
+  }
+  locales: allLocale(filter: {language: {eq: $language}}) {
+    edges {
+      node {
+        ns
+        data
+        language
+      }
+    }
+  }
+}
+`;
+
+function DonatePage(props) {
+  const [amount, setAmount] = useState(5);
+  const { t } = useI18next();
+  const { path } = React.useContext(I18nextContext);
+
+  const { site, file } = props.data;
+
+  return (
+    <Layout module="donate" title={t("donate")} description={t("donationCatchphrase")}>
+      <section>
+        <article>
+          <h1><Trans>donate</Trans></h1>
+
+          <p><Trans>donateDescription</Trans></p>
+
+          <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" />
+            <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>
+        </article>
+      </section>
+    </Layout>
+  );
+}
+
+DonatePage.propTypes = {
+  data: PropTypes.object.isRequired
+};
+
 export default DonatePage;
\ No newline at end of file
diff --git a/src/pages/friends.js b/src/pages/friends.js
index 0fb1b91..d4139de 100644
--- a/src/pages/friends.js
+++ b/src/pages/friends.js
@@ -1,83 +1,83 @@
-import React from "react"
-import Layout from "../layouts/default";
-import { Trans, useI18next } from "gatsby-plugin-react-i18next"
-import { graphql } from 'gatsby'
-import PropTypes from "prop-types"
-
-import styles from "./friends.module.scss";
-
-export const query = graphql`
-query AllFriendsQuery($language: String!) {
-    allFriendsJson {
-      nodes {
-        name
-        profession
-        url
-        imageURL
-      }
-    }
-    locales: allLocale(filter: {language: {eq: $language}}) {
-      edges {
-        node {
-          ns
-          data
-          language
-        }
-      }
-    }
-  }
-  
-`
-
-const FriendsPage = ({ data }) => {
-
-    const { t } = useI18next();
-
-    function shuffle(a) {
-        for (let i = a.length - 1; i > 0; i--) {
-            const j = Math.floor(Math.random() * (i + 1));
-            [a[i], a[j]] = [a[j], a[i]];
-        }
-        return a;
-    }
-
-    return (
-        <Layout module="social" title={t("friends")} description={t("friendsDescription")}>
-            <section>
-                <article>
-                    <h1><Trans>social</Trans></h1>
-
-                    <p><Trans>friendsDescription</Trans></p>
-
-                    <div className={styles.friendsList}>
-                        {
-                            shuffle(data.allFriendsJson.nodes).map((friend) => {
-                                return (
-                                    <div className={styles.friendProfile} key={friend.url + "#" + friend.name}>
-                                        <div className={styles.friendImage} style={{ backgroundImage: "url(" + friend.imageURL + ")" }}>
-                                            <span className={styles.friendName}>{friend.name}</span>
-                                            <span className={styles.friendTitle}>{friend.profession}</span>
-                                        </div>
-
-                                        {/*<span class="friendBio"></span>*/}
-                                        <div className={styles.contactLinks}>
-                                            <a className={styles.contactLink} href={friend.url} target="_blank" rel="noreferrer"><i className="fas fa-globe-europe" aria-hidden="true"></i> {friend.url}</a>
-                                        </div>
-                                    </div>
-                                );
-                            })
-                        }
-                    </div>
-
-                    {/*<pre>{JSON.stringify(data, null, 2)}</pre>*/}
-                </article>
-            </section>
-        </Layout>
-    );
-}
-
-FriendsPage.propTypes = {
-    data: PropTypes.object.isRequired
-};
-
+import React from "react"
+import Layout from "../layouts/default";
+import { Trans, useI18next } from "gatsby-plugin-react-i18next"
+import { graphql } from 'gatsby'
+import PropTypes from "prop-types"
+
+import * as styles from "./friends.module.scss";
+
+export const query = graphql`
+query AllFriendsQuery($language: String!) {
+    allFriendsJson {
+      nodes {
+        name
+        profession
+        url
+        imageURL
+      }
+    }
+    locales: allLocale(filter: {language: {eq: $language}}) {
+      edges {
+        node {
+          ns
+          data
+          language
+        }
+      }
+    }
+  }
+  
+`
+
+const FriendsPage = ({ data }) => {
+
+    const { t } = useI18next();
+
+    function shuffle(a) {
+        for (let i = a.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [a[i], a[j]] = [a[j], a[i]];
+        }
+        return a;
+    }
+
+    return (
+        <Layout module="social" title={t("friends")} description={t("friendsDescription")}>
+            <section>
+                <article>
+                    <h1><Trans>social</Trans></h1>
+
+                    <p><Trans>friendsDescription</Trans></p>
+
+                    <div className={styles.friendsList}>
+                        {
+                            shuffle(data.allFriendsJson.nodes).map((friend) => {
+                                return (
+                                    <div className={styles.friendProfile} key={friend.url + "#" + friend.name}>
+                                        <div className={styles.friendImage} style={{ backgroundImage: "url(" + friend.imageURL + ")" }}>
+                                            <span className={styles.friendName}>{friend.name}</span>
+                                            <span className={styles.friendTitle}>{friend.profession}</span>
+                                        </div>
+
+                                        {/*<span class="friendBio"></span>*/}
+                                        <div className={styles.contactLinks}>
+                                            <a className={styles.contactLink} href={friend.url} target="_blank" rel="noreferrer"><i className="fas fa-globe-europe" aria-hidden="true"></i> {friend.url}</a>
+                                        </div>
+                                    </div>
+                                );
+                            })
+                        }
+                    </div>
+
+                    {/*<pre>{JSON.stringify(data, null, 2)}</pre>*/}
+                </article>
+            </section>
+        </Layout>
+    );
+}
+
+FriendsPage.propTypes = {
+    data: PropTypes.object.isRequired
+};
+
 export default FriendsPage;
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index 4fa4333..d7540a0 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,157 +1,157 @@
-import * as React from "react"
-import Layout from "../layouts/default"
-import PropTypes from "prop-types"
-
-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 anime from "animejs";
-
-
-export const query = graphql`
-  query GetMetaAndProjects($language: String) {
-    site {
-      siteMetadata {
-        contactEmail
-        contactPhone
-        mapsLink
-        contactTwitter
-        contactGitHub
-        contactMastodon
-        contactMastodonHref
-      }
-    }
-    allProjectsJson(filter: {lang: {eq: $language}, featured: {gte: 0}}, sort: {fields: featured, order: ASC}) {
-      nodes {
-        lang
-        urlname
-        name
-        image {
-          childImageSharp {
-            resize(width: 400, quality: 90) {
-              src
-            }
-          }
-        }
-        shortDescription
-        featured
-      }
-    }
-    locales: allLocale(filter: {language: {eq: $language}}) {
-      edges {
-        node {
-          ns
-          data
-          language
-        }
-      }
-    }
-  }
-`;
-
-class IndexPage extends React.Component {
-  componentDidMount() {
-    anime({
-      targets: ["."+styles.profileCard+" > span", "."+styles.profileCard+" a"],
-      opacity: [0, 1],
-      translateX: [100, 0],
-      duration: 250,
-      delay: anime.stagger(20),
-      easing: 'easeInOutCirc'
-    });
-    anime({
-      targets: ["."+styles.profileImageDummy],
-      translateX: [0, -3],
-      translateY: [0, 3],
-      duration: 250,
-      easing: 'easeInOutCirc'
-    });
-    anime({
-      targets: ["."+styles.profileImage],
-      translateX: [0, 4],
-      translateY: [0, -4],
-      duration: 250,
-      easing: 'easeInOutCirc'
-    });
-  }
-
-  render() {
-    let meta = this.props.data.site.siteMetadata;
-
-    return (
-      <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 className={styles.profileImageDummy}></div>
-            <div className={styles.profileCard}>
-              <span className={styles.hello}><Trans>homeHello</Trans></span>
-              <span className={styles.name}>Kevin Kandlbinder</span>
-              <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} rel="me"><i className="fas fa-fw fa-phone"></i>{meta.contactPhone}</a>
-                <a className={styles.contactLink} href={"mailto:" + meta.contactEmail} rel="me"><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={meta.contactMastodonHref} rel="noreferrer me" target="_blank"><i className="fab fa-fw fa-mastodon"></i>{meta.contactMastodon}</a>
-                <a className={styles.contactLink} href={"https://github.com/" + meta.contactGitHub} rel="noreferrer me" target="_blank"><i className="fab fa-fw fa-github"></i>{meta.contactGitHub}</a>
-              </div>
-            </div>
-          </div>
-        </section>
-        <section className="aboutSection">
-          <article>
-            <h1><Trans>homeAboutMe</Trans></h1>
-            <p><Trans>homeAboutMeHello</Trans><br /><Trans>homeAboutMeText</Trans></p>
-          </article>
-        </section>
-        <a className={styles.creditSection} href="https://unsplash.com/@jannikkiel" target="_blank" rel="noreferrer">
-          <div>
-            <span><i className="fas fa-fw fa-camera"></i> <Trans>homeImageCredit</Trans></span>
-            <i className="fas fa-fw fa-chevron-right"></i>
-          </div>
-        </a>
-        <section className="featuredSection">
-          <article>
-            <h1><Trans>featuredProjects</Trans></h1>
-            <div className={projectStyles.projectList}>
-              {this.props.data.allProjectsJson.nodes.map((project) => {
-                return (
-                  <Link className={projectStyles.projectCard} key={project.lang + "/" + project.urlname} to={"/projects/" + project.urlname}>
-                    {/*<div className="projectCardActivityIndicator activityIndicatorBlue">Live</div>*/}
-                    <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>
-                      </div>
-                    </div>
-
-                    {/*<div className={projectStyles.projectCardCTAContainer}>
-                      <div className={projectStyles.projectCardCTA}><Link to={"/projects/" + project.urlname}><Trans>projectView</Trans></Link></div>
-                    </div>*/}
-                  </Link>
-                );
-              })}
-            </div>
-            <Link to="/projects" className={styles.seeMoreButton}><Trans>seeMore</Trans> <i className="fas fa-fw fa-chevron-right"></i></Link>
-          </article>
-        </section>
-        <Link className={styles.donationSection} to="/donate">
-          <div>
-            <span><Trans>donationCatchphrase</Trans></span>
-            <i className="fas fa-fw fa-chevron-right"></i>
-          </div>
-        </Link>
-      </Layout>
-    )
-  }
-}
-
-IndexPage.propTypes = {
-  data: PropTypes.object.isRequired
-}
-
-export default IndexPage
+import * as React from "react"
+import Layout from "../layouts/default"
+import PropTypes from "prop-types"
+
+import * as styles from "./index.module.scss"
+import * as projectStyles from "./projects.module.scss"
+
+import { Trans, Link } from "gatsby-plugin-react-i18next"
+import { graphql } from "gatsby";
+
+import anime from "animejs";
+
+
+export const query = graphql`
+  query GetMetaAndProjects($language: String) {
+    site {
+      siteMetadata {
+        contactEmail
+        contactPhone
+        mapsLink
+        contactTwitter
+        contactGitHub
+        contactMastodon
+        contactMastodonHref
+      }
+    }
+    allProjectsJson(filter: {lang: {eq: $language}, featured: {gte: 0}}, sort: {fields: featured, order: ASC}) {
+      nodes {
+        lang
+        urlname
+        name
+        image {
+          childImageSharp {
+            resize(width: 400, quality: 90) {
+              src
+            }
+          }
+        }
+        shortDescription
+        featured
+      }
+    }
+    locales: allLocale(filter: {language: {eq: $language}}) {
+      edges {
+        node {
+          ns
+          data
+          language
+        }
+      }
+    }
+  }
+`;
+
+class IndexPage extends React.Component {
+  componentDidMount() {
+    anime({
+      targets: ["."+styles.profileCard+" > span", "."+styles.profileCard+" a"],
+      opacity: [0, 1],
+      translateX: [100, 0],
+      duration: 250,
+      delay: anime.stagger(20),
+      easing: 'easeInOutCirc'
+    });
+    anime({
+      targets: ["."+styles.profileImageDummy],
+      translateX: [0, -3],
+      translateY: [0, 3],
+      duration: 250,
+      easing: 'easeInOutCirc'
+    });
+    anime({
+      targets: ["."+styles.profileImage],
+      translateX: [0, 4],
+      translateY: [0, -4],
+      duration: 250,
+      easing: 'easeInOutCirc'
+    });
+  }
+
+  render() {
+    let meta = this.props.data.site.siteMetadata;
+
+    return (
+      <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 className={styles.profileImageDummy}></div>
+            <div className={styles.profileCard}>
+              <span className={styles.hello}><Trans>homeHello</Trans></span>
+              <span className={styles.name}>Kevin Kandlbinder</span>
+              <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} rel="me"><i className="fas fa-fw fa-phone"></i>{meta.contactPhone}</a>
+                <a className={styles.contactLink} href={"mailto:" + meta.contactEmail} rel="me"><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={meta.contactMastodonHref} rel="noreferrer me" target="_blank"><i className="fab fa-fw fa-mastodon"></i>{meta.contactMastodon}</a>
+                <a className={styles.contactLink} href={"https://github.com/" + meta.contactGitHub} rel="noreferrer me" target="_blank"><i className="fab fa-fw fa-github"></i>{meta.contactGitHub}</a>
+              </div>
+            </div>
+          </div>
+        </section>
+        <section className="aboutSection">
+          <article>
+            <h1><Trans>homeAboutMe</Trans></h1>
+            <p><Trans>homeAboutMeHello</Trans><br /><Trans>homeAboutMeText</Trans></p>
+          </article>
+        </section>
+        <a className={styles.creditSection} href="https://unsplash.com/@jannikkiel" target="_blank" rel="noreferrer">
+          <div>
+            <span><i className="fas fa-fw fa-camera"></i> <Trans>homeImageCredit</Trans></span>
+            <i className="fas fa-fw fa-chevron-right"></i>
+          </div>
+        </a>
+        <section className="featuredSection">
+          <article>
+            <h1><Trans>featuredProjects</Trans></h1>
+            <div className={projectStyles.projectList}>
+              {this.props.data.allProjectsJson.nodes.map((project) => {
+                return (
+                  <Link className={projectStyles.projectCard} key={project.lang + "/" + project.urlname} to={"/projects/" + project.urlname}>
+                    {/*<div className="projectCardActivityIndicator activityIndicatorBlue">Live</div>*/}
+                    <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>
+                      </div>
+                    </div>
+
+                    {/*<div className={projectStyles.projectCardCTAContainer}>
+                      <div className={projectStyles.projectCardCTA}><Link to={"/projects/" + project.urlname}><Trans>projectView</Trans></Link></div>
+                    </div>*/}
+                  </Link>
+                );
+              })}
+            </div>
+            <Link to="/projects" className={styles.seeMoreButton}><Trans>seeMore</Trans> <i className="fas fa-fw fa-chevron-right"></i></Link>
+          </article>
+        </section>
+        <Link className={styles.donationSection} to="/donate">
+          <div>
+            <span><Trans>donationCatchphrase</Trans></span>
+            <i className="fas fa-fw fa-chevron-right"></i>
+          </div>
+        </Link>
+      </Layout>
+    )
+  }
+}
+
+IndexPage.propTypes = {
+  data: PropTypes.object.isRequired
+}
+
+export default IndexPage
diff --git a/src/pages/projects.js b/src/pages/projects.js
index 94a02a8..1fac809 100644
--- a/src/pages/projects.js
+++ b/src/pages/projects.js
@@ -1,80 +1,80 @@
-import React from "react"
-import Layout from "../layouts/default";
-import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next"
-import { graphql } from 'gatsby'
-import PropTypes from "prop-types"
-
-import styles from "./projects.module.scss";
-
-export const query = graphql`
-query GetProjects($language: String) {
-  allProjectsJson(filter: {lang: {eq: $language}}) {
-    nodes {
-      lang
-      urlname
-      name
-      image {
-        childImageSharp {
-          resize(width: 400, quality: 90) {
-            src
-          }
-        }
-      }
-      shortDescription
-    }
-  }
-    locales: allLocale(filter: {language: {eq: $language}}) {
-      edges {
-        node {
-          ns
-          data
-          language
-        }
-      }
-    }
-}
-`
-
-const ProjectsPage = ({ data }) => {
-
-  const { t } = useI18next();
-  return (
-    <Layout module="projects" title={t("projects")} description={t("projectsDescription")}>
-      <section>
-        <article>
-          <h1><Trans>projects</Trans></h1>
-
-          <p><Trans>projectsDescription</Trans></p>
-
-          <div className={styles.projectList}>
-            {data.allProjectsJson.nodes.map((project) => {
-              return (
-                <Link className={styles.projectCard} key={project.lang + project.urlname} to={"/projects/" + project.urlname}>
-                  {/*<div className="projectCardActivityIndicator activityIndicatorBlue">Live</div>*/}
-                  <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>
-                    </div>
-                  </div>
-
-                  {/*<div className={styles.projectCardCTAContainer}>
-                      <div className={styles.projectCardCTA}><Link to={"/projects/" + project.urlname}><Trans>projectView</Trans></Link></div>
-                  </div>*/}
-                </Link>
-              );
-            })}
-          </div>
-
-          {/*<pre>{JSON.stringify(data, null, 2)}</pre>*/}
-        </article>
-      </section>
-    </Layout>
-  );
-}
-
-ProjectsPage.propTypes = {
-  data: PropTypes.object
-}
-
+import React from "react"
+import Layout from "../layouts/default";
+import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next"
+import { graphql } from 'gatsby'
+import PropTypes from "prop-types"
+
+import * as styles from "./projects.module.scss";
+
+export const query = graphql`
+query GetProjects($language: String) {
+  allProjectsJson(filter: {lang: {eq: $language}}) {
+    nodes {
+      lang
+      urlname
+      name
+      image {
+        childImageSharp {
+          resize(width: 400, quality: 90) {
+            src
+          }
+        }
+      }
+      shortDescription
+    }
+  }
+    locales: allLocale(filter: {language: {eq: $language}}) {
+      edges {
+        node {
+          ns
+          data
+          language
+        }
+      }
+    }
+}
+`
+
+const ProjectsPage = ({ data }) => {
+
+  const { t } = useI18next();
+  return (
+    <Layout module="projects" title={t("projects")} description={t("projectsDescription")}>
+      <section>
+        <article>
+          <h1><Trans>projects</Trans></h1>
+
+          <p><Trans>projectsDescription</Trans></p>
+
+          <div className={styles.projectList}>
+            {data.allProjectsJson.nodes.map((project) => {
+              return (
+                <Link className={styles.projectCard} key={project.lang + project.urlname} to={"/projects/" + project.urlname}>
+                  {/*<div className="projectCardActivityIndicator activityIndicatorBlue">Live</div>*/}
+                  <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>
+                    </div>
+                  </div>
+
+                  {/*<div className={styles.projectCardCTAContainer}>
+                      <div className={styles.projectCardCTA}><Link to={"/projects/" + project.urlname}><Trans>projectView</Trans></Link></div>
+                  </div>*/}
+                </Link>
+              );
+            })}
+          </div>
+
+          {/*<pre>{JSON.stringify(data, null, 2)}</pre>*/}
+        </article>
+      </section>
+    </Layout>
+  );
+}
+
+ProjectsPage.propTypes = {
+  data: PropTypes.object
+}
+
 export default ProjectsPage;
\ No newline at end of file
diff --git a/src/pages/social.js b/src/pages/social.js
index df71578..1fc107e 100644
--- a/src/pages/social.js
+++ b/src/pages/social.js
@@ -1,68 +1,68 @@
-import React from "react"
-import Layout from "../layouts/default";
-import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next"
-import { graphql } from 'gatsby'
-import PropTypes from "prop-types"
-
-import styles from "./social.module.scss";
-
-export const query = graphql`
-query AllSocialsQuery($language: String!) {
-    allSocialsJson {
-      nodes {
-        image
-        platformHandle
-        platformName
-        url
-      }
-    }
-    locales: allLocale(filter: {language: {eq: $language}}) {
-      edges {
-        node {
-          ns
-          data
-          language
-        }
-      }
-    }
-  }  
-`
-
-const SocialPage = ({ data }) => {
-
-    const { t } = useI18next();
-    return (
-        <Layout module="social" title={t("social")} description={t("socialDescription")}>
-            <section>
-                <article>
-                    <h1><Trans>social</Trans></h1>
-
-                    <p><Trans i18nKey="socialDescriptionWithLink">socialDescriptionWith<Link to="/friends">Link</Link></Trans></p>
-
-                    <div className={styles.socialList}>
-                        {
-                            data.allSocialsJson.nodes.map((social) => {
-                                return (
-                                    <a className={styles.socialCard} href={social.url} target="_blank" rel="noreferrer me" key={social.url}>
-                                        <div className={styles.socialImage} style={{ backgroundImage: "url(" + social.image + ")" }}>
-                                            <span className={styles.socialName}>{social.platformName}</span>
-                                            <span className={styles.socialUsername}>{social.platformHandle}</span>
-                                        </div>
-                                    </a>
-                                );
-                            })
-                        }
-                    </div>
-
-                    {/*<pre>{JSON.stringify(data, null, 2)}</pre>*/}
-                </article>
-            </section>
-        </Layout>
-    );
-}
-
-SocialPage.propTypes = {
-    data: PropTypes.object.isRequired
-};
-
+import React from "react"
+import Layout from "../layouts/default";
+import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next"
+import { graphql } from 'gatsby'
+import PropTypes from "prop-types"
+
+import * as styles from "./social.module.scss";
+
+export const query = graphql`
+query AllSocialsQuery($language: String!) {
+    allSocialsJson {
+      nodes {
+        image
+        platformHandle
+        platformName
+        url
+      }
+    }
+    locales: allLocale(filter: {language: {eq: $language}}) {
+      edges {
+        node {
+          ns
+          data
+          language
+        }
+      }
+    }
+  }  
+`
+
+const SocialPage = ({ data }) => {
+
+    const { t } = useI18next();
+    return (
+        <Layout module="social" title={t("social")} description={t("socialDescription")}>
+            <section>
+                <article>
+                    <h1><Trans>social</Trans></h1>
+
+                    <p><Trans i18nKey="socialDescriptionWithLink">socialDescriptionWith<Link to="/friends">Link</Link></Trans></p>
+
+                    <div className={styles.socialList}>
+                        {
+                            data.allSocialsJson.nodes.map((social) => {
+                                return (
+                                    <a className={styles.socialCard} href={social.url} target="_blank" rel="noreferrer me" key={social.url}>
+                                        <div className={styles.socialImage} style={{ backgroundImage: "url(" + social.image + ")" }}>
+                                            <span className={styles.socialName}>{social.platformName}</span>
+                                            <span className={styles.socialUsername}>{social.platformHandle}</span>
+                                        </div>
+                                    </a>
+                                );
+                            })
+                        }
+                    </div>
+
+                    {/*<pre>{JSON.stringify(data, null, 2)}</pre>*/}
+                </article>
+            </section>
+        </Layout>
+    );
+}
+
+SocialPage.propTypes = {
+    data: PropTypes.object.isRequired
+};
+
 export default SocialPage;
\ No newline at end of file
diff --git a/src/templates/project.js b/src/templates/project.js
index 14cc053..7e5e4b0 100644
--- a/src/templates/project.js
+++ b/src/templates/project.js
@@ -1,92 +1,92 @@
-import React from "react"
-import { graphql } from "gatsby"
-import { Trans, useTranslation } from 'gatsby-plugin-react-i18next';
-import Layout from "../layouts/default";
-import PropTypes from "prop-types"
-
-import styles from "./project.module.scss";
-
-export const query = graphql`
-query GetProject($urlname: String!, $lang: String!, $language: String!) {
-  allProjectsJson(filter: {urlname: {eq: $urlname}, lang: {eq: $lang}}) {
-    nodes {
-      lang
-      urlname
-      name
-      links {
-        github
-        website
-      }
-      image {
-        publicURL
-      }
-      longDescription
-      shortDescription
-    }
-  }
-  locales: allLocale(filter: {language: {eq: $language}}) {
-    edges {
-      node {
-        ns
-        data
-        language
-      }
-    }
-  }
-}
-`
-
-const ProjectTemplate = ({ data }) => {
-  const { t } = useTranslation();
-  let project = data.allProjectsJson.nodes[0];
-  let projectName = project.name;
-
-  return (
-    <Layout description={project.shortDescription} title={t("project") + ": " + projectName} transparentTopbar={true}>
-      <section className={styles.projectHeader}>
-        <div style={{ paddingTop: 0 }}>
-          <div className={styles.headerBackground} style={{ backgroundImage: "url(" + project.image.publicURL + ")" }}></div>
-          <header>
-            <div className={styles.headerInner}>
-              <h1><Trans>project</Trans>: {projectName}</h1>
-              <span className={styles.postMeta}>{project.shortDescription}</span>
-            </div>
-          </header>
-          <div className={styles.headerPlaceholder}></div>
-        </div>
-      </section>
-      {project.longDescription != null ?
-        <section className={styles.projectAbout}>
-          <article>
-            <h1><Trans projectName={projectName} i18nKey="projectAboutHeader">projectAboutHeader{{ projectName }}</Trans></h1>
-            <p>{project.longDescription}</p>
-          </article>
-        </section>
-        : null}
-      {project.links !== null ?
-        <section className={styles.projectLinks}>
-          <div>
-            <h1>Links</h1>
-            <div className={styles.linkList}>
-              {project.links.github !== null ? <a href={project.links.github} target="_blank" rel="noreferrer"><i className="fab fa-github" aria-hidden="true"></i> <Trans>projectViewGitHub</Trans></a> : null}
-              {project.links.website !== null ? <a href={project.links.website} target="_blank" rel="noreferrer"><i className="fas fa-external-link-alt" aria-hidden="true"></i> <Trans>projectViewWebsite</Trans></a> : null}
-
-            </div>
-          </div>
-        </section>
-        : null}
-      {/*<section>
-            <div>
-
-              <pre>{JSON.stringify(data, null, 2)}</pre>
-            </div>
-          </section>*/}
-    </Layout>
-  );
-}
-
-ProjectTemplate.propTypes = {
-  data: PropTypes.object.isRequired
-}
-
+import React from "react"
+import { graphql } from "gatsby"
+import { Trans, useTranslation } from 'gatsby-plugin-react-i18next';
+import Layout from "../layouts/default";
+import PropTypes from "prop-types"
+
+import * as styles from "./project.module.scss";
+
+export const query = graphql`
+query GetProject($urlname: String!, $lang: String!, $language: String!) {
+  allProjectsJson(filter: {urlname: {eq: $urlname}, lang: {eq: $lang}}) {
+    nodes {
+      lang
+      urlname
+      name
+      links {
+        github
+        website
+      }
+      image {
+        publicURL
+      }
+      longDescription
+      shortDescription
+    }
+  }
+  locales: allLocale(filter: {language: {eq: $language}}) {
+    edges {
+      node {
+        ns
+        data
+        language
+      }
+    }
+  }
+}
+`
+
+const ProjectTemplate = ({ data }) => {
+  const { t } = useTranslation();
+  let project = data.allProjectsJson.nodes[0];
+  let projectName = project.name;
+
+  return (
+    <Layout description={project.shortDescription} title={t("project") + ": " + projectName} transparentTopbar={true}>
+      <section className={styles.projectHeader}>
+        <div style={{ paddingTop: 0 }}>
+          <div className={styles.headerBackground} style={{ backgroundImage: "url(" + project.image.publicURL + ")" }}></div>
+          <header>
+            <div className={styles.headerInner}>
+              <h1><Trans>project</Trans>: {projectName}</h1>
+              <span className={styles.postMeta}>{project.shortDescription}</span>
+            </div>
+          </header>
+          <div className={styles.headerPlaceholder}></div>
+        </div>
+      </section>
+      {project.longDescription != null ?
+        <section className={styles.projectAbout}>
+          <article>
+            <h1><Trans projectName={projectName} i18nKey="projectAboutHeader">projectAboutHeader{{ projectName }}</Trans></h1>
+            <p>{project.longDescription}</p>
+          </article>
+        </section>
+        : null}
+      {project.links !== null ?
+        <section className={styles.projectLinks}>
+          <div>
+            <h1>Links</h1>
+            <div className={styles.linkList}>
+              {project.links.github !== null ? <a href={project.links.github} target="_blank" rel="noreferrer"><i className="fab fa-github" aria-hidden="true"></i> <Trans>projectViewGitHub</Trans></a> : null}
+              {project.links.website !== null ? <a href={project.links.website} target="_blank" rel="noreferrer"><i className="fas fa-external-link-alt" aria-hidden="true"></i> <Trans>projectViewWebsite</Trans></a> : null}
+
+            </div>
+          </div>
+        </section>
+        : null}
+      {/*<section>
+            <div>
+
+              <pre>{JSON.stringify(data, null, 2)}</pre>
+            </div>
+          </section>*/}
+    </Layout>
+  );
+}
+
+ProjectTemplate.propTypes = {
+  data: PropTypes.object.isRequired
+}
+
 export default ProjectTemplate;
\ No newline at end of file