diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
new file mode 100644
index 0000000..f379987
--- /dev/null
+++ b/src/routes/projects/+page.svelte
@@ -0,0 +1,315 @@
+<script lang="ts">
+    import FontAwesome from "../../components/FontAwesome.svelte";
+import Footer from "../../components/Footer.svelte";
+    import NavBar from "../../components/NavBar.svelte";
+    import ParallaxBg from "../../components/ParallaxBg.svelte";
+    import Padding from "../../components/padding.svelte";
+
+  import projects from "./projects.json";
+
+
+  var searchResults = projects;
+
+  var searchtext = '';
+  var searchcategory = '';
+  var searchlanguage = '';
+  var searchstatus = '';
+  
+  function handleSearchText(event) {
+    searchtext = event.target.value.toLowerCase();
+    handleSearch()
+  }
+
+  function handleSearchCategory(event) {
+    searchcategory = event.target.value.toLowerCase();
+    handleSearch()
+  }
+
+  function handleSearchLang(event) {
+    searchlanguage = event.target.value.toLowerCase();
+    handleSearch()
+  }
+
+  function handleSearchStatus(event) {
+    searchstatus = event.target.value.toLowerCase();
+    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();
+      var status = project.status.toLowerCase();
+      return text.includes(searchtext) && category.includes(searchcategory) && language.includes(searchlanguage) && status.includes(searchstatus);
+    });
+  }
+
+</script>
+
+<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');
+    .container {
+      width: 90%;
+    }
+
+    .project-container {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
+      gap: 20px;
+      width: 100%;
+    }
+
+    .project {
+      transition: background-color 0.3s;
+      transition: filter 0.3s;
+      position: relative;
+      padding: 20px;
+      border-radius: 8px;
+      overflow: hidden;
+      cursor: pointer;
+      padding-bottom: 50px;
+    }
+
+    .project-bg {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      background-color: black;
+    }
+
+    .project-bg img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.918), rgba(0, 0, 0, 0));
+      transition: 0.3s;
+    }
+
+    .project:hover img {
+      -webkit-filter: blur(5px);
+      filter: blur(5px);
+    }
+  
+    .project-title {
+      font-size: 20px;
+      font-weight: bold;
+      margin-bottom: 10px;
+      text-align: left;
+    }
+
+    .project-status {
+      font-size: 20px;
+      font-weight: bold;
+      margin-bottom: 10px;
+      margin-left: 10px;
+      margin-right: 10px;
+      padding: 2px;
+      padding-left: 5px;
+      padding-right: 5px;
+      border: 3px solid #dcdcdc;
+      border-radius: 3px;
+    }
+
+    .project-version {
+      font-size: 20px;
+      font-weight: bold;
+      color: white;
+      margin-bottom: 10px;
+      margin-left: 10px;
+      margin-right: 10px;
+      margin-top: -4px;
+      padding: 2px;
+      border: 3px solid #dcdcdc;
+      border-radius: 100px;
+      float: right;
+    }
+  
+    .project-description {
+      margin-top: 20px;
+      margin-bottom: 10px;
+      margin-right: 12px;
+      text-align: right;
+    }
+  
+    .project-links {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: absolute;
+      bottom: 20px;
+    }
+  
+    .project-link {
+      display: inline-block;
+      margin-left: 10px;
+      color: #333;
+      text-decoration: none;
+      transition: color 0.3s;
+    }
+  
+    .project-link:hover {
+      color: #666;
+    }
+
+    .download-button {
+      margin-left: 10px;
+      color: white;
+      transition: color 0.3s;
+      background-color: rgb(25, 25, 100);
+      border-radius: 5px;
+      padding: 5px;
+      padding-left: 10px;
+      padding-right: 10px;
+      text-decoration: none;
+      border: 3px solid rgb(0, 0, 100);
+      position: absolute;
+      bottom: 20px;
+      right: 20px;
+    }
+
+    .search-bar {
+    margin-bottom: 20px;
+    background-color: rgba(0, 0, 0, 0.678);
+    padding: 10px;
+    border-radius: 5px;
+    }
+
+    .search-bar input {
+      background-color: transparent;
+      border: none;
+      outline: none;
+      color: white;
+      font-size: 20px;
+      width: 100%;
+      padding-left: 10px;
+      padding-right: 10px;
+      text-align: center;
+    }
+
+    .search-bar select {
+      background-color: transparent;
+      border: none;
+      outline: none;
+      color: white;
+      font-size: 20px;
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+
+  </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>
+          </select>
+          <i class="fa fa-globe" aria-hidden="true"></i>
+          <select name="language" id="language" on:change={handleSearchLang}>
+            <option value="">All</option>
+            <option value="c">C</option>
+            <option value="c++">C++</option>
+            <option value="py">Python</option>
+            <option value="java">Java</option>
+            <option value="rs">Rust</option>
+            <option value="html">HTML</option>
+            <option value="css">CSS</option>
+            <option value="js">Javascript</option>
+            <option value="svelte">Svelte</option>
+            <option value="sh">Shell</option>
+            <option value="lue">Lua</option>
+            <option value="ps2">PowerShell 2</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}<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="/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>
\ No newline at end of file
diff --git a/src/routes/projects/projects.json b/src/routes/projects/projects.json
new file mode 100644
index 0000000..ed7e033
--- /dev/null
+++ b/src/routes/projects/projects.json
@@ -0,0 +1,125 @@
+[
+    {
+        "title": "Microcraft",
+        "description": "A Minecraft mod that allows for Microcontroller and Singleboard computer control.",
+        "status": "Alpha",
+        "statuscolor": "red",
+        "categories": ["minecraft", "mcmodding","fabric", "quilt"],
+        "languages": ["java"],
+        "gh_api": "https://api.github.com/repos/J-onasJones/Microcraft",
+        "version": "v0.0.1+alpha1",
+        "backgroud": "/microcraft.png",
+        "links": {
+            "GH": "https://github.com/J-onasJones/Microcraft",
+            "WB": "/projects/Microcraft",
+            "MR": "https://modrinth.com/mod/microcraft"
+        }
+    },
+    {
+        "title": "NotEnoughCursedness",
+        "description": "A Minecraft mod introducing every little bit of cursed items and behavior into the game.",
+        "status": "Beta",
+        "statuscolor": "orange",
+        "categories": ["minecraft", "mcmodding","fabric", "quilt"],
+        "languages": ["java"],
+        "gh_api": "https://api.github.com/repos/J-onasJones/NotEnoughCursedness",
+        "version": "v0.2.0",
+        "backgroud": "/notenoughcursedness.png",
+        "links": {
+            "GH": "https://github.com/J-onasJones/NotEnoughCursedness",
+            "WB": "/projects/NotEnoughCursedness",
+            "MR": "https://modrinth.com/mod/not-enough-cursedness"
+        }
+    },
+    {
+        "title": "BetterConsoleMC",
+        "description": "A more controlable and safer successor to the ConsoleMC mod.",
+        "status": "Alpha",
+        "statuscolor": "red",
+        "categories": ["minecraft", "mcmodding","fabric", "quilt"],
+        "languages": ["java"],
+        "gh_api": "https://api.github.com/repos/J-onasJones/BetterConsoleMC",
+        "version": "v0.0.1-alpha02",
+        "backgroud": "/betterconsolemc.png",
+        "links": {
+            "GH": "https://github.com/J-onasJones/BetterConsoleMC",
+            "WB": "/projects/BetterConsoleMC",
+            "MR": "https://modrinth.com/mod/betterconsolemc"
+        }
+    },
+    {
+        "title": "ConsoleMC",
+        "description": "A mod that allows console commands to be executed over the ingame Minecraft chat.",
+        "status": "Beta",
+        "statuscolor": "orange",
+        "categories": ["minecraft", "mcmodding","fabric", "quilt"],
+        "languages": ["java"],
+        "gh_api": "https://api.github.com/repos/J-onasJones/ConsoleMC",
+        "version": "v0.1.0.1",
+        "backgroud": "/consolemc.png",
+        "links": {
+            "GH": "https://github.com/J-onasJones/ConsoleMC",
+            "WB": "/projects/ConsoleMC",
+            "MR": "https://modrinth.com/mod/consolemc"
+        }
+    },
+    {
+        "title": "MysteryMod",
+        "description": "The base mod of the Mystery Mod mod-family. It includes the Mystery-API that is required for all other Mystery Mods to work",
+        "status": "Dev",
+        "statuscolor": "purple",
+        "categories": ["minecraft", "mcmodding","fabric", "quilt"],
+        "languages": ["java"],
+        "gh_api": "https://api.github.com/repos/J-onasJones/MysteryMod",
+        "version": "v0.0.0",
+        "backgroud": "/mysterymod.png",
+        "links": {
+            "GH": "https://github.com/J-onasJones/MysteryMod",
+            "WB": "/projects/MysteryMod"
+        }
+    },
+    {
+        "title": "Minecraft-Server-Status",
+        "description": "A Python based program that displays Your Minecraft Server's Status Infos.",
+        "status": "Release",
+        "statuscolor": "green",
+        "categories": ["minecraft"],
+        "languages": ["py"],
+        "gh_api": "https://api.github.com/repos/J-onasJones/Minecraft-Server-Status",
+        "version": "v1.2",
+        "backgroud": "/minecraft-server-status.png",
+        "links": {
+            "GH": "https://github.com/J-onasJones/Minecraft-Server-Status"
+        }
+    },
+    {
+        "title": "Homepage",
+        "description": "My website at https://jonasjones.dev",
+        "status": "Release",
+        "statuscolor": "green",
+        "categories": ["webdev", "website"],
+        "languages": ["svelte", "js", "html", "css"],
+        "gh_api": "https://api.github.com/repos/J-onasJones/jonasjones.me",
+        "version": "v1.0",
+        "backgroud": "/homepage.png",
+        "links": {
+            "GH": "https://github.com/J-onasJones/jonasjones.me",
+            "WB": "/"
+        }
+    },
+    {
+        "title": "Alpha Homepage",
+        "description": "My alpha website at https://alpha.jonasjones.dev",
+        "status": "discontinued",
+        "statuscolor": "yellow",
+        "categories": ["webdev", "website"],
+        "languages": ["svelte", "js", "html", "css"],
+        "gh_api": "https://api.github.com/repos/J-onasJones/alpha.jonasjones.dev",
+        "version": "v1.0",
+        "backgroud": "/alpha-homepage.png",
+        "links": {
+            "GH": "https://github.com/J-onasJones/alpha.jonasjones.dev",
+            "WB": "https://alpha.jonasjones.dev"
+        }
+    }
+]
\ No newline at end of file