Added Gallery

src/data/gallery.js

@@ -0,0 +1,42 @@
+export default [
+  {
+    name: "2 cats",
+    id: "1",
+    path: "gallery/IMG_0391.png"
+  },
+  {
+    name: "Friends Cat",
+    id: "2",
+    path: "gallery/IMG_2381.png"
+  },
+  {
+    name: "Miku Poster",
+    id: "3",
+    path: "gallery/IMG_2798.png"
+  },
+  {
+    name: "Networking",
+    id: "4",
+    path: "gallery/IMG_3166.png"
+  },
+  {
+    name: "Another Friends Cat",
+    id: "5",
+    path: "gallery/IMG_3898.png"
+  },
+  {
+    name: "PC Stickers",
+    id: "6",
+    path: "gallery/IMG_4809.png"
+  },
+  {
+    name: "Movie Theater Picture 1",
+    id: "7",
+    path: "gallery/IMG_4810.png"
+  },
+  {
+    name: "Movie Theater Picture 2",
+    id: "8",
+    path: "gallery/IMG_4812.png"
+  }
+]

src/views/404Page.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

src/views/GalleryPage.vue

@@ -1,17 +1,76 @@
 <template>
-  <div class="socials">
-    <h1>Work In Progress</h1>
+  <div class="gallery">
+    <h1>Gallery</h1>
+    <div class="galleryGrid">
+      <a v-for="gallery in gallerys" :key="gallery.id" :href="require('@/assets/' + gallery.path)" target="_blank">
+        <img :src="require('@/assets/' + gallery.path)" :title="gallery.name"/>
+      </a>
+    </div>
   </div>
 </template>
 
+<script>
+import galleryData from '../data/gallery.js'
+
+export default {
+  data(){
+    return {
+      gallerys: galleryData
+    }
+  }
+}
+</script>
+
 <style scoped>
-.socials {
+.gallery {
   color: white;
   font-family: 'Rubik', sans-serif;
+  margin-top: 60px;
+}
+
+.gallery h1 {
+  font-weight: 500;
+  font-size: 3rem;
+}
+
+.galleryGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  row-gap: 32px;
+  margin-top: 10px;
+}
+
+.galleryGrid a {
+  width: max-content;
+}
+
+.galleryGrid img {
+  width: 320px;
+  height: 480px;
+  border-radius: 16px;
+  object-fit: cover;
+  object-position: center;
+  cursor: pointer;
+  border: 4px solid transparent;
+  transition: 0.4s border;
+}
+
+.galleryGrid img:hover{
+  border: 4px;
+  border-style: solid;
+  border-color: white;
+}
+
+@media only screen and (max-width: 739px) {
+  .gallery {
+    margin: auto;
+    margin-top: 50px;
     display: flex;
+    flex-direction: column;
     align-items: center;
-  justify-content: center;
-  height: 100vh;
-  font-size: 40px;
+  }
+  .galleryGrid {
+    width: 330px;
+  }
 }
 </style>

src/views/SocialsPage.vue

@@ -94,6 +94,7 @@
   border: 4px;
   border-style: solid;
 }
+
 .socialsgrid i {
   font-size: 35px;
   margin-top: auto;

src/views/router/index.js

@@ -0,0 +1,34 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+import homeView from '../views/HomePage.vue'
+import galleryView from '../views/GalleryPage.vue'
+import socialView from '../views/SocialsPage.vue'
+
+const routes = [
+  {
+    path: '/',
+    redirect: '/home'
+  },
+  {
+    path: '/home',
+    name: 'home',
+    component: homeView
+  },
+  {
+    path: '/gallery',
+    name: 'gallery',
+    component: galleryView
+  },
+  {
+    path: '/socials',
+    name: 'socials',
+    component: socialView
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
+})
+
+export default router