From 9d376802fc6327d02a27d5debf4ae698045164ad Mon Sep 17 00:00:00 2001
From: Fabio <forgistm.pl@gmail.com>
Date: Thu, 27 Mar 2025 13:53:24 +0100
Subject: [PATCH] Rebuilt cards in projects to be in one component with
 changable variables

---
 src/lib/components/ProjectBodyCard.svelte     | 13 ++++++
 src/lib/components/ProjectCard.svelte         | 41 +++++++++++++++++++
 src/lib/components/lifemap_body_card.svelte   | 18 --------
 src/lib/components/lifemap_card.svelte        | 35 ----------------
 src/lib/components/nexo_body_card.svelte      | 22 ----------
 src/lib/components/nexo_card.svelte           | 35 ----------------
 src/lib/components/projects.svelte            | 32 +++++++++++----
 src/lib/components/sbau_body_card.svelte      | 18 --------
 src/lib/components/sbau_card.svelte           | 32 ---------------
 src/lib/components/strayvoid_body_card.svelte | 18 --------
 src/lib/components/strayvoid_card.svelte      | 32 ---------------
 11 files changed, 78 insertions(+), 218 deletions(-)
 create mode 100644 src/lib/components/ProjectBodyCard.svelte
 create mode 100644 src/lib/components/ProjectCard.svelte
 delete mode 100644 src/lib/components/lifemap_body_card.svelte
 delete mode 100644 src/lib/components/lifemap_card.svelte
 delete mode 100644 src/lib/components/nexo_body_card.svelte
 delete mode 100644 src/lib/components/nexo_card.svelte
 delete mode 100644 src/lib/components/sbau_body_card.svelte
 delete mode 100644 src/lib/components/sbau_card.svelte
 delete mode 100644 src/lib/components/strayvoid_body_card.svelte
 delete mode 100644 src/lib/components/strayvoid_card.svelte

