Add 404 page

src/components/main/MainExperience.vue

@@ -44,7 +44,7 @@
       <div class="detail-value">(2021.05)</div>
     </li>
     <li class="bold">
-      <router-link to="/activity/algorithms" class="link">
+      <router-link to="/activity/algorithm" class="link">
         View all experiences related to algorithm
         <mdicon width="1.5rem" height="1.5rem" name="arrow-right" />
       </router-link>

src/router/index.ts

@@ -3,6 +3,7 @@ import MainView from "../views/MainView.vue";
 import ActivityView from "@/views/activity/ActivityView.vue";
 import ActivityAlgorithmView from "@/views/activity/ActivityAlgorithmView.vue";
 import ProjectView from "@/views/project/ProjectView.vue";
+import NotFoundView from "@/views/NotFoundView.vue";
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -25,6 +26,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "Project",
     component: ProjectView,
   },
+  {
+    path: "/:pathMatch(.*)*",
+    name: "NotFound",
+    component: NotFoundView,
+  },
 ];
 
 const router = createRouter({

src/views/NotFoundView.vue

@@ -0,0 +1,49 @@
+<template>
+  <section class="content-hr bottom"></section>
+  <section class="content-main">
+    <div class="not-found">
+      There is no page that you are looking for!
+      <a @click="$router.go(-1)" class="link">
+        <mdicon width="1.5rem" height="1.5rem" name="arrow-left" />
+        Go back
+      </a>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "NotFoundView",
+});
+</script>
+
+<style lang="scss" scoped>
+@use "@/styles";
+
+.content-main {
+  display: flex;
+  align-items: center;
+}
+
+.not-found {
+  font-size: 2rem;
+  font-weight: 600;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  justify-content: center;
+  align-items: flex-start;
+  width: fit-content;
+
+  a {
+    cursor: pointer;
+  }
+
+  .mdi {
+    margin-right: 1rem;
+  }
+}
+</style>