diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..5c0d346
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+.nuxt
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..9954b43
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": false
+}
diff --git a/README.md b/README.md
index e9d0a9b..d285246 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,11 @@
 # My Website - [ngn13.fun](https://ngn13.fun)
+
 This repo contains the source code of my personal website.
 It's written NuxtJS and supports full SSR. As database,
 it uses mongodb.
 
 ## Setup
+
 ```
 git clone https://github.com/ngn13/ngn13.fun.git
 cd ngn13.fun && npm i
diff --git a/api/index.js b/api/index.js
index 6d88611..045c444 100644
--- a/api/index.js
+++ b/api/index.js
@@ -7,15 +7,16 @@ require("dotenv").config()
  * error: 1 -> parameter error
  * error: 2 -> auth error
  * error: 3 -> not found error
-*/
+ */
 
-const db = new MongoClient(process.env.DATABASE);
+const db = new MongoClient(process.env.DATABASE)
 const app = express()
 app.use(express.json())
-app.use(express.urlencoded({ extended: false }));
-app.use((req,res,next)=>{
-    req.db = db
-    next()
+app.use(express.urlencoded({ extended: false }))
+app.use(async (req, res, next) => {
+  await db.connect()
+  req.db = db
+  next()
 })
 
 const { auth, authware } = require("./routes/auth.js")
@@ -25,19 +26,21 @@ app.use("/*/a*", authware)
 const resources = require("./routes/resources.js")
 const projects = require("./routes/projects.js")
 const blog = require("./routes/blog.js")
-const routes = [
-  resources,
-  projects,
-  blog,
-  auth,
-]
+const routes = [resources, projects, blog, auth]
 
-routes.forEach(route=>{
+routes.forEach((route) => {
   app.use(route.path, route)
 })
 
+async function pexit() {
+  await db.close()
+  process.exit()
+}
+
+process.on("SIGTERM", pexit)
+process.on("SIGINT", pexit)
 
 export default {
   path: "/api",
-  handler: app,
+  handler: app
 }
diff --git a/api/routes/auth.js b/api/routes/auth.js
index 1304807..112245d 100644
--- a/api/routes/auth.js
+++ b/api/routes/auth.js
@@ -4,34 +4,30 @@ const auth = express.Router()
 auth.path = "/auth"
 
 const PASS = process.env.PASS
-let TOKEN = gimmeToken();
+let TOKEN = gimmeToken()
 
-function authware(req,res,next){
+function authware(req, res, next) {
   const token = req.query.token ? req.query.token : req.body.token
 
-  if(!token)
-    return res.json({ error: 1 })
+  if (typeof token !== "string") return res.json({ error: 1 })
 
-  if(token!==TOKEN)
-    return res.json({ error: 2 })
+  if (token !== TOKEN) return res.json({ error: 2 })
 
   next()
 }
 auth.use("/logout", authware)
 
-auth.get("/login", async (req,res)=>{
+auth.get("/login", async (req, res) => {
   const pass = req.query.pass
 
-  if(!pass)
-    return res.json({ error: 1 })
+  if (typeof pass !== "string") return res.json({ error: 1 })
 
-  if(pass!==PASS)
-    return res.json({ error: 2 })
+  if (pass !== PASS) return res.json({ error: 2 })
 
   res.json({ error: 0, token: TOKEN })
 })
 
-auth.get("/logout", async (req,res)=>{
+auth.get("/logout", async (req, res) => {
   TOKEN = gimmeToken()
   res.json({ error: 0 })
 })
diff --git a/api/routes/blog.js b/api/routes/blog.js
index 10363bd..9ca056a 100644
--- a/api/routes/blog.js
+++ b/api/routes/blog.js
@@ -3,25 +3,23 @@ const { makeID } = require("../util.js")
 const blog = express.Router()
 blog.path = "/blog"
 
-blog.get("/sum", async (req,res)=>{
-  await req.db.connect()
-  const db = await req.db.db("ngn13")
-  const col = await db.collection("posts")
-  const results = await col.find({priv: {$eq: false}}).toArray()
-  await req.db.close()
+blog.get("/sum", async (req, res) => {
+  const db = req.db.db("ngn13")
+  const col = db.collection("posts")
+  const results = await col.find({ priv: { $eq: false } }).toArray()
 
   let posts = []
-  for(let i = 0;i<results.length;i++){
+  for (let i = 0; i < results.length; i++) {
     posts.push({
-      "title":results[i]["title"],
-      "desc":results[i]["content"]
-        .substring(0, 140) // a short desc
-        .replaceAll("#", "") // remove all the markdown stuff
-        .replaceAll("*", "")
-        .replaceAll("`", "")
-        .replaceAll("-", "")
-         + "...", // add "..." to make it look like desc
-      "info":`${results[i]["author"]} | ${results[i]["date"]}`
+      title: results[i]["title"],
+      desc:
+        results[i]["content"]
+          .substring(0, 140) // a short desc
+          .replaceAll("#", "") // remove all the markdown stuff
+          .replaceAll("*", "")
+          .replaceAll("`", "")
+          .replaceAll("-", "") + "...", // add "..." to make it look like desc
+      info: `${results[i]["author"]} | ${results[i]["date"]}`
     })
   }
 
@@ -30,63 +28,59 @@ blog.get("/sum", async (req,res)=>{
   res.json({ error: 0, posts: posts.reverse() })
 })
 
