oh fuck, even more cooking!!!

src/routes/+page.svelte

@@ -30,6 +30,7 @@
     import Time5 from "$lib/GamePreviews/time-5.gif"
     import Tags from './comps/Tags.svelte';
     import NameAndTag from './comps/NameAndTag.svelte';
+    import Profile from './comps/Profile.svelte';
     
     const mobileThreshold : string = '600px'; // was 1000px. zhen testing
     let mobile : boolean;
@@ -65,59 +66,39 @@
             Developers
         </h1>
 
-        
+        <Profile name="Zhen / Alex" tags={["Programmer", "3D artist", "UX Designer"]} isMobile={mobile}>
-        <div class="developersProfile pl-4 font-mono">
-            <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>
             </span>
-        </div>
+        </Profile>
         
         <ProfileSpacer/>
-        <div class="developersProfile pl-4 font-mono">
+        <Profile name="Sveske / Benjamin" tags={["Programmer"]} isMobile={mobile}>
-            <NameAndTag name="Sveske / Benjamin" tags={["Programmer"]} isMobile={mobile}/>
             <span>
                 <p>Hi, I use Arch, btw.</p>
                 <p><a href="https://www.linkedin.com/in/benjamin-dreyer/" target="_blank" style="color:lightblue;">Linked-in</a></p>
             </span>
-        </div>
+        </Profile>
         
         <ProfileSpacer/>
-        <div class="w-full">
+        <Profile isSnorre={true} tags={["Programmer"]} isMobile={mobile}/>
-            <div class="developersProfile absolute snorre pl-4 font-mono pointer-events-none select-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">
+        <Profile name="Oliver" tags={["Sound designer", "Story designer","2D Artist", "Programmer"]} isMobile={mobile}>
-            <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>
+        </Profile>
         
         <ProfileSpacer/>
-        <div class="developersProfile pl-4 font-mono">
+        <Profile name="Zylvester" tags={["2D/3D Artist", "Sound designer", "Story designer"]} isMobile={mobile}>
-            <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>
             </span>
-        </div>
+        </Profile>
     </div>
 </div>
 
@@ -241,27 +222,6 @@
         font-family: var(--title-font);
     }
 
-    .developersProfile:not(.snorre):not(.snorre-overlay){
-        background-image: linear-gradient(oklch(var(--p)) 33%, rgba(255,255,255,0) 0%);
-        background-position: left;
-        background-size: 0.1rem 0.5rem;
-        background-repeat: repeat-y;
-    }
-
-    .snorre {
-        border-left: dashed transparent 0.1rem;
-        border-image: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);
-        border-image-slice: 1;
-    }
-
-    .snorre-overlay {
-        background-image: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, oklch(var(--b1)) 40%);
-        background-position: left;
-        background-size: 0.1rem 0.5rem;
-        background-repeat: repeat-y;
-    }
-
-
     #backgroundGif{
         width: 100%; 
         height: 100%;

src/routes/comps/MobileTags.svelte

@@ -0,0 +1,10 @@
+<script>
+    import Tags from "./Tags.svelte";
+
+    export let isMobile = false;
+    export let tags = ["null"];
+</script>
+
+{#if isMobile}
+    <Tags Tags={tags} isMobile={isMobile}/>
+{/if}

src/routes/comps/NameAndTag.svelte

@@ -1,5 +1,5 @@
 <script>
-    import Tags from "./Tags.svelte";
+    import Tags from "./Tags.svelte"; // Should've used better names lol
 
     export let isMobile = false;
     export let name = "";
@@ -9,5 +9,7 @@
 <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}/>
