From b20150c78298ceb1e0031798d3a8dc6e02b8e41e Mon Sep 17 00:00:00 2001
From: Moritz Ruth <moritzruthcode@gmail.com>
Date: Sun, 3 Mar 2019 13:01:56 +0100
Subject: [PATCH] add projects section and fix firefox CSS prefixing

---
 assets/global.scss             |  35 ++++++++++
 components/ScrollDownArrow.vue |  89 +++++++++++++++++++++++++
 nuxt.config.js                 |   5 +-
 package.json                   |   5 +-
 pages/index.vue                | 114 ++++++++++++++++++++++++++-------
 yarn.lock                      |  94 +++++++++++++++++++++++++--
 6 files changed, 311 insertions(+), 31 deletions(-)
 create mode 100644 components/ScrollDownArrow.vue

diff --git a/assets/global.scss b/assets/global.scss
index 9b762e7..e8df5ec 100644
--- a/assets/global.scss
+++ b/assets/global.scss
@@ -2,10 +2,23 @@ html, body, .full-width, #__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;
+}
+
 body {
   font-family: "Raleway", sans-serif;
   font-size: 16px;
@@ -22,3 +35,25 @@ body {
   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;
+}
+
+a {
+  color: #25acd7;
+  text-decoration: none;
+}
diff --git a/components/ScrollDownArrow.vue b/components/ScrollDownArrow.vue
new file mode 100644
index 0000000..3895af4
--- /dev/null
+++ b/components/ScrollDownArrow.vue
@@ -0,0 +1,89 @@
+<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/nuxt.config.js b/nuxt.config.js
index 9454cb4..46b2734 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -38,7 +38,8 @@ module.exports = {
   /*
   ** Nuxt.js modules
   */
-  modules: [,
+  modules: [
+    "@nuxtjs/axios",
     '@nuxtjs/pwa'
   ],
 
@@ -54,7 +55,7 @@ module.exports = {
     },
     postcss: [
       require("autoprefixer")({
-        browsers: ["> 5%"]
+        browsers: ["last 5 versions"]
       })
     ]
   }
diff --git a/package.json b/package.json
index cd7fbcb..2e01772 100644
--- a/package.json
+++ b/package.json
@@ -10,12 +10,13 @@
     "deploy": "push-dir --dir=dist --branch=master --cleanup"
   },
   "dependencies": {
+    "@nuxtjs/axios": "^5.3.6",
     "@nuxtjs/pwa": "^2.6.0",
     "cross-env": "^5.2.0",
+    "lodash.debounce": "^4.0.8",
     "nuxt": "^2.4.0",
-    "simple-icons": "^1.9.20",
     "sass-mq": "^5.0.0",
-    "lodash.debounce": "^4.0.8"
+    "simple-icons": "^1.9.20"
   },
   "devDependencies": {
     "autoprefixer": "^9.4.7",
diff --git a/pages/index.vue b/pages/index.vue
index ffb74b5..0bf7016 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,43 +1,111 @@
 <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 id="index">
+    <section class="section section-hero vertically-centered-container">
+      <div class="vertically-centered">
+        <Logo/>
+        <div class="horizontally-centered">
+          <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>
+      <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">
+              <h2>pzl</h2>
+              <p>
+                <a href="https://github.com/ctexxx/pzl" rel="noopener">GitHub</a>
+                 |
+                <a href="https://www.npmjs.com/package/@ctexxx/pzl" rel="noopener">NPM</a></p>
+              A pretty zero-configuration console logger
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
 <script>
-  import Logo from "../components/Logo";
+  import Logo from "@/components/Logo";
   import SocialIcon from "@/components/SocialIcon";
+  import ScrollDownArrow from "@/components/ScrollDownArrow";
 
   export default {
     name: "index",
-    components: { SocialIcon, Logo }
+    components: { ScrollDownArrow, SocialIcon, Logo }
   };
 </script>
 
 <style scoped lang="scss">
-  .hero {
-    height: 100vh;
+  @import "~@/assets/_mq.scss";
+
+  #index {
+    scroll-snap-type: y mandatory;
+
+    overflow-y: scroll;
+  }
+
+  .section {
+    position: relative;
+
+    scroll-snap-align: start;
+  }
+
+  .section-hero {
     background-color: #1C1C1C;
-
-    display: table;
   }
 
-  #centered {
-    display: table-cell;
-    vertical-align: middle;
-  }
+  .section-1 {
+    background-color: #202020;
+    color: white;
 
-  #social-icons {
-    margin: 0 auto;
-    width: fit-content;
+    padding: 20px;
+
+    h1 {
+      font-size: 50px;
+
+      @include mq($from: tablet) {
+        font-size: 80px;
+      }
+    }
+
+    h2 {
+      font-size: 35px;
+
+      @include mq($from: tablet) {
+        font-size: 50px;
+      }
+
+      margin-bottom: 10px;
+    }
+
+    p {
+      font-size: 18px;
+
+      @include mq($from: tablet) {
+        font-size: 20px;
+      }
+    }
+
+    .projects {
+      text-align: center;
+      margin-top: 100px;
+
+      .horizontally-centered {
+        width: 75%;
+      }
+    }
   }
 </style>
diff --git a/yarn.lock b/yarn.lock
index e067001..f0521a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1142,6 +1142,16 @@
     webpack-node-externals "^1.7.2"
     webpackbar "^3.1.5"
 
+"@nuxtjs/axios@^5.3.6":
+  version "5.3.6"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/axios/-/axios-5.3.6.tgz#1bad5af6e30977809cddd5248dd3b41271d1dc14"
+  integrity sha512-kxtiHW1QCYHaztKEkBnqH/GQoQoVubHdBWMC9+X0cVaA3AwOFsGI3Ef4/dSX8coSto7D+nV8LH3rVjbaFT+KUg==
+  dependencies:
+    "@nuxtjs/proxy" "^1.3.0"
+    axios "^0.18.0"
+    axios-retry "^3.1.1"
+    consola "^1.4.4"
+
 "@nuxtjs/icon@^2.6.0":
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/@nuxtjs/icon/-/icon-2.6.0.tgz#65295ee059794f01e41a52c4141c06e898e798bc"
@@ -1163,6 +1173,14 @@
   resolved "https://registry.yarnpkg.com/@nuxtjs/meta/-/meta-2.6.0.tgz#cc8fd2a019fb3e2e1feaa78abefee3a6a6aed477"
   integrity sha512-DrH+kmFEEKxjtZjRi2R0hfHDni+Ba2v4a47V5TwftLeshP31no9KKc1Ae6whLB+X+caC1tv3lR5CHbFmBgLC7Q==
 
+"@nuxtjs/proxy@^1.3.0":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/proxy/-/proxy-1.3.2.tgz#ca16e4b01e75917a01231d4b7c414f44802dd2b2"
+  integrity sha512-yZmbLgiKKDj3HZmrjwNQJ741q5wsfg5C8AP7Ol9RC1+FaDPryhGuevZTl3NQpfJSmtrFsUn6FyG4Yvf4EJOYlg==
+  dependencies:
+    consola "^2.4.1"
+    http-proxy-middleware "^0.19.1"
+
 "@nuxtjs/pwa@^2.6.0":
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/@nuxtjs/pwa/-/pwa-2.6.0.tgz#3138e1f32f4d080ccbe96dc0b206efea4e790199"
@@ -1701,6 +1719,21 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
   integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
 
+axios-retry@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/axios-retry/-/axios-retry-3.1.2.tgz#4f4dcbefb0b434e22b72bd5e28a027d77b8a3458"
+  integrity sha512-+X0mtJ3S0mmia1kTVi1eA3DAC+oWnT2A29g3CpkzcBPMT6vJm+hn/WiV9wPt/KXLHVmg5zev9mWqkPx7bHMovg==
+  dependencies:
+    is-retry-allowed "^1.1.0"
+
+axios@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
+  integrity sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=
+  dependencies:
+    follow-redirects "^1.3.0"
+    is-buffer "^1.1.5"
+
 babel-extract-comments@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21"
@@ -2416,7 +2449,17 @@ connect@^3.6.6:
     parseurl "~1.3.2"
     utils-merge "1.0.1"
 
-consola@^2.0.0-1, consola@^2.3.0, consola@^2.3.2:
+consola@^1.4.4:
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/consola/-/consola-1.4.5.tgz#09732d07cb50af07332e54e0f42fafb92b962c4a"
+  integrity sha512-movqq3MbyXbSf7cG/x+EbO3VjKQVZPB/zeB5+lN1TuBYh9BWDemLQca9P+a4xpO4lXva9rz+Bd8XyqlH136Lww==
+  dependencies:
+    chalk "^2.3.2"
+    figures "^2.0.0"
+    lodash "^4.17.5"
+    std-env "^1.1.0"
+
+consola@^2.0.0-1, consola@^2.3.0, consola@^2.3.2, consola@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/consola/-/consola-2.4.1.tgz#ad7209c306a2b6fa955b776f88f87bf92f491aa8"
   integrity sha512-j6bIzpmyRGY2TDZVkAi3DM95CgC8hWx1A7AiJdyn4X5gls1bbpXIMpn3p8QsfaNu+ycNLXP+2DwKb47FXjw1ww==
@@ -2873,7 +2916,7 @@ debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3:
   dependencies:
     ms "2.0.0"
 
-debug@^3.1.0:
+debug@^3.1.0, debug@^3.2.6:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -3249,6 +3292,11 @@ etag@^1.8.1, etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
 
+eventemitter3@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.0.tgz#090b4d6cdbd645ed10bf750d4b5407942d7ba163"
+  integrity sha512-ivIvhpq/Y0uSjcHDcOIccjmYjGLcP09MFGE7ysAwkAvkXfpZlC985pH2/ui64DKazbTW/4kN3yqozUxlXzI6cA==
+
 events@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/events/-/events-3.0.0.tgz#9a0a0dfaf62893d92b875b8f2698ca4114973e88"
@@ -3520,6 +3568,13 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+follow-redirects@^1.0.0, follow-redirects@^1.3.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"
+  integrity sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==
+  dependencies:
+    debug "^3.2.6"
+
 for-each@^0.3.2:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
@@ -4003,6 +4058,25 @@ http-errors@1.6.3, http-errors@~1.6.2, http-errors@~1.6.3:
     setprototypeof "1.1.0"
     statuses ">= 1.4.0 < 2"
 
+http-proxy-middleware@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz#183c7dc4aa1479150306498c210cdaf96080a43a"
+  integrity sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==
+  dependencies:
+    http-proxy "^1.17.0"
+    is-glob "^4.0.0"
+    lodash "^4.17.11"
+    micromatch "^3.1.10"
+
+http-proxy@^1.17.0:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.17.0.tgz#7ad38494658f84605e2f6db4436df410f4e5be9a"
+  integrity sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g==
+  dependencies:
+    eventemitter3 "^3.0.0"
+    follow-redirects "^1.0.0"
+    requires-port "^1.0.0"
+
 http-signature@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
@@ -4215,7 +4289,7 @@ is-callable@^1.1.3, is-callable@^1.1.4:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
   integrity sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==
 
-is-ci@^1.0.10:
+is-ci@^1.0.10, is-ci@^1.1.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
   integrity sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==
@@ -4402,7 +4476,7 @@ is-resolvable@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
   integrity sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==
 
-is-retry-allowed@^1.0.0:
+is-retry-allowed@^1.0.0, is-retry-allowed@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
   integrity sha1-EaBgVotnM5REAz0BJaYaINVk+zQ=
@@ -6890,6 +6964,11 @@ require-main-filename@^1.0.1:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
   integrity sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=
 
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
+
 resolve-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
@@ -7350,6 +7429,13 @@ statuses@~1.4.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
   integrity sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==
 
+std-env@^1.1.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/std-env/-/std-env-1.3.1.tgz#4e1758412439e9ece1d437b1b098551911aa44ee"
+  integrity sha512-KI2F2pPJpd3lHjng+QLezu0eq+QDtXcv1um016mhOPAJFHKL+09ykK5PUBWta2pZDC8BVV0VPya08A15bUXSLQ==
+  dependencies:
+    is-ci "^1.1.0"
+
 std-env@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/std-env/-/std-env-2.2.1.tgz#2ffa0fdc9e2263e0004c1211966e960948a40f6b"