Initialize project and port basics

2025-04-28 17:56:51 +02:00 · 2020-12-21 18:23:28 +01:00 · 2020-12-21 18:23:28 +01:00 · ebb4f4d515
commit ebb4f4d515
31 changed files with 20401 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+node_modules/
+.cache/
+public
--- a/14
+++ b/14
@ -0,0 +1,14 @@
+The BSD Zero Clause License (0BSD)
+
+Copyright (c) 2020 Gatsby Inc.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
--- a/README.md
+++ b/README.md
@ -0,0 +1,2 @@
+# KevinK.dev.js
+> KevinK.dev, my personal site, now on Gatsby.
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@ -0,0 +1,21 @@
+let $ = require("jquery");
+
+$(function() {
+    $(window).on("scroll", function() {
+        performUpdate();
+    });
+
+    $(window).on("navigate", function() {
+        performUpdate();
+    });
+
+    window.setInterval(performUpdate, 500);
+});
+
+function performUpdate() {
+    if(window.scrollY < 15) {
+        $(".topBar").addClass("homeBarTransparent");
+    } else {
+        $(".topBar").removeClass("homeBarTransparent");
+    }
+}
--- a/gatsby-config.js
+++ b/gatsby-config.js
@ -0,0 +1,53 @@
+module.exports = {
+    siteMetadata: {
+        title: `KevinK.dev`,
+        description: `Hallo, ich bin Kevin Kandlbinder, ein Entwickler und Hobby-Fotograf aus Norddeutschland.`,
+        author: `@Unkn0wnKevin`,
+        siteUrl: `https://kevink.dev`,
+      },
+    plugins: [
+        `gatsby-plugin-sharp`,
+        `gatsby-plugin-sass`,
+        {
+            resolve: `gatsby-plugin-manifest`,
+            options: {
+                name: `KevinK.dev`,
+                short_name: `KevinK.dev`,
+                start_url: `/`,
+                background_color: `#000710`,
+                theme_color: `#000710`,
+                display: `minimal-ui`,
+                icon: `src/images/fullbglogo@10x.png`, // This path is relative to the root of the site.
+                cache_busting_mode: 'none',
+            },
+        },
+        `gatsby-plugin-robots-txt`,
+        {
+            resolve: `gatsby-plugin-offline`,
+            options: {
+                precachePages: ["/", "/projects", "/projects/*", "/social", "/social/*"],
+                workboxConfig: {
+                globPatterns: ['**/*']
+                }
+            },
+        },
+        `gatsby-plugin-sitemap`,
+        `gatsby-plugin-react-helmet`,
+        {
+            resolve: `gatsby-plugin-react-i18next`,
+            options: {
+              path: `${__dirname}/locales`,
+              languages: [`en`, `de`],
+              defaultLanguage: null,
+              siteURL: "https://kevink.dev",
+              i18nextOptions: {
+                interpolation: {
+                  escapeValue: false // not needed for react as it escapes by default
+                },
+                keySeparator: false,
+                nsSeparator: false
+              }
+            }
+          }
+    ]
+}
--- a/locales/de/translation.json
+++ b/locales/de/translation.json
@ -0,0 +1,18 @@
+{
+    "imprint": "Impressum",
+    "datasec": "Datenschutz",
+    "disclaimer": "Disclaimer",
+    "projects": "Projekte",
+    "social": "Soziales",
+    "homeHello": "Hallo, ich bin",
+    "homeMe": "Ich bin",
+    "homeWebDeveloper": "Web Developer",
+    "homeMyLocation": "Quickborn, Schleswig-Holstein, Deutschland",
+    "homeAboutMe": "Über mich",
+    "homeAboutMeHello": "Hallo!",
+    "homeAboutMeText": "Ich bin Kevin Kandlbinder, ein Entwickler und Hobby-Fotograf aus Norddeutschland. Ich habe schon früh in meinem Leben gelernt mit Computern umzugehen, da mein Vater mir seinen alten Windows 2000-Tower überließ, als er sich einen neuen holte. Kontakt zur Entwicklung von Webseiten hatte ich einige Jahre darauf zum ersten Mal, als ich mir ein Buch zu HTML, CSS und PHP gekauft habe. Seitdem ist Web Development für mich gleichermaßen ein Hobby und ein Job.",
+    "donationCatchphrase": "Gefällt dir was du siehst? Spende doch etwas.",
+    "homeImageCredit": "Portrait aufgenommen von Jannik Kiel",
+    "de": "Deutsch",
+    "en": "Englisch"
+}
--- a/locales/en/translation.json
+++ b/locales/en/translation.json
@ -0,0 +1,18 @@
+{
+    "imprint": "Imprint",
+    "datasec": "Data Protection",
+    "disclaimer": "Disclaimer",
+    "projects": "Projects",
+    "social": "Social",
+    "homeHello": "Hello, I am",
+    "homeMe": "I am",
+    "homeWebDeveloper": "a web developer",
+    "homeMyLocation": "Quickborn, Schleswig-Holstein, Germany",
+    "homeAboutMe": "About me",
+    "homeAboutMeHello": "Hello!",
+    "homeAboutMeText": "I am Kevin Kandlbinder, a developer and hobby photographer from northern germany. I've learned operating computers very early in my life with my father giving me his old Windows 2000 tower. Some years later I've had my first contact with web development a few years later when I bought a book about HTML, PHP, JavaScript and CSS from a sale at my local library. From this point onwards web development has been a job and a hobby equally.",
+    "donationCatchphrase": "Like what you're seeing? Consider donating.",
+    "homeImageCredit": "Portrait taken by Jannik Kiel",
+    "de": "German",
+    "en": "English"
+}
--- a/npm-debug.log
+++ b/npm-debug.log
@ -0,0 +1,46 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'extract' ]
+2 info using npm@3.5.2
+3 info using node@v8.10.0
+4 verbose run-script [ 'preextract', 'extract', 'postextract' ]
+5 info lifecycle kevin-k.dev@1.0.0~preextract: kevin-k.dev@1.0.0
+6 silly lifecycle kevin-k.dev@1.0.0~preextract: no script for preextract, continuing
+7 info lifecycle kevin-k.dev@1.0.0~extract: kevin-k.dev@1.0.0
+8 verbose lifecycle kevin-k.dev@1.0.0~extract: unsafe-perm in lifecycle true
+9 verbose lifecycle kevin-k.dev@1.0.0~extract: PATH: /usr/share/npm/bin/node-gyp-bin:/mnt/d/Projects/kevink-dev/node_modules/.bin:/home/kevin/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/mnt/c/Program Files/Oculus/Support/oculus-runtime:/mnt/c/VulkanSDK/1.1.121.1/Bin:/mnt/c/Program Files/NVIDIA GPU Computing Toolkit/CUDA/v8.0/bin:/mnt/c/Program Files/NVIDIA GPU Computing Toolkit/CUDA/v8.0/libnvvp:/mnt/c/Program Files/NVIDIA GPU Computing Toolkit/CUDA/v9.2/libnvvp:/mnt/c/Program Files (x86)/Common Files/Oracle/Java/javapath:/mnt/c/Program Files (x86)/Common Files/Intel/Shared Libraries/redist/intel64/compiler:/mnt/c/ProgramData/Oracle/Java/javapath:/mnt/c/WINDOWS/system32:/mnt/c/WINDOWS:/mnt/c/WINDOWS/System32/Wbem:/mnt/c/WINDOWS/System32/WindowsPowerShell/v1.0/:/mnt/c/Program Files/PuTTY/:/mnt/c/Program Files (x86)/NVIDIA Corporation/PhysX/Common:/mnt/c/Android:/mnt/c/Windows/System32:/mnt/d/CustomInstalls/libwebp-0.6.1/bin:/mnt/c/Program Files/dotnet/:/mnt/c/Program Files/Microsoft SQL Server/130/Tools/Binn/:/mnt/c/BIN:/mnt/d/CustomInstalls/WorldPainter:/mnt/c/ProgramData/ComposerSetup/bin:/mnt/c/Program Files (x86)/Windows Kits/10/Windows Performance Toolkit/:/mnt/c/Program Files (x86)/Windows Kits/8.1/Windows Performance Toolkit/:/mnt/c/WINDOWS/System32/OpenSSH/:/mnt/d/CustomInstalls/TortoiseHg/:/mnt/c/Perl64/bin/:/mnt/c/Program Files/NVIDIA Corporation/NVIDIA NvDLISR:/mnt/c/Program Files (x86)/Paragon Software/LinuxFS for Windows/:/mnt/c/Program Files (x86)/Streamlink/bin:/mnt/d/CustomInstalls/xampp/mysql/bin:/mnt/d/CustomInstalls/OracleVM VirtualBox:/mnt/c/Program Files/nodejs/:/mnt/c/ProgramData/chocolatey/bin:/mnt/c/AIRCRACK-NG:/mnt/d/Program Files (x86)/Graphviz2.38/bin:/mnt/c/Program Files/Calibre2/:/mnt/d/Program Files (x86)/Google/Cloud SDK/google-cloud-sdk/bin:/mnt/c/Program Files (x86)/Yarn/bin/:/mnt/d/HashiCorp/Vagrant/bin:/mnt/c/Program Files (x86)/GnuPG/bin:/mnt/c/WINDOWS/system32:/mnt/c/WINDOWS:/mnt/c/WINDOWS/System32/Wbem:/mnt/c/WINDOWS/System32/WindowsPowerShell/v1.0/:/mnt/c/WINDOWS/System32/OpenSSH/:/mnt/c/Program Files (x86)/ZeroTier/One/:/mnt/c/Program Files/Symfony:/mnt/c/Program Files/Git/cmd:/mnt/c/Program Files/Microsoft SQL Server/Client SDK/ODBC/170/Tools/Binn/:/mnt/c/Program Files/Docker/Docker/resources/bin:/mnt/c/ProgramData/DockerDesktop/version-bin:/mnt/c/Users/kevin/Miniconda3:/mnt/c/Users/kevin/Miniconda3/Library/mingw-w64/bin:/mnt/c/Users/kevin/Miniconda3/Library/usr/bin:/mnt/c/Users/kevin/Miniconda3/Library/bin:/mnt/c/Users/kevin/Miniconda3/Scripts:/mnt/c/Ruby24-x64/bin:/mnt/c/Ruby26-x64/bin:/mnt/c/Users/kevin/AppData/Local/Programs/Python/Python37/Scripts/:/mnt/c/Users/kevin/AppData/Local/Programs/Python/Python37/:/mnt/c/Users/kevin/AppData/Local/Programs/Python/Python36-32/Scripts/:/mnt/c/Users/kevin/AppData/Local/Programs/Python/Python36-32/:/mnt/c/Users/kevin/AppData/Local/Microsoft/WindowsApps:/mnt/c/Users/kevin/AppData/Local/atom/bin:/mnt/d/flutter/bin:/mnt/c/Users/kevin/AppData/Local/Programs/Fiddler:/mnt/c/Users/kevin/AppData/Roaming/Composer/vendor/bin:/mnt/d/CustomInstalls/GPAC:/mnt/c/Users/kevin/AppData/Local/now-cli:/mnt/c/Users/kevin/AppData/Local/GitHubDesktop/bin:/mnt/c/Program Files/CMake/bin:/mnt/c/Users/kevin/.improbable/spatial:/mnt/c/Program Files/GPAC:/mnt/d/Program Files/GPAC:/mnt/c/Users/kevin/AppData/Local/hyper/app-2.1.2/resources/bin:/mnt/c/Users/kevin/AppData/Local/Programs/Microsoft VS Code/bin:/mnt/c/Users/kevin/AppData/Roaming/npm:/mnt/c/Users/kevin/AppData/Local/Microsoft/WindowsApps:/mnt/c/Users/kevin/.dotnet/tools:/mnt/c/Users/kevin/AppData/Local/Yarn/bin:/mnt/c/Program Files (x86)/FAHClient:/mnt/c/Users/kevin/AppData/Local/Keybase/:/mnt/d/Program Files/IPFS Desktop/resources/app.asar.unpacked/src/ipfs-on-path/scripts/bin-win:/mnt/c/Users/kevin/.dotnet/tools:/snap/bin
+10 verbose lifecycle kevin-k.dev@1.0.0~extract: CWD: /mnt/d/Projects/kevink-dev
+11 silly lifecycle kevin-k.dev@1.0.0~extract: Args: [ '-c',
+11 silly lifecycle   'babel --config-file ./babel-extract.config.js -o tmp/chunk.js \'./src/**/*.{js,jsx,ts,tsx}\' && rm -rf tmp' ]
+12 silly lifecycle kevin-k.dev@1.0.0~extract: Returned: code: 1  signal: null
+13 info lifecycle kevin-k.dev@1.0.0~extract: Failed to exec extract script
+14 verbose stack Error: kevin-k.dev@1.0.0 extract: `babel --config-file ./babel-extract.config.js -o tmp/chunk.js './src/**/*.{js,jsx,ts,tsx}' && rm -rf tmp`
+14 verbose stack Exit status 1
+14 verbose stack     at EventEmitter.<anonymous> (/usr/share/npm/lib/utils/lifecycle.js:232:16)
+14 verbose stack     at emitTwo (events.js:126:13)
+14 verbose stack     at EventEmitter.emit (events.js:214:7)
+14 verbose stack     at ChildProcess.<anonymous> (/usr/share/npm/lib/utils/spawn.js:24:14)
+14 verbose stack     at emitTwo (events.js:126:13)
+14 verbose stack     at ChildProcess.emit (events.js:214:7)
+14 verbose stack     at maybeClose (internal/child_process.js:925:16)
+14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
+15 verbose pkgid kevin-k.dev@1.0.0
+16 verbose cwd /mnt/d/Projects/kevink-dev
+17 error Linux 4.4.0-18362-Microsoft
+18 error argv "/usr/bin/node" "/usr/bin/npm" "run" "extract"
+19 error node v8.10.0
+20 error npm  v3.5.2
+21 error code ELIFECYCLE
+22 error kevin-k.dev@1.0.0 extract: `babel --config-file ./babel-extract.config.js -o tmp/chunk.js './src/**/*.{js,jsx,ts,tsx}' && rm -rf tmp`
+22 error Exit status 1
+23 error Failed at the kevin-k.dev@1.0.0 extract script 'babel --config-file ./babel-extract.config.js -o tmp/chunk.js './src/**/*.{js,jsx,ts,tsx}' && rm -rf tmp'.
+23 error Make sure you have the latest version of node.js and npm installed.
+23 error If you do, this is most likely a problem with the kevin-k.dev package,
+23 error not with npm itself.
+23 error Tell the author that this fails on your system:
+23 error     babel --config-file ./babel-extract.config.js -o tmp/chunk.js './src/**/*.{js,jsx,ts,tsx}' && rm -rf tmp
+23 error You can get information on how to open an issue for this project with:
+23 error     npm bugs kevin-k.dev
+23 error Or if that isn't available, you can get their info via:
+23 error     npm owner ls kevin-k.dev
+23 error There is likely additional logging output above.
+24 verbose exit [ 1, true ]
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,39 @@
+{
+  "name": "kevin-k.dev",
+  "version": "1.0.0",
+  "private": true,
+  "description": "KevinK.dev",
+  "author": "Kevin Kandlbinder",
+  "keywords": [
+    "gatsby"
+  ],
+  "scripts": {
+    "develop": "gatsby develop",
+    "start": "gatsby develop",
+    "build": "gatsby build",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean"
+  },
+  "license": "0BSD",
+  "dependencies": {
+    "@babel/cli": "^7.12.10",
+    "@babel/plugin-transform-typescript": "^7.12.1",
+    "babel-plugin-i18next-extract": "^0.8.2",
+    "gatsby": "^2.26.1",
+    "gatsby-plugin-manifest": "^2.9.0",
+    "gatsby-plugin-offline": "^3.7.0",
+    "gatsby-plugin-react-helmet": "^3.7.0",
+    "gatsby-plugin-react-i18next": "0.0.27",
+    "gatsby-plugin-robots-txt": "^1.5.3",
+    "gatsby-plugin-sass": "^2.8.0",
+    "gatsby-plugin-sharp": "^2.11.1",
+    "gatsby-plugin-sitemap": "^2.9.0",
+    "i18next": "^19.8.4",
+    "jquery": "^3.5.1",
+    "node-sass": "^4.14.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-helmet": "^6.1.0",
+    "react-i18next": "^11.8.4"
+  }
+}
--- a/src/_variables.scss
+++ b/src/_variables.scss
@ -0,0 +1,5 @@
+$layoutWidth: 900px;
+$accentColor: #e5502b;
+$background: #0d0d0d;
+$textColor: white;
+
--- a/src/components/languageSwitcher.js
+++ b/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>
+    );
+}
--- a/src/components/navigation.js
+++ b/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>
+        );
+    }
+}
--- a/src/components/seo.js
+++ b/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
--- a/src/images/fullbglogo.svg
+++ b/src/images/fullbglogo.svg
@ -0,0 +1 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><defs><style>.cls-1{fill:#000710;}.cls-2{font-size:82px;}.cls-2,.cls-3{fill:#fff;font-family:AnonymousPro-Regular, Anonymous Pro;}.cls-3{font-size:27px;}</style></defs><title>fullbglogo</title><rect class="cls-1" width="120" height="120"/><text class="cls-2" transform="translate(15.24 85.23)">KK</text><text class="cls-3" transform="translate(58.6 103.2)">.dev</text></svg>
--- a/src/images/fullbglogo@10x.png
+++ b/src/images/fullbglogo@10x.png
--- a/src/images/icon.png
+++ b/src/images/icon.png
--- a/src/images/nobglogo.svg
+++ b/src/images/nobglogo.svg
@ -0,0 +1 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><defs><style>.cls-1{font-size:82px;}.cls-1,.cls-2{fill:#fff;font-family:AnonymousPro-Regular, Anonymous Pro;}.cls-2{font-size:27px;}</style></defs><title>nobglogo</title><text class="cls-1" transform="translate(15.24 85.23)">KK</text><text class="cls-2" transform="translate(58.6 103.2)">.dev</text></svg>
--- a/src/images/nobglogo@10x.png
+++ b/src/images/nobglogo@10x.png
--- a/src/images/roundedbglogo.svg
+++ b/src/images/roundedbglogo.svg
@ -0,0 +1 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><defs><style>.cls-1{fill:#000710;}.cls-2{font-size:82px;}.cls-2,.cls-3{fill:#fff;font-family:AnonymousPro-Regular, Anonymous Pro;}.cls-3{font-size:27px;}</style></defs><title>roundedbglogo</title><rect class="cls-1" width="120" height="120" rx="12"/><text class="cls-2" transform="translate(15.24 85.23)">KK</text><text class="cls-3" transform="translate(58.6 103.2)">.dev</text></svg>
--- a/src/images/roundedbglogo@10x.png
+++ b/src/images/roundedbglogo@10x.png
--- a/src/layouts/default.js
+++ b/src/layouts/default.js
@ -0,0 +1,42 @@
+import React from "react"
+import PropTypes from "prop-types"
+import Navigation from "../components/navigation"
+import SEO from "../components/seo";
+
+import "./default.scss";
+import {Link, Trans, useTranslation} from 'gatsby-plugin-react-i18next';
+import LanguageSwitcher from "../components/languageSwitcher";
+
+class Layout extends React.Component {
+    render() {
+        return (
+            <>
+                <SEO description={this.props.description} lang={this.props.lang} meta={this.props.meta} title={this.props.title} />
+                <Navigation isHome={this.props.module == "home"} module={this.props.module} />
+                <div id="content" role="main">
+                    {this.props.children}
+                </div>
+                <footer role="contentinfo">CC-BY 4.0 Kevin Kandlbinder, <Link to="/legal/about" class="spf-link"><Trans i18nKey="imprint">Imprint</Trans></Link> | <Link to="/legal/datasec" class="spf-link"><Trans i18nKey="datasec">Data Protection</Trans></Link> | <Link to="/legal/disclaimer" class="spf-link"><Trans i18nKey="disclaimer">Disclaimer</Trans></Link> | <a href="#languageChooser">Language</a></footer>
+                <div class="languageModal" id="languageChooser">
+                    <LanguageSwitcher />
+                </div>
+            </>
+        );
+    }
+}
+
+Layout.defaultProps = {
+    module: `none`,
+    meta: [],
+    description: ``,
+}
+
+Layout.propTypes = {
+    description: PropTypes.string,
+    lang: PropTypes.string,
+    meta: PropTypes.arrayOf(PropTypes.object),
+    title: PropTypes.string.isRequired,
+    module: PropTypes.string.isRequired
+}
+
+export default Layout;
--- a/src/layouts/default.scss
+++ b/src/layouts/default.scss
@ -0,0 +1,146 @@
+@import "../variables";
+
+* {
+    box-sizing: border-box;
+}
+
+body, html, #___gatsby, #gatsby-focus-wrapper {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    min-height: 100vh;
+    font-family: 'Anonymous Pro', monospace;
+}
+
+#gatsby-focus-wrapper {
+    background: $background;
+    color: $textColor;
+    transition: background .25s, color .25s;
+    display: flex;
+    flex-direction: column;
+}
+
+footer {
+    background: #000710;
+    width: 100%;
+    color: white;
+    padding: 5px;
+    text-align: center;
+}
+
+footer a {
+    color: white;
+    text-decoration: underline dotted currentColor;
+}
+
+#content {
+    /*min-height: calc(100vh - 26px);*/
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.topBar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    background: #000710;
+    z-index: 999;
+    transition: background .25s;
+}
+
+.homeBar.homeBarTransparent {
+    background: transparent;
+}
+
+.topBarInner {
+    display: flex;
+    width: 90%;
+    max-width: 900px;
+    margin: auto;
+}
+
+.topBar a {
+    display: block;
+    padding: 10px 15px;
+    color: white;
+    /*text-decoration: underline dotted white;*/
+    text-decoration: none;
+    border-top: 2px solid transparent;
+}
+
+.topBar a:hover {
+    border-color: rgba(255, 255, 255, .25);
+}
+
+.topBar a.active {
+    border-color: white;
+}
+
+.flexSpacer {
+    flex-grow: 1;
+    text-align: center;
+}
+
+section > div:not(.profile), section > article, .section > div:not(.profile), .section > article {
+    max-width: $layoutWidth;
+    width: 100%;
+    padding: 39px 20px;
+    margin: 0 auto;
+}
+
+article p {
+    text-align: justify;
+}
+
+article h1, section > div > h1 {
+    font-size: 2em;
+}
+
+article a {
+    color: $accentColor;
+    text-decoration: underline dotted currentColor;
+    text-decoration-skip: none;
+}.languageModal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .7);
+    z-index: 1000;
+    opacity: 0;
+    pointer-events: none;
+    -webkit-transition: opacity .25s;
+    -moz-transition: opacity .25s;
+    -ms-transition: opacity .25s;
+    -o-transition: opacity .25s;
+    transition: opacity .25s;
+}
+
+.languageModal:target {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.languageModalInner {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    background: black;
+    font-family: 'Anonymous Pro', monospace;
+    padding: 20px;
+    border-radius: 5px;
+}
+.languageModalInner a {
+    color: white;
+    text-decoration-style: dotted;
+}
+
+.modalCloseLink {
+    text-decoration: none;
+}
--- a/src/pages/404.js
+++ b/src/pages/404.js
@ -0,0 +1,54 @@
+import * as React from "react"
+import { Link } from "gatsby"
+
+// styles
+const pageStyles = {
+  color: "#232129",
+  padding: "96px",
+  fontFamily: "-apple-system, Roboto, sans-serif, serif",
+}
+const headingStyles = {
+  marginTop: 0,
+  marginBottom: 64,
+  maxWidth: 320,
+}
+
+const paragraphStyles = {
+  marginBottom: 48,
+}
+const codeStyles = {
+  color: "#8A6534",
+  padding: 4,
+  backgroundColor: "#FFF4DB",
+  fontSize: "1.25rem",
+  borderRadius: 4,
+}
+
+// markup
+const NotFoundPage = () => {
+  return (
+    <main style={pageStyles}>
+      <title>Not found</title>
+      <h1 style={headingStyles}>Page not found</h1>
+      <p style={paragraphStyles}>
+        Sorry{" "}
+        <span role="img" aria-label="Pensive emoji">
+          😔
+        </span>{" "}
+        we couldn’t find what you were looking for.
+        <br />
+        {process.env.NODE_ENV === "development" ? (
+          <>
+            <br />
+            Try creating a page in <code style={codeStyles}>src/pages/</code>.
+            <br />
+          </>
+        ) : null}
+        <br />
+        <Link to="/">Go home</Link>.
+      </p>
+    </main>
+  )
+}
+
+export default NotFoundPage
--- a/src/pages/index.js
+++ b/src/pages/index.js
@ -0,0 +1,55 @@
+import * as React from "react"
+import Layout from "../layouts/default"
+
+import styles from "./index.module.scss"
+
+import { Trans, Link } from "gatsby-plugin-react-i18next"
+
+// markup
+class IndexPage extends React.Component {
+  render() {
+    return (
+      <Layout title="Kevin Kandlbinder" module="home">
+        <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:+4941068068004"><i className="fas fa-fw fa-phone"></i>+49 4106 8068004</a>
+                <a className={styles.contactLink} href="mailto:kevin@kevink.dev?subject=%5Bkevink.dev%5D%20"><i className="far fa-fw fa-envelope"></i>kevin@kevink.dev</a>
+                <a className={styles.contactLink} href="https://goo.gl/maps/KVq9z1PVaVP2" rel="noopener" target="_blank"><i className="fas fa-fw fa-map-marker-alt"></i><Trans>homeMyLocation</Trans></a>
+                <a className={styles.contactLink} href="https://twitter.com/unkn0wnkevin" rel="noopener" target="_blank"><i className="fab fa-fw fa-twitter"></i>@Unkn0wnKevin</a>
+                <a className={styles.contactLink} href="https://github.com/unkn0wncat" rel="noopener" target="_blank"><i className="fab fa-fw fa-github"></i>Unkn0wnCat</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.section + " " + styles.creditSection} href="https://unsplash.com/@jannikkiel" target="_blank" rel="noopener">
+          <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>
+        <a className={styles.section + " " + styles.donationSection} href="TODO: Path">
+          <div>
+            <span><Trans>donationCatchphrase</Trans></span>
+            <i className="fas fa-fw fa-chevron-right"></i>
+          </div>
+        </a>
+      </Layout>
+    )
+  }
+}
+
+export default IndexPage
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@ -0,0 +1,183 @@
+@import "../variables";
+
+.heroSection {
+    width: 100%;
+    background: #000710;
+    min-height: 500px;
+    padding-top: 100px;
+    overflow: hidden;
+    background: radial-gradient(ellipse at top left, #1f0ba659, transparent), radial-gradient(ellipse at bottom right, #4a086829, transparent);
+
+    .profile {
+        position: relative;
+        left: 50%;
+        width: calc(90% - 40px);
+        max-width: 600px;
+        max-height: 400px;
+        transform: translate(-50%, 0%);
+
+    
+
+        &:hover .profileImage {
+            transform: translate(4px, -4px);
+        }
+    
+        &:hover .profileImageDummy {
+            transform: translate(-3px, 3px);
+        }
+
+        
+    
+        .hello {
+            font-weight: 100;
+            opacity: .75;
+            display: block;
+            margin-bottom: -5px;
+        }
+        
+        .name {
+            font-weight: 100;
+            font-size: 2em;
+            display: block;
+        }
+
+        .description {
+            font-weight: 100;
+            display: block;
+        }
+
+        .contactLinks {
+            margin-top: 20px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .contactLink {
+            transition: text-decoration .5s;
+            text-decoration: underline dotted rgba(0, 0, 0, 0);
+            padding: 6px 0 6px 25px;
+            color: $textColor;
+        }
+        
+        .contactLink:hover, .contactLink:active {
+            text-decoration: underline dotted rgba(0, 0, 0, .5);
+        }
+        
+        .contactLink > i {
+            color: $accentColor;
+            margin-left: -25px;
+            margin-right: 5px;
+        }
+
+        .profileCard {
+            width: calc(100% - 40px);
+            height: calc(100% - 20px);
+            background: $background;
+            transform: translate(40px, 20px);
+            border-radius: 5px;
+            /*box-shadow: -1px 11px 33px -10px rgba(127,127,127,0.4);*/
+            box-shadow: -1px 11px 33px -10px #e5502b4b;
+            padding: 20px 20px 20px 230px;
+            color: $textColor;
+        }
+    
+        .profileImage, .profileImageDummy {
+            display: inline-block;
+            width: 250px;
+            height: 350px;
+            border-radius: 5px;
+            position: absolute;
+            z-index: 100;
+            background-color: #1c1c1c;
+            background-size: cover;
+            background-position: center;
+            transform: translate(0, 0);
+            transition: transform .25s;
+        }
+    
+        .profileImage {
+            z-index: 20;
+            /*box-shadow: -5px 7px 10px -6px rgba(127,127,127,.4);*/
+        }
+    
+        .profileImageDummy {
+            z-index: 10;
+            background: $accentColor;
+            opacity: .2;
+            /*box-shadow: 0 0 10px -10px var(--accent-color);
+            background: transparent;*/
+        }
+
+        @media (max-width: 590px) {
+            .profileImage,.profileImageDummy {
+                display: none;
+            }
+        
+            .profileCard {
+                padding: 20px 20px 20px 20px;
+                transform: translate(20px, 20px);
+            }
+        
+        
+        }
+    }
+    
+}
+
+.amazonAlexaSection, .donationSection, .hireMeSection {
+    min-height: 90px;
+    background: #10141e;
+    cursor: pointer;
+    display: block;
+    text-decoration: none;
+    color: inherit;
+}
+
+.amazonAlexaSection img {
+    height: 50px;
+}
+
+.amazonAlexaSection > div, .donationSection > div, .hireMeSection > div {
+    display: flex;
+    height: 100%;
+    padding: 20px !important;
+    line-height: 50px;
+    font-size: 1.7em;
+    color: white;
+}
+
+.amazonAlexaSection > div > span, .donationSection > div > span, .hireMeSection > div > span {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.amazonAlexaSection > div > i, .donationSection > div > i, .hireMeSection > div > i {
+    line-height: 50px !important;
+}
+
+.creditSection {
+    background: #060606;
+    cursor: pointer;
+    display: block;
+    text-decoration: none;
+    color: inherit;
+}
+
+.creditSection > div {
+    display: flex;
+    height: 100%;
+    padding: 15px !important;
+    line-height: 15px;
+    font-size: 1.2em;
+    color: white;
+}
+
+.creditSection > div > span {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.creditSection > div > i {
+    line-height: 15px !important;
+}
+
--- a/src/pages/legal/about.js
+++ b/src/pages/legal/about.js
@ -0,0 +1,26 @@
+import React from "react"
+import Layout from "../../layouts/default";
+import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next"
+
+export default function ImprintPage() {
+    
+    const {t} = useI18next();
+    return (
+        <Layout module="legal" title={t("imprint")}>
+            <section>
+                <article>
+                    <h1><Trans>imprint</Trans></h1>
+
+                    <p>Angaben gemäß § 5 TMG</p><p>Kevin Kandlbinder<br/>
+                    Eichenweg 48<br/>
+                    25451 Quickborn <br/>
+                    </p><p> <strong>Vertreten durch: </strong><br/>
+                    Kevin Kandlbinder<br/>
+                    </p><p><strong>Kontakt:</strong> <br/>
+                    Telefon: +49 4106 8068004<br/>
+                    E-Mail: <a href='mailto:contact@kevink.dev'>contact@kevink.dev</a><br/></p>
+                </article>
+            </section>
+        </Layout>
+    );
+}
--- a/src/pages/legal/datasec.js
+++ b/src/pages/legal/datasec.js
@ -0,0 +1,26 @@
+import React from "react"
+import Layout from "../../layouts/default";
+import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next"
+
+export default function DataSecPage() {
+    
+    const {t} = useI18next();
+    return (
+        <Layout module="legal" title={t("datasec")}>
+            <section>
+                <article>
+                    <h1><Trans>datasec</Trans></h1>
+
+                    <p>Angaben gemäß § 5 TMG</p><p>Kevin Kandlbinder<br/>
+                    Eichenweg 48<br/>
+                    25451 Quickborn <br/>
+                    </p><p> <strong>Vertreten durch: </strong><br/>
+                    Kevin Kandlbinder<br/>
+                    </p><p><strong>Kontakt:</strong> <br/>
+                    Telefon: +49 4106 8068004<br/>
+                    E-Mail: <a href='mailto:contact@kevink.dev'>contact@kevink.dev</a><br/></p>
+                </article>
+            </section>
+        </Layout>
+    );
+}
--- a/src/pages/legal/disclaimer.js
+++ b/src/pages/legal/disclaimer.js
--- a/src/pages/projects.js
+++ b/src/pages/projects.js
@ -0,0 +1,18 @@
+import React from "react"
+import Layout from "../layouts/default";
+import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next"
+
+export default function ProjectsPage() {
+    
+    const {t} = useI18next();
+    return (
+        <Layout module="projects" title={t("projects")}>
+            <section>
+                <div>
+                    <h1><Trans>projects</Trans></h1>
+
+                </div>
+            </section>
+        </Layout>
+    );
+}
--- a/src/pages/social.js
+++ b/src/pages/social.js
@ -0,0 +1,18 @@
+import React from "react"
+import Layout from "../layouts/default";
+import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next"
+
+export default function SocialPage() {
+    
+    const {t} = useI18next();
+    return (
+        <Layout module="social" title={t("social")}>
+            <section>
+                <div>
+                    <h1><Trans>social</Trans></h1>
+
+                </div>
+            </section>
+        </Layout>
+    );
+}
				`@ -0,0 +1 @@`
				`<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><defs><style>.cls-1{fill:#000710;}.cls-2{font-size:82px;}.cls-2,.cls-3{fill:#fff;font-family:AnonymousPro-Regular, Anonymous Pro;}.cls-3{font-size:27px;}</style></defs><title>fullbglogo</title><rect class="cls-1" width="120" height="120"/><text class="cls-2" transform="translate(15.24 85.23)">KK</text><text class="cls-3" transform="translate(58.6 103.2)">.dev</text></svg>`