Added videos

src/App.vue

@@ -16,9 +16,19 @@ export default {
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap');
 
+:root {
+  --bg-color: #192236;
+  --bg-alt-color: #151d2f;
+  --fg-color: #fff;
+  --padding: 20px;
+}
+
+body {
+  background-color: var(--bg-color)
+}
+
 html, body, #app {
   scroll-behavior: smooth;
-  background-color: #192236;
 }
 
 #app {
@@ -26,11 +36,12 @@ html, body, #app {
   flex-direction: column;
   max-width: 1920px;
   margin: auto;
-  padding: 0px 20px;
+  padding: var(--padding);
 }
 
 * { 
   margin: 0;
   padding: 0;
+  box-sizing: border-box; 
 }
 </style>

src/components/NavBar.vue

@@ -1,24 +1,45 @@
 <template>
-  <div class="navbar">
+  <nav>
     <h1>Keyemail</h1>
-    <ul class="navContents" v-if="!(isMobile() || smallScreen)">
+    <ul v-if="!(isMobile() || smallScreen)">
-      <li><router-link to="/">Home</router-link></li>
+      <li>
-      <li><router-link to="/gallery">Gallery</router-link></li>
+        <router-link to="/">Home</router-link>
-      <li><router-link to="/socials">Socials</router-link></li>
+      </li>
-      <li><a href="https://git.keyemail.dev/explore/">Projects</a></li>
+      <li>
+        <router-link to="/gallery">Gallery</router-link>
+      </li>
+      <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>
     </ul>
-    <div class="mobileNavButton" v-else>
+    <i class="fa-solid fa-x" @click="mobileUI(); handleResize();" v-else-if="turnOnMobileUI"></i>
-      <i class="fa-solid fa-x" @click="mobileUI(); handleResize();" v-if="turnOnMobileUI"></i>
+    <i class="fas fa-bars" @click="mobileUI();" v-else></i>
-      <i class="fas fa-bars" @click="mobileUI();" v-else></i>
+  </nav>
-    </div>
+
-  </div>
+  <div id="mobileNav" v-if="turnOnMobileUI">
-  <div class="mobileNav" v-if="turnOnMobileUI">
+    <div>
-    <div class="mobileNavContents">
       <ul>
-        <li><router-link to="/" @click="mobileUI()">Home</router-link></li>
+        <li>
-        <li><router-link to="/gallery" @click="mobileUI()">Gallery</router-link></li>
+          <router-link to="/" @click="mobileUI()">Home</router-link>
-        <li><router-link to="/socials" @click="mobileUI()">Socials</router-link></li>
+        </li>
-        <li><a href="https://git.keyemail.dev/explore/">Projects</a></li>
+        <li>
+          <router-link to="/gallery" @click="mobileUI()">Gallery</router-link>
+        </li>
+        <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>
       </ul>
     </div> 
   </div>