diff --git a/src/lib/components/ProjectBodyCard.svelte b/src/lib/components/ProjectBodyCard.svelte
new file mode 100644
index 00000000..763f3fdb
--- /dev/null
+++ b/src/lib/components/ProjectBodyCard.svelte
@@ -0,0 +1,13 @@
+<script>
+    import { cn } from "$lib/utils";
+    
+    export let title = "";
+    export let desc = "";
+    let className = "";
+    export { className as class };
+  </script>
+  
+  <div class={cn("px-2 text-gray-100 sm:px-4 py-0 sm:pb-3 text-left", className)}>
+    <h3 class="text-lg font-semibold tracking-tighter mt-3 mb-1">{title}</h3>
+    <p class="text-sm leading-5">{desc}</p>
+  </div>
\ No newline at end of file
diff --git a/src/lib/components/ProjectCard.svelte b/src/lib/components/ProjectCard.svelte
new file mode 100644
index 00000000..01f12510
--- /dev/null
+++ b/src/lib/components/ProjectCard.svelte
@@ -0,0 +1,41 @@
+<script>
+    import CardBody from "./ProjectBodyCard.svelte";
+    import { base } from '$app/paths';
+    import { cn } from "$lib/utils";
+  
+    export let title = "";
+    export let desc = "";
+    export let image;
+    export let link = "#";
+  </script>
+  
+  
+  <a href="{base}/{link}">
+    <div class="rounded-3xl shadow-3xl relative overflow-hidden group card">
+      <img
+        src={image}
+        placeholder="blur"
+        alt={title + " mockup"}
+        class="w-[25rem] object-cover object-center m-0"
+      />
+      <div
+        class="absolute inset-0 from-stone-900/90 via-stone-900/60 to-stone-900/5 bg-gradient-to-t backdrop-blur-[2px] transition-all duration-300"
+      ></div>
+      <CardBody
+        {title}
+        {desc}
+        class="absolute pb-0.5 px-4 md:pb-10 inset-x-0 bottom-2 flex flex-col justify-end size-full"
+      />
+    </div>
+  </a>
+  
+  <style>
+    .card {
+      transition: all 0.3s;
+      filter: grayscale(100%);
+    }
+    .card:hover {
+      transform: scale(1.05);
+      filter: grayscale(0%);
+    }
+  </style>
\ No newline at end of file
diff --git a/src/lib/components/lifemap_body_card.svelte b/src/lib/components/lifemap_body_card.svelte
deleted file mode 100644
index 959d78f6..00000000
--- a/src/lib/components/lifemap_body_card.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-    import { cn } from "$lib/utils";
-  
-    let className = "";
-    export { className as class };
-    let card = {
-      title: "LifeMap",
-      desc: "LifeMap is a personal life tracker that visually organizes important events, goals, and memories in a timeline and map format. It helps users reflect on their past, document key milestones, and plan for the future in a structured and interactive way.",
-  
-    };
-  </script>
-  
-  <div class={cn("px-2 text-gray-100 sm:px-4 py-0 sm:pb-3 text-left", className)}>
-    <h3 class="text-lg font-semibold tracking-tighter mt-3 mb-1">
-      {card.title}
-    </h3>
-    <p class="text-sm leading-5">{card.desc}</p>
-  </div>
\ No newline at end of file
diff --git a/src/lib/components/lifemap_card.svelte b/src/lib/components/lifemap_card.svelte
deleted file mode 100644
index ab39ee29..00000000
--- a/src/lib/components/lifemap_card.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script>
-    import CardBodyImg from "./lifemap_body_card.svelte";
-    import lifemap_mockup from "$lib/img/lifemap_mockup.png";
-    import { base } from '$app/paths';
-</script>
-  
-<a href="{base}/nexo_project" >
-  <div class="rounded-3xl shadow-3xl relative overflow-hidden group card">
-    <img
-      src={lifemap_mockup}
-      placeholder="blur"
-      alt="lifemap_mockup"
-      class="w-[25rem] object-cover object-center m-0"
-    />
-    <div
-      class="absolute inset-0 from-stone-900/90 via-stone-900/60 to-stone-900/5 bg-gradient-to-t backdrop-blur-[2px] transition-all duration-300"
-    ></div>
-    <slot>
-      <CardBodyImg
-        class="absolute pb-0.5 px-4 md:pb-10 inset-x-0 bottom-2 flex flex-col justify-end size-full"
-      />
-    </slot>
-  </div>
-</a>  
-
-<style>
-  .card {
-    transition: all 0.3s;
-    filter: grayscale(100%);
-  }
-  .card:hover {
-    transform: scale(1.05);
-    filter: grayscale(0%);
-  }
-</style>
\ No newline at end of file
diff --git a/src/lib/components/nexo_body_card.svelte b/src/lib/components/nexo_body_card.svelte
deleted file mode 100644
index 22de04be..00000000
--- a/src/lib/components/nexo_body_card.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-  import { cn } from "$lib/utils";
-
-  let className = "";
-  export { className as class };
-  let card = {
-    title: "Nexo bot for Discord",
-    desc: "My own personal bot for Discord, written in Python using the discord.py library.",
-
-  };
-</script>
-
-<div class={cn("px-2 text-gray-100 sm:px-4 py-0 sm:pb-3 text-left", className)}>
-  <h3 class="text-lg font-semibold tracking-tighter mt-3 mb-1">
-    {card.title}
-  </h3>
-  <p class="text-sm leading-5">{card.desc}</p>
-</div>
-
-<!--
-It's purpose is to use on my own server (linked on homepage), and it has or will have a lot of features, such as: moderation, fun, and more. It's still under development, but it's already usable.
--->
\ No newline at end of file
diff --git a/src/lib/components/nexo_card.svelte b/src/lib/components/nexo_card.svelte
deleted file mode 100644
index 62bc3d3a..00000000
--- a/src/lib/components/nexo_card.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script>
-    import CardBodyImg from "./nexo_body_card.svelte";
-    import nexo_mockup from "$lib/img/nexo_mockup.png";
-    import { base } from '$app/paths';
-</script>
-  
-<a href="{base}/nexo_project" >
-  <div class="rounded-3xl shadow-3xl relative overflow-hidden group card">
-    <img
-      src={nexo_mockup}
-      placeholder="blur"
-      alt="nexo_mockup"
-      class="w-[25rem] object-cover object-center m-0"
-    />
-    <div
-      class="absolute inset-0 from-stone-900/90 via-stone-900/60 to-stone-900/5 bg-gradient-to-t backdrop-blur-[2px] transition-all duration-300"
-    ></div>
-    <slot>
-      <CardBodyImg
-        class="absolute pb-0.5 px-4 md:pb-10 inset-x-0 bottom-2 flex flex-col justify-end size-full"
-      />
-    </slot>
-  </div>
-</a>  
-
-<style>
-  .card {
-    transition: all 0.3s;
-    filter: grayscale(100%);
-  }
-  .card:hover {
-    transform: scale(1.05);
-    filter: grayscale(0%);
-  }
-</style>
\ No newline at end of file
diff --git a/src/lib/components/projects.svelte b/src/lib/components/projects.svelte
index 7caab466..d667fc06 100644
--- a/src/lib/components/projects.svelte
+++ b/src/lib/components/projects.svelte
@@ -1,9 +1,6 @@
 <script>
     import BlurFade from "./BlurFade.svelte";
