add uses page

assets/css/_colors.scss

@@ -1,5 +1,6 @@
 $c-background: #212121;
+$c-background-darker: darken($c-background, 2);
 $c-text: white;
 $c-primary: #C64647;
 $c-secondary: white;
-$c-link: #25acd7;
+$c-link: #00c1ff;

assets/css/_mixins.scss

@@ -7,3 +7,12 @@
   height: $length;
   transform: rotate($angle + -135deg);
 }
+
+@mixin hoverShadow {
+  box-shadow: none;
+  transition: box-shadow 0.3s ease-out;
+
+  &:hover {
+    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
+  }
+}

assets/css/global.scss

@@ -49,3 +49,12 @@ a {
     font-weight: 400;
   }
 }
+
+.title {
+  margin: 0 auto 20px;
+}
+
+code {
+  background-color: $c-background-darker;
+  font-size: 14px;
+}

components/CodingProject.vue

@@ -66,14 +66,17 @@
 </script>
 
 <style scoped lang="scss">
-  @import "~@/assets/_colors";
+  @import "~@/assets/css/_mixins";
-  @import "~@/assets/_responsive";
+  @import "~@/assets/css/_colors";
+  @import "~@/assets/css/_responsive";
 
   .project {
+    @include hoverShadow;
+
     margin: 20px;
     height: fit-content;
     text-align: center;
-    border: 1px solid darken($c-background, 2);
+    border: 1px solid $c-background-darker;
     border-radius: 5px;
     width: 400px;
 
@@ -84,7 +87,7 @@
       font-family: monospace;
       width: 100%;
       text-align: center;
-      background-color: darken($c-background, 2);
+      background-color: $c-background-darker;
     }
 
     .padded {
@@ -149,11 +152,5 @@
         }
       }
     }
-
-    transition: box-shadow 0.3s ease-out;
-
-    &:hover {
-      box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
-    }
   }
 </style>

components/CtexxxLogo.vue

@@ -38,7 +38,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "~@/assets/_responsive";
+  @import "~@/assets/css/_responsive";
   @import url('https://fonts.googleapis.com/css?family=Montserrat+Alternates');
 
   .slide-vertical-enter-active {

components/ImageCard.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="image-card">
+    <template v-if="link">
+      <a :href="link" target="_blank">
+        <img :src="image" class="image" :alt="title"/>
+      </a>
+    </template>
+    <template v-else>
+      <img :src="image" class="image" :alt="title"/>
+    </template>
+    <div class="content">
+      <span class="type">{{ type }}</span>
+      <span class="title">{{ title }}</span>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "ImageCard",
+    props: {
+      title: {
+        type: String,
+        required: true
+      },
+      image: {
+        type: String,
+        required: true
+      },
+      type: String,
+      link: String
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  @import "~@/assets/css/_mixins";
+  @import "~@/assets/css/_colors";
+
+  .image-card {
+    @include hoverShadow;
+
+    margin: 20px;
+    height: fit-content;
+    border: 1px solid $c-background-darker;
+    border-radius: 5px;
+    width: 400px;
+    padding: 20px;
+
+    display: grid;
+    grid-template-columns: 100px auto;
+    grid-template-rows: 100%;
+    grid-column-gap: 10px;
+
+    .image {
+      grid-column-start: 1;
+      grid-column-end: 2;
+
+      height: auto;
+      width: 100px;
+    }
+
+    .content {
+      grid-column-start: 2;
+      grid-column-end: 3;
+
+      .type {
+        display: block;
+        font-size: 20px;
+      }
+
+      .title {
+        display: block;
+        font-size: 30px;
+        font-weight: bold;
+
+      }
+    }
+  }
+</style>

components/SocialIcon.vue

@@ -31,7 +31,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "~@/assets/_responsive";
+  @import "~@/assets/css/_responsive";
 
   #root {
     display: inline-block;

layouts/secondLevel.vue

@@ -16,9 +16,9 @@
 </script>
 
 <style scoped lang="scss">
-  @import "~@/assets/_responsive";
+  @import "~@/assets/css/_responsive";
-  @import "~@/assets/_colors";
+  @import "~@/assets/css/_colors";
-  @import "~@/assets/_mixins";
+  @import "~@/assets/css/_mixins";
 
   #layout {
     .top-bar {
@@ -59,6 +59,7 @@
     }
 
     .content {
+      margin-top: 10px;
       width: 100%;
       padding: 0 10px;
 

nuxt.config.js

@@ -41,7 +41,7 @@ module.exports = {
   ** Global CSS
   */
   css: [
-    '@/assets/global.scss'
+    '@/assets/css/global.scss'
   ],
 
   /*

pages/index.vue

@@ -10,6 +10,7 @@
     </div>
     <div class="link-section">
       <nuxt-link class="button" to="/projects">My Projects</nuxt-link>
+      <nuxt-link class="button" to="/uses">What I’m using</nuxt-link>
     </div>
   </main>
 </template>
@@ -51,8 +52,8 @@
 </script>
 
 <style scoped lang="scss">
-  @import "~@/assets/_responsive";
+  @import "~@/assets/css/_responsive";
-  @import "~@/assets/_mixins";
+  @import "~@/assets/css/_mixins";
 
   main {
     height: 100%;

pages/projects.vue

@@ -1,5 +1,6 @@
 <template>
   <main>
+    <h1 class="title">My Projects</h1>
     <div class="projects">
       <CodingProject
         title="pzl"

pages/uses.vue

@@ -0,0 +1,66 @@
+<template>
+  <main>
+    <h1 class="title">What I’m using</h1>
+    <div class="uses">
+      <ImageCard
+        title="WebStorm"
+        :image="require('~/assets/images/webstorm.png')"
+        type="IDE"
+        link="https://www.jetbrains.com/webstorm/"
+      >
+        I use WebStorm for everything I code because I don’t like VSCode and I’m a student, so all JetBrains products are free for me 😎.
+      </ImageCard>
+      <ImageCard
+        title="MSI CX72-7QL"
+        image="https://asset.msi.com/resize/image/global/product/product_8_20170117101522_587d7e3ae17ae.png62405b38c58fe0f07fcef2367d8a9ba1/600.png"
+        type="Laptop"
+        link="https://www.amazon.de/MSI-001797-034-CX72-7QL-034/dp/B06WLM6581"
+      >
+        Originally bought for gaming, I now only use it for coding.
+      </ImageCard>
+      <ImageCard
+        title="Ubuntu 18.04"
+        image="https://assets.ubuntu.com/v1/29985a98-ubuntu-logo32.png"
+        type="OS"
+        link="https://www.ubuntu.com/download/desktop"
+      >
+        It just works.
+      </ImageCard>
+      <ImageCard
+        title="Hyper"
+        image="https://assets.zeit.co/image/upload/front/assets/design/hyper-color-logo.svg"
+        type="Terminal"
+        link="https://hyper.is/"
+      >
+        Plugins: <code>hyper-snazzy</code>, <code>hypercwd</code>.
+      </ImageCard>
+      <ImageCard
+        title="Fira Code"
+        :image="require('~/assets/images/fira_code.png')"
+        type="Font"
+        link="https://github.com/tonsky/FiraCode"
+      >
+        Love at first sight.
+      </ImageCard>
+    </div>
+  </main>
+</template>
+
+<script>
+  import ImageCard from "@/components/ImageCard";
+  export default {
+    name: "uses",
+    components: { ImageCard },
+    layout: "secondLevel"
+  };
+</script>
+
+<style scoped lang="scss">
+  .uses {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    align-content: flex-start;
+    flex-wrap: wrap;
+  }
+</style>