Zylvester is 2d and 3d artist

src/app.css

@@ -2,33 +2,99 @@
 @plugin "daisyui";
 
 @plugin "daisyui/theme" {
-  name: "DeprivedTheme";
-  default: false;
-  prefersdark: false;
+  name: "dark";
   color-scheme: "dark";
-  --color-base-100: oklch(27% 0.072 132.109);
-  --color-base-200: oklch(40% 0.101 131.063);
-  --color-base-300: oklch(45% 0.124 130.933);
-  --color-base-content: oklch(96% 0.067 122.328);
-  --color-primary: oklch(85% 0.199 91.936);
+  --color-base-100: oklch(14% 0 0);
+  --color-base-200: oklch(20% 0 0);
+  --color-base-300: oklch(26% 0 0);
+  --color-base-content: oklch(97% 0 0);
+  --color-primary: oklch(90% 0.182 98.111);
   --color-primary-content: oklch(28% 0.066 53.813);
-  --color-secondary: oklch(70% 0.183 293.541);
-  --color-secondary-content: oklch(28% 0.141 291.089);
-  --color-accent: oklch(82% 0.189 84.429);
+  --color-secondary: oklch(84% 0.143 164.978);
+  --color-secondary-content: oklch(26% 0.051 172.552);
+  --color-accent: oklch(87% 0.01 258.338);
+  --color-accent-content: oklch(13% 0.028 261.692);
+  --color-neutral: oklch(26% 0 0);
+  --color-neutral-content: oklch(98% 0 0);
+  --color-info: oklch(71% 0.143 215.221);
+  --color-info-content: oklch(98% 0.019 200.873);
+  --color-success: oklch(76% 0.233 130.85);
+  --color-success-content: oklch(98% 0.031 120.757);
+  --color-warning: oklch(70% 0.213 47.604);
+  --color-warning-content: oklch(98% 0.016 73.684);
+  --color-error: oklch(65% 0.241 354.308);
+  --color-error-content: oklch(97% 0.014 343.198);
+  --radius-selector: 0rem;
+  --radius-field: 0.5rem;
+  --radius-box: 1rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 1;
+}
+
+
+@plugin "daisyui/theme" {
+  name: "pink";
+  color-scheme: "light";
+  --color-base-100: oklch(96% 0.015 12.422);
+  --color-base-200: oklch(94% 0.03 12.58);
+  --color-base-300: oklch(89% 0.058 10.001);
+  --color-base-content: oklch(41% 0.159 10.272);
+  --color-primary: oklch(86% 0.127 207.078);
+  --color-primary-content: oklch(30% 0.056 229.695);
+  --color-secondary: oklch(0% 0 0);
+  --color-secondary-content: oklch(100% 0 0);
+  --color-accent: oklch(87% 0.169 91.605);
   --color-accent-content: oklch(27% 0.077 45.635);
-  --color-neutral: oklch(64% 0.2 131.684);
-  --color-neutral-content: oklch(98% 0.031 120.757);
-  --color-info: oklch(68% 0.169 237.323);
-  --color-info-content: oklch(97% 0.013 236.62);
+  --color-neutral: oklch(51% 0.222 16.935);
+  --color-neutral-content: oklch(96% 0.015 12.422);
+  --color-info: oklch(74% 0.16 232.661);
+  --color-info-content: oklch(29% 0.066 243.157);
+  --color-success: oklch(77% 0.152 181.912);
+  --color-success-content: oklch(27% 0.046 192.524);
+  --color-warning: oklch(75% 0.183 55.934);
+  --color-warning-content: oklch(26% 0.079 36.259);
+  --color-error: oklch(70% 0.191 22.216);
+  --color-error-content: oklch(25% 0.092 26.042);
+  --radius-selector: 0.25rem;
+  --radius-field: 0.25rem;
+  --radius-box: 0.25rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 1;
+  --noise: 0;
+}
+
+
+@plugin "daisyui/theme" {
+  name: "netherrack";
+  color-scheme: "dark";
+  --color-base-100: oklch(25% 0.092 26.042);
+  --color-base-200: oklch(39% 0.141 25.723);
+  --color-base-300: oklch(44% 0.177 26.899);
+  --color-base-content: oklch(93% 0.032 17.717);
+  --color-primary: oklch(83% 0.128 66.29);
+  --color-primary-content: oklch(26% 0.079 36.259);
+  --color-secondary: oklch(82% 0.111 230.318);
+  --color-secondary-content: oklch(29% 0.066 243.157);
+  --color-accent: oklch(78% 0.115 274.713);
+  --color-accent-content: oklch(25% 0.09 281.288);
+  --color-neutral: oklch(57% 0.245 27.325);
+  --color-neutral-content: oklch(97% 0.013 17.38);
+  --color-info: oklch(71% 0.143 215.221);
+  --color-info-content: oklch(98% 0.019 200.873);
   --color-success: oklch(72% 0.219 149.579);
   --color-success-content: oklch(98% 0.018 155.826);
-  --color-warning: oklch(79% 0.184 86.047);
-  --color-warning-content: oklch(98% 0.026 102.212);
-  --color-error: oklch(64% 0.246 16.439);
-  --color-error-content: oklch(96% 0.015 12.422);
-  --radius-selector: 0.25rem;
+  --color-warning: oklch(76% 0.188 70.08);
+  --color-warning-content: oklch(98% 0.022 95.277);
+  --color-error: oklch(63% 0.237 25.331);
+  --color-error-content: oklch(97% 0.013 17.38);
+  --radius-selector: 2rem;
   --radius-field: 2rem;
-  --radius-box: 0.5rem;
+  --radius-box: 2rem;
   --size-selector: 0.25rem;
   --size-field: 0.25rem;
   --border: 1px;
@@ -36,6 +102,38 @@
   --noise: 1;
 }
 
