Add initial code

2025-04-28 17:56:47 +02:00 · 2020-07-01 19:09:04 +02:00 · 2020-07-01 19:09:04 +02:00 · 8b4ba7ab63
commit 8b4ba7ab63
parent 06422080f2
41 changed files with 2909 additions and 894 deletions
--- a/.env.dist
+++ b/.env.dist
@ -0,0 +1 @@
+YOUTUBE_API_KEY=FILL_ME
--- a/.gitignore
+++ b/.gitignore
@ -52,7 +52,9 @@ typings/
 *.tgz

 # dotenv environment variable files
+.env
 .env*
+!.env.dist

 # gatsby files
 .cache/
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
--- a/.idea/watcherTasks.xml
+++ b/.idea/watcherTasks.xml
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
+</project>
--- a/README.md
+++ b/README.md
@ -1,99 +1,32 @@
-<!-- AUTO-GENERATED-CONTENT:START (STARTER) -->
-<p align="center">
-  <a href="https://www.gatsbyjs.org">
-    <img alt="Gatsby" src="https://www.gatsbyjs.org/monogram.svg" width="60" />
-  </a>
-</p>
-<h1 align="center">
-  Gatsby's default starter
-</h1>
+# Unkn0wnCat.net
+*Made using Gatsby and Cloudflare Workers*

-Kick off your project with this default boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
+This repository contains the code used to run the website Unkn0wnCat.net.

-_Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.org/docs/gatsby-starters/)._
+## Notes

-## 🚀 Quick start
+You need to copy the file `.env.dist` to `.env` and fill in an YouTube API Key or set the `YOUTUBE_API_KEY` environment variable on your system for this site to work properly.

-1.  **Create a Gatsby site.**
+## Important Commands

-    Use the Gatsby CLI to create a new site, specifying the default starter.
+### `npm run develop`

-    ```shell
-    # create a new Gatsby site using the default starter
-    gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default
-    ```
+This starts an development server with hot reloading.

-1.  **Start developing.**
+### `npm run deploy`

-    Navigate into your new site’s directory and start it up.
+Builds the site and deploys it to Cloudflare Workers.

-    ```shell
-    cd my-default-starter/
-    gatsby develop
-    ```
+## Important Directories

-1.  **Open the source code and start editing!**
+### `/content`

-    Your site is now running at `http://localhost:8000`!
+Contains all dynamic texts used for the site.

-    _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._
+### `/src`

-    Open the `my-default-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!
+Contains all the sites react-code.

-## 🧐 What's inside?
+### `/src/images`

-A quick look at the top-level files and directories you'll see in a Gatsby project.
-
-    .
-    ├── node_modules
-    ├── src
-    ├── .gitignore
-    ├── .prettierrc
-    ├── gatsby-browser.js
-    ├── gatsby-config.js
-    ├── gatsby-node.js
-    ├── gatsby-ssr.js
-    ├── LICENSE
-    ├── package-lock.json
-    ├── package.json
-    └── README.md
-
-1.  **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
-
-2.  **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.
-
-3.  **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.
-
-4.  **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.
-
-5.  **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser.
-
-6.  **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail).
-
-7.  **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
-
-8.  **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
-
-9.  **`LICENSE`**: Gatsby is licensed under the MIT license.
-
-10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**
-
-11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
-
-12. **`README.md`**: A text file containing useful reference information about your project.
-
-## 🎓 Learning Gatsby
-
-Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start:
-
- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
-
- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
-
-## 💫 Deploy
-
-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-default)
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/gatsbyjs/gatsby-starter-default)
-
-<!-- AUTO-GENERATED-CONTENT:END -->
+Contains the sites images.
--- a/content/home_about.md
+++ b/content/home_about.md
@ -0,0 +1,7 @@
+Hello, I am Kevin aka. Unkn0wnCat, a gamer, coder and video editor.
+
+I currently primarily play Rainbow Six: Siege with my clan, <a href="https://kreig.de">KREIG</a>, but I also play ArmA 3 and Garry's Mod.
+
+If I am not gaming in my free time I'm most likely coding. If you'd like to find out more about that you might want to visit my personal website at https://kevink.dev.
+
+My third passtime is video editing, which you can always witness on my YouTube channel.
--- a/dist/main.js
+++ b/dist/main.js
--- a/gatsby-config.js
+++ b/gatsby-config.js
@ -1,11 +1,26 @@
+try {
+  require('dotenv').config();
+} catch(e) {}
+
 module.exports = {
  siteMetadata: {
-    title: `Gatsby Default Starter`,
-    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
-    author: `@gatsbyjs`,
+    title: `Unkn0wnCat.net`,
+    description: `A german gamer, coder, video editor.`,
+    author: `@Unkn0wnKevin`,
+    siteUrl: `https://unkn0wncat.net`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
+    {
+      resolve: `gatsby-plugin-sitemap`,
+      options: {
+        output: `/sitemap.xml`,
+        createLinkInHead: true
+      }
+    },
+    {
+      resolve: `gatsby-plugin-sass`
+    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
@ -13,22 +28,48 @@ module.exports = {
        path: `${__dirname}/src/images`,
      },
    },
