diff --git a/assets/_mq.scss b/assets/_mq.scss
deleted file mode 100644
index 022bc30..0000000
--- a/assets/_mq.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-// 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';
diff --git a/assets/global.scss b/assets/global.scss
index e8df5ec..db24f1e 100644
--- a/assets/global.scss
+++ b/assets/global.scss
@@ -1,59 +1,27 @@
-html, body, .full-width, #__nuxt, #__layout {
+@import "./colors";
+
+html, body, #__nuxt, #__layout {
   width: 100%;
-}
-
-.full-vp-width {
-  width: 100vw;
-}
-
-html, body, .full-height, #__nuxt, #__layout {
   height: 100%;
-}
-
-.full-vp-height {
-  height: 100vh;
-}
-
-div, section {
-  width: inherit;
-  height: inherit;
+  overflow-x: hidden;
 }
 
 body {
   font-family: "Raleway", sans-serif;
   font-size: 16px;
-  word-spacing: 1px;
 
-  position: relative;
-
-  user-select: none;
+  background-color: $c-background;
 }
 
 *,
-*:before,
-*:after {
+*::before,
+*::after {
   box-sizing: border-box;
   margin: 0;
-}
-
-.vertically-centered-container {
-  display: table;
-}
-
-.vertically-centered {
-  display: table-cell;
-  vertical-align: middle;
-
-  height: fit-content;
-}
-
-.horizontally-centered {
-  margin: 0 auto;
-
-  width: fit-content;
+  padding: 0;
 }
 
 a {
-  color: #25acd7;
+  color: $c-link;
   text-decoration: none;
 }
diff --git a/components/Logo.vue b/components/CtexxxLogo.vue
similarity index 80%
rename from components/Logo.vue
rename to components/CtexxxLogo.vue
index 55b1399..bba504f 100644
--- a/components/Logo.vue
+++ b/components/CtexxxLogo.vue
@@ -10,36 +10,35 @@
 </template>
 
 <script>
-  import { mapState } from "vuex";
   import _debounce from "lodash.debounce";
 
   const debounceLogoText = _debounce((self, newValue) => {
     self.debouncedLogoText = newValue;
-  }, 100);
+  }, 200);
 
   export default {
-    name: "Logo",
+    name: "CtexxxLogo",
     created() {
-      this.debouncedLogoText = this.$store.state.logoText;
+      this.debouncedLogoText = this.text || "ctexxx";
+    },
+    props: {
+      text: String
     },
     data() {
       return {
         debouncedLogoText: ""
       }
     },
-    computed: {
-      ...mapState(["logoText"])
-    },
     watch: {
-      logoText(newValue) {
-        debounceLogoText(this, newValue);
+      text(newValue) {
+        debounceLogoText(this, newValue || "ctexxx");
       }
     }
   };
 </script>
 
 <style scoped lang="scss">
-  @import "~@/assets/_mq.scss";
+  @import "~@/assets/_responsive";
 
   .slide-vertical-enter-active {
     transition: all 0.5s ease-out;
@@ -65,6 +64,8 @@
   }
 
   .logo {
+    user-select: none;
+
     margin: 0 auto;
     width: fit-content;
 
@@ -76,14 +77,12 @@
       color: #c34545;
       text-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
 
-      @include mq($from: tablet) {
+      @include desktop {
         font-size: 12em;
       }
     }
 
     & > .underline {
-      transition: width 1s ease-in-out;
-
       transform: translateY(-0.7em);
 
       height: 3px;
@@ -91,11 +90,13 @@
       background: white;
       box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.75);
 
-      @include mq($from: tablet) {
+      @include desktop {
         transform: translateY(-2em);
 
         height: 5px;
       }
+
+      margin: 0 auto;
     }
   }
 </style>
diff --git a/components/Project.vue b/components/Project.vue
deleted file mode 100644
index 9ec8407..0000000
--- a/components/Project.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <div class="project horizontally-centered">
-    <h2>{{ title }}</h2>
-    <p>
-      <template v-for="(name, index) in Object.keys(links)">
-        <a :href="links[name]" rel="noopener">
-          {{ name }}
-        </a>
-        <template v-if="index + 1 < Object.keys(links).length"> | </template>
-      </template>
-    </p>
-    <div class="line"></div>
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: "Project",
-    props: {
-      title: String,
-      links: Object
-    }
-  };
-</script>
-
-<style scoped lang="scss">
-  @import "~@/assets/_mq.scss";
-
-  .project {
-    width: 75vw;
-
-    h2 {
-      font-size: 40px;
-
-      @include mq($from: tablet) {
-        font-size: 50px;
-      }
-
-      margin-bottom: 10px;
-    }
-
-    .line {
-      width: 150px;
-      height: 1px;
-      background-color: white;
-      margin: 5px auto 10px;
-    }
-  }
-</style>
diff --git a/components/ScrollDownArrow.vue b/components/ScrollDownArrow.vue
deleted file mode 100644
index 3895af4..0000000
--- a/components/ScrollDownArrow.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <div class="scroll-down-arrow">
-    <div id="arrow-container" @click="onClick">
-      <div id="left-line"></div>
-      <div id="right-line"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: "ScrollDownArrow",
-    mounted() {
-      this.$nextTick(() => {
-        this.elm = document.querySelector(this.to);
-
-        if(!this.elm) {
-          throw new Error("No matching element found");
-        }
-      });
-    },
-    data: () => ({
-      elm: null
-    }),
-    props: {
-      to: String,
-      container: String
-    },
-    methods: {
-      onClick() {
-        const container = this.container ? document.querySelector(this.container) : window;
-
-        container.scrollTo({
-          'behavior': "smooth",
-          'left': 0,
-          'top': this.elm.offsetTop
-        });
-      }
-    }
-  };
-</script>
-
-<style scoped lang="scss">
-  .scroll-down-arrow {
-    height: 40px;
-
-    position: absolute;
-    bottom: 10px;
-    right: 0;
-    left: 0;
-
-    display: table;
-    margin: 0 auto;
-
-    animation: moveVertical 2s alternate linear infinite;
-  }
-
-  #arrow-container {
-    position: relative;
-
-    margin: 0 auto;
-    width: fit-content;
-  }
-
-  #left-line, #right-line {
-    width: 20px;
-    height: 2px;
-    background-color: white;
-    display: inline-block;
-  }
-
-  #left-line {
-    transform: rotate(45deg) translateX(9px);
-  }
-
-  #right-line {
-    transform: rotate(-45deg) translateX(-9px);
-  }
-
-  @keyframes moveVertical {
-    0% {
-      transform: translateY(-10px);
-    }
-
-    100% {
-      transform: translateY(0);
-    }
-  }
-</style>
diff --git a/components/SocialIcon.vue b/components/SocialIcon.vue
index e3a1ae3..9655eae 100644
--- a/components/SocialIcon.vue
+++ b/components/SocialIcon.vue
@@ -1,8 +1,5 @@
 <template>