+@plugin "daisyui/theme" {
+  name: "green";
+  color-scheme: "dark";
+  --color-base-100: oklch(26% 0.065 152.934);
+  --color-base-200: oklch(39% 0.095 152.535);
+  --color-base-300: oklch(44% 0.119 151.328);
+  --color-base-content: oklch(96% 0.044 156.743);
+  --color-primary: oklch(80% 0.105 251.813);
+  --color-primary-content: oklch(28% 0.091 267.935);
+  --color-secondary: oklch(80% 0.105 251.813);
+  --color-secondary-content: oklch(28% 0.091 267.935);
+  --color-accent: oklch(89% 0.196 126.665);
+  --color-accent-content: oklch(27% 0.072 132.109);
+  --color-neutral: oklch(52% 0.154 150.069);
+  --color-neutral-content: oklch(98% 0.018 155.826);
+  --color-info: oklch(78% 0.154 211.53);
+  --color-info-content: oklch(30% 0.056 229.695);
+  --color-success: oklch(79% 0.209 151.711);
+  --color-success-content: oklch(26% 0.065 152.934);
+  --color-warning: oklch(85% 0.199 91.936);
+  --color-warning-content: oklch(28% 0.066 53.813);
+  --color-error: oklch(71% 0.202 349.761);
+  --color-error-content: oklch(28% 0.109 3.907);
+  --radius-selector: 0.25rem;
+  --radius-field: 0.5rem;
+  --radius-box: 1rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 1;
+}
 
 .bg-grid-100 {
   background:

src/app.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-theme="DeprivedTheme" style="overflow-x: hidden;">
+<html lang="en" data-theme="Green" style="overflow-x: hidden;">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="description" content="
@@ -11,6 +11,26 @@
         <link rel="stylesheet" href="/stylesheets/global.css" />
 		%sveltekit.head%
 
+		<script>
+			let theme = null;
+
+			if (typeof localStorage !== 'undefined') {
+				theme = localStorage.getItem('theme');
+			}
+
+			window.AvailableThemes =  ["green", "netherrack", "dark", "pink"];
+			
+			if (!theme) {
+				const randomNumber = Math.floor(Math.random() * 4);
+				console.log("Slecting: " + AvailableThemes[randomNumber]);
+				document.documentElement.setAttribute('data-theme', AvailableThemes[randomNumber]);
+				localStorage.setItem('theme', AvailableThemes[randomNumber]);
+			} else {
+				console.log("Slecting: " + theme);
+				document.documentElement.setAttribute('data-theme', theme);
+			}
+		</script>
+
 	</head>
 
 	<body style="display: contents">

src/routes/+layout.svelte

@@ -5,7 +5,10 @@
 
     import { fly } from 'svelte/transition';
     import MediaQuery from 'svelte-media-queries';
-    export let hideOnPrint: boolean;
+    import { Dices } from "@lucide/svelte";
+    let hideOnPrint: boolean;
+
+    let { children } = $props();
 
     import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
     import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
@@ -31,16 +34,39 @@
     });
 
     import { onMount } from 'svelte';
