add logo and links to social networks

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,84 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE
+.idea
+
+# Service worker
+sw.*

README.md

@@ -1 +0,0 @@
-ctexxx.github.io

aliases.webpack.config.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+module.exports = {
+  resolve: {
+    extensions: ['.js', '.json', '.vue'],
+    root: path.resolve(__dirname),
+    alias: {
+      '@': path.resolve(__dirname),
+      '~': path.resolve(__dirname),
+    },
+  },
+};

assets/README.md

@@ -0,0 +1,7 @@
+# ASSETS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

assets/_mq.scss

@@ -0,0 +1,26 @@
+// To enable support for browsers that do not support @media queries,
+// (IE <= 8, Firefox <= 3, Opera <= 9) set $mq-responsive to false
+// Create a separate stylesheet served exclusively to these browsers,
+// meaning @media queries will be rasterized, relying on the cascade itself
+$mq-responsive: true;
+
+// Name your breakpoints in a way that creates a ubiquitous language
+// across team members. It will improve communication between
+// stakeholders, designers, developers, and testers.
+$mq-breakpoints: (
+  mobile:  320px,
+  tablet:  740px,
+  desktop: 980px,
+  wide:    1300px,
+
+  // Tweakpoints
+  mobileLandscape: 480px
+);
+
+// If you want to display the currently active breakpoint in the top
+// right corner of your site during development, add the breakpoints
+// to this list, ordered by width. For example: (mobile, tablet, desktop).
+$mq-show-breakpoints: (mobile, mobileLandscape, tablet, desktop, wide);
+
+// With webpack (and boilerplates such as create-react-app)
+@import '~sass-mq';

assets/global.scss

@@ -0,0 +1,24 @@
+html, body, .full-width, #__nuxt, #__layout {
+  width: 100%;
+}
+
+html, body, .full-height, #__nuxt, #__layout {
+  height: 100%;
+}
+
+body {
+  font-family: "Raleway", sans-serif;
+  font-size: 16px;
+  word-spacing: 1px;
+
+  position: relative;
+
+  user-select: none;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+  margin: 0;
+}

components/Logo.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="full-width">
+    <transition name="slide-vertical" mode="out-in">
+      <div class="logo" :key="debouncedLogoText">
+        <span class="text">{{ debouncedLogoText }}</span>
+        <div class="underline full-width"></div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+  import { mapState } from "vuex";
+  import _debounce from "lodash.debounce";
+
+  const debounceLogoText = _debounce((self, newValue) => {
+    self.debouncedLogoText = newValue;
+  }, 100);
+
+  export default {
+    name: "Logo",
+    created() {
+      this.debouncedLogoText = this.$store.state.logoText;
+    },
+    data() {
+      return {
+        debouncedLogoText: ""
+      }
+    },
+    computed: {
+      ...mapState(["logoText"])
+    },
+    watch: {
+      logoText(newValue) {
+        debounceLogoText(this, newValue);
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  @import "~@/assets/_mq.scss";
+
+  .slide-vertical-enter-active {
+    transition: all 0.5s ease-out;
+  }
+
+  .slide-vertical-leave-active {
+    transition: all 0.5s ease-in;
+  }
+
+  .slide-vertical-enter-to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  .slide-vertical-enter {
+    transform: translateY(-100px);
+    opacity: 0;
+  }
+
+  .slide-vertical-leave-to {
+    transform: translateY(100px);
+    opacity: 0;
+  }
+
+  .logo {
+    margin: 0 auto;
+    width: fit-content;
+
+    & > .text {
+      font-family: 'Montserrat Alternates', sans-serif;
+
+      font-size: 5em;
+
+      color: #c34545;
+      text-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
+
+      @include mq($from: tablet) {
+        font-size: 12em;
+      }
+    }
+
+    & > .underline {
+      transition: width 1s ease-in-out;
+
+      transform: translateY(-0.7em);
+
+      height: 3px;
+
+      background: white;
+      box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.75);
+
+      @include mq($from: tablet) {
+        transform: translateY(-2em);
+
+        height: 5px;
+      }
+    }
+  }
+</style>

components/README.md

@@ -0,0 +1,7 @@
+# COMPONENTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+The components directory contains your Vue.js Components.
+
+_Nuxt.js doesn't supercharge these components._

components/SocialIcon.vue

@@ -0,0 +1,98 @@
+<template>
+  <a id="root" rel="noopener" :href="to" target="_blank"
+     @mouseenter="$store.commit('setLogoText', username)"
+     @mouseleave="$store.commit('resetLogoText', username)"
+  >
+    <div class="box" :style="{'background-color': '#' + simpleIcon.hex}">
+      <div class="icon" v-html="simpleIcon.svg" :class="{inverted: invert}">
+      </div>
+    </div>
+    <span class="title">{{ simpleIcon.title }}</span>
+  </a>
+</template>
+
+<script>
+  export default {
+    name: "SocialIcon",
+    props: {
+      icon: String,
+      to: String,
+      username: String,
+      invert: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        simpleIcon: require(`simple-icons/icons/${this.icon}`)
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  @import "~@/assets/_mq";
+
+  #root {
+    display: inline-block;
+
+    margin: 5px;
+    text-decoration: none;
+    height: 50px;
+    width: 50px;
+
+    @include mq($from: tablet) {
+      height: 70px;
+      width: 70px;
+    }
+
+    .box {
+      border-radius: 50px;
+      padding: 10px;
+      height: 100%;
+      width: 100%;
+
+      transition: 0.5s ease-out;
+      transform: scale(1);
+
+      .icon {
+        height: 100%;
+        width: auto;
+
+        // Hide tooltips
+        pointer-events: none;
+
+        &.inverted {
+          filter: invert(1);
+        }
+      }
+    }
+
+    .title {
+      display: inline-block;
+      white-space: nowrap;
+      width: 200%;
+      text-align: center;
+
+      opacity: 0;
+      transition: opacity 0.5s ease-out;
+
+      color: #ffffff;
+
+      position: relative;
+      top: 13px;
+      left: -50%;
+    }
+
+    &:hover {
+      .box {
+        transform: scale(1.1);
+      }
+
+      .title {
+        opacity: 1;
+      }
+    }
+  }
+</style>

layouts/README.md

@@ -0,0 +1,7 @@
+# LAYOUTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your Application Layouts.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).

layouts/default.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="full-height full-width">
+    <nuxt/>
+  </div>
+</template>
+
+<style lang="scss">
+
+</style>

middleware/README.md

@@ -0,0 +1,8 @@
+# MIDDLEWARE
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your application middleware.
+Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).

nuxt.config.js

@@ -0,0 +1,61 @@
+module.exports = {
+  mode: 'spa',
+
+  /*
+  ** Headers of the page
+  */
+  head: {
+    title: "ctexxx",
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: "ctexxx" }
+    ],
+    link: [
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Montserrat+Alternates|Raleway'}
+    ]
+  },
+
+  /*
+  ** Customize the progress-bar color
+  */
+  loading: { color: '#c34545' },
+
+  /*
+  ** Global CSS
+  */
+  css: [
+    '@/assets/global.scss'
+  ],
+
+  /*
+  ** Plugins to load before mounting the App
+  */
+  plugins: [
+  ],
+
+  /*
+  ** Nuxt.js modules
+  */
+  modules: [,
+    '@nuxtjs/pwa'
+  ],
+
+  /*
+  ** Build configuration
+  */
+  build: {
+    /*
+    ** You can extend webpack config here
+    */
+    extend(config, ctx) {
+      
+    },
+    postcss: [
+      require("autoprefixer")({
+        browsers: ["> 5%"]
+      })
+    ]
+  }
+};

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "ctexxx.github.io",
+  "author": "Moritz Ruth",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate"
+  },
+  "dependencies": {
+    "@nuxtjs/pwa": "^2.6.0",
+    "cross-env": "^5.2.0",
+    "nuxt": "^2.4.0",
+    "simple-icons": "^1.9.20"
+  },
+  "devDependencies": {
+    "autoprefixer": "^9.4.7",
+    "file-loader": "^3.0.1",
+    "lodash.debounce": "^4.0.8",
+    "node-sass": "^4.11.0",
+    "nodemon": "^1.18.9",
+    "postcss": "^7.0.14",
+    "sass-loader": "^7.1.0",
+    "sass-mq": "^5.0.0"
+  }
+}