-  <a id="root" rel="noopener" :href="`https://go.ctexxx.dev/${name}`" target="_blank"
-     @mouseenter="$store.commit('setLogoText', username)"
-     @mouseleave="$store.commit('resetLogoText', username)"
-  >
+  <a id="root" rel="noopener" :href="`https://go.ctexxx.dev/${name}`" target="_blank">
     <div class="box" :style="{'background-color': '#' + simpleIcon.hex}">
       <div class="icon" v-html="simpleIcon.svg" :class="{inverted: invert}">
       </div>
@@ -34,7 +31,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "~@/assets/_mq";
+  @import "~@/assets/_responsive";
 
   #root {
     display: inline-block;
@@ -44,7 +41,7 @@
     height: 50px;
     width: 50px;
 
-    @include mq($from: tablet) {
+    @include desktop {
       height: 70px;
       width: 70px;
     }
diff --git a/layouts/default.vue b/layouts/default.vue
index 55f9299..a151ab4 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,7 +1,5 @@
 <template>
-  <div class="full-height full-width">
-    <nuxt/>
-  </div>
+  <nuxt/>
 </template>
 
 <style lang="scss">
diff --git a/pages/index.vue b/pages/index.vue
index 65281a6..8b0675d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,98 +1,62 @@
 <template>
   <div id="index">
-    <section class="section section-hero vertically-centered-container">
-      <div class="vertically-centered">
-        <Logo/>
-        <div class="horizontally-centered">
-          <SocialIcon name="github" username="ctexxx" invert/>
-          <SocialIcon name="twitter" username="cte3x" invert/>
-          <SocialIcon name="instagram" username="cte3x" invert/>
-          <SocialIcon name="keybase" username="ctexxx"/>
-        </div>
-      </div>
-      <ScrollDownArrow to=".section-1" container="#index"/>
-    </section>
-    <section class="section section-1">
-      <div class="vertically-centered-container">
-        <div class="vertically-centered">
-          <div class="horizontally-centered">
-            <h1>Hi, I’m Moritz</h1>
-            <p>
-              I create code and photos.
-            </p>
-          </div>
-          <div class="projects">
-            <div class="horizontally-centered">
-              <Project
-                title="pzl"
-                :links="{GitHub: 'https://github.com/ctexxx/pzl', NPM: 'https://www.npmjs.com/package/@ctexxx/pzl'}"
-              >
-                A pretty zero-configuration console logger
-              </Project>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
+    <CtexxxLogo :text="logoText"/>
+    <div class="horizontally-centered">
+      <SocialIcon
+        v-for="account in socialMedia" :key="account.name"
+        :name="account.name" :username="account.username" :invert="!!account.invertLogoColor"
+        @mouseover.native="logoText = account.username" @mouseleave.native="logoText = null"
+      />
+    </div>
   </div>
 </template>
 
 <script>
-  import Logo from "@/components/Logo";
+  import CtexxxLogo from "@/components/CtexxxLogo";
   import SocialIcon from "@/components/SocialIcon";
-  import ScrollDownArrow from "@/components/ScrollDownArrow";
-  import Project from "@/components/Project";
+
+  const socialMedia = [
+    {
+      name: "github",
+      username: "ctexxx",
+      invertLogoColor: true
+    },
+    {
+      name: "twitter",
+      username: "cte3x",
+      invertLogoColor: true
+    },
+    {
+      name: "instagram",
+      username: "cte3x",
+      invertLogoColor: true
+    },
+    {
+      name: "keybase",
+      username: "ctexxx"
+    }
+  ];
 
   export default {
     name: "index",
-    components: { Project, ScrollDownArrow, SocialIcon, Logo }
+    components: { SocialIcon, CtexxxLogo },
+    data: () => ({
+      logoText: "ctexxx",
+      socialMedia
+    })
   };
 </script>
 
 <style scoped lang="scss">
-  @import "~@/assets/_mq.scss";
+  @import "~@/assets/_responsive.scss";
 
   #index {
-    scroll-snap-type: y mandatory;
+    height: 100%;
 
-    overflow-y: scroll;
-  }
-
-  .section {
-    position: relative;
-
-    scroll-snap-align: start;
-  }
-
-  .section-hero {
-    background-color: #1C1C1C;
-  }
-
-  .section-1 {
-    background-color: #202020;
-    color: white;
-
-    padding: 20px;
-
-    h1 {
-      font-size: 50px;
-
-      @include mq($from: tablet) {
-        font-size: 80px;
-      }
-    }
-
-    p {
-      font-size: 18px;
-
-      @include mq($from: tablet) {
-        font-size: 20px;
-      }
-    }
-
-    .projects {
-      text-align: center;
-      margin-top: 100px;
-    }
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
   }
 </style>
diff --git a/store/index.js b/store/index.js
index 8d95d92..0a0cee5 100644
--- a/store/index.js
+++ b/store/index.js
@@ -1,12 +1,7 @@
 export const state = () => ({
-  logoText: "ctexxx"
+
 });
 
 export const mutations = {
-  setLogoText(state, value) {
-    state.logoText = value;
-  },
-  resetLogoText(state) {
-    state.logoText = "ctexxx";
-  }
+
 };