diff --git a/src/app.d.ts b/src/app.d.ts
index f59b884..50f31d2 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -9,4 +9,4 @@ declare global {
 	}
 }
 
-export {};
+export { };
diff --git a/src/app.html b/src/app.html
index 7def3ad..423a444 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-	<link rel="stylesheet" href="/src/routes/+page.css">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>
+<link rel="stylesheet" href="/src/routes/+page.css">
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta name="viewport" content="width=device-width" />
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/components/FontAwesome.svelte b/src/components/FontAwesome.svelte
index b05e6bc..263bd0f 100644
--- a/src/components/FontAwesome.svelte
+++ b/src/components/FontAwesome.svelte
@@ -1,4 +1,7 @@
 <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+        rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
 </head>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index 7ee808b..d9a8cbd 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -1,21 +1,21 @@
 <div class="footer">
-    <p>Website by Jonas_Jones 2021 - 2023</p>
+  <p>Website by Jonas_Jones 2021 - 2023</p>
 </div>
 
 <style>
-.footer {
-  height: 1rem;
-  background-color: #000;
-  color: #fff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  padding-top: 0.25rem;
-  padding-bottom: 0.5rem;
-  font-size: 20px;
-}
+  .footer {
+    height: 1rem;
+    background-color: #000;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    padding-top: 0.25rem;
+    padding-bottom: 0.5rem;
+    font-size: 20px;
+  }
 </style>
diff --git a/src/components/InfiniteImageSelector.svelte b/src/components/InfiniteImageSelector.svelte
index 4f60520..9cdcdf0 100644
--- a/src/components/InfiniteImageSelector.svelte
+++ b/src/components/InfiniteImageSelector.svelte
@@ -1,87 +1,96 @@
 <script>