-    import NexoCard from "./nexo_card.svelte";
-    import SbauCard from "./sbau_card.svelte";
-    import StrayvoidCard from "./strayvoid_card.svelte";
-    import LifeMapCard from "./lifemap_card.svelte";
+    import ProjectCard from "./ProjectCard.svelte";
 </script>
 
 <div class="min-h-screen flex flex-col items-center justify-center py-8 pb-[80px] md:pb-8 w-full">
@@ -14,10 +11,29 @@
     <BlurFade delay={0.20}>
         <div class="w-full flex justify-center items-center px-4">
             <div class="siatka grid gap-8 w-full max-w-[800px]">
-                <NexoCard />
-                <SbauCard />
-                <StrayvoidCard />
-                <LifeMapCard />
+                <!--<NexoCard />-->
+                <ProjectCard
+                    title="Nexo"
+                    desc="A platform for students to find and share notes, summaries, and other study materials."
+                    image="/src/lib/img/nexo_mockup.png"
+                    link="nexo_project"
+                />
+                <ProjectCard
+                    title="Website for my uncle's business"
+                    desc="A website for my uncle's business. It's purpose is to be like a business card, but on the internet."
+                    image="/src/lib/img/sbau_mockup.png"
+                    link="sbau_project"
+                />
+                <ProjectCard 
+                    title="Strayvoid"
+                    desc="This is my first ever game. 2d pixelart platformer. Learning godot and generally game-dev. Maybe when i finish it it will be on steam but only maybe."
+                    image="/src/lib/img/strayvoid_mockup.png"
+                />
+                <ProjectCard
+                    title="LifeMap"
+                    desc="LifeMap is a personal life tracker that visually organizes important events, goals, and memories in a timeline and map format. It helps users reflect on their past, document key milestones, and plan for the future in a structured and interactive way."
+                    image="/src/lib/img/lifemap_mockup.png"
+                />
             </div>
         </div>
     </BlurFade>