pages/README.md

@@ -0,0 +1,6 @@
+# PAGES
+
+This directory contains your Application Views and Routes.
+The framework reads all the `*.vue` files inside this directory and creates the router of your application.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).

pages/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="hero full-width">
+    <div id="centered">
+      <Logo/>
+
+      <div id="social-icons">
+        <SocialIcon icon="github" to="https://github.com/ctexxx" username="ctexxx" invert/>
+        <SocialIcon icon="twitter" to="https://twitter.com/cte3x" username="cte3x" invert/>
+        <SocialIcon icon="instagram" to="https://instagram.com/cte3x" username="cte3x" invert/>
+        <SocialIcon icon="keybase" to="https://keybase.io/ctexxx" username="cte3x"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Logo from "../components/Logo";
+  import SocialIcon from "@/components/SocialIcon";
+
+  export default {
+    name: "index",
+    components: { SocialIcon, Logo }
+  };
+</script>
+
+<style scoped lang="scss">
+  .hero {
+    height: 100vh;
+    background-color: #1C1C1C;
+
+    display: table;
+  }
+
+  #centered {
+    display: table-cell;
+    vertical-align: middle;
+  }
+
+  #social-icons {
+    margin: 0 auto;
+    width: fit-content;
+  }
+</style>

plugins/README.md

@@ -0,0 +1,7 @@
+# PLUGINS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).

static/README.md

@@ -0,0 +1,11 @@
+# STATIC
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your static files.
+Each file inside this directory is mapped to `/`.
+Thus you'd want to delete this README.md before deploying to production.
+
+Example: `/static/robots.txt` is mapped as `/robots.txt`.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).

store/README.md

@@ -0,0 +1,10 @@
+# STORE
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your Vuex Store files.
+Vuex Store option is implemented in the Nuxt.js framework.
+
+Creating a file in this directory automatically activates the option in the framework.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).

store/index.js

@@ -0,0 +1,12 @@
+export const state = () => ({
+  logoText: "ctexxx"
+});
+
+export const mutations = {
+  setLogoText(state, value) {
+    state.logoText = value;
+  },
+  resetLogoText(state) {
+    state.logoText = "ctexxx";
+  }
+};