-    let images = [];
-    let selectedSquares = new Set();
-    let loading = false;
-  
-    const fetchImages = () => {
-      loading = true;
-      // Load images from the /areyouarobot folder
-      // You can replace this with your image loading logic
-      setTimeout(() => {
-        // Simulate loading images with random properties (e.g., 'X', 'O', etc.)
-        for (let i = 0; i < 16; i++) {
-          const imageId = images.length + i;
-          const row = Math.floor(i / 4);
-          const col = i % 4;
-          const property = Math.random() > 0.5 ? 'X' : 'O'; // Simulate random properties
-          console.log("imageId: " + imageId + " row: " + row + " col: " + col + " property: " + property)
-  
-          images.push({
-            id: imageId,
-            src: `/image_${row}_${col}.jpg`,
-            property: property
-          });
-        }
-        loading = false;
-      }, 1000);
-    };
-  
-    const toggleSquareSelection = (image) => {
-      if (selectedSquares.has(image.id)) {
-        selectedSquares.delete(image.id);
-      } else {
-        selectedSquares.add(image.id);
+  let images = [];
+  let selectedSquares = new Set();
+  let loading = false;
+
+  const fetchImages = () => {
+    loading = true;
+    // Load images from the /areyouarobot folder
+    // You can replace this with your image loading logic
+    setTimeout(() => {
+      // Simulate loading images with random properties (e.g., 'X', 'O', etc.)
+      for (let i = 0; i < 16; i++) {
+        const imageId = images.length + i;
+        const row = Math.floor(i / 4);
+        const col = i % 4;
+        const property = Math.random() > 0.5 ? "X" : "O"; // Simulate random properties
+        console.log(
+          "imageId: " +
+            imageId +
+            " row: " +
+            row +
+            " col: " +
+            col +
+            " property: " +
+            property
+        );
+
+        images.push({
+          id: imageId,
+          src: `/image_${row}_${col}.jpg`,
+          property: property,
+        });
       }
-    };
-  
-    window.addEventListener("scroll", () => {
-      if (
-        !loading &&
-        window.innerHeight + window.scrollY >= document.body.offsetHeight - 200
-      ) {
-        fetchImages();
-      }
-    });
-  
-    // Initial load
-    fetchImages();
-  </script>
-  
-  <style>
-    .grid {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 10px;
+      loading = false;
+    }, 1000);
+  };
+
+  const toggleSquareSelection = (image) => {
+    if (selectedSquares.has(image.id)) {
+      selectedSquares.delete(image.id);
+    } else {
+      selectedSquares.add(image.id);
     }
-  
-    .image {
-      width: 150px;
-      height: 150px;
-      object-fit: cover;
-      border: 2px solid transparent;
-      cursor: pointer;
+  };
+
+  window.addEventListener("scroll", () => {
+    if (
+      !loading &&
+      window.innerHeight + window.scrollY >= document.body.offsetHeight - 200
+    ) {
+      fetchImages();
     }
-  
-    .selected {
-      border-color: blue;
-    }
-  </style>
-  
-  <div class="grid">
-    {#each images as image}
-      <img
-        class="image {selectedSquares.has(image.id) ? 'selected' : ''}"
-        src={image.src}
-        alt={`Image ${image.id}`}
-        on:click={() => toggleSquareSelection(image)}
-      />
-    {/each}
-  
-    {#if loading}
-      <p>Loading...</p>
-    {/if}
-  </div>
-  
-  <div>
-    <p>Selected squares: {Array.from(selectedSquares).join(', ')}</p>
-  </div>
\ No newline at end of file
+  });
+
+  // Initial load
+  fetchImages();
+</script>
+
+<div class="grid">
+  {#each images as image}
+    <img
+      class="image {selectedSquares.has(image.id) ? 'selected' : ''}"
+      src={image.src}
+      alt={`Image ${image.id}`}
+      on:click={() => toggleSquareSelection(image)}
+    />
+  {/each}
+
+  {#if loading}
+    <p>Loading...</p>
+  {/if}
+</div>
+
+<div>
+  <p>Selected squares: {Array.from(selectedSquares).join(", ")}</p>
+</div>
+
+<style>
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+  }
+
+  .image {
+    width: 150px;
+    height: 150px;
+    object-fit: cover;
+    border: 2px solid transparent;
+    cursor: pointer;
+  }
+
+  .selected {
+    border-color: blue;
+  }
+</style>
diff --git a/src/components/NavBar.svelte b/src/components/NavBar.svelte
index 5d170f2..a7ded3b 100644
--- a/src/components/NavBar.svelte
+++ b/src/components/NavBar.svelte
@@ -1,13 +1,88 @@
+<script>
+  let showMenu = false;
+
+  function toggleMenu() {
+    showMenu = !showMenu;
+  }
+
+  import TooSmallDimsOverlay from "./TooSmallDimsOverlay.svelte";
+
+  let navLinks = [
+    { name: "Home", url: "/" },
+    { name: "Projects", url: "/projects" },
+    // just removed this cause it bothered me
+    //{ name: 'For The Based™', url: '/based'},
+    //{ name: 'Status', url: '/status'},
+    { name: "About", url: "/about" },
+  ];
+
+  // @ts-ignore
+  let miscLinks = [{ name: "For The Based&trade;", url: "/based" }];
+  const fetch_url =
+    "https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=Jonas_Jones&api_key=57c0ca64285c7ca676bb8c2acf320f41&format=json&limit=1";
+
+  /**
+   * @param {string} str
+   */
+  function truncateString(str) {
+    if (str.length > 30) {
+      return str.slice(0, 30) + "...";
+    } else {
+      return str;
+    }
+  }
+
+  async function fetchLastFmData() {
+    let response = await fetch(fetch_url);
+    let data = await response.json();
+    let album_cover = data.recenttracks.track[0].image[1]["#text"];
+    let song_title = truncateString(data.recenttracks.track[0].name);
+    //let song_title = truncateString("WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWw");
+    let artist = truncateString(data.recenttracks.track[0].artist["#text"]);
+
+    try {
+      // @ts-ignore
+      document.getElementById("lastfm_title").innerHTML = song_title;
+      // @ts-ignore
+      document.getElementById("lastfm_artist").innerHTML = artist;
+      // @ts-ignore
+      document.getElementById(
+        "lastfm_logo"
+      ).style.backgroundImage = `url(${album_cover})`;
+    } catch (error) {}
+
+    try {
+      let is_playing = data.recenttracks.track[0]["@attr"].nowplaying;
+      if (is_playing == "true") {
+        // @ts-ignore
+        document.getElementById("lastfm_logo_overlay").src = "/equalizer.gif";
+      } else {
+        // @ts-ignore
+        document.getElementById("lastfm_logo_overlay").src =
+          "/pause-icon-256.png";
+      }
+    } catch (error) {
+      try {
+        // @ts-ignore
+        document.getElementById("lastfm_logo_overlay").src =
+          "/pause-icon-256.png";
+      } catch (error) {}
+    }
+  }
+  fetchLastFmData();
+  setInterval(fetchLastFmData, 15000);
+</script>
+
 <div class="navbar">
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div class="hamburger-menu {showMenu ? 'open' : ''}" on:click={toggleMenu}>
-    <div class="hamburger-line line-1"></div>
-    <div class="hamburger-line line-2"></div>
-    <div class="hamburger-line line-3"></div>
+    <div class="hamburger-line line-1" />
+    <div class="hamburger-line line-2" />
+    <div class="hamburger-line line-3" />
   </div>
   <div class="logo">
     <a href="/">
-      <img src="/icon_80x80.webp" alt="Logo" class="logo">
+      <img src="/icon_80x80.webp" alt="Logo" class="logo" />
     </a>
   </div>
   <div class="nav-links">
@@ -21,23 +96,26 @@
   </div>
   <div class="lastfm">
     <a href="https://fm.jonasjones.dev">
-      <span class="link"></span>
+      <span class="link" />
     </a>
     <div class="lastfmlogoclass" id="lastfm_logo">
-      <img src="" alt=" " class="lastfmlogooverlay" id="lastfm_logo_overlay">
+      <img src="" alt=" " class="lastfmlogooverlay" id="lastfm_logo_overlay" />
     </div>
-    
+
     <div class="lastfm-text">
-      <p id="lastfm_title"></p>
-      <p id="lastfm_artist"></p>
+      <p id="lastfm_title" />
+      <p id="lastfm_artist" />
     </div>
   </div>
   <div class="navigation-menu {showMenu ? 'show' : ''}">
     <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div class="hamburger-menu close-button {showMenu ? 'open' : ''}" on:click={toggleMenu}>
-      <div class="hamburger-line line-1"></div>
-      <div class="hamburger-line line-2"></div>
-      <div class="hamburger-line line-3"></div>
+    <div
+      class="hamburger-menu close-button {showMenu ? 'open' : ''}"
+      on:click={toggleMenu}
+    >
+      <div class="hamburger-line line-1" />
+      <div class="hamburger-line line-2" />
+      <div class="hamburger-line line-3" />
     </div>
     <ul class="links">
       {#each navLinks as link}
@@ -45,89 +123,13 @@
       {/each}
     </ul>
   </div>
-
 </div>
 <div class="unsupported">
   <TooSmallDimsOverlay />
 </div>
 
-<script>
-    let showMenu = false;
-
-  function toggleMenu() {
-    showMenu = !showMenu;
-  }
-
-  import TooSmallDimsOverlay from './TooSmallDimsOverlay.svelte';
-
-  let navLinks = [
-    { name: 'Home', url: '/' },
-    { name: 'Projects', url: '/projects'},
-    // just removed this cause it bothered me
-    //{ name: 'For The Based™', url: '/based'},
-    //{ name: 'Status', url: '/status'},
-    { name: 'About', url: '/about' }
-  ];
-
-  // @ts-ignore
-  let miscLinks = [
-      { name: 'For The Based&trade;', url: '/based'}
-  ]
-  const fetch_url = "https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=Jonas_Jones&api_key=57c0ca64285c7ca676bb8c2acf320f41&format=json&limit=1"
-
-  /**
-     * @param {string} str
-     */
-  function truncateString(str) {
-    if (str.length > 30) {
-      return str.slice(0, 30) + "...";
-    } else {
-      return str;
-    }
-  }
-
-
-
-  async function fetchLastFmData() {
-  let response = await fetch(fetch_url);
-  let data = await response.json();
-  let album_cover = data.recenttracks.track[0].image[1]['\#text'];
-  let song_title = truncateString(data.recenttracks.track[0].name);
-  //let song_title = truncateString("WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWw");
-  let artist = truncateString(data.recenttracks.track[0].artist['\#text']);
-
-  try {
-    // @ts-ignore
-    document.getElementById("lastfm_title").innerHTML = song_title;
-    // @ts-ignore
-    document.getElementById("lastfm_artist").innerHTML = artist;
-    // @ts-ignore
-    document.getElementById("lastfm_logo").style.backgroundImage = `url(${album_cover})`;
-    
-  } catch (error) {}
-
-  try {
-      let is_playing = data.recenttracks.track[0]['\@attr'].nowplaying;
-      if (is_playing == "true") {
-      // @ts-ignore
-      document.getElementById("lastfm_logo_overlay").src="/equalizer.gif";
-    } else {
-      // @ts-ignore
-      document.getElementById("lastfm_logo_overlay").src="/pause-icon-256.png";
-    }
-    } catch (error) {
-      try {
-        // @ts-ignore
-        document.getElementById("lastfm_logo_overlay").src="/pause-icon-256.png";
-      } catch (error) {}
-    }
-  }
-  fetchLastFmData();
-  setInterval(fetchLastFmData, 15000);
-  </script>
-
-  <style>
-    .hamburger-menu {
+<style>
+  .hamburger-menu {
     position: relative;
     width: 30px;
     height: 21.5px;
@@ -215,204 +217,205 @@
     font-size: 18px;
   }
 
+  .navbar {
+    background-color: #2023247c;
+    padding: 10px;
+    padding-top: 0;
+    padding-bottom: 0;
+    text-align: center;
+    width: 100%;
+    height: 58px;
+    display: flex;
+    position: fixed;
+    top: 0;
+    z-index: 1;
+  }
 
+  .logo {
+    height: 45px;
+    border-radius: 10px;
+    margin-top: 3.5px;
+  }
 
-    .navbar {
-      background-color: #2023247c;
-      padding: 10px;
-      padding-top: 0;
-      padding-bottom: 0;
-      text-align: center;
-      width: 100%;
-      height: 58px;
-      display: flex;
-      position: fixed;
-      top: 0;
-      z-index: 1;
-    }
+  .nav-links {
+    display: flex;
+    justify-content: center;
+    flex-grow: 1;
+  }
 
-    .logo {
-      height: 45px;
-      border-radius: 10px;
-      margin-top: 3.5px;
-    }
+  .nav-links {
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
+  nav {
+    padding: 10px;
+    justify-content: center;
+    width: 100%;
+    display: table;
+  }
 
-    .nav-links {
-      display: flex;
-      justify-content: center;
-      flex-grow: 1;
-    }
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
 
-    .nav-links {
-      margin-top: 5px;
-      margin-bottom: 5px;
-    }
-    nav {
-      padding: 10px;
-      justify-content: center;
-      width: 100%;
-      display: table;
-    }
-    
-    ul {
-      list-style-type: none;
-      margin: 0;
-      padding: 0;
-    }
-    
-    li {
-      display: inline;
-      margin-right: 10px;
-    }
-    
-    a {
-      text-decoration: none;
-      color: #ffffff;
-      padding: 5px;
-      font-size: 23px;
-    }
-    
-    a:hover {
-      color: #ddd;
-    }
+  li {
+    display: inline;
+    margin-right: 10px;
+  }
 
-    .lastfm {
-      padding: 3px;
-      padding-right: 10px;
-      padding-left: 0;
-      margin: 0;
-      justify-content: right;
-      justify-self: right;
-      align-items: right;
-      float: right;
-      display: flex;
-      position: relative;
-      right: 3px;
-      top: 3.5px;
-      border-radius: 5px;
-      max-width:300px;
-      height: 43px;
-      overflow: hidden;
-    }
-    .lastfm:hover {
-      background-color: #202324;
-    }
-    .lastfm img {
-      width: 30px;
-      height: 30px;
-      border-radius: 10%;
-      margin-right: 10px;
-    }
-    .lastfm #lastfm_logo {
-      width: 40px;
-      height: 40px;
-      margin-right: 10px;
-      background-size: cover;
-      background-position: center;
-      background-repeat: no-repeat;
-      border-radius: 10%;
-      align-items: center;
-    }
-    .lastfm #lastfm_artist {
-      font-size: 13px;
-      text-align: left;
-      padding: 0;
-      margin: 0;
-      display: flex;
-    }
-    .lastfm #lastfm_title {
-      font-size: 19px;
-      text-align: left;
-      padding: 0;
-      margin: 0;
-      display: flex;
-    }
-    .lastfm #lastfm_logo_overlay {
-      width: 40px;
-      height: 40px;
-      margin-right: 10px;
-      opacity: 0.5;
-      align-self: center;
-    }
-    .link {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      z-index: 1;
-    }
+  a {
+    text-decoration: none;
+    color: #ffffff;
+    padding: 5px;
+    font-size: 23px;
+  }
 
-    .unsupported {
-      display: block;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
+  a:hover {
+    color: #ddd;
+  }
+
+  .lastfm {
+    padding: 3px;
+    padding-right: 10px;
+    padding-left: 0;
+    margin: 0;
+    justify-content: right;
+    justify-self: right;
+    align-items: right;
+    float: right;
+    display: flex;
+    position: relative;
+    right: 3px;
+    top: 3.5px;
+    border-radius: 5px;
+    max-width: 300px;
+    height: 43px;
+    overflow: hidden;
+  }
+  .lastfm:hover {
+    background-color: #202324;
+  }
+  .lastfm img {
+    width: 30px;
+    height: 30px;
+    border-radius: 10%;
+    margin-right: 10px;
+  }
+  .lastfm #lastfm_logo {
+    width: 40px;
+    height: 40px;
+    margin-right: 10px;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius: 10%;
+    align-items: center;
+  }
+  .lastfm #lastfm_artist {
+    font-size: 13px;
+    text-align: left;
+    padding: 0;
+    margin: 0;
+    display: flex;
+  }
+  .lastfm #lastfm_title {
+    font-size: 19px;
+    text-align: left;
+    padding: 0;
+    margin: 0;
+    display: flex;
+  }
+  .lastfm #lastfm_logo_overlay {
+    width: 40px;
+    height: 40px;
+    margin-right: 10px;
+    opacity: 0.5;
+    align-self: center;
+  }
+  .link {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+
+  .unsupported {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
     z-index: 9999;
-    }
+  }
 
-    @media only screen and (max-width: 900px) and (min-width: 650px) {
-      .lastfm #lastfm_title, .lastfm #lastfm_artist {
-        display: none;
-      }
-      .lastfm {
-        width: 50px;
-      }
-      .navigation-menu {
-        display: none;
-      }
+  @media only screen and (max-width: 900px) and (min-width: 650px) {
+    .lastfm #lastfm_title,
+    .lastfm #lastfm_artist {
+      display: none;
     }
-
-    @media only screen and (max-width: 650px) and (min-width: 375px) {
-      .nav-links {
-        display: none;
-      }
-      .lastfm #lastfm_title, .lastfm #lastfm_artist {
-        display: flex;
-      }
-      .hamburger-menu {
-        display: block;
-      }
-      .logo {
-        display: none;
-      }
+    .lastfm {
+      width: 50px;
     }
-
-    @media only screen and (max-width: 375px) and (min-width: 300px) {
-      .lastfm #lastfm_title, .lastfm #lastfm_artist {
-        display: none;
-      }
-      .lastfm {
-        width: 50px;
-      }
-      .nav-links {
-        display: none;
-      }
-      .hamburger-menu {
-        display: block;
-      }
-      .logo {
-        display: none;
-      }
+    .navigation-menu {
+      display: none;
     }
+  }
 
-    @media only screen and (max-width: 300px) and (min-width: 0px) {
-      .lastfm #lastfm_title, .lastfm #lastfm_artist {
-        display: none;
-      }
-      .lastfm {
-        width: 50px;
-      }
-      .nav-links {
-        display: none;
-      }
-      .hamburger-menu {
-        display: block;
-      }
-      .logo {
-        display: none;
-      }
+  @media only screen and (max-width: 650px) and (min-width: 375px) {
+    .nav-links {
+      display: none;
     }
+    .lastfm #lastfm_title,
+    .lastfm #lastfm_artist {
+      display: flex;
+    }
+    .hamburger-menu {
+      display: block;
+    }
+    .logo {
+      display: none;
+    }
+  }
 
