added type-tags to projects

src/components/Button.astro

@@ -9,7 +9,7 @@ const { type = "primary", link } = Astro.props;
 
 <a class:list={[
     "flex gap-2 items-center justify-center",
-    "p-2 w-36 font-bold rounded hover:bg-opacity-75 active:bg-opacity-50",
+    "p-2 w-32 font-bold rounded hover:bg-opacity-75 active:bg-opacity-50",
     "transition-color sease-linear duration-300",
     `bg-${type}`, `text-${type}-content`
 ]}

src/components/Card.astro

@@ -1,12 +1,16 @@
 ---
 interface Props {
     title: string;
+    tags?: string[]
 }
 
-const { title } = Astro.props;
+const { title, tags = [] } = Astro.props;
 ---
 
 <article class="flex flex-col bg-base-200 p-8 rounded-sm border border-neutral shadow-neutral shadow-[6px_6px_0_0] min-h-72 break-inside-avoid-column cool-background">
-    <h3 class="text-2xl font-medium mb-4">{title}</h3>
+    <h3 class="text-2xl font-medium mb-1">{title}</h3>
+    <div class="flex gap-1 mb-3">
+        {tags && tags.map(t => <span class="text-xs bg-neutral text-neutral-content rounded-full p-0.5 px-2">{t}</span>)}
+    </div>
     <slot />
 </article>

src/components/ProjectCard.astro

@@ -1,18 +1,19 @@
 ---
 interface Props {
+    type?: string;
     title: string;
     description: string;
     link?: string;
     repository?: string;
 }
 
-const {title, description, link, repository} = Astro.props;
+const {type, title, description, link, repository} = Astro.props;
 
 import ButtonLink from "./Button.astro";
 import Card from "./Card.astro";
 ---
 
-<Card title={title}>
+<Card title={title} tags={type ? [type] : []}>
     <p class="mb-3 flex-1">{description}</p>
     <slot />
     <div class="flex flex-wrap gap-2">

src/pages/index.astro

@@ -21,19 +21,24 @@ import ProjectCard from "../components/ProjectCard.astro";
 
 		<h2 class="text-2xl lg:text-4xl font-medium mb-2">Software Projects</h2>
 		<div class="grid grid-cols-1 xl:grid-cols-3 gap-8 gap-y-4 mb-8">
-            <ProjectCard title="GeeksList"
+            <ProjectCard type="Web App"
+                         title="GeeksList"
                          description="Keep track of your favorite shows"
                          link="https://geekslist.de" />
-            <ProjectCard title="Wave"
+            <ProjectCard type="Asp.Net Core"
+                         title="Wave"
                          description="The Collaborative Open Source Blogging Engine"
                          repository="https://github.com/miawinter98/Wave" />
-            <ProjectCard title="Wave Alpha"
+            <ProjectCard type="Blog"
+                         title="Wave Alpha"
                          description="A blog running Wave, maintained by Mia Rose Winter, with many articles about many topics from many people."
                          link="https://blog.winter-software.com" />
-            <ProjectCard title="Just Short It!"
+            <ProjectCard type="Asp.Net Core"
+                         title="Just Short It!"
                          description="The most KISS single-user URL shortener there is"
                          repository="https://github.com/miawinter98/just-short-it" />
-            <ProjectCard title="image-gallery"
+            <ProjectCard type="Astro.js"
+                         title="image-gallery"
                          description="Create a simple image gallery using Github Pages"
                          link="https://miawinter98.github.io/image-gallery/"
                          repository="https://github.com/miawinter98/image-gallery" />
@@ -44,14 +49,17 @@ import ProjectCard from "../components/ProjectCard.astro";
 
         <h2 class="text-2xl lg:text-4xl font-medium mb-2">Other Projects and Notables</h2>
         <div class="grid grid-cols-1 xl:grid-cols-3 gap-8 gap-y-4 mb-8">
-            <ProjectCard title="Bachelor Thesis"
+            <ProjectCard type="Scientific Paper"
+                         title="Bachelor Thesis"
                          description="Rapid Game Prototyping: An Agile Approach to Early Game Development"
                          link="https://hdms.bsz-bw.de/frontdoor/index/index/docId/7303" />
-            <ProjectCard title="Typst Thesis Template"
+            <ProjectCard type="Typst"
+                         title="Typst Thesis Template"
                          description="Typst template for bachelor/master thesis for my university."
                          repository="https://github.com/miawinter98/hdm-thesis"
                          link="https://typst.app/universe/package/pretty-hdm-thesis" />
-            <ProjectCard title="Game: Project Mothership"
+            <ProjectCard type="Game"
+                         title="Project Mothership"
                          description="Game Project that I lead for a year during university."
                          link="https://projectmothershipgame.com/" />
         </div>