Update social icons

assets/styles/main.scss

@@ -57,18 +57,3 @@ input[type="button"] {
     margin-top: 0.55em;
   }
 }
-
-.social {
-  color: $color-gray;
-  text-decoration: none;
-  padding: 0 4px;
-  border-radius: 5px;
-
-  &:hover {
-    color: $color-dark-blue;
-  }
-
-  &:active {
-    color: $color-dark-blue;
-  }
-}

components/Social.vue

@@ -0,0 +1,34 @@
+<template lang="pug">
+  p
+    a.social(href="mailto:georgi@gardev.com" title="Send me an email!")
+      fa.fa-3x(icon="envelope")
+    a.social(href="https://github.com/GeorgeSG" target="_blank" title="GitHub" rel="noreferrer")
+      fa.fa-3x(:icon="['fab', 'github']")
+    a.social(href="https://www.linkedin.com/in/georgigardev/" target="_blank" title="LinkedIn" rel="noreferrer")
+      fa.fa-3x(:icon="['fab', 'linkedin']")
+    a.social(href="http://steamcommunity.com/id/georgesg/" target="_blank" title="PC Master Race!" rel="noreferrer")
+      fa.fa-3x(:icon="['fab', 'steam']")
+    a.social(href="https://twitter.com/georgesg92" target="_blank" title="twitter" rel="noreferrer")
+      fa.fa-3x(:icon="['fab', 'twitter']")
+    a.social(href="https://open.spotify.com/user/11124147494?si=7XB-iCMxRvG5tDru_wkEVg" target="_blank" title="Spotify" rel="noreferrer")
+      fa.fa-3x(:icon="['fab', 'spotify']")
+    a.social(href="http://www.last.fm/user/GeorgeSG" target="_blank" title="last.fm" rel="noreferrer")
+      fa.fa-3x(:icon="['fab', 'lastfm']")
+</template>
+
+<style lang="scss">
+.social {
+  color: $color-gray;
+  text-decoration: none;
+  padding: 0 4px;
+  border-radius: 5px;
+
+  &:hover {
+    color: $color-dark-blue;
+  }
+
+  &:active {
+    color: $color-dark-blue;
+  }
+}
+</style>

layouts/error.vue

@@ -2,19 +2,13 @@
   main
     h1 Georgi Gardev
     p Oops. It looks like you got lost there! This page doesn't exist... yet :)
-    p
+    Social
-      a.social(href="mailto:georgi@gardev.com" title="Send me an email!")
-        fa.fa-3x(icon="envelope")
-      a.social(href="https://github.com/GeorgeSG" target="_blank" title="GitHub" rel="noreferrer")
-        fa.fa-3x(:icon="['fab', 'github']")
-      a.social(href="https://bitbucket.org/GeorgeSG" target="_blank" title="Bitbucket" rel="noreferrer")
-        fa.fa-3x(:icon="['fab', 'bitbucket']")
-      a.social(href="https://www.linkedin.com/profile/view?id=154844036" target="_blank" title="LinkedIn" rel="noreferrer")
-        fa.fa-3x(:icon="['fab', 'linkedin']")
-      a.social(href="http://steamcommunity.com/id/georgesg/" target="_blank" title="PC Master Race!" rel="noreferrer")
-        fa.fa-3x(:icon="['fab', 'steam']")
-      a.social(href="https://twitter.com/georgesg92" target="_blank" title="twitter" rel="noreferrer")
-        fa.fa-3x(:icon="['fab', 'twitter']")
-      a.social(href="http://www.last.fm/user/GeorgeSG" target="_blank" title="last.fm" rel="noreferrer")
-        fa.fa-3x(:icon="['fab', 'lastfm']")
 </template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import Social from '~/components/Social.vue';
+
+@Component({ components: { Social } })
+export default class ErrorPage extends Vue {}
+</script>

pages/index.vue

@@ -5,21 +5,7 @@
       | Hi! I'm currently working on this page,
       br
       | but you can play some Tic-Tac-Toe instead!
-    p
+    Social
-      a.social(href="mailto:georgi@gardev.com" title="Send me an email!")
-        fa.fa-3x(icon="envelope")
-      a.social(href="https://github.com/GeorgeSG" target="_blank" title="GitHub" rel="noreferrer")
-        fa.fa-3x(:icon="['fab', 'github']")
-      a.social(href="https://bitbucket.org/GeorgeSG" target="_blank" title="Bitbucket" rel="noreferrer")
-        fa.fa-3x(:icon="['fab', 'bitbucket']")
-      a.social(href="https://www.linkedin.com/profile/view?id=154844036" target="_blank" title="LinkedIn" rel="noreferrer")
-        fa.fa-3x(:icon="['fab', 'linkedin']")
-      a.social(href="http://steamcommunity.com/id/georgesg/" target="_blank" title="PC Master Race!" rel="noreferrer")
-        fa.fa-3x(:icon="['fab', 'steam']")
-      a.social(href="https://twitter.com/georgesg92" target="_blank" title="twitter" rel="noreferrer")
-        fa.fa-3x(:icon="['fab', 'twitter']")
-      a.social(href="http://www.last.fm/user/GeorgeSG" target="_blank" title="last.fm" rel="noreferrer")
-        fa.fa-3x(:icon="['fab', 'lastfm']")
     TicTacToe
 
 </template>
@@ -27,7 +13,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 import TicTacToe from '~/components/TicTacToe/TicTacToe.vue';
+import Social from '~/components/Social.vue';
 
-@Component({ components: { TicTacToe } })
+@Component({ components: { TicTacToe, Social } })
 export default class Home extends Vue {}
 </script>