-  </style>
+  @media only screen and (max-width: 375px) and (min-width: 300px) {
+    .lastfm #lastfm_title,
+    .lastfm #lastfm_artist {
+      display: none;
+    }
+    .lastfm {
+      width: 50px;
+    }
+    .nav-links {
+      display: none;
+    }
+    .hamburger-menu {
+      display: block;
+    }
+    .logo {
+      display: none;
+    }
+  }
+
+  @media only screen and (max-width: 300px) and (min-width: 0px) {
+    .lastfm #lastfm_title,
+    .lastfm #lastfm_artist {
+      display: none;
+    }
+    .lastfm {
+      width: 50px;
+    }
+    .nav-links {
+      display: none;
+    }
+    .hamburger-menu {
+      display: block;
+    }
+    .logo {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/components/ParallaxBg.svelte b/src/components/ParallaxBg.svelte
index 7efeee3..3aba98a 100644
--- a/src/components/ParallaxBg.svelte
+++ b/src/components/ParallaxBg.svelte
@@ -10,9 +10,26 @@
     mouseY = event.clientY;
   }
 </script>
-  
+
+<main class="container" on:mousemove={handleMouseMove}>
+  <div
+    class="parallax-background"
+    style="--mouse-x: {mouseX}px; --mouse-y: {mouseY}px;"
+  >
+    <img
+      src="/ricky.webp"
+      width="102%"
+      height="101%"
+      alt="Parallax Background"
+      class="parallax-image"
+    />
+  </div>
+  <!-- Your main content goes here -->
+  <slot />
+</main>
+
 <style>