-    `gatsby-transformer-sharp`,
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `content`,
+        path: `${__dirname}/content`,
+      },
+    },
+    {
+      resolve: `gatsby-source-youtube-v2`,
+      options: {
+        channelId: ['UCCoZp-6_P3CVFj4clQ6uaeg'],
+        apiKey: process.env.YOUTUBE_API_KEY,
+        maxVideos: 60
+      },
+    },
+    `gatsby-transformer-remark`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
-        name: `gatsby-starter-default`,
-        short_name: `starter`,
+        name: `Unkn0wnCat.net`,
+        short_name: `Unkn0wnCat.net`,
        start_url: `/`,
-        background_color: `#663399`,
-        theme_color: `#663399`,
+        background_color: `#15151f`,
+        theme_color: `#1f1a3d`,
        display: `minimal-ui`,
-        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
+        lang: `de`,
+        icon: `src/images/Unkn0wnCat.net.png`, // This path is relative to the root of the site.
+        cache_busting_mode: 'none'
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
-    // `gatsby-plugin-offline`,
+    {
+      resolve: `gatsby-plugin-offline`,
+      options: {
+        precachePages: ["/"],
+        workboxConfig: {
+          globPatterns: ['**/*']
+        }
+      },
+    },
+
  ],
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -5,14 +5,22 @@
  "version": "0.1.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
+    "dotenv": "^8.2.0",
    "gatsby": "^2.23.12",
    "gatsby-image": "^2.4.9",
    "gatsby-plugin-manifest": "^2.4.14",
    "gatsby-plugin-offline": "^3.2.13",
    "gatsby-plugin-react-helmet": "^3.3.6",
+    "gatsby-plugin-sass": "^2.3.7",
    "gatsby-plugin-sharp": "^2.6.14",
+    "gatsby-plugin-sitemap": "^2.4.7",
+    "gatsby-plugin-styled-components": "^3.3.6",
    "gatsby-source-filesystem": "^2.3.14",
+    "gatsby-source-youtube-v2": "^1.0.1",
+    "gatsby-transformer-remark": "^2.8.20",
    "gatsby-transformer-sharp": "^2.5.7",
