create projects page

assets/_colors.scss

@@ -0,0 +1,5 @@
+$c-background: #212121;
+$c-text: white;
+$c-primary: #C64647;
+$c-secondary: white;
+$c-link: #25acd7;

assets/_responsive.scss

@@ -0,0 +1,8 @@
+$desktop-min-breakpoint: 640px;
+$mobile-max-breakpoint: $desktop-min-breakpoint - 1px;
+
+@mixin desktop {
+  @media only screen and (min-width: 640px) {
+    @content
+  }
+}

assets/global.scss

@@ -12,6 +12,7 @@ body {
   font-size: 16px;
 
   background-color: $c-background;
+  color: $c-text
 }
 
 *,
@@ -28,6 +29,7 @@ a {
 }
 
 .button {
+  display: inline-block;
   border: 2px solid white;
   width: fit-content;
   padding: 10px;

components/CodingProject.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="project">
+    <span class="title">{{ title }}</span>
+    <div class="links">
+      <div v-for="(link, index) in links" :key="link.name" class="link">
+        <a
+          :href="link.to"
+          rel="noopener"
+          target="_blank"
+        >
+          {{ link.name }}
+        </a>
+        <div v-if="index + 1 < links.length" class="space"></div>
+      </div>
+    </div>
+    <p class="description">
+      <slot></slot>
+    </p>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "CodingProject",
+    props: {
+      title: {
+        type: String,
+        required: true
+      },
+      npm: String,
+      github: String
+    },
+    computed: {
+      links() {
+        const links = [];
+
+        if (this.npm) {
+          links.push({
+            name: "NPM",
+            to: `https://www.npmjs.com/package/${this.npm}`
+          });
+        }
+
+        if (this.github) {
+          links.push({
+            name: "GitHub",
+            to: `https://github.com/${this.github}`
+          });
+        }
+
+        return links;
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  @import "~@/assets/_colors";
+
+  .project {
+    margin: 20px;
+    height: fit-content;
+    text-align: center;
+    padding: 20px;
+    border: 1px solid darken($c-background, 2);
+    border-radius: 5px;
+    width: 400px;
+
+    .title {
+      display: block;
+      font-size: 60px;
+    }
+
+    .links {
+      margin-top: 2px;
+
+      &::after {
+        content: '';
+        display: block;
+        width: 25px;
+        height: 1px;
+        margin: 6px auto 10px;
+        background-color: white;
+      }
+
+      .link {
+        display: inline-block;
+
+        .space {
+          display: inline-block;
+
+          width: 10px;
+          height: 1px;
+        }
+      }
+    }
+
+    .description {
+      font-size: 18px;
+    }
+  }
+</style>

layouts/secondLevel.vue

@@ -0,0 +1,49 @@
+<template>
+    <div id="layout">
+      <nuxt-link class="button" to="/"></nuxt-link>
+      <div class="content">
+        <nuxt/>
+      </div>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: "secondLevel"
+  };
+</script>
+
+<style scoped lang="scss">
+  @import "~@/assets/_responsive";
+
+  #layout {
+    .button {
+      &::before {
+        content: "←";
+        transform: scale(2.4) translateY(-2px);
+        display: inline-block;
+      }
+
+      position: fixed;
+      top: 10px;
+      left: 10px;
+
+      @include desktop {
+        position: fixed;
+        top: 5vh;
+        left: 10vw;
+      }
+    }
+
+    .content {
+      width: 100%;
+      padding: 65px 10px 0;
+
+      @include desktop {
+        width: 50%;
+        margin: 0 auto;
+        padding-top: 20px;
+      }
+    }
+  }
+</style>

pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="index">
+  <main>
     <CtexxxLogo :text="logoText"/>
     <div class="horizontally-centered">
       <SocialIcon
@@ -11,7 +11,7 @@
     <div class="link-section">
       <nuxt-link class="button" to="/projects">My Projects</nuxt-link>
     </div>
-  </div>
+  </main>
 </template>
 
 <script>
@@ -53,7 +53,7 @@
 <style scoped lang="scss">
   @import "~@/assets/_responsive.scss";
 
-  #index {
+  main {
     height: 100%;
 
     display: flex;

pages/projects.vue

@@ -0,0 +1,44 @@
+<template>
+  <main>
+    <div class="projects">
+      <CodingProject
+        title="pzl"
+        npm="@ctexxx/pzl"
+        github="ctexxx/pzl"
+      >
+        A tiny zero-configuration console logger
+      </CodingProject>
+      <CodingProject
+        title="shxrt"
+        github="ctexxx/shxrt"
+      >
+        <p>
+          A URL shortener service intended to be used with <a href="https://now.sh">now</a> and
+          <a href="https://graph.cool">graph.cool</a>.
+        </p>
+        <p>
+          Powering <a href="https://go.ctexxx.dev">go.ctexxx.dev</a>
+        </p>
+      </CodingProject>
+    </div>
+  </main>
+</template>
+
+<script>
+  import CodingProject from "@/components/CodingProject";
+  export default {
+    name: "projects",
+    components: { CodingProject },
+    layout: "secondLevel"
+  };
+</script>
+
+<style scoped lang="scss">
+  .projects {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    align-content: flex-start;
+    flex-wrap: wrap;
+  }
+</style>