src/App.vue

@@ -19,7 +19,6 @@ export default {
 :root {
   --bg-color: #192236;
   --bg-alt-color: #151d2f;
-  --bg-alt-hover-color: #111726;
   --fg-color: #fff;
   --padding: 20px;
 }

src/data/videos.js

@@ -1,9 +1,7 @@
 export default [
   {
     "videoName": "JP Installing Windows Project",
-    "videoDescription": "This is a guide in japanese where I teach you how to install windows completely. This was made because of a JP Project I had to do.",    
     "videoID": "1",
-    "path": "videos/JP-Installing-Windows-Project.mp4",
+    "path": "videos/JP-Installing-Windows-Project.mp4"
-    "thumbnail": "video_thumbnails/JP-Installing-Windows-Project.png"
   }
 ]

src/router/index.js

@@ -25,17 +25,14 @@ const routes = [
   },
   {
     path: '/:pathMatch(.*)',
-    name: '404',
     component: notFoundPage
   },
   {
     path: '/videos',
-    name: 'video',
     component: videoView
   },
   {
     path: '/videos/:id',
-    name: 'videos',
     component: videosView 
   }
 ]

src/views/VideoPage.vue

@@ -1,95 +1,16 @@
 <template>
-  <h1>Videos</h1>
+  <h1>This page is under construction</h1>
-  <ul>
-    <router-link v-for="video in videos" :key="video.videoID" :to="'/videos/' + video.videoID">
-      <li>
-      <img :src="require('@/assets/' + video.thumbnail)" alt="Video Thumbnail"/>
-      <div id="content">
-        <h2>{{ video.videoName }}</h2>
-      </div>
-    </li>
-    </router-link>
-  </ul>
 </template>
 
-<script>
-  import videoData from '../data/videos.js'
-
-  export default {
-    data () {
-      return {
-        videos: videoData
-      }
-    }
-  }
-</script>
-
 <style scoped>
 
 h1 {
   color: white;
   font-family: 'Rubik', sans-serif;
   font-weight: 500;
-  font-size: 3rem;
+  font-size: 4rem;
-  margin-top: 20px;
+  margin: 60px auto;
-}
+  text-align: center;
-
-a {
-  max-width: fit-content;
-}
-
-ul {
-  margin-top: 10px;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
-  row-gap: 32px; 
-
-  li {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 10px;
-    background-color: var(--bg-alt-color);
-    padding: 10px;
-    border-radius: 10px;
-    width: 370px;
-    cursor: pointer;
-    transition: 0.3s background-color;
-
-    h2 {
-      color: white;
-      font-family: 'Rubik', sans-serif;
-      font-weight: 500;
-      font-size: 1.5rem;
-      text-align: center;
-    }
-  }
-
-  li:hover {
-    background-color: var(--bg-alt-hover-color);
-  }
-
-  img {
-    max-width: 350px;
-    aspect-ratio: 16 / 9;
-    pointer-events: none;
-    user-select: none;
-  }
-}
-
-@media only screen and (max-width: 779px) {
-  a {
-    max-width: 100%;
-  }
-
-  ul {
-    display: flex;
-    flex-direction: column;
-
-    li {
-      width: 100%;
-    }
-  }
 }
 
 </style>

src/views/VideosPage.vue

@@ -1,28 +1,17 @@
 <template>
-  <notfound v-if="!(video)"></notfound>
+  <h1>{{ video.videoName }}</h1>
-  
+  <video controls>
-  <template v-else>
+    <source :src="require('@/assets/' + video.path)" type="video/mp4">
-    <video controls>
+  </video>
-      <source :src="require('@/assets/' + video.path)" type="video/mp4">
-    </video>
-    <div id="info">
-      <h1>{{ video.videoName }}</h1>
-      <p>{{ video.videoDescription }}</p>
-    </div>
-  </template>
 </template>
 
 <script>
   import videoData from '../data/videos.js'
-  import notfound from '../views/404Page.vue'
 
   export default {
-    components: {
-      notfound
-    },
     data () {
       return {
-        video: null
+        video: null,
       }
     },
     created() {
@@ -33,37 +22,17 @@
 </script>
 
 <style scoped>
-video {
+h1 {
-  max-height: calc(100vh - 420px);
-  max-width: calc(100vw - 40px);  
-  width: max-content;
-  aspect-ratio: 16 / 9;
-  margin-top: 20px;
-}
-
-#info {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-top: 30px;
-  padding: 20px;
-  border-radius: 10px;
-  background-color: var(--bg-alt-color);
-  max-width: 600px; 
-}
-
-#info h1 {
   color: white;
   font-family: 'Rubik', sans-serif;
+  margin-top: 60px;
   font-weight: 500;
   font-size: 2rem;
 }
 
-#info p {
+video {
-  font-family: 'Rubik', sans-serif;
+  max-height: calc(100vh - 40px);
-  font-weight: 200;
+  max-width: calc(100vh - 40px);
-  font-size: 1.3rem;
+  aspect-ratio: 16 / 9;
-  color: white;
 }
-
 </style>