diff --git a/src/lib/components/sbau_body_card.svelte b/src/lib/components/sbau_body_card.svelte
deleted file mode 100644
index 0bf9d55d..00000000
--- a/src/lib/components/sbau_body_card.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-    import { cn } from "$lib/utils";
-  
-    let className = "";
-    export { className as class };
-    let card = {
-      title: "Website for my uncle's business",
-      desc: "A website for my uncle's business. It's purpose is to be like a business card, but on the internet.",
-  
-    };
-  </script>
-  
-  <div class={cn("px-2 text-gray-100 sm:px-4 py-0 sm:pb-3 text-left", className)}>
-    <h3 class="text-lg font-semibold tracking-tighter mt-3 mb-1">
-      {card.title}
-    </h3>
-    <p class="text-sm leading-5">{card.desc}</p>
-  </div>
\ No newline at end of file
diff --git a/src/lib/components/sbau_card.svelte b/src/lib/components/sbau_card.svelte
deleted file mode 100644
index 2cfab3ba..00000000
--- a/src/lib/components/sbau_card.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script>
-    import CardBodyImg from "./sbau_body_card.svelte";
-    import sbau_mockup from "$lib/img/sbau_mockup.png";
-  </script>
-  
-  <div class="rounded-3xl shadow-3xl relative overflow-hidden group card">
-    <img
-      src={sbau_mockup}
-      placeholder="blur"
-      alt="sbau_mockup"
-      class="w-[25rem] object-cover object-center m-0"
-    />
-    <div
-      class="absolute inset-0 from-stone-900/90 via-stone-900/60 to-stone-900/5 bg-gradient-to-t backdrop-blur-[2px] transition-all duration-300"
-    ></div>
-    <slot>
-      <CardBodyImg
-        class="absolute pb-0.5 px-4 md:pb-10 inset-x-0 bottom-2 flex flex-col justify-end size-full"
-      />
-    </slot>
-  </div>
-  
-<style>
-  .card {
-    transition: all 0.3s;
-    filter: grayscale(100%);
-  }
-  .card:hover {
-    transform: scale(1.05);
-    filter: grayscale(0%);
-  }
-</style>
diff --git a/src/lib/components/strayvoid_body_card.svelte b/src/lib/components/strayvoid_body_card.svelte
deleted file mode 100644
index f87e0ebe..00000000
--- a/src/lib/components/strayvoid_body_card.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-    import { cn } from "$lib/utils";
-  
-    let className = "";
-    export { className as class };
-    let card = {
-      title: "Strayvoid",
-      desc: "This is my first ever game. 2d pixelart platformer. Learning godot and generally game-dev. Maybe when i finish it it will be on steam but only maybe.",
-  
-    };
-  </script>
-  
-  <div class={cn("px-2 text-gray-100 sm:px-4 py-0 sm:pb-3 text-left", className)}>
-    <h3 class="text-lg font-semibold tracking-tighter mt-3 mb-1">
-      {card.title}
-    </h3>
-    <p class="text-sm leading-5">{card.desc}</p>
-  </div>
\ No newline at end of file
diff --git a/src/lib/components/strayvoid_card.svelte b/src/lib/components/strayvoid_card.svelte
deleted file mode 100644
index 789fa0f8..00000000
--- a/src/lib/components/strayvoid_card.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script>
-    import CardBodyImg from "./strayvoid_body_card.svelte";
-    import strayvoid_mockup from "$lib/img/strayvoid_mockup.png";
-  </script>
-  
-  <div class="rounded-3xl shadow-3xl relative overflow-hidden group card">
-    <img
-      src={strayvoid_mockup}
-      placeholder="blur"
-      alt="strayvoid_mockup"
-      class="w-[25rem] object-cover object-center m-0"
-    />
-    <div
-      class="absolute inset-0 from-stone-900/90 via-stone-900/60 to-stone-900/5 bg-gradient-to-t backdrop-blur-[2px] transition-all duration-300"
-    ></div>
-    <slot>
-      <CardBodyImg
-        class="absolute pb-0.5 px-4 md:pb-10 inset-x-0 bottom-2 flex flex-col justify-end size-full"
-      />
-    </slot>
-  </div>
-  
-<style>
-  .card {
-    transition: all 0.3s;
-    filter: grayscale(100%);
-  }
-  .card:hover {
-    transform: scale(1.05);
-    filter: grayscale(0%);
-  }
-</style>