-	import { themeChange } from 'theme-change'
-    onMount(() => {
+    
+    onMount(async () => {
         const lock = document.createElement('meta');
         lock.name = 'darkreader-lock';
         document.head.appendChild(lock);
-
-		themeChange(false) // false parameter is required for svelte
     });
+
+    function nextTheme(){
+        let theme: string | null = null;
+
+        if (typeof localStorage !== 'undefined') {
+            theme = localStorage.getItem('theme');
+        }
+
+        const themesArr = (window as any).AvailableThemes;
+        let nextTheme = "dark";
+        if (theme == "null" || theme == "undefined" || theme == undefined || theme == null){
+
+        } else {
+            nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length];
+        }
+
+        console.log("Slecting: " + nextTheme);
+        document.documentElement.setAttribute('data-theme', nextTheme);
+        localStorage.setItem('theme', nextTheme);
+    }
 </script>
 
+{#snippet SwitchThemeButton()}
+<div class="tooltip tooltip-bottom grid place-content-center" data-tip="Switch theme">
+    <button class="cursor-pointer" on:click={nextTheme}> <Dices/></button>
+</div>
+{/snippet}
 
 <!-- Detect mobile -->
 <MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
@@ -60,6 +86,9 @@
 
                     <!-- <a href="/">Home</a> -->
                     <!-- <a href="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> -->
+
+                    {@render SwitchThemeButton()}
+                    
                     <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Zhen CV</a>
                     <a href="/tools" style="width: 7.5rem;">Tools</a>
                     <a href="https://botalex.itch.io/" target="_blank">Games</a>
@@ -73,6 +102,8 @@
                         <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
                     </a>
                     <div class="nav-spacer" />
+                    {@render SwitchThemeButton()}
+                    <div class="px-1"></div>
                     <button id="toggle-nav" on:click={() => navbarHidden = !navbarHidden}>
                         <HamburgerMenuIcon Class="fill-base-content"/>
                     </button>
@@ -91,7 +122,7 @@
     </header>
     
     <!-- Page content -->
-    <slot />
+    {@render children?.()}
     
     <!-- About footer -->
     <div class="{hideOnPrint ? 'hide-on-print' : ''} flex flex-col justify-center pt-8 bg-base-300 mt-8">

src/routes/+page.svelte

@@ -54,7 +54,7 @@
 
 <div class="pointer-events-auto" style="position: relative; width: 100%; height: 100%; overflow: hidden;">
     <img id="backgroundGif" src="{BackgroundVideo}" alt="Background video"/>
-    <div class="main-title m-auto" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 2rem; color: white; padding: 1rem;">
+    <div class="main-title m-auto cozette" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 2rem; color: white; padding: 1rem;">
         <h1 style="font-size: {!mobile ? 5 : 3}rem; text-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.9); z-index: 100;">
             {#if !mobile}
                 Deprived Devs
@@ -72,12 +72,12 @@
     </div>
 </div>
 
-<div class="flex flex-col justify-center items-center w-full md:px-8 py-4">
-    <h2 class="prose main-title text-center" style="font-size: {!mobile ? 3 : 2}rem;">
+<div class="cozette flex flex-col justify-center items-center w-full md:px-8 pt-4">
+    <h2 class="text-center" style="font-size: {!mobile ? 3 : 2}rem;">
         Developers
     </h2>
-    <div>
-        <div class="grid space-y-1 p-4 max-lg:px-0 rounded" style="width: 100%; max-width: 21cm;">
+    <div class="">
+        <div class="grid max-lg:grid-cols-1 sm:grid-cols-2 gap-4 p-4 max-lg:px-0 w-full">
 
             <Profile name="Zhen / Alex" tags={["Programmer", "3D artist", "UX Designer"]} isMobile={mobile}>
                 <span>
@@ -86,7 +86,6 @@
                 </span>
             </Profile>
             
-            <ProfileSpacer/>
             <Profile name="Sveske / Benjamin" tags={["Programmer", "Back-end Admin"]} isMobile={mobile}>
                 <span>
                     <p><span class="inline line-through">Hi, I use Arch, btw. </span> I use NixOS now</p>
@@ -94,18 +93,15 @@
                 </span>
             </Profile>
             
-            <ProfileSpacer/>
             <Profile isSnorre={true} tags={["Programmer"]} isMobile={mobile}/>
 
-            <ProfileSpacer/>
-            <Profile name="Oliver" tags={["Sound designer", "Story designer","2D Artist", "Programmer"]} isMobile={mobile}>
+            <Profile name="Oliver" tags={["Sound/Story","2D Artist", "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>
             </Profile>
 
-            <ProfileSpacer/>
             <Profile name="Kim" tags={["Cinemachine", "3D Artist", "Programmer"]} isMobile={mobile}>
                 <span>
                     <p>Abla espaniol</p>
@@ -113,25 +109,19 @@
                 </span>
             </Profile>
             
-            <ProfileSpacer/>
-            <Profile name="Zylvester" tags={["2D/3D Artist", "Sound designer", "Story designer"]} isMobile={mobile}>
+            <Profile name="Zylvester" tags={["Sound/Story", "2D/3D artist"]} 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>
+                    <p>Closeted omega weeb</p>
+                    <p><a href="https://www.linkedin.com/in/sylvester-junge-0b2a73196/" target="_blank" style="color:lightblue;">Linked-in</a>, <a href="https://www.youtube.com/watch?v=xvFZjo5PgG0" style="color:lightblue;">Funny link</a></p>
                 </span>
             </Profile>
         </div>
     </div>
 </div>
 
-<!-- space -->
-<div class="py-8 flex justify-center">
-    <div style="width: 50%;">
-        <ProfileSpacer/>
-    </div>
-</div>
+<div class="py-4"></div>
 
-<div class="grid place-content-center place-items-center min-h-screen pointer-events-auto font-mono">
+<div class="grid place-content-center place-items-center pointer-events-auto font-mono">
     <!-- <article class="pt-16 prose overflow-hidden {mobile ? "px-8" : ""}">
         <h2 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 3 : 3}rem; ">About us</h2>
         <p>We are a small group of developers and artists who started out as classmates, united by our passion for all things technology.</p>
@@ -142,7 +132,7 @@
         <ProfileSpacer/>
     </div> -->
     
-    <article class="pt-16 prose {mobile ? "px-8" : ""}">
+    <article class="prose {mobile ? "px-8" : ""}">
         <h2 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 3 : 3}rem; ">Games</h2>
         <p>Here are some of our games from various gamejams from the past. <br/>(<span class="font-bold">ONLY</span> 48 hours per game)</p>
     </article>
@@ -241,11 +231,6 @@
 
 
 <style>
-    .main-title {
-        width: 80%;
-        font-family: var(--title-font);
-    }
-
     #backgroundGif{
         width: 100%; 
         height: 100%;

src/routes/comps/Profile.svelte

@@ -11,7 +11,7 @@
 </script>
 
 
-<div class="bg-grid-200 border-2 border-base-300 pr-4 rounded cozette max-lg:pb-2">
+<div class="bg-grid-100 border-2 border-base-100 pl-1 pr-4 rounded-md cozette max-lg:pb-2">
 {#if !isSnorre}
     <div class="developersProfile {isSnorre ? "isSnorre" : ""} pl-1 font-mono">
         <NameAndTag name={name} tags={tags} isMobile={isMobile}/>
@@ -19,7 +19,7 @@
         <MobileTags tags={tags} isMobile={isMobile}/>
     </div>
 {:else}
-    <div class="w-full">
+    <div class="w-full pl-1">
         <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>
@@ -33,7 +33,7 @@
         <div class="developersProfile snorre-overlay relative pl-1 font-mono">
             <NameAndTag name="Snorre" tags={tags} isMobile={isMobile}/>
             <span>
-                <p>I'm the diversity hire. (Gay)</p>
+                <p>I'm the diversity hire. <span class="border-b" style="border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); border-image-slice: 1;">(Gay)</span></p>
                 <!-- <p><a href="https://www.linkedin.com/in/snorrealtschul/" target="_blank" style="color:lightblue;">My website</a></p> -->
                 <p><a href="https://spoodythe.one/" target="_blank" style="color:lightblue;">My website</a></p>
             </span>

src/routes/comps/Tags.svelte

@@ -29,6 +29,7 @@
                 "3dartist": "#F4881C",
                 "2dartist": "#F1EAC0",
                 "2d/3dartist": { color1: "#F1EAC0", color2: "#F4881C", rotation: "-65deg", offset: "71.5%" },
+                "sound/story": { color1: "#F3EC2A", color2: "#EEC12A", rotation: "-65deg", offset: "50%" },
                 "sounddesigner": "#F3EC2A",
                 "storydesigner": "#EEC12A",
                 "back-endadmin": "#3236a8",
@@ -51,20 +52,26 @@
         {@const color = colorManager.getColor(key)}
         {#if key.indexOf("/") < 0}
             <!-- Single Color Badge -->
-            <div class="badge2 text-primary-content cozette" style="background-color: {typeof color === 'string' ? color : '#ccc'};">
-                {tag}
+            <div class="badge2" style="background-color: {typeof color === 'string' ? color : '#ccc'};">
+                <span class="invert">
+                    {tag}
+                </span>
             </div>
         {:else}
             <!-- Gradient Badge -->
             {#if typeof color === 'object' && color !== null}
                 <div 
-                    class="badge2 text-primary-content cozette" 
+                    class="badge2 cozette" 
                     style="background: linear-gradient({color.rotation}, {color.color2} {color.offset}, {color.color1} {color.offset});">
-                    {tag}
+                    <span class="invert">
+                        {tag}
+                    </span>
                 </div>
             {:else}
-                <div class="badge2 text-primary-content cozette" style="background-color: #ccc;">
-                    {tag}
+                <div class="badge2 cozette" style="background-color: #ccc;">
+                    <span class="invert">
+                        {tag}
+                    </span>
                 </div>
             {/if}
         {/if}

static/stylesheets/global.css

@@ -13,7 +13,12 @@
     url("/fonts/NotoSans-VariableFont_wdth,wght.ttf") format("truetype");
 }
 
-.cozette *{
+.cozette * {
+    font-family: "CozetteVector";
+}
+
+/* fuck it */
+body * {
     font-family: "CozetteVector";
 }