From e173b84fdff9d7fa39daca070c2490139325a378 Mon Sep 17 00:00:00 2001
From: Keyemail <67425124+Keyemail@users.noreply.github.com>
Date: Fri, 12 Jan 2024 19:51:20 -0800
Subject: [PATCH] added 404 and dropped /home

---
 src/router/index.js       |  9 +++++----
 src/views/404Page.vue     | 38 ++++++++++++++++++++++++++++++++++++--
 src/views/router/index.js | 34 ----------------------------------
 3 files changed, 41 insertions(+), 40 deletions(-)
 delete mode 100644 src/views/router/index.js

diff --git a/src/router/index.js b/src/router/index.js
index 1f662b2..0a2d197 100644
--- a/src/router/index.js
+++ b/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
   }
 ]
 
diff --git a/src/views/404Page.vue b/src/views/404Page.vue
index e5e6a79..4bb3101 100644
--- a/src/views/404Page.vue
+++ b/src/views/404Page.vue
@@ -1,3 +1,37 @@
 <template>
-  <div></div>
-</template>
\ No newline at end of file
+  <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>
\ No newline at end of file
diff --git a/src/views/router/index.js b/src/views/router/index.js
deleted file mode 100644
index 1f662b2..0000000
--- a/src/views/router/index.js
+++ /dev/null
@@ -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