+    {#if !isMobile}
+         <Tags Tags={tags} isMobile={isMobile}/>
+    {/if}
 </div>

src/routes/comps/Profile.svelte

@@ -0,0 +1,66 @@
+<script>
+    import MobileTags from "./MobileTags.svelte";
+    import NameAndTag from "./NameAndTag.svelte";
+
+    export let isMobile = false;
+    export let name = "";
+    export let tags = ["null"];
+    export let isSnorre = false;
+
+    // Shit code but who cares, if it works /shrug
+</script>
+
+
+{#if !isSnorre}
+    <div class="developersProfile {isSnorre ? "isSnorre" : ""} pl-4 font-mono">
+        <NameAndTag name={name} tags={tags} isMobile={isMobile}/>
+        <span>
+            <p>Hi, I am Alex/Zhen, {@html !isMobile ? "" : "<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>
+        </span>
+        <MobileTags tags={tags} isMobile={isMobile}/>
+    </div>
+{:else}
+    <div class="w-full">
+        <div class="developersProfile absolute snorre pl-4 font-mono pointer-events-none select-none">
+            <pre style="font-size: {!isMobile ? 1.5 : 1.5}rem;"> </pre>
+            <span>
+                <pre> </pre>
+                <pre> </pre>
+            </span>
+            {#if isMobile}
+                <pre> </pre>
+            {/if}
+        </div>
+        <div class="developersProfile snorre-overlay relative pl-4 font-mono">
+            <NameAndTag name="Snorre" tags={tags} isMobile={isMobile}/>
+            <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>
+            <MobileTags tags={tags} isMobile={isMobile}/>
+        </div>
+    </div>
+{/if}
+
+<style>
+    .developersProfile:not(.snorre):not(.snorre-overlay){
+        background-image: linear-gradient(oklch(var(--p)) 33%, rgba(255,255,255,0) 0%);
+        background-position: left;
+        background-size: 0.1rem 0.5rem;
+        background-repeat: repeat-y;
+    }
+
+    .snorre {
+        border-left: dashed transparent 0.1rem;
+        border-image: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);
+        border-image-slice: 1;
+    }
+
+    .snorre-overlay {
+        background-image: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, oklch(var(--b1)) 40%);
+        background-position: left;
+        background-size: 0.1rem 0.5rem;
+        background-repeat: repeat-y;
+    }
+</style>

src/routes/comps/Tags.svelte

@@ -1,18 +1,40 @@
 <script lang="ts">
     export let Tags= ["null"];
-    let colors: { [String: string]: string } = {
+    export let isMobile = false;
+    type ColorType = string | { color1: string; color2: string; rotation: string; offset: string };
+    let colors: { [String: string]: ColorType} = {
         "programmer": "#0CC27F",
         "uxdesigner": "#027893",
         "3dartist": "#F4881C",
         "2dartist": "#F1EAC0",
+        "2d/3dartist": {"color1":"#F1EAC0", "color2":"#F4881C","rotation": "-65deg", "offset": "71.5%"},
         "sounddesigner": "#F3EC2A",
         "storydesigner": "#EEC12A",
     };
+
 </script>
 
-<div class="flex gap-2">
+<div class="flex gap-2" style='font-size: {!isMobile ? "0.875rem" : "2vw"};'>
     {#each Tags as tag}
-        <div class="badge2 text-primary-content cozette" style="background-color: {colors[tag.replaceAll(" ", "").toLowerCase()] || "#ccc"};">{tag}</div>
+        {@const key = tag.replaceAll(" ", "").toLowerCase()}
+        {#if key.indexOf("/") < 0}
+            <div class="badge2 text-primary-content cozette" style="background-color: {colors[key] || "#ccc"};">{tag}</div>
+            {:else}
+            <!-- Gradient Badge -->
+            {#if typeof colors[key] === 'object' && colors[key] !== null}
+                <div 
+                    class="badge2 text-primary-content cozette" 
+                    style="background: linear-gradient({colors[key].rotation}, {colors[key].color1} {colors[key].offset}, {colors[key].color2} {colors[key].offset});">
+                    {tag}
+                </div>
+            {:else}
+                <div 
+                    class="badge2 text-primary-content cozette" 
+                    style="background-color: #ccc;">
+                    {tag}
+                </div>
+            {/if}
+        {/if}
     {/each}
 </div>
 
@@ -22,11 +44,11 @@
         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>