diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index 9baffa0..d47f7d9 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -1,70 +1,51 @@
-<script script lang="ts" async>
-    import { select_option } from "svelte/internal";
-    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";
+<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";
 
-  // fetch data from https://cdn.jonasjones.dev/api/projects/projects.json
-  // and store it in a variable called projects
-
-  let searchResults = [];
-
-  async function fetchProjects() {
-    try {
-      const response = await fetch('https://cdn.jonasjones.dev/api/projects/projects.json');
-      console.log(response);
-      if (!response.ok) {
-        throw new Error('Failed to fetch projects data');
-      }
-      projects = await response.json().then(uwu => console.log(projects));
-      searchResults = projects;
-      return projects;
-    } catch (error) {
-      console.error(error);
-    }
-  }
-  let projects = fetchProjects();
-  console.log(projects);
-
-  var searchtext = '';
-  var searchcategory = '';
-  var searchlanguage = '';
-  var searchstatus = '';
-  
-  function handleSearchText(event) {
-    searchtext = event.target.value.toLowerCase();
-    console.log(projects)
-    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()
-  }
+import projects from "./projects.json";
 
 
-  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);
-    });
-  }
+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>
 
@@ -223,6 +204,17 @@
       padding-right: 10px;
     }
 
+    @media only screen and (max-width: 620px) {
+      .project-container {
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      }
+      .container {
+        width: 100%;
+        margin: 0;
+        padding: 0;
+      }
+    }
+
   </style>
 
 <FontAwesome />