src/components/NavBar.vue

@@ -11,6 +11,9 @@
       <li>
         <router-link to="/socials">Socials</router-link>
       </li>
+      <li>
+        <router-link to="/videos">Videos</router-link>
+      </li>
       <li>
         <a href="https://git.keyemail.dev/explore/">Git</a>
       </li>
@@ -31,6 +34,9 @@
         <li>
           <router-link to="/socials" @click="mobileUI()">Socials</router-link>
         </li>
+        <li>
+          <router-link to="/videos" @click="mobileUI()">Videos</router-link>
+        </li>
         <li>
           <a href="https://git.keyemail.dev/explore/">Git</a>
         </li>

src/data/projects.js

@@ -1,8 +0,0 @@
-export default [
-  {
-    "name": "Weather App",
-    "description": "A cool weather app I decided to build for computer science class! This was coded by me, all images and data belong to code.org.",
-    "photo": "project_thumbnails/weather.png",
-    "id": "1"
-  }
-]

src/data/videos.js

@@ -0,0 +1,7 @@
+export default [
+  {
+    "videoName": "JP Installing Windows Project",
+    "videoID": "1",
+    "path": "videos/JP-Installing-Windows-Project.mp4"
+  }
+]

src/router/index.js

@@ -4,6 +4,8 @@ import homeView from '../views/HomePage.vue'
 import galleryView from '../views/GalleryPage.vue'
 import socialView from '../views/SocialsPage.vue'
 import notFoundPage from '../views/404Page.vue'
+import videoView from '../views/VideoPage.vue'
+import videosView from '../views/VideosPage.vue' 
 
 const routes = [
   {
@@ -24,6 +26,14 @@ const routes = [
   {
     path: '/:pathMatch(.*)',
     component: notFoundPage
+  },
+  {
+    path: '/videos',
+    component: videoView
+  },
+  {
+    path: '/videos/:id',
+    component: videosView 
   }
 ]
 

src/views/VideoPage.vue

@@ -0,0 +1,16 @@
+<template>
+  <h1>This page is under construction</h1>
+</template>
+
+<style scoped>
+
+h1 {
+  color: white;
+  font-family: 'Rubik', sans-serif;
+  font-weight: 500;
+  font-size: 4rem;
+  margin: 60px auto;
+  text-align: center;
+}
+
+</style>

src/views/VideosPage.vue

@@ -0,0 +1,38 @@
+<template>
+  <h1>{{ video.videoName }}</h1>
+  <video controls>
+    <source :src="require('@/assets/' + video.path)" type="video/mp4">
+  </video>
+</template>
+
+<script>
+  import videoData from '../data/videos.js'
+
+  export default {
+    data () {
+      return {
+        video: null,
+      }
+    },
+    created() {
+      let videoID = this.$route.params.id;
+      this.video = videoData.find(v => v.videoID === videoID);
+    }
+  }
+</script>
+
+<style scoped>
+h1 {
+  color: white;
+  font-family: 'Rubik', sans-serif;
+  margin-top: 60px;
+  font-weight: 500;
+  font-size: 2rem;
+}
+
+video {
+  max-height: calc(100vh - 40px);
+  max-width: calc(100vh - 40px);
+  aspect-ratio: 16 / 9;
+}
+</style>