added 404 and dropped /home

src/router/index.js

@@ -3,14 +3,11 @@ import { createRouter, createWebHistory } from 'vue-router'
 import homeView from '../views/HomePage.vue'
 import galleryView from '../views/GalleryPage.vue'
 import socialView from '../views/SocialsPage.vue'
+import notFoundPage from '../views/404Page.vue'
 
 const routes = [
   {
     path: '/',
-    redirect: '/home'
-  },
-  {
-    path: '/home',
     name: 'home',
     component: homeView
   },
@@ -23,6 +20,10 @@ const routes = [
     path: '/socials',
     name: 'socials',
     component: socialView
+  },
+  {
+    path: '/:pathMatch(.*)',
+    component: notFoundPage
   }
 ]
 

src/views/404Page.vue

@@ -1,3 +1,37 @@
 <template>
-  <div></div>
+  <div class="notFound">
+    <h1>404 Page</h1>
+    <p>This page has not been found, <router-link to="/">click here</router-link> to return back home.</p>
+  </div>
 </template>
+
+<style>
+.notFound {
+  display: flex;
+  flex-direction: column;
+  color: white;
+  font-family: 'Rubik', sans-serif;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.notFound h1 {
+  font-size: 70px;
+  padding: 20px;
+}
+
+.notFound p {
+  font-size: 30px;
+}
+
+.notFound a {
+  text-decoration: none;
+  color: #ADD8E6;
+  transition: 0.3s color;
+}
+
+.notFound a:hover {
+  color: #74d2f1
+}
+</style>

src/views/router/index.js

@@ -1,34 +0,0 @@
-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