fuck guys, I've might have cooked again :(

src/routes/comps/NameAndTag.svelte

@@ -0,0 +1,13 @@
+<script>
+    import Tags from "./Tags.svelte";
+
+    export let isMobile = false;
+    export let name = "";
+    export let tags = ["null"];
+</script>
+
+<div class="flex items-center">
+    <h2 style="font-size: {!isMobile ? 1.5 : 1.5}rem;">{name}</h2>
+    <div class="flex flex-grow"/>
+    <Tags Tags={tags}/>
+</div>

src/routes/comps/Tags.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    export let Tags= ["null"];
+    let colors: { [String: string]: string } = {
+        "programmer": "#0CC27F",
+        "uxdesigner": "#027893",
+        "3dartist": "#F4881C",
+        "2dartist": "#F1EAC0",
+        "sounddesigner": "#F3EC2A",
+        "storydesigner": "#EEC12A",
+    };
+</script>
+
+<div class="flex gap-2">
+    {#each Tags as tag}
+        <div class="badge2 text-primary-content cozette" style="background-color: {colors[tag.replaceAll(" ", "").toLowerCase()] || "#ccc"};">{tag}</div>
+    {/each}
+</div>
+
+<style>
+    .badge2 {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: 1.25rem /* 20px */;
+        font-size: 0.875rem /* 14px */;
+        line-height: 1.25rem /* 20px */;
+        width: fit-content;
+        padding-left: 0.563rem /* 9.008px */;
+        padding-right: 0.563rem /* 9.008px */;
+        border-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
+    }
+</style>