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

src/routes/+page.svelte

@@ -28,6 +28,8 @@
     import Time3 from "$lib/GamePreviews/time-3.png"
     import Time4 from "$lib/GamePreviews/time-4.png"
     import Time5 from "$lib/GamePreviews/time-5.gif"
+    import Tags from './comps/Tags.svelte';
+    import NameAndTag from './comps/NameAndTag.svelte';
     
     const mobileThreshold : string = '600px'; // was 1000px. zhen testing
     let mobile : boolean;
@@ -65,7 +67,7 @@
 
         
         <div class="developersProfile pl-4 font-mono">
-            <h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Alex / Zhen</h2>
+            <NameAndTag name="Zhen / Alex" tags={["Programmer", "3D artist", "UX Designer"]} isMobile={mobile}/>
             <span>
                 <p>Hi, I am Alex/Zhen, {@html !mobile ? "" : "<br/>"} I'm that chinese guy.</p>
                 <p>Here's my CV: <a href="/zhen/cv/rev2?hideOnPrint=1" style="color:lightblue;">pdf</a></p>
@@ -74,34 +76,43 @@
         
         <ProfileSpacer/>
         <div class="developersProfile pl-4 font-mono">
-            <h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Sveske / Benjamin</h2>
+            <NameAndTag name="Sveske / Benjamin" tags={["Programmer"]} isMobile={mobile}/>
             <span>
                 <p>Hi, I use Arch, btw.</p>
-                <p>Here's my Linked-in: <a href="https://www.linkedin.com/in/benjamin-dreyer/" target="_blank" style="color:lightblue;">Linked-in</a></p>
+                <p><a href="https://www.linkedin.com/in/benjamin-dreyer/" target="_blank" style="color:lightblue;">Linked-in</a></p>
             </span>
         </div>
         
         <ProfileSpacer/>
-        <div>
+        <div class="w-full">
-            <div class="developersProfile absolute snorre pl-4 font-mono">
+            <div class="developersProfile absolute snorre pl-4 font-mono pointer-events-none select-none">
-                <h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Snorre</h2>
-                <span>
-                    <p>I'm the diversity hire. (Gay)</p>
-                    <p>Here's my Linked-in: <a href="https://www.linkedin.com/in/snorrealtschul/" target="_blank" style="color:lightblue;">Linked-in</a></p>
-                </span>
-            </div>
-            <div class="developersProfile snorre-overlay relative pl-4 font-mono pointer-events-none">
                 <pre style="font-size: {!mobile ? 1.5 : 1.5}rem;"> </pre>
                 <span>
                     <pre> </pre>
                     <pre> </pre>
                 </span>
             </div>
+            <div class="developersProfile snorre-overlay relative pl-4 font-mono">
+                <NameAndTag name="Snorre" tags={["Programmer"]} isMobile={mobile}/>
+                <span>
+                    <p>I'm the diversity hire. (Gay)</p>
+                    <p><a href="https://www.linkedin.com/in/snorrealtschul/" target="_blank" style="color:lightblue;">Linked-in</a></p>
+                </span>
+            </div>
         </div>
 
         <ProfileSpacer/>
         <div class="developersProfile pl-4 font-mono">
-            <h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Zylvester</h2>
+            <NameAndTag name="Oliver" tags={["Sound designer", "Story designer", "Programmer"]} isMobile={mobile}/>
+            <span>
+                <p>Snorre does not get paid.</p>
+                <p><a href="https://www.linkedin.com/in/oliver-schwenger-291944278/" target="_blank" style="color:lightblue;">Linked-in</a></p>
+            </span>
+        </div>
+        
+        <ProfileSpacer/>
+        <div class="developersProfile pl-4 font-mono">
+            <NameAndTag name="Zylvester" tags={["2D Artist", "3D Artist", "Sound designer", "Story designer"]} isMobile={mobile}/>
             <span>
                 <p>Hi, I am [insert text here]</p>
                 <p>Here's a joke about recursion: <a href="/" target="_blank" style="color:lightblue;">recursion</a></p>

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>

static/stylesheets/global.css

@@ -13,6 +13,10 @@
     url("/fonts/NotoSans-VariableFont_wdth,wght.ttf") format("truetype");
 }
 
+.cozette {
+    font-family: "CozetteVector";
+}
+
 html {
     background: var(--background1);
 }