Added better layout

src/components/ProjectComponent.svelte

@@ -0,0 +1,105 @@
+<script>
+    export let project;
+    import ProjectsLinks from "./ProjectsLinks.svelte";
+
+    import "../routes/+page.css";
+</script>
+
+<div class="top">
+    <img class="image" src="/project-banners{project.backgroud}" alt=" " />
+</div>
+
+<div class="bottom">
+    <div class="content">
+        <div class="project-topline">
+            <div class="project-title">{project.title}</div>
+            <div class="project-links">
+                <ProjectsLinks {project} />
+                <a
+                    class="project-status"
+                    style="color: {project.statuscolor};border-color:{project.statuscolor}"
+                    >{project.status}</a
+                ><a class="project-version">{project.version}</a>
+            </div>
+        </div>
+        <div class="project-description">{project.description}</div>
+    </div>
+</div>
+
+<style>
+    .project-title {
+        font-size: 24px;
+        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: left;
+    }
+
+    .project-links {
+        display: flex;
+        align-items: right;
+        text-align: right;
+        align-content: right;
+    }
+
+    .top {
+        flex: 2;
+        display: flex;
+        align-items: center;
+    }
+
+    .bottom {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .image {
+        width: 100%;
+        height: 150px;
+        object-fit: cover;
+    }
+
+    .content {
+        margin: 20px;
+    }
+
+    .project-topline {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+</style>

src/components/ProjectsLinks.svelte

@@ -0,0 +1,57 @@
+<script>
+  export let project;
+</script>
+
+<div class="project-links">
+  {#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>
+
+<style>
+  .project-links {
+    display: inline-block;
+    align-items: right;
+    text-align: right;
+    align-content: right;
+    margin-right: 10px;
+  }
+  .project-link {
+    display: inline-block;
+    margin-left: 10px;
+    color: var(--project-link-color);
+    text-decoration: none;
+    transition: color 0.3s;
+    margin-top: 3px;
+    font-size: 25px;
+  }
+
+  .project-link:hover {
+    color: var(--project-link-color-hover);
+  }
+</style>

src/routes/+page.css

@@ -11,7 +11,7 @@
 }
 
 :root {
-	--background-color: #202324;
+  --background-color: #202324;
   --font-color: rgb(0, 255, 0);
   --font-hover-color: green;
   --header-background-color: rgba(0, 0, 0, 0.4);
@@ -31,8 +31,8 @@
 }
 
 @media (prefers-color-scheme: light) {
-	:root {
+  :root {
-		--background-color: #dfdcdb;
+    --background-color: #dfdcdb;
     --font-color: green;
     --font-hover-color: rgb(0, 255, 0);
     --header-background-color: rgba(255, 255, 255, 0.5);
@@ -49,7 +49,7 @@
     --project-search-background-color: rgba(255, 255, 255, 0.5);
     --project-search-input-font-color: black;
     --nav-menu-background-color: rgba(255, 255, 255, 0.8)
-	}
+  }
 }
 
 
@@ -93,7 +93,7 @@ a:hover {
 
 @media screen and (max-width: 768px) {
   .parallax-background {
-    transform:none;
+    transform: none;
   }
 
 }

src/routes/projects/+page.svelte

@@ -4,9 +4,10 @@
   import NavBar from "../../components/NavBar.svelte";
   import ParallaxBg from "../../components/ParallaxBg.svelte";
   import Padding from "../../components/padding.svelte";
+  import ProjectComponent from "../../components/ProjectComponent.svelte";
 
   import projects from "./projects.json";
-  
+
   import "../../routes/+page.css";
 
   var searchResults = projects.filter((project) => {
@@ -124,62 +125,7 @@
     <div class="project-container">
       {#each searchResults as project}
         <div class="project">
-          <!-- svelte-ignore a11y-missing-attribute -->
+          <ProjectComponent {project} />
-          <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="/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="{project.links.GH}"
-              >More Info</a
-            >
-          </div>
         </div>
       {/each}
     </div>
@@ -203,120 +149,13 @@
   }
 
   .project {
-    transition: background-color 0.3s;
-    transition: filter 0.3s;
     position: relative;
-    padding: 20px;
     border-radius: 8px;
     overflow: hidden;
     cursor: pointer;
-    padding-bottom: 50px;
     border: 2px solid var(--project-border-color);
-  }
+    min-width: 200px;
-
+    background-color: var(--background-color);
-  .project-bg {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    background-color: var(--project-background-color);
-  }
-
-  .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: var(--project-link-color);
-    text-decoration: none;
-    transition: color 0.3s;
-  }
-
-  .project-link:hover {
-    color: var(--project-link-color-hover);
-  }
-
-  .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 {
@@ -348,21 +187,9 @@
     padding-right: 10px;
   }
 
-  .smaller-screen {
-    display: none;
-  }
-
   @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;
-    }
-    .smaller-screen {
-      display: block;
-    }
   }
 </style>