@@ -66,7 +87,7 @@ export default {
 </script>
 
 <style scoped>
-.navbar{
+nav {
   position: relative;
   display: flex;
   align-items: center;
@@ -74,52 +95,48 @@ export default {
   color: white;
   font-family: 'Rubik', sans-serif;
   font-weight: 500;
-  margin-top: 20px;
+  
+  h1{
+    width: fit-content;
+    z-index: 10;
+  }
+
+  ul {
+    list-style: none;
+    float: right;
+  }
+
+  ul li{
+    display: inline;
+    cursor: pointer;
+    margin-left: 10px;
+    font-weight: 400;
+    transition: color 0.3s;
+  }
+
+  ul a {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  ul li:hover{
+    color: #8ee8fc;
+  }
+
+  i {
+    float: right;
+    font-size: 35px;
+    cursor: pointer;
+    transition: 0.3s color;
+    z-index: 10;
+  }
+
+  i:hover {
+    color: #74d2f1;
+  }
 }
 
-.navbar h1{
+#mobileNav {
-  width: fit-content;
-  z-index: 10;
-}
-
-.navContents {
-  list-style: none;
-  float: right;
-}
-
-.navContents li{
-  display: inline;
-  cursor: pointer;
-  margin-left: 10px;
-  font-weight: 400;
-  transition: color 0.3s;
-}
-
-.navContents a {
-  text-decoration: none;
-  color: inherit;
-}
-
-.navContents li:hover{
-  color: #8ee8fc;
-}
-
-.mobileNavButton {
-  z-index: 10;
-}
-
-.mobileNavButton i {
-  float: right;
-  font-size: 35px;
-  cursor: pointer;
-  transition: 0.3s color;
-}
-
-.mobileNavButton i:hover {
-  color: #74d2f1;
-}
-
-.mobileNav {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -127,40 +144,41 @@ export default {
   left: 0;
   top: 0;
   z-index: 9;
-}
+  
+  i {
+    float: right;
+    font-size: 35px;
+    cursor: pointer;
+    transition: 0.3s color;
+  }
 
-.mobileNav i {
+  div {
-  float: right;
+    display: flex;
-  font-size: 35px;
+    align-items: center;
-  cursor: pointer;
+    justify-content: center;
-  transition: 0.3s color;
+    height: 100%;
-}
+  }
 
-.mobileNavContents {
+  div li {
-  display: flex;
+    cursor: pointer;
-  align-items: center;
+    margin-left: 10px;
-  justify-content: center;
+    font-weight: 400;
-  height: 100%;
+    transition: color 0.3s;
-}
+    font-size: 40px;
+    text-align: center;
+    font-family: 'Rubik', sans-serif;
+    margin: 10px;
+  }
 
-.mobileNavContents li {
+  div a {
-  cursor: pointer;
+    color: white;
-  margin-left: 10px;
+    text-decoration: none;
-  font-weight: 400;
+    transition: 0.3s color;
-  transition: color 0.3s;
+  }
-  font-size: 40px;
-  text-align: center;
-  font-family: 'Rubik', sans-serif;
-  margin: 10px;
-}
 
-.mobileNavContents a {
-  color: white;
-  text-decoration: none;
-  transition: 0.3s color;
-}
 
-.mobileNavContents a:hover {
+  div a:hover {
-  color: #74d2f1;
+    color: #74d2f1;
+  }
 }
 </style>

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/HomePage.vue

@@ -7,27 +7,27 @@
       <h1>Keyemail</h1>
       <ul>
         <li @mouseover="showActiveBadge = true" @mouseleave="showActiveBadge = false">
-         <img src="@/assets/badges/code.svg" aria-label="CODE" width="25px" height="25px"/>
+         <img src="@/assets/badges/code.svg" aria-label="CODE"/>
          <div v-if="showActiveBadge">Active Developer</div>
          <template v-else/>
         </li>
         <li @mouseover="showHTMLBadge = true" @mouseleave="showHTMLBadge = false">
-          <img src="@/assets/badges/html.svg" aria-label="HTML5" width="25px" height="25px"/>
+          <img src="@/assets/badges/html.svg" aria-label="HTML5"/>
           <div v-if="showHTMLBadge">HTML</div>
           <template v-else/>
         </li>
         <li @mouseover="showCSSBadge = true" @mouseleave="showCSSBadge = false">
-         <img src="@/assets/badges/css.svg" aria-label="CSS3" width="25px" height="25px"/>
+         <img src="@/assets/badges/css.svg" aria-label="CSS3"/>
          <div v-if="showCSSBadge">CSS</div>
          <template v-else/>
         </li>
         <li @mouseover="showJavascriptBadge = true" @mouseleave="showJavascriptBadge = false">
-          <img src="@/assets/badges/js.svg" aria-label="JS" width="25px" height="25px"/>
+          <img src="@/assets/badges/js.svg" aria-label="JS"/>
           <div v-if="showJavascriptBadge">Javascript</div>
           <template v-else/>
         </li>
         <li @mouseover="showVue3Badge = true" @mouseleave="showVue3Badge = false">
-          <img src="@/assets/badges/vue.svg" aria-label="VUE3" width="25px" height="25px"/>
+          <img src="@/assets/badges/vue.svg" aria-label="VUE3"/>
           <div v-if="showVue3Badge">Vue 3</div>
           <template v-else/>
         </li>
@@ -127,11 +127,14 @@ header {
     background-color: #151d2f;
     color: white;
     font-family: 'Rubik', sans-serif;
+    box-sizing: content-box;
     border-radius: 5px;
   }
   
   img {
     pointer-events: none;
+    width: 100%;
+    height: 100%;
   }
   
   ul {
@@ -144,14 +147,12 @@ header {
   
   li {
     position: relative;
-    display: flex;
+    display: inherit;
-    align-items: center;
-    justify-content: center;
     text-decoration: none;
-    background-color: #151d2f;
+    background-color: var(--bg-alt-color);
     height: 30px;
     width: 30px;
-    box-sizing: border-box;
+    padding: 3px;
     border-radius: 5px;
     cursor: pointer;
   }
@@ -165,7 +166,7 @@ header {
   width: 100%;
   color: white;
   font-family: 'Rubik', sans-serif;
-  background-color: #151d2f;
+  background-color: var(--bg-alt-color);
   border-radius: 10px;
   padding: 20px;
   text-align: center;

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>