-  @import '../routes/+page.css';
+  @import "../routes/+page.css";
   .container {
     min-height: 100vh;
     position: relative;
@@ -25,23 +42,14 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-image: url('/ricky.webp');
+    background-image: url("/ricky.webp");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center center;
     @media only screen and (min-width: 768px) {
-      transform: translateX(calc(-1 * var(--mouse-x) / 50)) translateY(calc(-1 * var(--mouse-y) / 50));
-  }
+      transform: translateX(calc(-1 * var(--mouse-x) / 50))
+        translateY(calc(-1 * var(--mouse-y) / 50));
+    }
     z-index: -1; /* Place the background behind other content */
   }
 </style>
-
-<main class="container" on:mousemove={handleMouseMove}>
-  <div class="parallax-background" style="--mouse-x: {mouseX}px; --mouse-y: {mouseY}px;">
-      <img src="/ricky.webp" width="102%" height="101%" alt="Parallax Background" class="parallax-image">
-      
-  </div>
-  <!-- Your main content goes here -->
-  <slot></slot>
-</main>
-  
\ No newline at end of file
diff --git a/src/components/TooSmallDimsOverlay.svelte b/src/components/TooSmallDimsOverlay.svelte
index 9f86bf9..5fbc21b 100644
--- a/src/components/TooSmallDimsOverlay.svelte
+++ b/src/components/TooSmallDimsOverlay.svelte
@@ -1,3 +1,12 @@
+<div class="overlay">
+  <div class="notice">
+    <p>
+      Your screen resolution isn't supported by this website. if You're on a
+      computer, try zooming out or resizing the window.
+    </p>
+  </div>
+</div>
+
 <style>
   .overlay {
     position: fixed;
@@ -25,10 +34,3 @@
     text-align: center;
   }
 </style>
-
-<div class="overlay">
-  <div class="notice">
-  <p>Your screen resolution isn't supported by this website. if You're on a computer, try zooming out or resizing the window.</p>
-  </div>
-</div>
-  
\ No newline at end of file
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index d634cb9..a5ac6ed 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -11,13 +11,13 @@
     }
 
     function toggleTaeyong() {
-        const taeyong = document.querySelector('.taeyong');
-        taeyong.style.display = 'block';
+        const taeyong = document.querySelector(".taeyong");
+        taeyong.style.display = "block";
     }
 
     function toggleTaeyongoff() {
-        const taeyong = document.querySelector('.taeyong');
-        taeyong.style.display = 'none';
+        const taeyong = document.querySelector(".taeyong");
+        taeyong.style.display = "none";
     }
 </script>
 
@@ -34,7 +34,7 @@
         <div style="height:300px;width:600px">
             <!-- svelte-ignore a11y-click-events-have-key-events -->
             <img
-                src={isGif1 ? '/johnrefs1.gif' : '/johnrefs2.gif'}
+                src={isGif1 ? "/johnrefs1.gif" : "/johnrefs2.gif"}
                 alt="Toggle GIF"
                 on:click={toggleGif}
             />
@@ -44,7 +44,13 @@
 </ParallaxBg>
 <div class="taeyong">
     <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <img src="/taeyong.gif" alt="taeyong" on:click={toggleTaeyongoff} height="100%" width="100%" />
+    <img
+        src="/taeyong.gif"
+        alt="taeyong"
+        on:click={toggleTaeyongoff}
+        height="100%"
+        width="100%"
+    />
 </div>
 
 <style>
