Initialize project and port basics

src/components/languageSwitcher.js

@@ -0,0 +1,21 @@
+import React from "react"
+import {Link, Trans, useI18next} from 'gatsby-plugin-react-i18next';
+
+export default function LanguageSwitcher() {
+    const {languages, originalPath} = useI18next();
+
+    return (
+        <div class="languageModalInner">
+            <h2>Languages (<a href="#" class="modalCloseLink">&times;</a>)</h2>
+            <ul>
+                {languages.map((lng) => (
+                    <li key={lng}>
+                        <Link to={originalPath} language={lng}>
+                            <Trans>{lng}</Trans>
+                        </Link>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}

src/components/navigation.js

@@ -0,0 +1,17 @@
+import React from "react"
+import { Trans, Link } from "gatsby-plugin-react-i18next"
+
+export default class Navigation extends React.Component {
+    render() {
+        return (
+            <div className={"topBar" + (this.props.isHome ? " homeBar" : "")}>
+                <nav className="topBarInner">
+                    <Link to="/" className={"logo" + (this.props.module == "home" ? " active" : "")}>KevinK.dev</Link>
+                    <div className="flexSpacer"></div>
+                    <Link id="navBtnProjects" to="/projects" className={(this.props.module == "projects" ? "active" : "")}><Trans>projects</Trans></Link>
+                    <Link id="navBtnSocial" to="/social" className={(this.props.module == "social" ? "active" : "")}><Trans>social</Trans></Link>
+                </nav>
+            </div>
+        );
+    }
+}

src/components/seo.js

@@ -0,0 +1,82 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { Helmet } from "gatsby-plugin-react-i18next"
+import { useStaticQuery, graphql } from "gatsby"
+
+function SEO({ description, lang, meta, title }) {
+  const { site } = useStaticQuery(
+    graphql`
+      query {
+        site {
+          siteMetadata {
+            title
+            description
+            author
+          }
+        }
+      }
+    `
+  )
+
+  const metaDescription = description || site.siteMetadata.description
+
+  return (
+    <Helmet
+      title={title}
+      titleTemplate={`%s | ${site.siteMetadata.title}`}
+      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: "Kevin Kandlbinder, Kevin, Kandlbinder, Web, Web Developer, Developer, JavaScript, PHP, Java, Photos, Fotos"
+        }
+      ].concat(meta)} 
+    >
+        <script src="https://kit.fontawesome.com/1377f925e0.js" crossorigin="anonymous"></script>
+    </Helmet>
+  )
+}
+
+SEO.defaultProps = {
+  meta: [],
+  description: ``,
+}
+
+SEO.propTypes = {
+  description: PropTypes.string,
+  meta: PropTypes.arrayOf(PropTypes.object),
+  title: PropTypes.string.isRequired,
+}
+
+export default SEO