+    "html-to-react": "^1.4.3",
+    "node-sass": "^4.14.1",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
@ -32,7 +40,8 @@
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
+    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
+    "deploy": "gatsby build && wrangler publish"
  },
  "repository": {
    "type": "git",
--- a/src/components/header.js
+++ b/src/components/header.js
@ -1,42 +0,0 @@
-import { Link } from "gatsby"
-import PropTypes from "prop-types"
-import React from "react"
-
-const Header = ({ siteTitle }) => (
-  <header
-    style={{
-      background: `rebeccapurple`,
-      marginBottom: `1.45rem`,
-    }}
-  >
-    <div
-      style={{
-        margin: `0 auto`,
-        maxWidth: 960,
-        padding: `1.45rem 1.0875rem`,
-      }}
-    >
-      <h1 style={{ margin: 0 }}>
-        <Link
-          to="/"
-          style={{
-            color: `white`,
-            textDecoration: `none`,
-          }}
-        >
-          {siteTitle}
-        </Link>
-      </h1>
-    </div>
-  </header>
-)
-
-Header.propTypes = {
-  siteTitle: PropTypes.string,
-}
-
-Header.defaultProps = {
-  siteTitle: ``,
-}
-
-export default Header
--- a/src/components/image.js
+++ b/src/components/image.js
@ -1,32 +0,0 @@
-import React from "react"
-import { useStaticQuery, graphql } from "gatsby"
-import Img from "gatsby-image"
-
-/*
- * This component is built using `gatsby-image` to automatically serve optimized
- * images with lazy loading and reduced file sizes. The image is loaded using a
- * `useStaticQuery`, which allows us to load the image from directly within this
- * component, rather than having to pass the image data down from pages.
- *
- * For more information, see the docs:
- * - `gatsby-image`: https://gatsby.dev/gatsby-image
- * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
- */
-
-const Image = () => {
-  const data = useStaticQuery(graphql`
-    query {
-      placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
-        childImageSharp {
-          fluid(maxWidth: 300) {
-            ...GatsbyImageSharpFluid
-          }
-        }
-      }
-    }
-  `)
-
-  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
-}
-
-export default Image
--- a/src/components/layout.css
+++ b/src/components/layout.css
@ -1,622 +0,0 @@
-html {
-  font-family: sans-serif;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-}
-body {
-  margin: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-progress {
-  vertical-align: baseline;
-}
-[hidden],
-template {
-  display: none;
-}
-a {
-  background-color: transparent;
-  -webkit-text-decoration-skip: objects;
-}
-a:active,
-a:hover {
-  outline-width: 0;
-}
-abbr[title] {
-  border-bottom: none;
-  text-decoration: underline;
-  text-decoration: underline dotted;
-}
-b,
-strong {
-  font-weight: inherit;
-  font-weight: bolder;
-}
-dfn {
-  font-style: italic;
-}
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sub {
-  bottom: -0.25em;
-}
-sup {
-  top: -0.5em;
-}
-img {
-  border-style: none;
-}
-svg:not(:root) {
-  overflow: hidden;
-}
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-figure {
-  margin: 1em 40px;
-}
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-  font: inherit;
-  margin: 0;
-}
-optgroup {
-  font-weight: 700;
-}
-button,
-input {
-  overflow: visible;
-}
-button,
-select {
-  text-transform: none;
-}
-[type="reset"],
-[type="submit"],
-button,
-html [type="button"] {
-  -webkit-appearance: button;
-}
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner,
-button::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring,
-button:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-fieldset {
-  border: 1px solid silver;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-legend {
-  box-sizing: border-box;
-  color: inherit;
-  display: table;
-  max-width: 100%;
-  padding: 0;
-  white-space: normal;
-}
-textarea {
-  overflow: auto;
-}
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box;
-  padding: 0;
-}
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-[type="search"] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-html {
-  font: 112.5%/1.45em georgia, serif;
-  box-sizing: border-box;
-  overflow-y: scroll;
-}
-* {
-  box-sizing: inherit;
-}
-*:before {
-  box-sizing: inherit;
-}
-*:after {
-  box-sizing: inherit;
-}
-body {
-  color: hsla(0, 0%, 0%, 0.8);
-  font-family: georgia, serif;
-  font-weight: normal;
-  word-wrap: break-word;
-  font-kerning: normal;
-  -moz-font-feature-settings: "kern", "liga", "clig", "calt";
-  -ms-font-feature-settings: "kern", "liga", "clig", "calt";
-  -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
-  font-feature-settings: "kern", "liga", "clig", "calt";
-}
-img {
-  max-width: 100%;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-h1 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 2.25rem;
-  line-height: 1.1;
-}
-h2 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1.62671rem;
-  line-height: 1.1;
-}
-h3 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1.38316rem;
-  line-height: 1.1;
-}
-h4 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1rem;
-  line-height: 1.1;
-}
-h5 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 0.85028rem;
-  line-height: 1.1;
-}
-h6 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 0.78405rem;
-  line-height: 1.1;
-}
-hgroup {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-ul {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-ol {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-dl {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-dd {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-p {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-figure {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-pre {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 0.85rem;
-  line-height: 1.42;
-  background: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  overflow: auto;
-  word-wrap: normal;
-  padding: 1.45rem;
-}
-table {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 1rem;
-  line-height: 1.45rem;
-  border-collapse: collapse;
-  width: 100%;
-}
-fieldset {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-blockquote {
-  margin-left: 1.45rem;
-  margin-right: 1.45rem;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-form {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-noscript {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-iframe {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-hr {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: calc(1.45rem - 1px);
-  background: hsla(0, 0%, 0%, 0.2);
-  border: none;
-  height: 1px;
-}
-address {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-b {
-  font-weight: bold;
-}
-strong {
-  font-weight: bold;
-}
-dt {
-  font-weight: bold;
-}
-th {
-  font-weight: bold;
-}
-li {
-  margin-bottom: calc(1.45rem / 2);
-}
-ol li {
-  padding-left: 0;
-}
-ul li {
-  padding-left: 0;
-}
-li > ol {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-li > ul {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-blockquote *:last-child {
-  margin-bottom: 0;
-}
-li *:last-child {
-  margin-bottom: 0;
-}
-p *:last-child {
-  margin-bottom: 0;
-}
-li > p {
-  margin-bottom: calc(1.45rem / 2);
-}
-code {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-kbd {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-samp {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-abbr {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-}
-acronym {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-}
-abbr[title] {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-  text-decoration: none;
-}
-thead {
-  text-align: left;
-}
-td,
-th {
-  text-align: left;
-  border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
-  font-feature-settings: "tnum";
-  -moz-font-feature-settings: "tnum";
-  -ms-font-feature-settings: "tnum";
-  -webkit-font-feature-settings: "tnum";
-  padding-left: 0.96667rem;
-  padding-right: 0.96667rem;
-  padding-top: 0.725rem;
-  padding-bottom: calc(0.725rem - 1px);
-}
-th:first-child,
-td:first-child {
-  padding-left: 0;
-}
-th:last-child,
-td:last-child {
-  padding-right: 0;
-}
-tt,
-code {
-  background-color: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
-    "Liberation Mono", Menlo, Courier, monospace;
-  padding: 0;
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
-}
-pre code {
-  background: none;
-  line-height: 1.42;
-}
-code:before,
-code:after,
-tt:before,
-tt:after {
-  letter-spacing: -0.2em;
-  content: " ";
-}
-pre code:before,
-pre code:after,
-pre tt:before,
-pre tt:after {
-  content: "";
-}
-@media only screen and (max-width: 480px) {
-  html {
-    font-size: 100%;
-  }
-}
--- a/src/components/layout.js
+++ b/src/components/layout.js
@ -1,46 +1,16 @@
-/**
- * Layout component that queries for data
- * with Gatsby's useStaticQuery component
- *
- * See: https://www.gatsbyjs.org/docs/use-static-query/
- */
-
 import React from "react"
 import PropTypes from "prop-types"
-import { useStaticQuery, graphql } from "gatsby"

-import Header from "./header"
-import "./layout.css"
-
-const Layout = ({ children }) => {
-  const data = useStaticQuery(graphql`
-    query SiteTitleQuery {
-      site {
-        siteMetadata {
-          title
-        }
-      }
-    }
-  `)
+import styles from "./layout.module.scss"
+import Navbar from "./navbar"

+const Layout = ({ children, noNavSpacer = false }) => {
  return (
-    <>
-      <Header siteTitle={data.site.siteMetadata.title} />
-      <div
-        style={{
-          margin: `0 auto`,
-          maxWidth: 960,
-          padding: `0 1.0875rem 1.45rem`,
-        }}
-      >
-        <main>{children}</main>
-        <footer>
-          © {new Date().getFullYear()}, Built with
-          {` `}
-          <a href="https://www.gatsbyjs.org">Gatsby</a>
-        </footer>
+      <div className={styles.content}>
+          <Navbar noSpacer={noNavSpacer}/>
+          {children}
+          <footer>&copy; Kevin Kandlbinder | <a href="//kevink.dev/legal/about">Imprint</a> | <a href="//kevink.dev/legal/datasec">Data Protection</a> | <a href={"https://github.com/Unkn0wnCat/Unkn0wnCat.net"}>Source Code</a></footer>
      </div>
-    </>
  )
 }

--- a/src/components/layout.module.scss
+++ b/src/components/layout.module.scss
@ -0,0 +1,38 @@
+@import 'src/scss/variables';
+@import 'src/scss/base';
+
+.content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+
+  > * {
+    flex-shrink: 0;
+  }
+
+  > section {
+    width: 100%;
+    overflow: hidden;
+
+    > div {
+      width: 100%;
+      margin: 0 auto;
+      max-width: $layoutWidth;
+      padding: 20px $layoutPadding;
+    }
+  }
+
+  footer {
+    text-align: center;
+    background: #1c1c1c;
+    color: rgba(255, 255, 255, .5);
+    padding: 5px;
+
+    a {
+      color: inherit;
+      text-decoration: underline dotted currentcolor;
+    }
+  }
+}
+
--- a/src/components/navbar.js
+++ b/src/components/navbar.js
@ -0,0 +1,28 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+import { Link } from "gatsby"
+
+import styles from "./navbar.module.scss"
+
+function spacerStyle(noSpacer) {
+  if(noSpacer) {
+    return {height: 0};
+  }
+  return {};
+}
+
+const Navbar = ({ noSpacer = false }) => {
+  return (
+      <div className={styles.navBarPlaceholder} style={spacerStyle(noSpacer)}>
+          <div className={styles.navBar}>
+            <nav>
+              <Link to={"/"} className={styles.logo}>Unkn0wnCat.net</Link>
+              <Link to={"/videos"}>Videos</Link>
+            </nav>
+          </div>
+      </div>
+  )
+}
+
+export default Navbar
--- a/src/components/navbar.module.scss
+++ b/src/components/navbar.module.scss
@ -0,0 +1,45 @@
+@import 'src/scss/variables';
+@import 'src/scss/base';
+
+.navBarPlaceholder, .navBar {
+  width: 100%;
+  height: 50px;
+}
+
+.navBar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(#15151f, .99);
+  z-index: 900;
+  nav {
+    display: flex;
+    width: 100%;
+    max-width: $layoutWidth;
+    margin: auto;
+    padding: 0 $layoutPadding;
+
+
+    a {
+      color: white;
+      text-decoration: none;
+      line-height: 50px;
+
+      margin: 0 10px;
+      font-weight: 200;
+
+      &:first-child {
+        margin-left: 0;
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+
+      &.logo {
+        font-size: 1.2em;
+        font-weight: 400;
+        margin-right: auto;
+      }
+    }
+  }
+}
--- a/src/components/seo.js
+++ b/src/components/seo.js
@ -68,7 +68,7 @@ function SEO({ description, lang, meta, title }) {
          content: metaDescription,
        },
      ].concat(meta)}
-    />
+    ><link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;900&amp;family=Open+Sans@200:400&amp;display=swap" rel="stylesheet"/></Helmet>
  )
 }

--- a/src/images/Unkn0wnCat.net.png
+++ b/src/images/Unkn0wnCat.net.png
--- a/src/images/Unkn0wnCat.net.svg
+++ b/src/images/Unkn0wnCat.net.svg
@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><defs><style>.cls-1{font-size:232px;font-family:Montserrat-Black, Montserrat Black;font-weight:800;}.cls-1,.cls-6{fill:#fff;}.cls-2{fill:#1c1c1c;}.cls-2,.cls-3{stroke:#231f20;stroke-miterlimit:10;}.cls-3{fill:url(#radial-gradient);}.cls-4{mask:url(#mask);}.cls-5{fill:url(#linear-gradient);}.cls-6{font-size:72px;font-family:Roboto-Regular, Roboto;}</style><radialGradient id="radial-gradient" cx="256" cy="256" fx="-104.6341298541148" r="360.64" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1f0b74" stop-opacity="0.4"/><stop offset="1" stop-opacity="0"/></radialGradient><mask id="mask" x="0" y="0" width="512" height="512" maskUnits="userSpaceOnUse"><text class="cls-1" transform="translate(79.75 333.14)">UC</text></mask><linearGradient id="linear-gradient" y1="256" x2="512" y2="256" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f27121"/><stop offset="0.19" stop-color="#ee593c"/><stop offset="0.37" stop-color="#ea4750"/><stop offset="0.5" stop-color="#e94057"/><stop offset="1" stop-color="#9a3397"/></linearGradient></defs><title>Unkn0wnCat.net</title><rect class="cls-2" width="512" height="512"/><rect class="cls-3" width="512" height="512"/><g class="cls-4"><rect class="cls-5" width="512" height="512"/></g><text class="cls-6" transform="translate(353.83 385)">.net</text></svg>
--- a/src/images/assets/steam.jpg
+++ b/src/images/assets/steam.jpg
--- a/src/images/assets/twitch.jpg
+++ b/src/images/assets/twitch.jpg
--- a/src/images/assets/twitter.jpg
+++ b/src/images/assets/twitter.jpg
--- a/src/images/assets/youtube.jpg
+++ b/src/images/assets/youtube.jpg
--- a/src/images/gatsby-astronaut.png
+++ b/src/images/gatsby-astronaut.png
--- a/src/images/gatsby-icon.png
+++ b/src/images/gatsby-icon.png
--- a/src/pages/404.js
+++ b/src/pages/404.js
@ -1,13 +1,19 @@
 import React from "react"

+import { Link } from "gatsby";
+
 import Layout from "../components/layout"
 import SEO from "../components/seo"

 const NotFoundPage = () => (
  <Layout>
    <SEO title="404: Not found" />
-    <h1>NOT FOUND</h1>
-    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+    <section style={{flexGrow: 1}}>
+      <div>
+        <h1>404: NOT FOUND</h1>
+        <p>You just found a path we couldn't find a page for... :(<br/>Perhaps you should try going <Link to={"/"}>home</Link>.</p>
+      </div>
+    </section>
  </Layout>
 )

--- a/src/pages/index.js
+++ b/src/pages/index.js
@ -1,22 +1,80 @@
 import React from "react"
-import { Link } from "gatsby"

 import Layout from "../components/layout"
-import Image from "../components/image"
 import SEO from "../components/seo"

-const IndexPage = () => (
-  <Layout>
+import youtubeImage from "../images/assets/youtube.jpg"
+import twitchImage from "../images/assets/twitch.jpg"
+import twitterImage from "../images/assets/twitter.jpg"
+import steamImage from "../images/assets/steam.jpg"
+
+import styles from "./index.module.scss";
+
+const HtmlToReactParser = require('html-to-react').Parser;
+let parser = new HtmlToReactParser();
+
+const makeStyle = function(image) {
+  return {
+    backgroundImage: "linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url("+image+")"
+  };
+}
+
+const IndexPage = ({ data }) => (
+  <Layout noNavSpacer={true}>
    <SEO title="Home" />
-    <h1>Hi people</h1>
-    <p>Welcome to your new Gatsby site.</p>
-    <p>Now go build something great.</p>
-    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
-      <Image />
+    <div className={styles.hero}>
+      <div>
+        <span className={styles.title}>Unkn0wnCat</span>
+        <span className={styles.subtitle}>Gamer, Coder, Editor</span>
+      </div>
    </div>
-    <Link to="/page-2/">Go to page 2</Link> <br />
-    <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
+    <section>
+      <div>
+        <h1>About me</h1>
+
+        { parser.parse(data.allMarkdownRemark.edges[0].node.html) }
+      </div>
+    </section>
+    <section className={styles.social}>
+      <div>
+        <h1>Social</h1>
+        <div className={styles.socialGrid}>
+          <a href="https://www.youtube.com/channel/UCCoZp-6_P3CVFj4clQ6uaeg" rel={"noreferrer"} target={"_blank"} style={makeStyle(youtubeImage)}>
+            <span className={styles.handle}>Unkn0wnCat</span>
+            <span className={styles.service}>YouTube</span>
+          </a>
+          <a href="https://www.twitch.tv/thatunkn0wncat" rel={"noreferrer"} target={"_blank"} style={makeStyle(twitchImage)}>
+            <span className={styles.handle}>ThatUnkn0wnCat</span>
+            <span className={styles.service}>Twitch</span>
+          </a>
+          <a href="https://twitter.com/unkn0wnkevin" rel={"noreferrer"} target={"_blank"} style={makeStyle(twitterImage)}>
+            <span className={styles.handle}>@Unkn0wnKevin</span>
+            <span className={styles.service}>Twitter</span>
+          </a>
+          <a href="https://steamcommunity.com/id/unkn0wncat" rel={"noreferrer"} target={"_blank"} style={makeStyle(steamImage)}>
+            <span className={styles.handle}>Unkn0wnCat</span>
+            <span className={styles.service}>Steam</span>
+          </a>
+        </div>
+        <small>Images by <a href={"https://unsplash.com/photos/iKdQCIiSMlQ"} rel={"noreferrer"} target={"_blank"}>Wahid Khene</a>, <a href={"https://unsplash.com/photos/-oW0q0iOgBc"} rel={"noreferrer"} target={"_blank"}>Jackson David</a>, <a href={"https://unsplash.com/photos/gHrEvF7Ugb4"} rel={"noreferrer"} target={"_blank"}>Kon Karampelas</a> and <a href={"https://unsplash.com/photos/nCU4yq5xDEQ"} rel={"noreferrer"} target={"_blank"}>Mateo Vrbnjak</a> on Unsplash.</small>
+      </div>
+    </section>
  </Layout>
 )

+export const query = graphql`
+query {
+  allMarkdownRemark(
+    filter: {fileAbsolutePath: {regex: "/home_about\\\\.md$/"}}
+  ) {
+    edges {
+      node {
+        html
+      }
+    }
+  }
+}
+
+`
+
 export default IndexPage
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@ -0,0 +1,143 @@
+@import 'src/scss/variables';
+@import 'src/scss/base';
+
+.hero {
+  width: 100%;
+  height: 100vh;
+  min-height: 400px;
+  background: radial-gradient(ellipse at top left,rgba(#1f0ba6, .2313),transparent), radial-gradient(ellipse at bottom right,rgba(#4a0868, .1137),transparent);
+  background-color: #1c1c1c;
+  z-index: 200;
+
+  > div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: left;
+    background: linear-gradient(to right, #F27121, #E94057, #9A3397);
+    text-shadow: 0 0 10px 0 black;
+    padding: 5px;
+    background-clip: text;
+
+
+    > span {
+      display: block;
+      color: transparent;
+
+      &.title {
+        font-size: 4em;
+        font-family: $boldFont;
+        font-weight: 900;
+      }
+
+      &.subtitle {
+        font-size: 1.5em;
+        color: white;
+      }
+    }
+  }
+}
+
+@media(max-width: 600px) {
+  .hero {
+    font-size: .8em;
+    > div {
+      left: 0;
+      transform: translate(0, -50%);
+    }
+  }
+}
+
+@media(max-width: 420px) {
+  .hero {
+    > div {
+      > span.title {
+        font-size: 3em;
+      }
+    }
+  }
+}
+
+@media(max-width: 320px) {
+  .hero {
+    > div {
+      > span.title {
+        font-size: 2em;
+      }
+    }
+  }
+}
+
+.social {
+  text-align: left;
+
+  small {
+    display: block;
+    text-align: center;
+  }
+
+  .socialGrid {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    > a {
+      text-decoration: none;
+      width: 300px;
+      height: 200px;
+      background: white;
+      margin: 10px 20px;
+      border-radius: 5px;
+      display: flex;
+      overflow: hidden;
+      transform: scale(1);
+      transition: transform .25s;
+      flex-direction: column;
+
+      > span.handle {
+        color: white;
+        opacity: .5;
+        font-weight: 400;
+        font-size: 1em;
+        margin: auto 10px -5px auto;
+        transition: opacity .25s;
+        text-align: right;
+      }
+
+      > span.service {
+        color: white;
+        opacity: .5;
+        font-family: $boldFont;
+        font-weight: 900;
+        font-size: 3em;
+        text-align: right;
+        transition: opacity .25s;
+        margin: 0 10px 10px 0;
+      }
+
+      &:hover {
+        transform: scale(1.2);
+        > span {
+          opacity: 1;
+        }
+      }
+
+      /*&.youtube {
+        background-image: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(https://cdn.kevink.dev/ucnet/images/yt-1536240478700-b869070f9279.jpg);
+      }
+
+      &.twitch {
+        background-image: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(https://cdn.kevink.dev/ucnet/images/twitch.jpg);
+      }
+
+      &.twitter {
+        background-image: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(https://cdn.kevink.dev/ucnet/images/twitter-1543185377-aa2f876d1760.jpg);
+      }
+
+      &.steam {
+        background-image: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(https://cdn.kevink.dev/ucnet/images/steam-1538481199705-c710c4e965fc.jpg);
+      }*/
+    }
+  }
+}
--- a/src/pages/page-2.js
+++ b/src/pages/page-2.js
@ -1,16 +0,0 @@
-import React from "react"
-import { Link } from "gatsby"
-
-import Layout from "../components/layout"
-import SEO from "../components/seo"
-
-const SecondPage = () => (
-  <Layout>
-    <SEO title="Page two" />
-    <h1>Hi from the second page</h1>
-    <p>Welcome to page 2</p>
-    <Link to="/">Go back to the homepage</Link>
-  </Layout>
-)
-
-export default SecondPage
--- a/src/pages/using-typescript.tsx
+++ b/src/pages/using-typescript.tsx
@ -1,34 +0,0 @@
-// If you don't want to use TypeScript you can delete this file!
-import React from "react"
-import { PageProps, Link, graphql } from "gatsby"
-
-import Layout from "../components/layout"
-import SEO from "../components/seo"
-
-type DataProps = {
-  site: {
-    buildTime: string
-  }
-}
-
-const UsingTypescript: React.FC<PageProps<DataProps>> = ({ data, path }) => (
-  <Layout>
-    <SEO title="Using TypeScript" />
-    <h1>Gatsby supports TypeScript by default!</h1>
-    <p>This means that you can create and write <em>.ts/.tsx</em> files for your pages, components etc. Please note that the <em>gatsby-*.js</em> files (like gatsby-node.js) currently don't support TypeScript yet.</p>
-    <p>For type checking you'll want to install <em>typescript</em> via npm and run <em>tsc --init</em> to create a <em>.tsconfig</em> file.</p>
-    <p>You're currently on the page "{path}" which was built on {data.site.buildTime}.</p>
-    <p>To learn more, head over to our <a href="https://www.gatsbyjs.org/docs/typescript/">documentation about TypeScript</a>.</p>
-    <Link to="/">Go back to the homepage</Link>
-  </Layout>
-)
-
-export default UsingTypescript
-
-export const query = graphql`
-  {
-    site {
-      buildTime(formatString: "YYYY-MM-DD hh:mm a z")
-    }
-  }
-`
--- a/src/pages/videos.js
+++ b/src/pages/videos.js
@ -0,0 +1,52 @@
+import React from "react"
+
+import { Link, graphql } from "gatsby"
+
+import Layout from "../components/layout"
+import SEO from "../components/seo"
+
+import styles from "./videos.module.scss"
+
+const makeStyle = function(image) {
+  return {
+    backgroundImage: "linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .75)), url("+image+")"
+  };
+}
+
+const VideoPage = ({ data }) => (
+  <Layout>
+    <SEO title="Videos" />
+    <section style={{flexGrow: 1}} className={styles.videos}>
+      <div>
+        <h1>Videos</h1>
+        <div className={styles.videoGrid}>
+          {data.allYoutubeVideo.nodes.map((node, index) => (
+            <a href={"https://youtu.be/"+node.videoId} style={makeStyle(node.localThumbnail.publicURL)} target={"_blank"} rel={"noreferrer"}>
+              <span className={styles.title}>{node.title.replace(/ *\[[^)]*\] */g, "").replace(/\| Unkn0wnCat/g, "")}</span>
+              <span className={styles.timeAgo}>{node.publishedAt}</span>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  </Layout>
+)
+
+export const query = graphql`
+  query {
+    allYoutubeVideo {
+      nodes {
+        channelTitle
+        title
+        videoId
+        localThumbnail {
+          publicURL
+        }
+        description
+        publishedAt(fromNow: true)
+      }
+    }
+  }
+`;
+
+export default VideoPage
--- a/src/pages/videos.module.scss
+++ b/src/pages/videos.module.scss
@ -0,0 +1,59 @@
+$boxWidth: 300px;
+
+.videos {
+  .videoGrid {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    a {
+      width: $boxWidth;
+      height: $boxWidth / 16 * 9;
+      background-size: cover;
+      background-position: center;
+      color: white;
+      display: flex;
+      flex-direction: column;
+      text-decoration: none;
+      padding: 10px;
+      margin: 20px;
+      border-radius: 5px;
+      filter: grayscale(.5) brightness(.5);
+      transition: filter .25s, transform .25s, font-size .25s;
+
+      &:hover {
+        filter: grayscale(0) brightness(1);
+        transform: scale(1.5);
+        z-index: 100;
+        font-size: .75em;
+      }
+
+
+      .title {
+        display: block;
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-weight: bold;
+        margin-top: auto;
+      }
+
+      .timeAgo {
+        display: block;
+      }
+    }
+  }
+}
+
+@media(max-width: 1152px) {
+  .videos {
+    .videoGrid {
+      a {
+        &:hover {
+          transform: scale(1.25);
+        }
+      }
+    }
+  }
+}
--- a/src/scss/_base.scss
+++ b/src/scss/_base.scss
@ -0,0 +1,129 @@
+@use 'variables';
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: $normalFont;
+  background: #15151f;
+  color: white;
+}
+
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0 0 1em 0;
+  font-family: $boldFont;
+  font-weight: 600;
+}
+
+h1 {
+  font-size: 3em;
+}
+
+h2 {
+  font-size: 1.75em;
+}
+
+h3 {
+  font-size: 1.5em;
+}
+
+h4 {
+  font-size: 1.25em;
+}
+
+h5 {
+  font-size: 1.15em;
+}
+
+h6 {
+  font-size: 1em;
+  opacity: .5;
+}
+hr {
+  border: none;
+  border-bottom: 2px solid rgba(128, 128, 128, .5);
+}
+
+ul, ol {
+  padding-left: 1.5em;
+
+  > li {
+    padding-left: .5em;
+  }
+}
+
+a {
+  color: $primaryColor;
+  text-decoration: underline dotted currentcolor;
+}
+
+pre {
+  padding: 16px;
+  background: rgba(128, 128, 128, .15);
+  border-radius: 5px;
+  line-height: 1.5;
+  font-family: $monospaceFont;
+}
+
+table {
+  display: block;
+  width: 100%;
+  overflow: auto;
+  border-spacing: 0;
+  border-collapse: collapse;
+  tr {
+    border-top: thin solid rgba(128, 128, 128, .35);
+
+    &:nth-child(2n) {
+      background: rgba(128, 128, 128, .15);
+    }
+
+    th {
+      font-weight: 600;
+    }
+
+    td, th {
+      border: thin solid rgba(128, 128, 128, .35);
+      padding: 6px 14px;
+    }
+  }
+}
+
+blockquote {
+  margin-left: 0;
+  padding-left: 20px;
+  border-left: 3px solid rgba(128, 128, 128, .5);
+  opacity: .7;
+  font-style: oblique;
+
+  > .quote-source {
+    display: block;
+    margin-left: 1em;
+    font-style: oblique;
+    opacity: .75;
+
+    &::before {
+      content: "-- ";
+    }
+  }
+}
+
+dl {
+  dt {
+    font-weight: 700;
+  }
+  dd {
+    font-style: oblique;
+  }
+}
+
+
+#___gatsby, #gatsby-focus-wrapper, .content {
+  height: 100%;
+}
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@ -0,0 +1,6 @@
+$boldFont: 'Montserrat', sans-serif;
+$normalFont: 'Open Sans', sans-serif;
+$primaryColor: #F95067;
+$monospaceFont: monospace;
+$layoutWidth: 1100px;
+$layoutPadding: 10px;
--- a/workers-site/.cargo-ok
+++ b/workers-site/.cargo-ok
--- a/workers-site/.gitignore
+++ b/workers-site/.gitignore
@ -0,0 +1,2 @@
+node_modules
+worker
--- a/workers-site/index.js
+++ b/workers-site/index.js
@ -0,0 +1,80 @@
+import { getAssetFromKV, mapRequestToAsset } from '@cloudflare/kv-asset-handler'
+
+/**
+ * The DEBUG flag will do two things that help during development:
+ * 1. we will skip caching on the edge, which makes it easier to
+ *    debug.
+ * 2. we will return an error message on exception in your Response rather
+ *    than the default 404.html page.
+ */
+const DEBUG = false
+
+addEventListener('fetch', event => {
+  try {
+    event.respondWith(handleEvent(event))
+  } catch (e) {
+    if (DEBUG) {
+      return event.respondWith(
+        new Response(e.message || e.toString(), {
+          status: 500,
+        }),
+      )
+    }
+    event.respondWith(new Response('Internal Error', { status: 500 }))
+  }
+})
+
+async function handleEvent(event) {
+  const url = new URL(event.request.url)
+  let options = {}
+
+  /**
+   * You can add custom logic to how we fetch your assets
+   * by configuring the function `mapRequestToAsset`
+   */
+  // options.mapRequestToAsset = handlePrefix(/^\/docs/)
+
+  try {
+    if (DEBUG) {
+      // customize caching
+      options.cacheControl = {
+        bypassCache: true,
+      }
+    }
+    return await getAssetFromKV(event, options)
+  } catch (e) {
+    // if an error is thrown try to serve the asset at 404.html
+    if (!DEBUG) {
+      try {
+        let notFoundResponse = await getAssetFromKV(event, {
+          mapRequestToAsset: req => new Request(`${new URL(req.url).origin}/404.html`, req),
+        })
+
+        return new Response(notFoundResponse.body, { ...notFoundResponse, status: 404 })
+      } catch (e) {}
+    }
+
+    return new Response(e.message || e.toString(), { status: 500 })
+  }
+}
+
+/**
+ * Here's one example of how to modify a request to
+ * remove a specific prefix, in this case `/docs` from
+ * the url. This can be useful if you are deploying to a
+ * route on a zone, or if you only want your static content
+ * to exist at a specific path.
+ */
+function handlePrefix(prefix) {
+  return request => {
+    // compute the default (e.g. / -> index.html)
+    let defaultAssetKey = mapRequestToAsset(request)
+    let url = new URL(defaultAssetKey.url)
+
+    // strip the prefix from the path for lookup
+    url.pathname = url.pathname.replace(prefix, '/')
+
+    // inherit all other props from the default request
+    return new Request(url.toString(), defaultAssetKey)
+  }
+}
--- a/workers-site/package-lock.json
+++ b/workers-site/package-lock.json
@ -0,0 +1,33 @@
+{
+  "name": "worker",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@cloudflare/kv-asset-handler": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/@cloudflare/kv-asset-handler/-/kv-asset-handler-0.0.11.tgz",
+      "integrity": "sha512-D2kGr8NF2Er//Mx0c4+8FtOHuLrnwOlpC48TbtyxRSegG/Js15OKoqxxlG9BMUj3V/YSqtN8bUU6pjaRlsoSqg==",
+      "requires": {
+        "@cloudflare/workers-types": "^2.0.0",
+        "@types/mime": "^2.0.2",
+        "mime": "^2.4.6"
+      }
+    },
+    "@cloudflare/workers-types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-2.0.0.tgz",
+      "integrity": "sha512-SFUPQzR5aV2TBLP4Re+xNX5KfAGArcRGA44OLulBDnfblEf3J+6kFvdJAQwFhFpqru3wImwT1cX0wahk6EeWTw=="
+    },
+    "@types/mime": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.2.tgz",
+      "integrity": "sha512-4kPlzbljFcsttWEq6aBW0OZe6BDajAmyvr2xknBG92tejQnvdGtT9+kXSZ580DqpxY9qG2xeQVF9Dq0ymUTo5Q=="
+    },
+    "mime": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz",
+      "integrity": "sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA=="
+    }
+  }
+}
--- a/workers-site/package.json
+++ b/workers-site/package.json
@ -0,0 +1,12 @@
+{
+  "private": true,
+  "name": "worker",
+  "version": "1.0.0",
+  "description": "A template for kick starting a Cloudflare Workers project",
+  "main": "index.js",
+  "author": "Ashley Lewis <ashleymichal@gmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "@cloudflare/kv-asset-handler": "~0.0.11"
+  }
+}
--- a/wrangler.toml
+++ b/wrangler.toml
@ -0,0 +1,9 @@
+name = "unkn0wncat-net"
+type = "webpack"
+account_id = "f22a1f53518621246180c8f74f7e02e3"
+zone_id = "3e40b0d0fa5369e86c2887e981b9bd80"
+route = "unkn0wncat.net/*"
+
+[site]
+bucket = "./public"
+entry-point = "workers-site"
				`@ -0,0 +1 @@`
				<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><defs><style>.cls-1{font-size:232px;font-family:Montserrat-Black, Montserrat Black;font-weight:800;}.cls-1,.cls-6{fill:#fff;}.cls-2{fill:#1c1c1c;}.cls-2,.cls-3{stroke:#231f20;stroke-miterlimit:10;}.cls-3{fill:url(#radial-gradient);}.cls-4{mask:url(#mask);}.cls-5{fill:url(#linear-gradient);}.cls-6{font-size:72px;font-family:Roboto-Regular, Roboto;}</style><radialGradient id="radial-gradient" cx="256" cy="256" fx="-104.6341298541148" r="360.64" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1f0b74" stop-opacity="0.4"/><stop offset="1" stop-opacity="0"/></radialGradient><mask id="mask" x="0" y="0" width="512" height="512" maskUnits="userSpaceOnUse"><text class="cls-1" transform="translate(79.75 333.14)">UC</text></mask><linearGradient id="linear-gradient" y1="256" x2="512" y2="256" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f27121"/><stop offset="0.19" stop-color="#ee593c"/><stop offset="0.37" stop-color="#ea4750"/><stop offset="0.5" stop-color="#e94057"/><stop offset="1" stop-color="#9a3397"/></linearGradient></defs><title>Unkn0wnCat.net</title><rect class="cls-2" width="512" height="512"/><rect class="cls-3" width="512" height="512"/><g class="cls-4"><rect class="cls-5" width="512" height="512"/></g><text class="cls-6" transform="translate(353.83 385)">.net</text></svg>