Fixed featured projects in home page.

assets/featured.js

@@ -1,28 +0,0 @@
-const featuredHelper = document.querySelector("#featuredHelper");
-
-async function getFeaturedJSON() {
-    const response = await fetch(`/assets/featured.json`);
-    if (!response.ok) { 
-        featuredHelper.innerHTML = `
-        <p>;( Oopsie! Could not load featured projects...</p>
-        `
-        throw new Error("Failed to fetch featured projects JSON");
-    }
-
-    const data = await response.json();
-
-    data.forEach(project => {
-        const featuredDiv = document.createElement("div");
-        featuredDiv.classList.add("featuredProject");
-        featuredDiv.id = `featured-${project}`;
-        featuredDiv.innerHTML = `
-            <a href="project.html?id=${project}">
-                <img src="/projects/${project}/logo.png">
-                <p>${project}</p>
-            </a>
-        `;
-        featuredHelper.appendChild(featuredDiv);
-    });
-}
-
-getFeaturedJSON();

assets/featured.json

@@ -1 +0,0 @@
-["aboukkit", "ghostsandstuff", "tenkumalib"]

assets/index.js

@@ -1,11 +0,0 @@
-const featuredHelper = document.querySelector("#featuredHelper")
-
-async function loadFeatured() {
-    const response = await fetch(`bananas.json`);
-    if (!response.ok) {
-        featuredHelper.innerHTML = `
-        <p>Oops! Failed to fetch featured projects...</p>
-        `
-        throw new Error("Failed to fetch featured projects JSON");
-    }
-}

assets/styles.css

@@ -65,6 +65,10 @@ p, ul {
     padding-bottom: .6em;
 }
 
+img {
+    image-rendering: pixelated;
+}
+
 #linksBox {
     padding: 10px;
     display: flex;
@@ -102,9 +106,6 @@ p, ul {
 }
 
 #featured {
-    margin-top: 20px;
-    border: 2px solid greenyellow;
-    padding: 10px;
     display: flex;
     flex-direction: column;
 }
@@ -117,20 +118,19 @@ p, ul {
 
 .featuredProject {
     transition: .2s;
-    height: fit-content;
     width: 15%;
     font-size: smaller;
     padding: 4px;
     overflow: hidden;
 }
 
-.featuredProject:hover {
-    transition: .2s;
-    outline: 4px solid gray;
+.featuredProjectName {
+    margin-top: auto;
 }
 
 .featuredProject img {
     width: 100%;
+    border: medium solid yellowgreen;
 }
 
 .featuredProject p {
@@ -159,11 +159,12 @@ p, ul {
     padding-top: 20px;
     gap: 20px;
     display: flex;
-    /* text-shadow: 2px 2px gray; */
 }
 
 #downloadButton {
-    border: 2px solid gray;
+    border: none;
+    background: linear-gradient(yellowgreen, green);
+    border-radius: 2px;
 }
 
 #downloadLink {