-blog.get("/get", async (req,res)=>{
+blog.get("/get", async (req, res) => {
   const id = req.query.id
 
-  await req.db.connect()
-  const db = await req.db.db("ngn13")
-  const col = await db.collection("posts")
+  const db = req.db.db("ngn13")
+  const col = db.collection("posts")
   const results = await col.find().toArray()
-  await req.db.close()
 
-  for(let i = 0;i<results.length;i++){
+  for (let i = 0; i < results.length; i++) {
     // id is basically the title of the post
     // but ve remove the whitespace
     // and make it lowerspace
     // for example:
     // Online Privacy Guide -> onlineprivacyguide
-    if(makeID(results[i]["title"])===id){
-      return res.json(
-        {
-          error: 0,
-          post:{
-            "title": results[i]["title"],
-            // info is the subtitle, for example:
-            // ngn | 01/06/2023
-            "info": `${results[i]["author"]} | ${results[i]["date"]}`,
-            "content": results[i]["content"],
-          }
+    if (makeID(results[i]["title"]) === id) {
+      return res.json({
+        error: 0,
+        post: {
+          title: results[i]["title"],
+          // info is the subtitle, for example:
+          // ngn | 01/06/2023
+          info: `${results[i]["author"]} | ${results[i]["date"]}`,
+          content: results[i]["content"]
         }
-      )
+      })
     }
   }
 
   res.json({ error: 3 })
-
 })
 
-blog.post("/add", async (req,res)=>{
-  console.log("heyy")
+blog.post("/add", async (req, res) => {
   const title = req.body.title
   const author = req.body.author
   const content = req.body.content
   const priv = req.body.priv
-  console.log(title, author, content, priv)
 
-  if ( !title || !author || !content || !priv )
+  if (
+    typeof title !== "string" ||
+    typeof author !== "string" ||
+    typeof content !== "string" ||
+    typeof priv !== "string"
+  )
     return res.json({ error: 1 })
 
-  await req.db.connect()
-  const db = await req.db.db("ngn13")
-  const col = await db.collection("posts")
+  const db = req.db.db("ngn13")
+  const col = db.collection("posts")
   await col.insertOne({
-    "title":title,
-    "author":author,
-    "date": new Date().toLocaleDateString(),
-    "content":content,
-    "priv": priv
+    title: title,
+    author: author,
+    date: new Date().toLocaleDateString(),
+    content: content,
+    priv: priv
   })
-  await req.db.close()
   res.json({ error: 0 })
 })
 
diff --git a/api/routes/projects.js b/api/routes/projects.js
index 9ea5140..8232f67 100644
--- a/api/routes/projects.js
+++ b/api/routes/projects.js
@@ -2,33 +2,33 @@ const express = require("express")
 const projects = express.Router()
 projects.path = "/projects"
 
-projects.get("/get", async (req,res)=>{
-  await req.db.connect()
-  const db = await req.db.db("ngn13")
-  const col = await db.collection("projects")
+projects.get("/get", async (req, res) => {
+  const db = req.db.db("ngn13")
+  const col = db.collection("projects")
   const results = await col.find().toArray()
-  await req.db.close()
   res.json({ error: 0, projects: results })
 })
 
-projects.get("/add", async (req,res)=>{
-  let name = req.query.name;
-  let desc = req.query.desc;
-  let url = req.query.url;
+projects.get("/add", async (req, res) => {
+  let name = req.query.name
+  let desc = req.query.desc
+  let url = req.query.url
 
-  if (!name || !desc || !url )
+  if (
+    typeof name !== "string" ||
+    typeof desc !== "string" ||
+    typeof url !== "string"
+  )
     return res.json({ error: 1 })
 
-  await req.db.connect()
-  const db = await req.db.db("ngn13")
-  const col = await db.collection("projects")
+  const db = req.db.db("ngn13")
+  const col = db.collection("projects")
   await col.insertOne({
-    "name":name,
-    "desc":desc,
-    "url":url,
-    "click":0
+    name: name,
+    desc: desc,
+    url: url,
+    click: 0
   })
-  await req.db.close()
   res.json({ error: 0 })
 })
 
diff --git a/api/routes/resources.js b/api/routes/resources.js
index 06173df..a571b11 100644
--- a/api/routes/resources.js
+++ b/api/routes/resources.js
@@ -2,33 +2,31 @@ const express = require("express")
 const resources = express.Router()
 resources.path = "/resources"
 
-resources.get("/get", async (req,res)=>{
-  await req.db.connect()
-  const db = await req.db.db("ngn13")
-  const col = await db.collection("resources")
+resources.get("/get", async (req, res) => {
+  const db = req.db.db("ngn13")
+  const col = db.collection("resources")
   let results = []
-  if(req.query.sum)
-    results = await col.find().limit(10).toArray()
-  else
-    results = await col.find().toArray()
-  await req.db.close()
-  res.json({ error: 0, resources: results })
+  if (req.query.sum) results = await col.find().limit(10).toArray()
+  else results = await col.find().toArray()
+  res.json({ error: 0, resources: results.reverse() })
 })
 
-resources.get("/add", async (req,res)=>{
-  let name = req.query.name;
-  let tags = req.query.tags;
-  let url = req.query.url;
+resources.get("/add", async (req, res) => {
+  let name = req.query.name
+  let tags = req.query.tags
+  let url = req.query.url
 
-  if(!name || !tags || !url)
-    return res.json({"error":1})
+  if (
+    typeof name !== "string" ||
+    typeof tags !== "string" ||
+    typeof url !== "string"
+  )
+    return res.json({ error: 1 })
 
-  await req.db.connect()
-  const db = await req.db.db("ngn13")
-  const col = await db.collection("resources")
-  await col.insertOne({"name":name, "tags":tags.split(","), "url":url})
-  await req.db.close()
-  res.json({error: 0})
+  const db = req.db.db("ngn13")
+  const col = db.collection("resources")
+  await col.insertOne({ name: name, tags: tags.split(","), url: url })
+  res.json({ error: 0 })
 })
 
 module.exports = resources
diff --git a/api/util.js b/api/util.js
index 878748b..f59707b 100644
--- a/api/util.js
+++ b/api/util.js
@@ -1,14 +1,15 @@
 function gimmeToken() {
-    var result           = ""
-    var characters       = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
-    var charactersLength = characters.length
-    for ( var i = 0; i < 32; i++ ) {
-       result += characters.charAt(Math.floor(Math.random() * charactersLength));
-    }
-    return result;
+  var result = ""
+  var characters =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
+  var charactersLength = characters.length
+  for (var i = 0; i < 32; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength))
+  }
+  return result
 }
 
-function makeID(title){
+function makeID(title) {
   // this is used in blog.js
   // id is basically the title of the post
   // but ve remove the whitespace
@@ -19,4 +20,3 @@ function makeID(title){
 }
 
 module.exports = { gimmeToken, makeID }
-
diff --git a/components/Button.vue b/components/Button.vue
index f3caafe..5b8f585 100644
--- a/components/Button.vue
+++ b/components/Button.vue
@@ -1,29 +1,29 @@
 <template>
-    <button @click="click"><slot></slot></button>
+  <button @click="click"><slot></slot></button>
 </template>
 
 <script>
 export default {
-    props: ["click"]
+  props: ["click"]
 }
 </script>
 
 <style scoped>
 button {
-    text-align: center;
-    width: 540px;
-    font-size: 25px;
-    padding: 20px;
-    border-radius: 20px;
-    background: var(--dark-two);
-    border: none;
-    color: white;
-    outline: none;
-    cursor: pointer;
-    transition: .4s;
+  text-align: center;
+  width: 540px;
+  font-size: 25px;
+  padding: 20px;
+  border-radius: 20px;
+  background: var(--dark-two);
+  border: none;
+  color: white;
+  outline: none;
+  cursor: pointer;
+  transition: 0.4s;
 }
 
 button:hover {
-    box-shadow: var(--def-shadow);
+  box-shadow: var(--def-shadow);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/Card.vue b/components/Card.vue
index 4eba457..a5f5cfc 100644
--- a/components/Card.vue
+++ b/components/Card.vue
@@ -1,56 +1,54 @@
 <template>
-    <div>
-        <slot></slot>
-    </div>
+  <div>
+    <slot></slot>
+  </div>
 </template>
 
 <script>
-export default {
-
-}
+export default {}
 </script>
 
 <style scoped>
 div {
-    box-shadow: var(--def-shadow);
-    background: var(--dark-two);
-    width: 100%;
-    height: auto;
-    padding: 50px;
-    color: white;
+  box-shadow: var(--def-shadow);
+  background: var(--dark-two);
+  width: 100%;
+  height: auto;
+  padding: 50px;
+  color: white;
 }
 
 h1 {
-    text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
-    font-size: 50px;
-    margin-bottom: 30px;
-    text-decoration: underline;
+  text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
+  font-size: 50px;
+  margin-bottom: 30px;
+  text-decoration: underline;
 }
 
 i {
-    animation-name: colorAnimation;
-    animation-duration: 10s;
-    animation-iteration-count: infinite;
+  animation-name: colorAnimation;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
 }
 
 a:hover {
-    font-weight: 900;
+  font-weight: 900;
 }
 
 i {
-    font-size: 30px;
-    margin-top: 3px;
+  font-size: 30px;
+  margin-top: 3px;
 }
 
 h2 {
-    font-size: 40px;
-    line-height: 60px;
+  font-size: 40px;
+  line-height: 60px;
 }
 
 a {
-    font-size: 40px;
-    color: white;
-    line-height: 60px;
-    text-decoration: none;
+  font-size: 40px;
+  color: white;
+  line-height: 60px;
+  text-decoration: none;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/Header.vue b/components/Header.vue
index 3c40094..9856422 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -1,31 +1,30 @@
 <template>
-    <div class="header">
-        <h1>
-            <slot></slot>
-        </h1>
-    </div>
+  <div class="header">
+    <h1>
+      <slot></slot>
+    </h1>
+  </div>
 </template>
 
 <script>
-export default {
-
-}
+export default {}
 </script>
 
 <style scoped>
 div {
-    background: linear-gradient(rgba(3, 3, 3, 0.706), rgba(22, 22, 22, 0.808)), url("https://www.sketchappsources.com/resources/source-image/tv-glitch-sureshmurali29.png");
-    width: 100%;
-    height: 100%;
+  background: linear-gradient(rgba(3, 3, 3, 0.706), rgba(22, 22, 22, 0.808)),
+    url("https://www.sketchappsources.com/resources/source-image/tv-glitch-sureshmurali29.png");
+  width: 100%;
+  height: 100%;
 }
 
 h1 {
-    font-weight: 900;
-    font-size: 7.5vw;
-    padding: 150px;
-    text-align: center;
-    color: white;
-    text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
-    text-size-adjust: 80%;
+  font-weight: 900;
+  font-size: 7.5vw;
+  padding: 150px;
+  text-align: center;
+  color: white;
+  text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
+  text-size-adjust: 80%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/Input.vue b/components/Input.vue
index 12dfe3c..1b88429 100644
--- a/components/Input.vue
+++ b/components/Input.vue
@@ -1,27 +1,27 @@
 <template>
-    <input v-on:keyup="keyup" :placeholder="placeholder" :type="type">
+  <input v-on:keyup="keyup" :placeholder="placeholder" :type="type" />
 </template>
 
 <script>
 export default {
-    props:["keyup", "placeholder", "type"]
+  props: ["keyup", "placeholder", "type"]
 }
 </script>
 
 <style scoped>
 input {
-    width: 500px;
-    font-size: 25px;
-    padding: 20px;
-    border-radius: 20px;
-    background: var(--dark-two);
-    border: none;
-    color: white;
-    outline: none;
-    transition: .4s;
+  width: 500px;
+  font-size: 25px;
+  padding: 20px;
+  border-radius: 20px;
+  background: var(--dark-two);
+  border: none;
+  color: white;
+  outline: none;
+  transition: 0.4s;
 }
 
 input:focus {
-    box-shadow: var(--def-shadow);
+  box-shadow: var(--def-shadow);
 }
 </style>
diff --git a/components/Logout.vue b/components/Logout.vue
index d3d2682..0515e8c 100644
--- a/components/Logout.vue
+++ b/components/Logout.vue
@@ -1,41 +1,41 @@
 <template>
-    <div>
-        <h1>Currently logged in</h1>
-        <Button :click="click">Logout</Button>
-    </div>
+  <div>
+    <h1>Currently logged in</h1>
+    <Button :click="click">Logout</Button>
+  </div>
 </template>
 
 <script>
-import axios from 'axios';
-import Button from './Button.vue';
+import axios from "axios"
+import Button from "./Button.vue"
 
 export default {
-    methods: {
-        async click(e) {
-            await axios.get(`/api/auth/logout?token=${localStorage.getItem("token")}`)
-            localStorage.clear()
-            location.reload()
-        }
-    },
+  methods: {
+    async click(e) {
+      await axios.get(`/api/auth/logout?token=${localStorage.getItem("token")}`)
+      localStorage.clear()
+      location.reload()
+    }
+  }
 }
 </script>
 
 <style scoped>
-h1{
-    color: var(--white);
-    font-size: 50px;
-    margin-bottom: 20px;
-    text-align: center;
+h1 {
+  color: var(--white);
+  font-size: 50px;
+  margin-bottom: 20px;
+  text-align: center;
 }
 
-div{
-    background-color: var(--dark-three);
-    padding: 50px;
-    margin-top: 50px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    align-items: center;
-    justify-content: center;
+div {
+  background-color: var(--dark-three);
+  padding: 50px;
+  margin-top: 50px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: center;
+  justify-content: center;
 }
 </style>
diff --git a/components/Navbar.vue b/components/Navbar.vue
index 0afb6ed..5b28531 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -1,53 +1,55 @@
 <template>
-	<nav>
-		<div>
-			<h3>[ngn]</h3>
-		</div>
-		<div>
-			<NavbarLink :out="false" url="/">Home</NavbarLink>
-			<NavbarLink :out="false" url="/projects">Projects</NavbarLink>
-			<NavbarLink :out="false" url="/resources">Resources</NavbarLink>
-			<NavbarLink :out="false" url="/blog">Blog</NavbarLink>
-			<NavbarLink :out="true" url="http://github.com/ngn13/ngn13.fun">Source</NavbarLink>
-		</div>
-	</nav>
+  <nav>
+    <div>
+      <h3>[ngn]</h3>
+    </div>
+    <div>
+      <NavbarLink :out="false" url="/">Home</NavbarLink>
+      <NavbarLink :out="false" url="/projects">Projects</NavbarLink>
+      <NavbarLink :out="false" url="/resources">Resources</NavbarLink>
+      <NavbarLink :out="false" url="/blog">Blog</NavbarLink>
+      <NavbarLink :out="true" url="http://github.com/ngn13/ngn13.fun"
+        >Source</NavbarLink
+      >
+    </div>
+  </nav>
 </template>
 
 <script>
-import NavbarLink from "./NavbarLink.vue";
+import NavbarLink from "./NavbarLink.vue"
 
 export default {}
 </script>
 
 <style scoped>
 nav {
-	background: var(--dark-two);
-	padding: 25px 35px 30px 35px;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-	border-bottom: solid 3px black;
-	animation-name: borderAnimation;
-	animation-duration: 10s;
-	animation-iteration-count: infinite;
-	box-shadow: var(--def-shadow);
+  background: var(--dark-two);
+  padding: 25px 35px 30px 35px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: solid 3px black;
+  animation-name: borderAnimation;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  box-shadow: var(--def-shadow);
 }
 
 div {
-	display: flex;
-	overflow: hidden;
-	align-items: center;
-	justify-content: center;
-	gap: 5px;
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
 }
 
 h3 {
-	font-weight: 900;
-	font-size: 30px;
-	color: red;
-	animation-name: colorAnimation;
-	animation-iteration-count: infinite;
-	animation-duration: 10s;
+  font-weight: 900;
+  font-size: 30px;
+  color: red;
+  animation-name: colorAnimation;
+  animation-iteration-count: infinite;
+  animation-duration: 10s;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/NavbarLink.vue b/components/NavbarLink.vue
index a4bc77c..eaddee5 100644
--- a/components/NavbarLink.vue
+++ b/components/NavbarLink.vue
@@ -1,60 +1,60 @@
 <template>
-	<div>
-		<nuxt-link v-if="!out" :class="cname" id="link" :to="url">
-			<slot></slot>
-		</nuxt-link>
-		<a v-if="out" :class="cname" id="link" :href="url">
-			<slot></slot>
-		</a>
-	</div>
+  <div>
+    <nuxt-link v-if="!out" :class="cname" id="link" :to="url">
+      <slot></slot>
+    </nuxt-link>
+    <a v-if="out" :class="cname" id="link" :href="url">
+      <slot></slot>
+    </a>
+  </div>
 </template>
 
 <script>
 export default {
-	props: ["url", "out"],
-	data() {
-		return {
-			cname: "notcurrent"
-		}
-	},
-	mounted(){
-		let url = window.location.pathname
-		if(url===this.url){
-			this.cname = "current"
-		}
-	}
+  props: ["url", "out"],
+  data() {
+    return {
+      cname: "notcurrent"
+    }
+  },
+  mounted() {
+    let url = window.location.pathname
+    if (url === this.url) {
+      this.cname = "current"
+    }
+  }
 }
 </script>
 
 <style scoped>
 .notcurrent {
-	margin-left: 20px;
-	font-weight: 700;
-	font-size: 25px;
-	text-decoration: none;
-	color: white;
-	cursor: pointer;
+  margin-left: 20px;
+  font-weight: 700;
+  font-size: 25px;
+  text-decoration: none;
+  color: white;
+  cursor: pointer;
 }
 
 .notcurrent:hover {
-	text-decoration: underline;
-	animation-name: underlineAnimation;
-	animation-duration: 5s;
-	animation-iteration-count: infinite;
-	text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
+  text-decoration: underline;
+  animation-name: underlineAnimation;
+  animation-duration: 5s;
+  animation-iteration-count: infinite;
+  text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
 }
 
-.current{
-	margin-left: 20px;
-	font-weight: 700;
-	font-size: 25px;
-	text-decoration: none;
-	color: white;
-	cursor: pointer;
-	text-decoration: underline;
-	animation-name: underlineAnimation;
-	animation-duration: 10s;
-	animation-iteration-count: infinite;
-	text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
+.current {
+  margin-left: 20px;
+  font-weight: 700;
+  font-size: 25px;
+  text-decoration: none;
+  color: white;
+  cursor: pointer;
+  text-decoration: underline;
+  animation-name: underlineAnimation;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/NewPost.vue b/components/NewPost.vue
index 8907ac6..99b0d75 100644
--- a/components/NewPost.vue
+++ b/components/NewPost.vue
@@ -1,57 +1,72 @@
 <template>
-    <main>
-        <h1>Add New Post</h1>
-        <div class="textareas">
-            <Input :keyup="function() { }" id="title" placeholder="Post Title" type="text"/>
-            <Input :keyup="function() { }" id="author" placeholder="Author" type="text"/>
-            <h2>
-              Make the post private
-              <input id="private" type="checkbox"/>
-            </h2>
-        </div>
-        <textarea name="content" id="content" cols="30" rows="10" placeholder="Content"></textarea>
-        <Button :click="click">Post</Button>
-    </main>
+  <main>
+    <h1>Add New Post</h1>
+    <div class="textareas">
+      <Input
+        :keyup="function () {}"
+        id="title"
+        placeholder="Post Title"
+        type="text"
+      />
+      <Input
+        :keyup="function () {}"
+        id="author"
+        placeholder="Author"
+        type="text"
+      />
+      <h2>
+        Make the post private
+        <input id="private" type="checkbox" />
+      </h2>
+    </div>
+    <textarea
+      name="content"
+      id="content"
+      cols="30"
+      rows="10"
+      placeholder="Content"
+    ></textarea>
+    <Button :click="click">Post</Button>
+  </main>
 </template>
 
 <script>
-import axios from 'axios';
-import Input from './Input.vue';
-import Button from './Button.vue';
+import axios from "axios"
+import Input from "./Input.vue"
+import Button from "./Button.vue"
 
 export default {
-    methods: {
-        async click(e) {
-            const title = document.getElementById("title").value
-            const author = document.getElementById("author").value
-            const content = document.getElementById("content").value
-            const priv = document.getElementById("private").value
-            const token = localStorage.getItem("token")
-            const res = await axios.post("/api/blog/add", {
-                token: token,
-                title: title,
-                author: author,
-                content: content,
-                priv: priv==="on"
-            })
-            if(res.data["error"]!==0)
-                return alert("Error!")
-            alert("Post added!")
-            location.reload()
-        }
-    },
+  methods: {
+    async click(e) {
+      const title = document.getElementById("title").value
+      const author = document.getElementById("author").value
+      const content = document.getElementById("content").value
+      const priv = document.getElementById("private").value
+      const token = localStorage.getItem("token")
+      const res = await axios.post("/api/blog/add", {
+        token: token,
+        title: title,
+        author: author,
+        content: content,
+        priv: priv === "on"
+      })
+      if (res.data["error"] !== 0) return alert("Error!")
+      alert("Post added!")
+      location.reload()
+    }
+  }
 }
 </script>
 
 <style scoped>
-h1{
-    color: var(--white);
-    font-size: 50px;
-    margin-bottom: 20px;
-    text-align: center;
+h1 {
+  color: var(--white);
+  font-size: 50px;
+  margin-bottom: 20px;
+  text-align: center;
 }
 
-h2{
+h2 {
   background: var(--dark-two);
   font-size: 25px;
   border-radius: 20px;
@@ -71,38 +86,38 @@ input[type="checkbox"] {
   padding: 10px;
 }
 
-textarea{
-    width: 500px;
-    font-size: 20px;
-    padding: 20px;
-    border-radius: 20px;
-    background: var(--dark-two);
-    border: none;
-    color: white;
-    outline: none;
-    resize: vertical;
-    height: 200px;
-    transition: .4s;
+textarea {
+  width: 500px;
+  font-size: 20px;
+  padding: 20px;
+  border-radius: 20px;
+  background: var(--dark-two);
+  border: none;
+  color: white;
+  outline: none;
+  resize: vertical;
+  height: 200px;
+  transition: 0.4s;
 }
 
 .textareas {
-    flex-direction: column;
-    display: flex;
-    gap: 20px;
+  flex-direction: column;
+  display: flex;
+  gap: 20px;
 }
 
 textarea:focus {
-    box-shadow: var(--def-shadow);
+  box-shadow: var(--def-shadow);
 }
 
-main{
-    background-color: var(--dark-three);
-    padding: 50px;
-    margin-top: 50px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    align-items: center;
-    justify-content: center;
+main {
+  background-color: var(--dark-three);
+  padding: 50px;
+  margin-top: 50px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: center;
+  justify-content: center;
 }
 </style>
diff --git a/components/NewProject.vue b/components/NewProject.vue
index b9e3458..bf9256e 100644
--- a/components/NewProject.vue
+++ b/components/NewProject.vue
@@ -1,51 +1,67 @@
 <template>
-    <div>
-        <h1>Add Project</h1>
-        <Input :keyup="function() { }" id="name" placeholder="Project Name" type="text"/>
-        <Input :keyup="function() { }" id="desc" placeholder="Project Desc" type="text"/>
-        <Input :keyup="function() { }" id="url" placeholder="Project URL" type="text"/>
-        <Button :click="click">Post</Button>
-    </div>
+  <div>
+    <h1>Add Project</h1>
+    <Input
+      :keyup="function () {}"
+      id="name"
+      placeholder="Project Name"
+      type="text"
+    />
+    <Input
+      :keyup="function () {}"
+      id="desc"
+      placeholder="Project Desc"
+      type="text"
+    />
+    <Input
+      :keyup="function () {}"
+      id="url"
+      placeholder="Project URL"
+      type="text"
+    />
+    <Button :click="click">Post</Button>
+  </div>
 </template>
 
 <script>
-import axios from 'axios';
-import Input from './Input.vue';
-import Button from './Button.vue';
+import axios from "axios"
+import Input from "./Input.vue"
+import Button from "./Button.vue"
 
 export default {
-    methods: {
-        async click(e) {
-            const name = document.getElementById("name").value
-            const desc = document.getElementById("desc").value
-            const url = document.getElementById("url").value
-            const token = localStorage.getItem("token")
-            const res = await axios.get(`/api/projects/add?token=${token}&name=${name}&desc=${desc}&url=${url}`)
-            if(res.data["error"]!==0)
-                return alert("Error!")
-            alert("Project added!")
-            location.reload()
-        }
-    },
+  methods: {
+    async click(e) {
+      const name = document.getElementById("name").value
+      const desc = document.getElementById("desc").value
+      const url = document.getElementById("url").value
+      const token = localStorage.getItem("token")
+      const res = await axios.get(
+        `/api/projects/add?token=${token}&name=${name}&desc=${desc}&url=${url}`
+      )
+      if (res.data["error"] !== 0) return alert("Error!")
+      alert("Project added!")
+      location.reload()
+    }
+  }
 }
 </script>
 
 <style scoped>
-h1{
-    color: var(--white);
-    font-size: 50px;
-    margin-bottom: 20px;
-    text-align: center;
+h1 {
+  color: var(--white);
+  font-size: 50px;
+  margin-bottom: 20px;
+  text-align: center;
 }
 
-div{
-    background-color: var(--dark-three);
-    padding: 50px;
-    margin-top: 50px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    align-items: center;
-    justify-content: center;
+div {
+  background-color: var(--dark-three);
+  padding: 50px;
+  margin-top: 50px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: center;
+  justify-content: center;
 }
 </style>
diff --git a/components/NewResource.vue b/components/NewResource.vue
index 59bdc47..b0b94fd 100644
--- a/components/NewResource.vue
+++ b/components/NewResource.vue
@@ -1,51 +1,67 @@
 <template>
-    <div>
-        <h1>Add Resource</h1>
-        <Input :keyup="function(){}" id="name" placeholder="Resource Name" type="text"/>
-        <Input :keyup="function(){}" id="tags" placeholder="Resource Tags (comma seperated)" type="text"/>
-        <Input :keyup="function(){}" id="url" placeholder="Resource URL" type="text"/>
-        <Button :click="click">Post</Button>
-    </div>
+  <div>
+    <h1>Add Resource</h1>
+    <Input
+      :keyup="function () {}"
+      id="name"
+      placeholder="Resource Name"
+      type="text"
+    />
+    <Input
+      :keyup="function () {}"
+      id="tags"
+      placeholder="Resource Tags (comma seperated)"
+      type="text"
+    />
+    <Input
+      :keyup="function () {}"
+      id="url"
+      placeholder="Resource URL"
+      type="text"
+    />
+    <Button :click="click">Post</Button>
+  </div>
 </template>
 
 <script>
-import Input from './Input.vue';
-import Button from './Button.vue';
-import axios from 'axios';
+import Input from "./Input.vue"
+import Button from "./Button.vue"
+import axios from "axios"
 
 export default {
-    methods: {
-        async click(e) {
-            const name = document.getElementById("name").value
-            const tags = document.getElementById("tags").value
-            const url = document.getElementById("url").value
-            const token = localStorage.getItem("token")
-            const res = await axios.get(`/api/resources/add?token=${token}&name=${name}&tags=${tags}&url=${url}`)
-            if(res.data["error"]!==0)
-                return alert("Error!")
-            alert("Resource added!")
-            location.reload()
-        }
-    },
+  methods: {
+    async click(e) {
+      const name = document.getElementById("name").value
+      const tags = document.getElementById("tags").value
+      const url = document.getElementById("url").value
+      const token = localStorage.getItem("token")
+      const res = await axios.get(
+        `/api/resources/add?token=${token}&name=${name}&tags=${tags}&url=${url}`
+      )
+      if (res.data["error"] !== 0) return alert("Error!")
+      alert("Resource added!")
+      location.reload()
+    }
+  }
 }
 </script>
 
 <style scoped>
-h1{
-    color: var(--white);
-    font-size: 50px;
-    margin-bottom: 20px;
-    text-align: center;
+h1 {
+  color: var(--white);
+  font-size: 50px;
+  margin-bottom: 20px;
+  text-align: center;
 }
 
-div{
-    background-color: var(--dark-three);
-    padding: 50px;
-    margin-top: 50px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    align-items: center;
-    justify-content: center;
+div {
+  background-color: var(--dark-three);
+  padding: 50px;
+  margin-top: 50px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: center;
+  justify-content: center;
 }
 </style>
diff --git a/components/Post.vue b/components/Post.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/components/PostPreview.vue b/components/PostPreview.vue
index 82840a8..2b15b95 100644
--- a/components/PostPreview.vue
+++ b/components/PostPreview.vue
@@ -1,42 +1,42 @@
 <template>
-<nuxt-link :to="url">
+  <nuxt-link :to="url">
     <h1>{{ title }}</h1>
     <p>{{ info }}</p>
-    <h2>{{ desc }}</h2> 
-</nuxt-link>
+    <h2>{{ desc }}</h2>
+  </nuxt-link>
 </template>
 
 <script>
 export default {
-    props: ["title", "desc", "info", "url"],
+  props: ["title", "desc", "info", "url"]
 }
 </script>
 
 <style scoped>
-a{
-    padding: 30px;
-    color: white;
-    background: var(--dark-two);
-    cursor: pointer;
-    text-decoration: none;
-    transition: .4s;
-    width: 70%;
+a {
+  padding: 30px;
+  color: white;
+  background: var(--dark-two);
+  cursor: pointer;
+  text-decoration: none;
+  transition: 0.4s;
+  width: 70%;
 }
 
-a:hover{
-    box-shadow: var(--def-shadow);
+a:hover {
+  box-shadow: var(--def-shadow);
 }
 
-h1{
-    font-size: 40px;
-    margin-bottom: 5px;
-    animation-name: colorAnimation;
-    animation-iteration-count: infinite;
-    animation-duration: 10s;
-    text-shadow: none;
+h1 {
+  font-size: 40px;
+  margin-bottom: 5px;
+  animation-name: colorAnimation;
+  animation-iteration-count: infinite;
+  animation-duration: 10s;
+  text-shadow: none;
 }
 
-h2{
-    margin-top: 10px;
+h2 {
+  margin-top: 10px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/Project.vue b/components/Project.vue
index 1012e51..e5311f9 100644
--- a/components/Project.vue
+++ b/components/Project.vue
@@ -1,62 +1,62 @@
 <template>
-    <main @click="redirect()">
-        <i class='bx bx-code-alt'></i>
-        <div>
-            <h1>{{ name }}</h1>
-            <h2>{{ desc }}</h2>
-        </div>
-    </main>
+  <main @click="redirect()">
+    <i class="bx bx-code-alt"></i>
+    <div>
+      <h1>{{ name }}</h1>
+      <h2>{{ desc }}</h2>
+    </div>
+  </main>
 </template>
 
 <script>
 export default {
-    props: ["name", "desc", "url"],
-    methods: {
-        redirect(e) {
-            location.href=this.url
-        }
-    },
+  props: ["name", "desc", "url"],
+  methods: {
+    redirect(e) {
+      location.href = this.url
+    }
+  }
 }
 </script>
 
 <style scoped>
 main {
-    color: var(--white);
-    background: var(--dark-two);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 20px;
-    padding: 40px;
-    cursor: pointer;
-    transition: .4s;
-    height: 100px;
-    width: 450px;
+  color: var(--white);
+  background: var(--dark-two);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 20px;
+  padding: 40px;
+  cursor: pointer;
+  transition: 0.4s;
+  height: 100px;
+  width: 450px;
 }
 
-main:hover{
-    box-shadow: var(--def-shadow);
+main:hover {
+  box-shadow: var(--def-shadow);
 }
 
-i{
-    font-size: 65px;
-    animation-name: colorAnimation;
-    animation-duration: 10s;
-    animation-iteration-count: infinite;
+i {
+  font-size: 65px;
+  animation-name: colorAnimation;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
 }
 
-h1{
-    font-size: 35px;
-    margin-bottom: 10px;
+h1 {
+  font-size: 35px;
+  margin-bottom: 10px;
 }
 
-h2{
-    font-size: 25px;
+h2 {
+  font-size: 25px;
 }
 
 @media only screen and (max-width: 1416px) {
-    main{
-        width: 80%;
-    }
+  main {
+    width: 80%;
+  }
 }
 </style>
diff --git a/components/ProjectList.vue b/components/ProjectList.vue
index b71107b..6c47ead 100644
--- a/components/ProjectList.vue
+++ b/components/ProjectList.vue
@@ -1,28 +1,26 @@
 <template>
-    <div>
-        <slot></slot>
-    </div>
+  <div>
+    <slot></slot>
+  </div>
 </template>
 
 <script>
-export default {
-
-}
+export default {}
 </script>
 
 <style scoped>
-div{
-    display: flex;
-    flex-direction: row;
-    padding: 15px;
-    align-items: center;
-    justify-content: center;
-    gap: 30px;
+div {
+  display: flex;
+  flex-direction: row;
+  padding: 15px;
+  align-items: center;
+  justify-content: center;
+  gap: 30px;
 }
 
 @media only screen and (max-width: 1416px) {
-    div {
-        flex-direction: column;
-    }
+  div {
+    flex-direction: column;
+  }
 }
 </style>
diff --git a/components/Resource.vue b/components/Resource.vue
index b251845..df74ce8 100644
--- a/components/Resource.vue
+++ b/components/Resource.vue
@@ -1,66 +1,66 @@
 <template>
-    <main @click="redirect()" class="mn">
-        <div class="resource">
-            <h1>{{ name }}</h1>
-            <div class="tags">
-                <Tag v-for="tag in tags" :key="tag">{{ tag }}</Tag>
-            </div>
-        </div>
-        <i class='bx bx-right-arrow-alt' ></i>
-    </main>
+  <main @click="redirect()" class="mn">
+    <div class="resource">
+      <h1>{{ name }}</h1>
+      <div class="tags">
+        <Tag v-for="tag in tags" :key="tag">{{ tag }}</Tag>
+      </div>
+    </div>
+    <i class="bx bx-right-arrow-alt"></i>
+  </main>
 </template>
 
 <script>
-import Tag from './Tag.vue';
+import Tag from "./Tag.vue"
 
 export default {
-    props: ["tags", "name", "url"],
-    methods: {
-        redirect(e){
-            location.href = this.url
-        }
+  props: ["tags", "name", "url"],
+  methods: {
+    redirect(e) {
+      location.href = this.url
     }
+  }
 }
 </script>
 
 <style scoped>
-main{
-    background: var(--dark-two);
-    padding: 30px 40px 30px 40px;
-    display: flex;
-    flex-direction: row;
-    color: var(--white);
-    justify-content: space-between;
-    align-items: center;
-    transition: .4s;
-    width: 80%;
-    cursor: pointer;
+main {
+  background: var(--dark-two);
+  padding: 30px 40px 30px 40px;
+  display: flex;
+  flex-direction: row;
+  color: var(--white);
+  justify-content: space-between;
+  align-items: center;
+  transition: 0.4s;
+  width: 80%;
+  cursor: pointer;
 }
 
-main:hover{
-    box-shadow: var(--def-shadow);
+main:hover {
+  box-shadow: var(--def-shadow);
 }
 
-.mn:hover i{
-    color: white;
+.mn:hover i {
+  color: white;
 }
 
-.resource{
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+.resource {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
-.tags{
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
+.tags {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
 }
 
-i{
-    font-size: 70px;
-    cursor: pointer;
-    color: var(--dark-two);
-    transition: .4s;
+i {
+  font-size: 70px;
+  cursor: pointer;
+  color: var(--dark-two);
+  transition: 0.4s;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/Tag.vue b/components/Tag.vue
index 280fce9..28cff69 100644
--- a/components/Tag.vue
+++ b/components/Tag.vue
@@ -1,24 +1,20 @@
 <template>
-    <p>
-        #<slot></slot>
-    </p>
+  <p>#<slot></slot></p>
 </template>
 
 <script>
-export default {
-
-}
+export default {}
 </script>
 
 <style scoped>
-    p{
-        background: var(--dark-three);
-        color: white;
-        text-shadow: 1px 1px 2px white;
-        padding: 5px 10px 5px 10px;
-        font-size: 25px;
-        border-radius: 7px;
-        margin-top: 10px;
-        transition: .4s;
-    }
-</style>
\ No newline at end of file
+p {
+  background: var(--dark-three);
+  color: white;
+  text-shadow: 1px 1px 2px white;
+  padding: 5px 10px 5px 10px;
+  font-size: 25px;
+  border-radius: 7px;
+  margin-top: 10px;
+  transition: 0.4s;
+}
+</style>
diff --git a/ecosystem.config.js b/ecosystem.config.js
index ff4561c..ddffb4b 100644
--- a/ecosystem.config.js
+++ b/ecosystem.config.js
@@ -1,11 +1,11 @@
 module.exports = {
   apps: [
     {
-      name: 'My Website',
-      exec_mode: 'cluster',
-      instances: 'max', // Or a number of instances
-      script: './node_modules/nuxt/bin/nuxt.js',
-      args: 'start'
+      name: "My Website",
+      exec_mode: "cluster",
+      instances: "max", // Or a number of instances
+      script: "./node_modules/nuxt/bin/nuxt.js",
+      args: "start"
     }
   ]
 }
diff --git a/layouts/error.vue b/layouts/error.vue
new file mode 100644
index 0000000..ad45e27
--- /dev/null
+++ b/layouts/error.vue
@@ -0,0 +1,7 @@
+<script>
+export default {
+  mounted() {
+    this.$router.push({ path: "/" })
+  }
+}
+</script>
diff --git a/links/index.js b/links/index.js
index 5428467..5b52c83 100644
--- a/links/index.js
+++ b/links/index.js
@@ -1,37 +1,46 @@
-const express = require("express");
-const { MongoClient } = require("mongodb");
+const express = require("express")
+const { MongoClient } = require("mongodb")
 const { makeID } = require("../api/util.js")
 require("dotenv").config()
 
-const app = express();
-app.use(express.json());
-app.use(express.urlencoded({ extended: false }));
+const app = express()
+app.use(express.json())
+app.use(express.urlencoded({ extended: false }))
 
-const client = new MongoClient(process.env.DATABASE);
+const client = new MongoClient(process.env.DATABASE)
 
-app.get("/:id", async (req,res)=>{
+app.get("/:id", async (req, res) => {
   const id = req.params.id
 
+  if (typeof id !== "string") return res.redirect("/projects")
+
   await client.connect()
-  const db = await client.db("ngn13")
-  const col = await db.collection("projects")
+  const db = client.db("ngn13")
+  const col = db.collection("projects")
   const projects = await col.find().toArray()
 
-  console.log(projects)
-
-  for(let i=0; i<projects.length;i++){
-    if(makeID(projects[i]["name"])===id){
+  for (let i = 0; i < projects.length; i++) {
+    if (makeID(projects[i]["name"]) === id) {
       res.redirect(projects[i]["url"])
-      await col.updateOne({ name: projects[i]["name"] }, { "$set":
-        { "click": projects[i]["click"]+1 }})
-      return await client.close()
+      await col.updateOne(
+        { name: projects[i]["name"] },
+        { $set: { click: projects[i]["click"] + 1 } }
+      )
     }
   }
-  await client.close()
+
   return res.redirect("/projects")
 })
 
+async function pexit() {
+  await client.close()
+  process.exit()
+}
+
+process.on("SIGTERM", pexit)
+process.on("SIGINT", pexit)
+
 export default {
   path: "/l",
-  handler: app,
+  handler: app
 }
diff --git a/nuxt.config.js b/nuxt.config.js
index 0a0fac9..6478a71 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -2,7 +2,7 @@ export default {
   head: {
     title: "[ngn]",
     htmlAttrs: {
-      lang: "en",
+      lang: "en"
     },
     meta: [
       { charset: "utf-8" },
@@ -10,14 +10,24 @@ export default {
       { hid: "description", name: "description", content: "" },
       { name: "format-detection", content: "telephone=no" },
       { hid: "og:title", content: "[ngn]" },
-      { hid: "og:description",  content: "personal website of ngn | read my blogs, check out my projects, discover cool resources" },
-      { hid: "og:url",  content: "https://ngn13.fun" },
-      { name: "theme-color", content: "#141414", "data-react-helmet":"true"},
+      {
+        hid: "og:description",
+        content:
+          "personal website of ngn | read my blogs, check out my projects, discover cool resources"
+      },
+      { hid: "og:url", content: "https://ngn13.fun" },
+      { name: "theme-color", content: "#141414", "data-react-helmet": "true" }
     ],
 
     link: [
-      { rel: "stylesheet", href: "https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" },
-      { rel: "stylesheet", href: "https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown-dark.css" }
+      {
+        rel: "stylesheet",
+        href: "https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
+      },
+      {
+        rel: "stylesheet",
+        href: "https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown-dark.css"
+      }
     ]
   },
   css: ["@/static/global.css"],
@@ -26,11 +36,11 @@ export default {
   buildModules: [],
   modules: ["@nuxtjs/axios"],
   axios: {
-    baseURL: "/",
+    baseURL: "/"
   },
   build: {},
   serverMiddleware: {
     "/api": "~/api",
-    "/l": "~/links",
-  },
-};
+    "/l": "~/links"
+  }
+}
diff --git a/package.json b/package.json
index 40e2c22..1fde146 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-website",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "private": true,
   "scripts": {
     "dev": "nuxt",
diff --git a/pages/blog/_id/index.vue b/pages/blog/_id/index.vue
index 8acd2b2..4af7485 100644
--- a/pages/blog/_id/index.vue
+++ b/pages/blog/_id/index.vue
@@ -1,108 +1,110 @@
 <template>
-    <div class="all">
-        <Navbar />
-        <Header>
-            <label class="glitch title">{{ post.title }}</label>
-            <p>{{ post.info }}</p>
-        </Header>
-        <div class="postcontain">
-            <main class="markdown-body" v-html="content"></main>
-        </div>
+  <div class="all">
+    <Navbar />
+    <Header>
+      <label class="glitch title">{{ post.title }}</label>
+      <p>{{ post.info }}</p>
+    </Header>
+    <div class="postcontain">
+      <main class="markdown-body" v-html="content"></main>
     </div>
+  </div>
 </template>
 
 <script>
-import Navbar from "../../../components/Navbar.vue";
-import Header from "../../../components/Header.vue";
-import axios from "axios";
-import * as DOMPurify from "dompurify";
-import marked from "marked";
+import Navbar from "../../../components/Navbar.vue"
+import Header from "../../../components/Header.vue"
+import axios from "axios"
+import * as DOMPurify from "dompurify"
+import marked from "marked"
 
 export default {
-    head() {
-        return {
-            title: "[ngn] | " + this.post.title,
-            meta: [
-                {
-                    hid: "description",
-                    name: "description",
-                    content: "read my blog posts"
-                }
-            ]
-        };
-    },
-
-
-    data() {
-        return {
-            post: {},
-            lang: "",
-            content: "",
+  head() {
+    return {
+      title: "[ngn] | " + this.post.title,
+      meta: [
+        {
+          hid: "description",
+          name: "description",
+          content: "read my blog posts"
         }
-    },
-
-    async created() {
-        const res = await axios.get(`/api/blog/get?id=${this.$route.params.id}`)
-        if (res.data["error"] === 3)
-            return this.$router.push({ path: "/blog" })
-        this.post = res.data["post"]
-        this.post["content"] = this.post["content"].replaceAll("\n<br>\n<br>\n", "\n\n")
-        this.content = DOMPurify.sanitize(
-          marked.parse(this.post["content"], { breaks: true }),
-          { ADD_TAGS: ["iframe"], ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'] }
-        )
+      ]
     }
+  },
 
+  data() {
+    return {
+      post: {},
+      lang: "",
+      content: ""
+    }
+  },
+
+  async created() {
+    const res = await axios.get(`/api/blog/get?id=${this.$route.params.id}`)
+    if (res.data["error"] === 3) return this.$router.push({ path: "/blog" })
+    this.post = res.data["post"]
+    this.post["content"] = this.post["content"].replaceAll(
+      "\n<br>\n<br>\n",
+      "\n\n"
+    )
+    this.content = DOMPurify.sanitize(
+      marked.parse(this.post["content"], { breaks: true }),
+      {
+        ADD_TAGS: ["iframe"],
+        ADD_ATTR: ["allow", "allowfullscreen", "frameborder", "scrolling"]
+      }
+    )
+  }
 }
 </script>
 
 <style scoped>
 glitch {
-    font-size: 80px;
+  font-size: 80px;
 }
 
 p {
-    font-size: 30px;
+  font-size: 30px;
 }
 
 .info {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 }
 
-.postcontain{
-    padding: 50px;
+.postcontain {
+  padding: 50px;
 }
 
 .markdown-body {
-    font-size: 25px;
-    padding: 50px;
-    border-radius: 15px;
-    background-color: var(--dark-three);
+  font-size: 25px;
+  padding: 50px;
+  border-radius: 15px;
+  background-color: var(--dark-three);
 }
 </style>
 
 <style>
-.markdown-body{
-    font-family: "Ubuntu", sans-serif;
+.markdown-body {
+  font-family: "Ubuntu", sans-serif;
 }
 
-.markdown-body h1{
+.markdown-body h1 {
   border-bottom: 1px solid #505050;
 }
 
-.markdown-body iframe{
+.markdown-body iframe {
   display: block;
   margin: 20px 0px;
 }
 
-.markdown-body a{
+.markdown-body a {
   animation-name: colorAnimation;
   animation-iteration-count: infinite;
   animation-duration: 10s;
   text-shadow: none;
 }
-
 </style>
diff --git a/pages/blog/index.vue b/pages/blog/index.vue
index ed56b66..c62ccd7 100644
--- a/pages/blog/index.vue
+++ b/pages/blog/index.vue
@@ -1,89 +1,92 @@
 <template>
-    <div>
-        <Navbar />
-        <Header>
-          <label class="glitch">/dev/</label>blog
-        </Header>
-        <div class="blogs">
-            <Input :keyup="keyup" placeholder="Search post" type="text"/>
-            <PostPreview v-for="post in posts" :key="post.title" :title="post.title" :desc="post.desc" :info="post.info" :url="post.url">
-                {{ post.desc }}
-            </PostPreview>
-        </div>
-        <NewPost v-if="logged"/>
+  <div>
+    <Navbar />
+    <Header> <label class="glitch">/dev/</label>blog </Header>
+    <div class="blogs">
+      <Input :keyup="keyup" placeholder="Search post" type="text" />
+      <PostPreview
+        v-for="post in posts"
+        :key="post.title"
+        :title="post.title"
+        :desc="post.desc"
+        :info="post.info"
+        :url="post.url"
+      >
+        {{ post.desc }}
+      </PostPreview>
     </div>
+    <NewPost v-if="logged" />
+  </div>
 </template>
 
 <script>
-import Navbar from "../../components/Navbar.vue";
-import Header from "../../components/Header.vue";
-import NewPost from "../../components/NewPost.vue";
-import PostPreview from "../../components/PostPreview.vue";
-import axios from "axios";
+import Navbar from "../../components/Navbar.vue"
+import Header from "../../components/Header.vue"
+import NewPost from "../../components/NewPost.vue"
+import PostPreview from "../../components/PostPreview.vue"
+import axios from "axios"
 
 export default {
-    head() {
-        return {
-            title: "[ngn] | blog",
-            meta: [
-                {
-                    hid: "description",
-                    name: "description",
-                    content: "read my blog posts"
-                }
-            ]
-        };
-    },
-    data() {
-        return {
-            logged: false,
-            posts: [],
-            all: []
-        };
-    },
-    mounted: async function () {
-        if (localStorage.getItem("token"))
-            this.logged = true;
-        const res = await axios.get("/api/blog/sum");
-        let posts = []
-
-        res.data["posts"].forEach(post=>{
-            posts.push({
-                title: post.title,
-                desc: post.desc,
-                info: post.info,
-                url: `/blog/${post.title.toLowerCase().replaceAll(" ", "")}`
-            })
-        })
-
-        this.posts = posts
-        this.all = posts
-    },
-    methods: {
-        keyup(e) {
-            let val = e.target.value
-
-            // search looks at name and info
-            this.posts = []
-            for(let i = 0; i < this.all.length; i++){
-                if(this.all[i].title.toLowerCase().includes(val.toLowerCase()))
-                    this.posts.push(this.all[i])
-
-                else if(this.all[i].info.toLowerCase().includes(val.toLowerCase()))
-                    this.posts.push(this.all[i])
-            }
+  head() {
+    return {
+      title: "[ngn] | blog",
+      meta: [
+        {
+          hid: "description",
+          name: "description",
+          content: "read my blog posts"
         }
-    },
+      ]
+    }
+  },
+  data() {
+    return {
+      logged: false,
+      posts: [],
+      all: []
+    }
+  },
+  mounted: async function () {
+    if (localStorage.getItem("token")) this.logged = true
+    const res = await axios.get("/api/blog/sum")
+    let posts = []
+
+    res.data["posts"].forEach((post) => {
+      posts.push({
+        title: post.title,
+        desc: post.desc,
+        info: post.info,
+        url: `/blog/${post.title.toLowerCase().replaceAll(" ", "")}`
+      })
+    })
+
+    this.posts = posts
+    this.all = posts
+  },
+  methods: {
+    keyup(e) {
+      let val = e.target.value
+
+      // search looks at name and info
+      this.posts = []
+      for (let i = 0; i < this.all.length; i++) {
+        if (this.all[i].title.toLowerCase().includes(val.toLowerCase()))
+          this.posts.push(this.all[i])
+        else if (this.all[i].info.toLowerCase().includes(val.toLowerCase()))
+          this.posts.push(this.all[i])
+      }
+    }
+  }
 }
 </script>
 
 <style scoped>
 .blogs {
-    padding: 50px;
-    gap: 35px;
-    display: flex;
-    flex-direction: column;
-    gap: 30px;
-    align-items: center;
+  padding: 50px;
+  gap: 35px;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  align-items: center;
 }
 </style>
diff --git a/pages/index.vue b/pages/index.vue
index dea575f..7f7cce2 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,104 +1,109 @@
 <template>
-    <div>
-        <Navbar />
-        <Header>
-            <label class="glitch">echo</label> hello world!
-        </Header>
-        <div class="info">
-            <Card>
-                <h1>👋 Welcome to my website!</h1>
-                <h2>
-                    I am a high school student who is interested in
-                    <br>
-                    • cyber security
-                    <br>
-                    • coding
-                    <br>
-                    • electronics
-                    <br>
-                    • gaming
-                    <br>
-                    • simply: everything about computers!
-                </h2>
-            </Card>
-            <Card>
-                <h1>👉 Contact me</h1>
-                <h2>You can contact me on the following platforms:</h2>
+  <div>
+    <Navbar />
+    <Header> <label class="glitch">echo</label> hello world! </Header>
+    <div class="info">
+      <Card>
+        <h1>👋 Welcome to my website!</h1>
+        <h2>
+          I am a high school student who is interested in
+          <br />
+          • cyber security
+          <br />
+          • coding
+          <br />
+          • electronics
+          <br />
+          • gaming
+          <br />
+          • simply: everything about computers!
+        </h2>
+      </Card>
+      <Card>
+        <h1>👉 Contact me</h1>
+        <h2>You can contact me on the following platforms:</h2>
 
-                <a href="https://discord.com/users/568131907368386565"><i class='bx bxl-discord-alt'></i> Discord</a>
-                <br>
-                <a href="https://github.com/ngn13"><i class='bx bxl-github'></i> Github</a>
-                <br>
-                <a href="https://mastodon.social/@ngn"><i class='bx bxl-mastodon'></i> Mastodon</a>
-                <br>
-                <a href="mailto:ngn13proton@proton.me"><i class='bx bxs-envelope'></i> Mail</a>
-                <br>
-                <h2>or private message me on matrix:</h2>
-                <a><i>[matrix]</i> @ngn:matrix.ngn13.fun</a>
-            </Card>
-        </div>
-        <Logout v-if="logged"/>
-        <div class="version">
-            <p>v2.4</p>
-        </div>
+        <a href="https://discord.com/users/568131907368386565"
+          ><i class="bx bxl-discord-alt"></i> Discord</a
+        >
+        <br />
+        <a href="https://github.com/ngn13"
+          ><i class="bx bxl-github"></i> Github</a
+        >
+        <br />
+        <a href="https://mastodon.social/@ngn"
+          ><i class="bx bxl-mastodon"></i> Mastodon</a
+        >
+        <br />
+        <a href="mailto:ngn13proton@proton.me"
+          ><i class="bx bxs-envelope"></i> Mail</a
+        >
+        <br />
+        <h2>or private message me on matrix:</h2>
+        <a><i>[matrix]</i> @ngn:matrix.ngn13.fun</a>
+      </Card>
     </div>
+    <Logout v-if="logged" />
+    <div class="version">
+      <p>v2.5</p>
+    </div>
+  </div>
 </template>
 
 <script>
-import Navbar from "../components/Navbar.vue";
-import Header from "../components/Header.vue";
+import Navbar from "../components/Navbar.vue"
+import Header from "../components/Header.vue"
 import Card from "../components/Card.vue"
-import Logout from "../components/Logout.vue";
+import Logout from "../components/Logout.vue"
 
 export default {
-    head() {
-        return {
-            title: "[ngn]",
-            meta: [
-                {
-                    hid: "description",
-                    name: "description",
-                    content: "homepage of my website"
-                }
-            ]
+  head() {
+    return {
+      title: "[ngn]",
+      meta: [
+        {
+          hid: "description",
+          name: "description",
+          content: "homepage of my website"
         }
-    },
-    data() {
-		return {
-			logged: false
-		}
-	},
-    mounted(){
-		if(localStorage.getItem("token"))
-            this.logged = true
-	}
+      ]
+    }
+  },
+  data() {
+    return {
+      logged: false
+    }
+  },
+  mounted() {
+    if (localStorage.getItem("token")) this.logged = true
+  }
 }
 </script>
 
 <style scoped>
 .info {
-    padding: 50px;
-    gap: 30px;
-    display: flex;
+  padding: 50px;
+  gap: 30px;
+  display: flex;
 }
-.version{
-    color: var(--dark-fife);
-    position: fixed;
-    bottom: 10px;
-    right: 10px;
-    font-size: 15px;
+.version {
+  color: var(--dark-fife);
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  font-size: 15px;
 }
 
-i{
-    font-style: normal;
+i {
+  font-style: normal;
 }
 
 @media only screen and (max-width: 1076px) {
-    .info {
-        flex-direction: column;
-    }
-    .info div {
-        width: auto;
-    }
+  .info {
+    flex-direction: column;
+  }
+  .info div {
+    width: auto;
+  }
 }
 </style>
diff --git a/pages/login.vue b/pages/login.vue
index 1bd9cbf..1d5ec93 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -1,51 +1,56 @@
 <template>
-    <div>
-        <h1>Login Page</h1>
-        <Input :keyup="function() { }" placeholder="Password" type="password" id="pass"/>
-        <Button :click="click">Login</Button>
-    </div>
+  <div>
+    <h1>Login Page</h1>
+    <Input
+      :keyup="function () {}"
+      placeholder="Password"
+      type="password"
+      id="pass"
+    />
+    <Button :click="click">Login</Button>
+  </div>
 </template>
 
 <script>
-import Input from '../components/Input.vue';
-import Button from '../components/Button.vue';
-import axios from "axios";
+import Input from "../components/Input.vue"
+import Button from "../components/Button.vue"
+import axios from "axios"
 
 export default {
-    methods: {
-        async click(e) {
-            const pass = document.getElementById("pass").value
-            const res = await axios.get(`/api/auth/login?pass=${pass}`)
-            if(res.data["error"]===0){
-                localStorage.setItem("token", res.data["token"])
-                return location.href="/"
-            }
-            alert("Incorrect password!")
-        }
+  methods: {
+    async click(e) {
+      const pass = document.getElementById("pass").value
+      const res = await axios.get(`/api/auth/login?pass=${pass}`)
+      if (res.data["error"] === 0) {
+        localStorage.setItem("token", res.data["token"])
+        return (location.href = "/")
+      }
+      alert("Incorrect password!")
     }
+  }
 }
 </script>
 
 <style scoped>
 div {
-    padding: 50px;
-    background: var(--dark-three);
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    color: var(--white);
-    align-items: center;
-    justify-content: center;
+  padding: 50px;
+  background: var(--dark-three);
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  color: var(--white);
+  align-items: center;
+  justify-content: center;
 }
 
-h1{
-    font-size: 70px;
-    margin-bottom: 20px;
+h1 {
+  font-size: 70px;
+  margin-bottom: 20px;
 }
 </style>
diff --git a/pages/projects.vue b/pages/projects.vue
index 6cbf450..4648f95 100644
--- a/pages/projects.vue
+++ b/pages/projects.vue
@@ -1,96 +1,105 @@
 <template>
-    <div>
-        <Navbar />
-	    <Header>
-		    <label class="glitch">ls -la</label> projects
-	    </Header>
-        <div class="projects">
-            <ProjectList v-for="project in projects" :key="project.id">
-                <Project v-if="logged" v-for="p in project.list" :key="p.name" :name="`${p.name} (${p.click})`" :desc="p.desc" :url="p.url"/>
-<Project v-if="!logged" v-for="p in project.list" :key="p.desc" :name="p.name" :desc="p.desc" :url="p.url"/>
-            </ProjectList>
-	    </div>
-        <NewProject v-if="logged"/>
+  <div>
+    <Navbar />
+    <Header> <label class="glitch">ls -la</label> projects </Header>
+    <div class="projects">
+      <ProjectList v-for="project in projects" :key="project.id">
+        <Project
+          v-if="logged"
+          v-for="p in project.list"
+          :key="p.name"
+          :name="`${p.name} (${p.click})`"
+          :desc="p.desc"
+          :url="p.url"
+        />
+        <Project
+          v-if="!logged"
+          v-for="p in project.list"
+          :key="p.desc"
+          :name="p.name"
+          :desc="p.desc"
+          :url="p.url"
+        />
+      </ProjectList>
     </div>
+    <NewProject v-if="logged" />
+  </div>
 </template>
 
 <script>
-import ProjectList from "../components/ProjectList.vue";
-import Project from "../components/Project.vue";
-import NewProject from "../components/NewProject.vue";
-import axios from "axios";
+import ProjectList from "../components/ProjectList.vue"
+import Project from "../components/Project.vue"
+import NewProject from "../components/NewProject.vue"
+import axios from "axios"
 
 export default {
-    head() {
-        return {
-            title: "[ngn] | projects",
-            meta: [
-                {
-                    hid: "description",
-                    name: "description",
-                    content: "check out my projects"
-                }
-            ]
+  head() {
+    return {
+      title: "[ngn] | projects",
+      meta: [
+        {
+          hid: "description",
+          name: "description",
+          content: "check out my projects"
         }
-    },
-    data() {
-		return {
-		    logged: false,
-        projects: []
-		}
-	},
-    mounted: async function(){
-		    if(localStorage.getItem("token"))
-          this.logged = true
+      ]
+    }
+  },
+  data() {
+    return {
+      logged: false,
+      projects: []
+    }
+  },
+  mounted: async function () {
+    if (localStorage.getItem("token")) this.logged = true
 
-        const res = await axios.get("/api/projects/get")
+    const res = await axios.get("/api/projects/get")
 
-        let all = res.data["projects"]
-        let pcounter = 0
-        let projects = []
-        let project = {
+    let all = res.data["projects"]
+    let pcounter = 0
+    let projects = []
+    let project = {
+      id: pcounter,
+      list: []
+    }
+    for (let i = 0; i < all.length; i++) {
+      if (project["list"].length === 3) {
+        projects.push(project)
+        pcounter += 1
+        project = {
           id: pcounter,
           list: []
         }
-        for(let i = 0; i<all.length; i++){
-          if(project["list"].length===3){
-            projects.push(project)
-            pcounter += 1
-            project = {
-              id: pcounter,
-              list: []
-            }
-          }
+      }
 
-          project["list"].push({
-            name: all[i]["name"],
-            desc: all[i]["desc"],
-            click: all[i]["click"],
-            url: `/l/${all[i]["name"]
-              .toLowerCase()
-              .replaceAll(" ", "")}`
-          })
+      project["list"].push({
+        name: all[i]["name"],
+        desc: all[i]["desc"],
+        click: all[i]["click"],
+        url: `/l/${all[i]["name"].toLowerCase().replaceAll(" ", "")}`
+      })
 
-          if(i===all.length-1){
-            projects.push(project)
-          }
-        }
+      if (i === all.length - 1) {
+        projects.push(project)
+      }
+    }
 
-        this.projects = projects
+    this.projects = projects
   }
 }
 </script>
 
 <style>
-.projects{
-    padding: 50px;
-    display: flex;
-    flex-direction: column;
+.projects {
+  padding: 50px;
+  display: flex;
+  flex-direction: column;
 }
 
 @media only screen and (max-width: 1121px) {
-    .projects {
-        padding: 50px;
-    }
+  .projects {
+    padding: 50px;
+  }
 }
 </style>
diff --git a/pages/resources.vue b/pages/resources.vue
index a669bf3..aed579e 100644
--- a/pages/resources.vue
+++ b/pages/resources.vue
@@ -1,103 +1,108 @@
 <template>
-    <main>
-        <Navbar />
-        <Header>
-            <label class="glitch">cat</label> {{ header }}
-        </Header>
-        <div class="resources">
-            <Input :keyup="keyup" placeholder="Search resource" type="text"/>
-            <Resource v-for="res in show_resources" :key="res.name" :name="res.name" :tags="res.tags" :url="res.url" />
-        </div>
-        <NewResource v-if="logged"/>
-    </main>
+  <main>
+    <Navbar />
+    <Header> <label class="glitch">cat</label> {{ header }} </Header>
+    <div class="resources">
+      <Input :keyup="keyup" placeholder="Search resource" type="text" />
+      <Resource
+        v-for="res in show_resources"
+        :key="res.name"
+        :name="res.name"
+        :tags="res.tags"
+        :url="res.url"
+      />
+    </div>
+    <NewResource v-if="logged" />
+  </main>
 </template>
 
 <script>
-import axios from 'axios';
-import Resource from '../components/Resource.vue';
-import Input from '../components/Input.vue';
-import NewResource from '../components/NewResource.vue';
+import axios from "axios"
+import Resource from "../components/Resource.vue"
+import Input from "../components/Input.vue"
+import NewResource from "../components/NewResource.vue"
 
 export default {
-    head() {
-        return {
-            title: "[ngn] | resources",
-            meta: [
-                {
-                    hid: "description",
-                    name: "description",
-                    content: "discover new resources"
-                }
-            ]
+  head() {
+    return {
+      title: "[ngn] | resources",
+      meta: [
+        {
+          hid: "description",
+          name: "description",
+          content: "discover new resources"
         }
-    },
-    data() {
-        return {
-            header: "resources",
-            logged: false,
-            sum_resources: [],
-            all_resources: [],
-            show_resources: []
-        }
-    },
-    methods: {
-        keyup(e) {
-            let search = e.target.value
-            if(e.key==="Backspace" && search===""){
-                this.header = "resources"
-                this.show_resources = this.sum_resources
-                return
-            }
-            if(e.key==="OS")
-                return
-            this.header = `resources | grep ${search}`
-
-            // dirty asf search alg
-            this.show_resources = []
-            for(let i = 0; i < this.all_resources.length; i++){
-                if(this.all_resources[i].name
-                      .toLowerCase()
-                      .includes(search.toLowerCase())
-                  ){
-                    this.show_resources.push(this.all_resources[i])
-                    continue
-                  }
-
-                for(let e = 0; e < this.all_resources[i].tags.length; e++){
-                    if(this.all_resources[i].tags[e].toLowerCase()
-                          .includes(search.toLowerCase())
-                    ){
-                          this.show_resources.push(this.all_resources[i])
-                          break
-                    }
-                }
-            }
-      }
-    },
-    mounted: async function(){
-    		if(localStorage.getItem("token"))
-            this.logged = true
-
-        // request top 10 resources so we can
-        // render the DOM as fast as possible
-        let res = await axios.get("/api/resources/get?sum=1")
-        this.sum_resources = res.data["resources"]
+      ]
+    }
+  },
+  data() {
+    return {
+      header: "resources",
+      logged: false,
+      sum_resources: [],
+      all_resources: [],
+      show_resources: []
+    }
+  },
+  methods: {
+    keyup(e) {
+      let search = e.target.value
+      if (e.key === "Backspace" && search === "") {
+        this.header = "resources"
         this.show_resources = this.sum_resources
+        return
+      }
+      if (e.key === "OS") return
+      this.header = `resources | grep ${search}`
 
-        // then we can load all the resources
-        res = await axios.get("/api/resources/get")
-        this.all_resources = res.data["resources"]
-	}
+      // dirty asf search alg
+      this.show_resources = []
+      for (let i = 0; i < this.all_resources.length; i++) {
+        if (
+          this.all_resources[i].name
+            .toLowerCase()
+            .includes(search.toLowerCase())
+        ) {
+          this.show_resources.push(this.all_resources[i])
+          continue
+        }
+
+        for (let e = 0; e < this.all_resources[i].tags.length; e++) {
+          if (
+            this.all_resources[i].tags[e]
+              .toLowerCase()
+              .includes(search.toLowerCase())
+          ) {
+            this.show_resources.push(this.all_resources[i])
+            break
+          }
+        }
+      }
+    }
+  },
+  mounted: async function () {
+    if (localStorage.getItem("token")) this.logged = true
+
+    // request top 10 resources so we can
+    // render the DOM as fast as possible
+    let res = await axios.get("/api/resources/get?sum=1")
+    this.sum_resources = res.data["resources"]
+    this.show_resources = this.sum_resources
+
+    // then we can load all the resources
+    res = await axios.get("/api/resources/get")
+    this.all_resources = res.data["resources"]
+  }
 }
 </script>
 
 <style scoped>
 .resources {
-    padding: 50px;
-    padding-bottom: 60px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 40px
+  padding: 50px;
+  padding-bottom: 60px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
 }
 </style>