src/App.vue

@@ -19,6 +19,7 @@ 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,7 +1,9 @@
 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,14 +25,17 @@ 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,16 +1,95 @@
 <template>
-  <h1>This page is under construction</h1>
+  <h1>Videos</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: 4rem;
+  font-size: 3rem;
-  margin: 60px auto;
+  margin-top: 20px;
+}
+
+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,17 +1,28 @@
 <template>
-  <h1>{{ video.videoName }}</h1>
+  <notfound v-if="!(video)"></notfound>
+  
+  <template v-else>
     <video controls>
       <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() {
@@ -22,17 +33,37 @@
 </script>
 
 <style scoped>
-h1 {
+video {
+  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;
 }
 
-video {
+#info p {
-  max-height: calc(100vh - 40px);
+  font-family: 'Rubik', sans-serif;
-  max-width: calc(100vh - 40px);
+  font-weight: 200;
-  aspect-ratio: 16 / 9;
+  font-size: 1.3rem;
+  color: white;
 }
+
 </style>