diff --git a/src/routes/+page.css b/src/routes/+page.css
index 07ab6fa..05be1dc 100644
--- a/src/routes/+page.css
+++ b/src/routes/+page.css
@@ -4,7 +4,7 @@
 @font-face {
   font-family: 'sary_soft_semiboldregular';
   src: url('/font/sary-soft.soft-semibold-webfont.woff2') format('woff2'),
-       url('/font/sary-soft.soft-semibold-webfont.woff') format('woff');
+    url('/font/sary-soft.soft-semibold-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 
@@ -35,7 +35,8 @@ body {
   background-size: 90%;
   background-position: center center;
   transform: translateX(calc(-1 * (var(--mouse-x)) / 50)) translateY(calc(-1 * var(--mouse-y) / 50));
-  z-index: -1; /* Place the background behind other content */
+  z-index: -1;
+  /* Place the background behind other content */
 }
 
 /* Set container styles */
@@ -56,7 +57,8 @@ body {
   perspective: 800px;
 }
 
-.card-front, .card-back {
+.card-front,
+.card-back {
   position: absolute;
   width: 100%;
   backface-visibility: hidden;
@@ -95,22 +97,22 @@ body {
 }
 
 .home-link,
-  .for-the-based-link {
-    font-size: 2rem;
-    margin: 0 0.5rem;
-    color: rgb(0, 255, 0);
-    text-decoration: underline;
-    transition: all 0.2s ease-in-out;
-    font-family: 'sary_soft_semiboldregular';
-    font-style: italic;
-  }
+.for-the-based-link {
+  font-size: 2rem;
+  margin: 0 0.5rem;
+  color: rgb(0, 255, 0);
+  text-decoration: underline;
+  transition: all 0.2s ease-in-out;
+  font-family: 'sary_soft_semiboldregular';
+  font-style: italic;
+}
 
-  .home-link:hover,
-  .for-the-based-link:hover {
-    color: green;
-    text-decoration: none;
-    font-size: 2.5rem;
-  }
+.home-link:hover,
+.for-the-based-link:hover {
+  color: green;
+  text-decoration: none;
+  font-size: 2.5rem;
+}
 
 /* Set social media styles */
 .social-media {
@@ -135,7 +137,8 @@ body {
 }
 
 .row a:hover {
-  transform: scale(1.3); /* make icon 20% bigger on hover */
+  transform: scale(1.3);
+  /* make icon 20% bigger on hover */
 }
 
 .line {
@@ -149,7 +152,7 @@ body {
   transition: transform 0.2s ease-in-out;
 }
 
-.line:hover + .line-content {
+.line:hover+.line-content {
   transform: scale(100);
   color: gray;
-}
+}
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 22bbc45..2c662be 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,37 +1,43 @@
+<script>
+  import Navbar from "../components/NavBar.svelte";
+  import Footer from "../components/Footer.svelte";
+  import ParallaxBg from "../components/ParallaxBg.svelte";
+  import Padding from "../components/padding.svelte";
+</script>
+
 <ParallaxBg>
-<Navbar />
-<title>Jonas_Jones</title>
+  <Navbar />
+  <title>Jonas_Jones</title>
   <Padding />
   <div class="image-wrapper">
     <div class="card-front">
       <!-- svelte-ignore a11y-img-redundant-alt -->
-      <img src="/icon_800x800_transparent.webp" alt="My Picture" class="picture">
+      <img
+        src="/icon_800x800_transparent.webp"
+        alt="My Picture"
+        class="picture"
+      />
     </div>
     <div class="card-back">
       <!-- svelte-ignore a11y-img-redundant-alt -->
-      <img src="/root_logo.webp" alt="My Picture" class="picture">
+      <img src="/root_logo.webp" alt="My Picture" class="picture" />
     </div>
   </div>
   <div class="line">
-    <hr>
+    <hr />
   </div>
   <div class="line-content">
     <p>Idk how this dot got here but im leaving it.</p>
   </div>
   <div class="social-media">
     <div class="row">
-      <a href="https://github.com/J-onasJones"><i class="fab fa-github"></i></a>
-      <a href="https://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg"><i class="fab fa-youtube"></i></a>
-      <a href="https://discord.gg/V2EsuUVmWh"><i class="fab fa-discord"></i></a>
-      <a href="mailto:me@jonasjones.dev"><i class="fas fa-envelope"></i></a>
+      <a href="https://github.com/J-onasJones"><i class="fab fa-github" /></a>
+      <a href="https://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg"
+        ><i class="fab fa-youtube" /></a
+      >
+      <a href="https://discord.gg/V2EsuUVmWh"><i class="fab fa-discord" /></a>
+      <a href="mailto:me@jonasjones.dev"><i class="fas fa-envelope" /></a>
     </div>
   </div>
 </ParallaxBg>
 <Footer />
-
-<script>
-  import Navbar from '../components/NavBar.svelte';
-  import Footer from '../components/Footer.svelte';
-  import ParallaxBg from '../components/ParallaxBg.svelte';
-  import Padding from '../components/padding.svelte';
-</script>
diff --git a/src/routes/406/+page.svelte b/src/routes/406/+page.svelte
index e44abcf..e0655d0 100644
--- a/src/routes/406/+page.svelte
+++ b/src/routes/406/+page.svelte
@@ -11,7 +11,11 @@
     <div class="container">
         <Padding />
         <h1>This is not acceptable. You must be a robot</h1>
-        <h1>Please visit <a href="https://jonasjones.dev/I-am-a-robot">https://jonasjones.dev/I-am-a-robot</a></h1>
+        <h1>
+            Please visit <a href="https://jonasjones.dev/I-am-a-robot"
+                >https://jonasjones.dev/I-am-a-robot</a
+            >
+        </h1>
     </div>
     <Footer />
 </ParallaxBg>
diff --git a/src/routes/409/+page.svelte b/src/routes/409/+page.svelte
index e83c0f5..95651a7 100644
--- a/src/routes/409/+page.svelte
+++ b/src/routes/409/+page.svelte
@@ -10,7 +10,10 @@
     <title>409</title>
     <div class="container">
         <Padding />
-        <h1>Conflict. Sir, there's a conflict of interests here. Please stop going any further [frog].</h1>
+        <h1>
+            Conflict. Sir, there's a conflict of interests here. Please stop
+            going any further [frog].
+        </h1>
     </div>
     <Footer />
 </ParallaxBg>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 716f74c..90bef77 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -4,29 +4,70 @@
     import ParallaxBg from "../../components/ParallaxBg.svelte";
     import Padding from "../../components/padding.svelte";
 </script>
+
 <ParallaxBg>
     <title>About</title>
     <div class="container">
         <Padding />
         <NavBar />
         <h1>About</h1>
-        <p class="text">Once upon a time, in the realm of technology, there emerged a tech prodigy named Jonas Jones. Jonas possessed an unparalleled passion for open-source software and a relentless pursuit of innovation. His vision extended beyond mere conquest; he sought to revolutionize the world with the power of Arch Linux, challenging the dominance of the reigning Windows empire.<br>
-            Armed with his trusty 16-framework laptop, Jonas embarked on a quest to dismantle the barriers erected by Windows and liberate the digital landscape. With each line of code he crafted, the Arch Linux revolution grew stronger, captivating hearts and minds worldwide.<br>
-            Jonas's expertise in the realm of Arch Linux was awe-inspiring. He possessed an encyclopedic knowledge of the command line, deftly navigating the intricate intricacies of the operating system. His coding skills were matched only by his indomitable spirit and unwavering dedication to the cause.<br>
-            Word of Jonas's audacious mission spread like wildfire. From dimly lit hacker forums to bustling tech conferences, his name became synonymous with the Arch Linux uprising. Tech enthusiasts rallied behind him, inspired by his passion and unwavering belief in the power of open-source software.<br>
-            As Jonas continued to advance his noble cause, the world felt the tremors of change. Corporations, governments, and individuals began embracing the freedom and security offered by Arch Linux. Its versatility and customizable nature proved to be a formidable weapon in the battle against proprietary software.<br>
-            Windows, once considered an unassailable fortress, faced the relentless onslaught of Jonas's Arch Linux revolution. In a symphony of code and determination, Jonas dismantled the walls that had long confined users, empowering them to forge their own digital destinies.<br>
-            The transformation was nothing short of extraordinary. Jonas's Arch Linux-powered empire began to flourish, fostering a vibrant community of like-minded individuals. They shared knowledge, collaborated on groundbreaking projects, and created a harmonious ecosystem where innovation thrived.<br>
-            Yet, Jonas never lost sight of his humble beginnings. Amidst the rapid rise of his empire, he remained grounded, connecting with Arch Linux enthusiasts across the globe. His charisma and down-to-earth nature endeared him to the masses, inspiring a new generation of tech leaders driven by the principles of openness and collaboration.<br>
-            And so, the world witnessed the ascent of Jonas Jones, the Arch Linux luminary, who, armed with his 16-framework laptop, embarked on a quest to topple the Windows kingdom and ignite a technological revolution. His journey taught us that with passion, knowledge, and the power of community, even the mightiest empires can be transformed.<br>
-            <br>
-            TL;DR: I asked ChatGPT.<br>
-            Also, I like K-Pop.<br>
+        <p class="text">
+            Once upon a time, in the realm of technology, there emerged a tech
+            prodigy named Jonas Jones. Jonas possessed an unparalleled passion
+            for open-source software and a relentless pursuit of innovation. His
+            vision extended beyond mere conquest; he sought to revolutionize the
+            world with the power of Arch Linux, challenging the dominance of the
+            reigning Windows empire.<br />
+            Armed with his trusty 16-framework laptop, Jonas embarked on a quest
+            to dismantle the barriers erected by Windows and liberate the digital
+            landscape. With each line of code he crafted, the Arch Linux revolution
+            grew stronger, captivating hearts and minds worldwide.<br />
+            Jonas's expertise in the realm of Arch Linux was awe-inspiring. He possessed
+            an encyclopedic knowledge of the command line, deftly navigating the
+            intricate intricacies of the operating system. His coding skills were
+            matched only by his indomitable spirit and unwavering dedication to the
+            cause.<br />
+            Word of Jonas's audacious mission spread like wildfire. From dimly lit
+            hacker forums to bustling tech conferences, his name became synonymous
+            with the Arch Linux uprising. Tech enthusiasts rallied behind him, inspired
+            by his passion and unwavering belief in the power of open-source software.<br
+            />
+            As Jonas continued to advance his noble cause, the world felt the tremors
+            of change. Corporations, governments, and individuals began embracing
+            the freedom and security offered by Arch Linux. Its versatility and customizable
+            nature proved to be a formidable weapon in the battle against proprietary
+            software.<br />
+            Windows, once considered an unassailable fortress, faced the relentless
+            onslaught of Jonas's Arch Linux revolution. In a symphony of code and
+            determination, Jonas dismantled the walls that had long confined users,
+            empowering them to forge their own digital destinies.<br />
+            The transformation was nothing short of extraordinary. Jonas's Arch Linux-powered
+            empire began to flourish, fostering a vibrant community of like-minded
+            individuals. They shared knowledge, collaborated on groundbreaking projects,
+            and created a harmonious ecosystem where innovation thrived.<br />
+            Yet, Jonas never lost sight of his humble beginnings. Amidst the rapid
+            rise of his empire, he remained grounded, connecting with Arch Linux
+            enthusiasts across the globe. His charisma and down-to-earth nature endeared
+            him to the masses, inspiring a new generation of tech leaders driven
+            by the principles of openness and collaboration.<br />
+            And so, the world witnessed the ascent of Jonas Jones, the Arch Linux
+            luminary, who, armed with his 16-framework laptop, embarked on a quest
+            to topple the Windows kingdom and ignite a technological revolution.
+            His journey taught us that with passion, knowledge, and the power of
+            community, even the mightiest empires can be transformed.<br />
+            <br />
+            TL;DR: I asked ChatGPT.<br />
+            Also, I like K-Pop.<br />
             I uSe ArCh BtW.
         </p>
         <h1>Greatest Acomplishment</h1>
-        <p>A severity 7.5/10 rated CVE I received for a humble project of mine as the second ever CVE in Minecraft Modding history!</p>
-        <a href="https://nvd.nist.gov/vuln/detail/CVE-2022-39221">CVE-2022-39221</a>
+        <p>
+            A severity 7.5/10 rated CVE I received for a humble project of mine
+            as the second ever CVE in Minecraft Modding history!
+        </p>
+        <a href="https://nvd.nist.gov/vuln/detail/CVE-2022-39221"
+            >CVE-2022-39221</a
+        >
         <Padding />
     </div>
     <Footer />
diff --git a/src/routes/alpha/+page.svelte b/src/routes/alpha/+page.svelte
index 987b57c..aec4a6f 100644
--- a/src/routes/alpha/+page.svelte
+++ b/src/routes/alpha/+page.svelte
@@ -11,7 +11,10 @@
     <div class="container">
         <Padding />
         <h1>There currently is no Alpha.</h1>
-        <p>Can't believe I actually managed to release this website in under a year.</p>
+        <p>
+            Can't believe I actually managed to release this website in under a
+            year.
+        </p>
         <p>Go to <a href="/">Home</a></p>
     </div>
     <Footer />
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index 9b600f4..f27afb4 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -7,51 +7,188 @@
 
   import projects from "./projects.json";
 
-  var searchResults = projects.filter(project => {
+  var searchResults = projects.filter((project) => {
     return project.visible === true;
-  })
+  });
 
-  var searchtext = '';
-  var searchcategory = '';
-  var searchlanguage = '';
-  var searchstatus = '';
+  var searchtext = "";
+  var searchcategory = "";
+  var searchlanguage = "";
+  var searchstatus = "";
 
-  function handleSearchText(event) {
+  function handleSearchText(event: { target: { value: string; }; }) {
     searchtext = event.target.value.toLowerCase();
-    handleSearch()
+    handleSearch();
   }
 
-  function handleSearchCategory(event) {
+  function handleSearchCategory(event: { target: { value: string; }; }) {
     searchcategory = event.target.value.toLowerCase();
-    handleSearch()
+    handleSearch();
   }
 
-  function handleSearchLang(event) {
+  function handleSearchLang(event: { target: { value: string; }; }) {
     searchlanguage = event.target.value.toLowerCase();
-    handleSearch()
+    handleSearch();
   }
 
-  function handleSearchStatus(event) {
+  function handleSearchStatus(event: { target: { value: string; }; }) {
     searchstatus = event.target.value.toLowerCase();
-    handleSearch()
+    handleSearch();
   }
 
-
   function handleSearch() {
     // set searchResults by filtering with searchtext, searchcategory, and searchlanguage
-    searchResults = projects.filter(project => {
-      var text = project.title.toLowerCase() + project.description.toLowerCase();
-      var category = project.categories.join(' ').toLowerCase();
-      var language = project.languages.join(' ').toLowerCase();
+    searchResults = projects.filter((project) => {
+      var text =
+        project.title.toLowerCase() + project.description.toLowerCase();
+      var category = project.categories.join(" ").toLowerCase();
+      var language = project.languages.join(" ").toLowerCase();
       var status = project.status.toLowerCase();
-      return text.includes(searchtext) && category.includes(searchcategory) && language.includes(searchlanguage) && status.includes(searchstatus) && project.visible === true;
-    })
+      return (
+        text.includes(searchtext) &&
+        category.includes(searchcategory) &&
+        language.includes(searchlanguage) &&
+        status.includes(searchstatus) &&
+        project.visible === true
+      );
+    });
   }
 </script>
 
+<FontAwesome />
+<ParallaxBg>
+  <title>Projects</title>
+  <div class="container">
+    <Padding />
+    <NavBar />
+    <h1>Projects</h1>
+    <div class="search-bar">
+      <input
+        type="text"
+        placeholder="Search projects"
+        on:input={handleSearchText}
+      />
+      <i class="fa fa-folder-open" aria-hidden="true" />
+      <select name="category" id="category" on:change={handleSearchCategory}>
+        <option value="">All</option>
+        <optgroup label="Minecraft">
+          <option value="minecraft">Minecraft</option>
+          <option value="mcmodding">Modding</option>
+          <option value="fabric">FabricMC</option>
+          <option value="quilt">QuiltMC</option>
+          <option value="forge">Forge</option>
+        </optgroup>
+        <optgroup label="WebDev">
+          <option value="webdev">WebDev</option>
+          <option value="website">Website</option>
+        </optgroup>
+        <optgroup label="Other">
+          <option value="tools">Tool</option>
+          <option value="lib">Library</option>
+        </optgroup>
+      </select>
+      <i class="fa fa-globe" aria-hidden="true" />
+      <select name="language" id="language" on:change={handleSearchLang}>
+        <option value="">All</option>
+        <option value="clang">C</option>
+        <option value="c++">C++</option>
+        <option value="py">Python</option>
+        <option value="java">Java</option>
+        <option value="rslang">Rust</option>
+        <option value="html">HTML</option>
+        <option value="css">CSS</option>
+        <option value="jslang">Javascript</option>
+        <option value="svelte">Svelte</option>
+        <option value="sh">Shell</option>
+        <option value="lualang">Lua</option>
+        <option value="ps2">PowerShell 2</option>
+        <option value="godot">Godot Lang</option>
+      </select>
+      <i class="fa fa-tasks" aria-hidden="true" />
+      <select name="status" id="status" on:change={handleSearchStatus}>
+        <option value="">All</option>
+        <option value="planned">Planned</option>
+        <option value="dev">In Development</option>
+        <option value="alpha">Alpha</option>
+        <option value="beta">Beta</option>
+        <option value="release">Release</option>
+        <option value="discontinued">Discontinued</option>
+      </select>
+      <!-- svelte-ignore a11y-missing-attribute -->
+      <a style="float: right;margin-right: 10px;margin-top: 10px;"
+        >{searchResults.length} results</a
+      >
+    </div>
+    <div class="project-container">
+      {#each searchResults as project}
+        <div class="project">
+          <!-- svelte-ignore a11y-missing-attribute -->
+          <h2 class="project-title">
+            {project.title}<br class="smaller-screen" /><br
+              class="smaller-screen"
+            /><a
+              class="project-status"
+              style="color: {project.statuscolor};border-color:{project.statuscolor}"
+              >{project.status}</a
+            ><a class="project-version">{project.version}</a>
+          </h2>
+          <p class="project-description">{project.description}</p>
+          <div class="project-bg">
+            <img
+              src="https://cdn.jonasjones.dev/project-banners{project.backgroud}"
+              alt=" "
+            />
+          </div>
+          <Padding />
+          <Padding />
+          <div class="project-links">
+            <div>
+              {#each Object.entries(project.links) as [platform, link]}
+                <a
+                  class="project-link"
+                  href={link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {#if platform === "GH"}
+                    <i class="fa fa-github" aria-hidden="true" />
+                  {:else if platform === "WB"}
+                    <i class="fa fa-globe" aria-hidden="true" />
+                  {:else if platform === "YT"}
+                    <i class="fa fa-youtube" aria-hidden="true" />
+                  {:else if platform === "TW"}
+                    <i class="fa fa-twitter" aria-hidden="true" />
+                  {:else if platform === "DC"}
+                    <i class="fa fa-discord" aria-hidden="true" />
+                  {:else if platform === "PT"}
+                    <i class="fa fa-patreon" aria-hidden="true" />
+                  {:else if platform === "SP"}
+                    <i class="fa fa-spotify" aria-hidden="true" />
+                  {:else if platform === "IG"}
+                    <i class="fa fa-instagram" aria-hidden="true" />
+                  {:else}
+                    {platform}
+                  {/if}
+                </a>
+              {/each}
+            </div>
+          </div>
+          <div>
+            <a class="download-button" href="/projects/{project.title}"
+              >More Info</a
+            >
+          </div>
+        </div>
+      {/each}
+    </div>
+    <Padding />
+  </div>
+  <Footer />
+</ParallaxBg>
+
 <style>
   /* Import Font Awesome for social media icons */
-  @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
+  @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");
   .container {
     width: 90%;
   }
@@ -89,7 +226,11 @@
     width: 100%;
     height: 100%;
     object-fit: cover;
-    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.918), rgba(0, 0, 0, 0));
+    mask-image: linear-gradient(
+      to right,
+      rgba(0, 0, 0, 0.918),
+      rgba(0, 0, 0, 0)
+    );
     transition: 0.3s;
   }
 
@@ -176,10 +317,10 @@
   }
 
   .search-bar {
-  margin-bottom: 20px;
-  background-color: rgba(0, 0, 0, 0.678);
-  padding: 10px;
-  border-radius: 5px;
+    margin-bottom: 20px;
+    background-color: rgba(0, 0, 0, 0.678);
+    padding: 10px;
+    border-radius: 5px;
   }
 
   .search-bar input {
@@ -222,115 +363,3 @@
     }
   }
 </style>
-
-<FontAwesome />
-<ParallaxBg>
-    <title>Projects</title>
-    <div class="container">
-        <Padding />
-        <NavBar />
-        <h1>Projects</h1>
-        <div class="search-bar">
-          <input type="text" placeholder="Search projects" on:input={handleSearchText} />
-          <i class="fa fa-folder-open" aria-hidden="true"></i>
-          <select name="category" id="category" on:change={handleSearchCategory}>
-            <option value="">All</option>
-            <optgroup label="Minecraft">
-              <option value="minecraft">Minecraft</option>
-              <option value="mcmodding">Modding</option>
-              <option value="fabric">FabricMC</option>
-              <option value="quilt">QuiltMC</option>
-              <option value="forge">Forge</option>
-            </optgroup>
-            <optgroup label="WebDev">
-              <option value="webdev">WebDev</option>
-              <option value="website">Website</option>
-            </optgroup>
-            <optgroup label="Other">
-              <option value="tools">Tool</option>
-              <option value="lib">Library</option>
-            </optgroup>
-          </select>
-          <i class="fa fa-globe" aria-hidden="true"></i>
-          <select name="language" id="language" on:change={handleSearchLang}>
-            <option value="">All</option>
-            <option value="clang">C</option>
-            <option value="c++">C++</option>
-            <option value="py">Python</option>
-            <option value="java">Java</option>
-            <option value="rslang">Rust</option>
-            <option value="html">HTML</option>
-            <option value="css">CSS</option>
-            <option value="jslang">Javascript</option>
-            <option value="svelte">Svelte</option>
-            <option value="sh">Shell</option>
-            <option value="lualang">Lua</option>
-            <option value="ps2">PowerShell 2</option>
-            <option value="godot">Godot Lang</option>
-          </select>
-          <i class="fa fa-tasks" aria-hidden="true"></i>
-          <select name="status" id="status" on:change={handleSearchStatus}>
-            <option value="">All</option>
-            <option value="planned">Planned</option>
-            <option value="dev">In Development</option>
-            <option value="alpha">Alpha</option>
-            <option value="beta">Beta</option>
-            <option value="release">Release</option>
-            <option value="discontinued">Discontinued</option>
-          </select>
-          <!-- svelte-ignore a11y-missing-attribute -->
-          <a style="float: right;margin-right: 10px;margin-top: 10px;">{searchResults.length} results</a>
-        </div>
-        <div class="project-container">
-          {#each searchResults as project}
-            <div class="project">
-                <!-- svelte-ignore a11y-missing-attribute -->
-                <h2 class="project-title">{project.title}<br class="smaller-screen"><br class="smaller-screen"><a class="project-status" style="color: {project.statuscolor};border-color:{project.statuscolor}">{project.status}</a><a class="project-version">{project.version}</a></h2>
-                <p class="project-description">{project.description}</p>
-                <div class="project-bg">
-                  <img src="https://cdn.jonasjones.dev/project-banners{project.backgroud}" alt=" " />
-                </div>
-                <Padding />
-                <Padding />
-                <div class="project-links">
-                  <div>
-                    {#each Object.entries(project.links) as [platform, link]}
-                    <a
-                      class="project-link"
-                      href={link}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                    {#if platform === "GH"}
-                    <i class="fa fa-github" aria-hidden="true"></i>
-                    {:else if platform === "WB"}
-                    <i class="fa fa-globe" aria-hidden="true"></i>
-                    {:else if platform === "YT"}
-                    <i class="fa fa-youtube" aria-hidden="true"></i>
-                    {:else if platform === "TW"}
-                    <i class="fa fa-twitter" aria-hidden="true"></i>
-                    {:else if platform === "DC"}
-                    <i class="fa fa-discord" aria-hidden="true"></i>
-                    {:else if platform === "PT"}
-                    <i class="fa fa-patreon" aria-hidden="true"></i>
-                    {:else if platform === "SP"}
-                    <i class="fa fa-spotify" aria-hidden="true"></i>
-                    {:else if platform === "IG"}
-                    <i class="fa fa-instagram" aria-hidden="true"></i>
-                    {:else}
-                    {platform}
-                    {/if}
-                    </a>
-                    {/each}
-                  </div>
-                </div>
-                <div>
-                  <a class="download-button" href="/projects/{project.title}">More Info</a>
-              </div>
-            </div>
-          {/each}
-        </div>
-      <Padding />
-    </div>
-  <Footer />
-</ParallaxBg>
