fix manifest name and add Project component

components/Project.vue

@@ -0,0 +1,50 @@
+<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>

nuxt.config.js

@@ -17,6 +17,14 @@ module.exports = {
     ]
   },
 
+  manifest: {
+    name: "ctexxx",
+    author: "Moritz Ruth",
+    mobileAppIOS: false,
+    nativeUI: true,
+    "short_name": "ctexxx"
+  },
+
   /*
   ** Customize the progress-bar color
   */

pages/index.vue

@@ -23,12 +23,12 @@
           </div>
           <div class="projects">
             <div class="horizontally-centered">
-              <h2>pzl</h2>
+              <Project
-              <p>
+                title="pzl"
-                <a href="https://github.com/ctexxx/pzl" rel="noopener">GitHub</a>
+                :links="{GitHub: 'https://github.com/ctexxx/pzl', NPM: 'https://www.npmjs.com/package/@ctexxx/pzl'}"
-                 |
+              >
-                <a href="https://www.npmjs.com/package/@ctexxx/pzl" rel="noopener">NPM</a></p>
+                A pretty zero-configuration console logger
-              A pretty zero-configuration console logger
+              </Project>
             </div>
           </div>
         </div>
@@ -41,10 +41,11 @@
   import Logo from "@/components/Logo";
   import SocialIcon from "@/components/SocialIcon";
   import ScrollDownArrow from "@/components/ScrollDownArrow";
+  import Project from "@/components/Project";
 
   export default {
     name: "index",
-    components: { ScrollDownArrow, SocialIcon, Logo }
+    components: { Project, ScrollDownArrow, SocialIcon, Logo }
   };
 </script>
 
@@ -81,16 +82,6 @@
       }
     }
 
-    h2 {
-      font-size: 35px;
-
-      @include mq($from: tablet) {
-        font-size: 50px;
-      }
-
-      margin-bottom: 10px;
-    }
-
     p {
       font-size: 18px;
 
@@ -102,10 +93,6 @@
     .projects {
       text-align: center;
       margin-top: 100px;
-
-      .horizontally-centered {
-        width: 75%;
-      }
     }
   }
 </style>