fixed header not hiding when wanting to print

.forgejo/workflows/signal-rebuild.yml

@@ -0,0 +1,23 @@
+name: Rebuild signaller for deprived.dev to rebuild site
+
+on: [push]
+
+jobs:
+  test_service:
+    runs-on: native
+
+    steps:
+      - name: Get branch
+        run: echo "BRANCH=$(echo "${{ gitea.ref }}" | cut -d'/' -f3)" >> $GITHUB_ENV
+      - name: Signal deprived.dev for rebuild
+        env:
+          SSH_PRIVATE_KEY: ${{ secrets.SSH_KEY }}
+        run: |
+          sshkey=$(mktemp)
+          trap "rm -rf $sshkey" exit
+          echo -e $SSH_PRIVATE_KEY > $sshkey
+          service="build-deprived-website-$BRANCH"
+          sshargs="-o LogLevel=ERROR -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no"
+          echo "Starting systemd oneshot service: $service"
+          ssh -i $sshkey -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no deprivedbuilder@deprived.dev -t "sudo /run/current-system/sw/bin/systemctl start $service"
+          echo "Build Log: $(ssh -i $sshkey $sshargs deprivedbuilder@deprived.dev "cat ~/latest_build.log")"

build.sh

@@ -0,0 +1,16 @@
+#!/usr/bin/env bash
+
+# motherfucking hate npm. Spent 3 hours debugging that when
+# NODE_ENV is set to production, npm won't install anything
+unset NODE_ENV
+
+git pull
+git reset --hard main
+
+npm ci
+
+echo "Ready to build, building..."
+
+npm run build
+
+echo "Done rebuilding!"

jsconfig.json

@@ -10,7 +10,12 @@
 		"sourceMap": true,
 		"strict": true,
 		"moduleResolution": "bundler",
-        "allowImportingTsExtensions": true
+        "allowImportingTsExtensions": true,
+		"paths": {
+			"@images/*": ["./src/images/*"],
+			"@src/*": ["./src/*"],
+			"@static/*": ["./static/*"]
+		}
 	}
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
 	//

package.json

@@ -6,23 +6,33 @@
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --compiler-warnings \"css-unused-selector:ignore,unused-export-let:ignore\" --threshold error",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch --threshold error"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/kit": "^2.20.4",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"@zerodevx/svelte-img": "^2.1.0",
+		"@tailwindcss/typography": "^0.5.15",
-		"svelte": "^4.2.7",
+		"autoprefixer": "^10.4.20",
-		"svelte-check": "^3.6.0",
+		"daisyui": "^5.0.12",
+		"sass": "^1.77.4",
+		"svelte": "^5.25.7",
+		"svelte-check": "^3.8.6",
 		"svelte-highlight": "^7.6.0",
+		"tailwindcss": "^4.1.3",
 		"typescript": "^5.0.0",
-		"vite": "^5.0.3"
+		"vite": "^5.0.3",
+		"vite-plugin-svgr": "^4.2.0"
 	},
 	"type": "module",
 	"dependencies": {
-		"svelte-media-queries": "^1.6.2"
+		"@lucide/svelte": "^0.487.0",
+		"@tailwindcss/vite": "^4.1.3",
+		"lucide-svelte": "^0.475.0",
+		"svelte-katex": "^0.1.2",
+		"svelte-media-queries": "^1.6.2",
+		"theme-change": "^2.5.0"
 	}
 }

src/app.css

@@ -0,0 +1,222 @@
+@import "tailwindcss";
+@plugin "daisyui";
+
+@plugin "daisyui/theme" {
+  name: "Deprived";
+  default: true;
+  prefersdark: true;
+  --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(72% 0.219 149.579);
+  --color-primary-content: oklch(98% 0.018 155.826);
+  --color-secondary: oklch(58% 0.233 277.117);
+  --color-secondary-content: oklch(96% 0.018 272.314);
+  --color-accent: oklch(60% 0.25 292.717);
+  --color-accent-content: oklch(96% 0.016 293.756);
+  --color-neutral: oklch(20% 0 0);
+  --color-neutral-content: oklch(98% 0 0);
+  --color-info: oklch(58% 0.158 241.966);
+  --color-info-content: oklch(97% 0.013 236.62);
+  --color-success: oklch(64% 0.2 131.684);
+  --color-success-content: oklch(98% 0.031 120.757);
+  --color-warning: oklch(68% 0.162 75.834);
+  --color-warning-content: oklch(98% 0.026 102.212);
+  --color-error: oklch(57% 0.245 27.325);
+  --color-error-content: oklch(97% 0.013 17.38);
+  --radius-selector: 1rem;
+  --radius-field: 0.5rem;
+  --radius-box: 1rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+
+@plugin "daisyui/theme" {
+  name: "dark";
+  color-scheme: "dark";
+  --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(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(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(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: 2rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 1;
+  --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:
+    linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), #f2f2f2;
+  background-size:
+    4px 4px,
+    4px 4px,
+    80px 80px,
+    80px 80px,
+    80px 80px,
+    80px 80px,
+    80px 80px,
+    80px 80px;
+  background-color: var(--color-base-100);
+}
+
+.bg-grid-200 {
+  background:
+    linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), #f2f2f2;
+  background-size:
+    4px 4px,
+    4px 4px,
+    80px 80px,
+    80px 80px,
+    80px 80px,
+    80px 80px,
+    80px 80px,
+    80px 80px;
+  background-color: var(--color-base-200);
+}
+
+.bg-grid-300 {
+  background:
+    linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), #f2f2f2;
+  background-size:
+    4px 4px,
+    4px 4px,
+    80px 80px,
+    80px 80px,
+    80px 80px,
+    80px 80px,
+    80px 80px,
+    80px 80px;
+  background-color: var(--color-base-300);
+}
+
+@media print {
+  .hide-on-print {
+    display: none !important;
+  }
+}

src/app.html

@@ -1,17 +1,42 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="Deprived" style="overflow-x: hidden;">
 	<head>
 		<meta charset="utf-8" />
+		<meta name="description" content="
+		We are the deprived devs, and we are a team of developers specializing in indie game development, full-stack development, and anything tech-related!">
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 
         <!-- Change theme for site here -->
-        <link rel="stylesheet" href="/stylesheets/main-theme.css" />
         <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>
 
-	<div style="display: contents">%sveltekit.body%</div>
+	<body style="display: contents">
+		<div class="inline relative w-full h-full">
+			%sveltekit.body%
+		</div>
+	</body>
 </html>

src/comps/Utils/HorizonalStack.svelte

@@ -1,10 +1,12 @@
-<div class="flex-start">
+<div {...$$restProps}>
     <slot></slot>
 </div>
 
 <style>
-    .flex-start{
+    .centralize{
-        display: flex;
+        display: grid;
-        justify-items: start;
+        justify-content: center;
+        
+        padding: 0;
     }
 </style>

src/comps/Utils/VerticalStack.svelte

@@ -1,4 +1,4 @@
 <!-- Just used for ease of read -->
-<div>
+<div style="padding: 0;">
     <slot></slot>
 </div>

src/comps/Utils/ZSpacer.svelte

@@ -0,0 +1,8 @@
+<div class="grow" />
+
+<style>
+    .grow{
+        display: flex;
+        flex-grow: 1;
+    }
+</style>

src/comps/timeline/timeline.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
+    import HorizonalStack from "../Utils/HorizonalStack.svelte";
     import TimelineItem from "./timelineItem.svelte";
-
 </script>
 
-<ul>
+<HorizonalStack {...$$restProps}>
-    {#each {length: 3} as _, i}
+    <slot/>
-    <li>
+</HorizonalStack>
-        <TimelineItem title="Item {i}"/>
+
-    </li>
+<style>
-    {/each}
+    :global(.JustifyStart){
-</ul>
+        display: flex;
+        justify-content: start;
+    }
+</style>

src/comps/timeline/timelineItem.svelte

@@ -1,27 +1,99 @@
 <script lang="ts">
     import HorizonalStack from "../Utils/HorizonalStack.svelte";
-    import Img from '@zerodevx/svelte-img'
     import VerticalStack from "../Utils/VerticalStack.svelte";
+    import ZSpacer from "../Utils/ZSpacer.svelte";
+    import MediaQuery from 'svelte-media-queries';
 
     // Set these when using the component
     export let date: string = "null";
     export let imagePath: string = "null";
     export let title: string = "null";
     export let desc: string = "null";
+
+    const timelineCollapseThreshhold : string = '1000px';
+    let timelineCollaped: boolean = false;
 </script>
 
-<div>
+<MediaQuery query='(max-width: {timelineCollapseThreshhold})' bind:matches={timelineCollaped} />
-    <title>{title}</title>
-    <HorizonalStack>
-        {#if imagePath !== "null"}
-            <Img src={imagePath}/>
-        {/if}
-        <VerticalStack>
 
-        </VerticalStack>
+<div class="flexStart timelineItemContainer" style="overflow: auto;">
-    </HorizonalStack>
+    <div style="padding-top: 10px;">
+        {#if imagePath !== "null"}
+            <div class="imageContainer">
+                <img src={imagePath} class="image" alt="nothing"/>
+            </div>
+        {/if}
+    </div>
+    <div class="ItemStrip"/>
+    <div class="noPadding">
+        <div class="title">{@html title}</div>
+        <div class="DateText">{@html date}</div>
+        <div class="bodyText">{@html desc}</div>
+    </div>
 </div>
 
 <style>
+    .imageContainer {
+        position: relative;
+        z-index: -1;
 
+        width: 10vw;
+        height: 10vw;
+
+        overflow: hidden;
+    }
+
+    .imageContainer img{
+        position: absolute;
+
+        height: 100%;
+        width: 100%;
+
+        min-width: 100%;
+        min-height: 100%;
+    }
+
+    .timelineItemContainer{
+        column-gap: 3vw;
+        margin-top: 10px;
+    }
+
+    .noPadding{
+        padding: 0;
+    }
+
+    .flexStart{
+        display: flex;
+        justify-content: start;
+    }
+
+    .title {
+        font-size: 200%;
+
+        display: flex;
+        align-content: center;
+    }
+
+    .bodyText{
+        font-size: 1rem;
+    }
+
+    .DateText{
+        margin: 0;
+        margin-bottom: 0.5rem;
+
+        color: darkgray;
+
+        display: flex;
+        align-self: flex-start;
+    }
+
+    .ItemStrip{
+        min-width: 0.5%;
+        display: inline-flex;
+
+        position: relative;
+
+        background-color: rgb(178, 178, 178);
+    }
 </style>

src/lib/images/HamburgerMenuIcon.svelte

@@ -0,0 +1,18 @@
+<script>
+    export let Class = '';
+    export let Style = '';
+  </script>
+  
+<svg
+    class={Class}
+    style={Style}
+    height="20"
+    id="Layer_1"
+    version="1.1"
+    viewBox="0 0 28 20"
+    width="28"
+    xml:space="preserve"><defs
+        id="defs1" /><path
+        d="M 2,4 H 26 C 27.104,4 28,3.104 28,2 28,0.896 27.104,0 26,0 H 2 C 0.896,0 0,0.896 0,2 0,3.104 0.896,4 2,4 Z M 26,8 H 2 c -1.104,0 -2,0.896 -2,2 0,1.104 0.896,2 2,2 h 24 c 1.104,0 2,-0.896 2,-2 0,-1.104 -0.896,-2 -2,-2 z m 0,8 H 2 c -1.104,0 -2,0.896 -2,2 0,1.104 0.896,2 2,2 h 24 c 1.104,0 2,-0.896 2,-2 0,-1.104 -0.896,-2 -2,-2 z"
+        id="path1"
+        style="fill-opacity:1" /></svg>

src/lib/svelteLogos/README.md

@@ -0,0 +1,11 @@
+# Svelte Branding Guidelines
+
+## Conditions of usage
+
+1. The term "Svelte logo" refers to the Svelte logo and other official artwork/mark. It also includes the official color scheme used by the project.
+
+2. The term "Svelte library" refers to the Svelte tooling, associated libraries and official projects in the Svelte ecosystem.
+
+3. Usage of the Svelte logo must not give the impression or implication that the Svelte project (or any contributor to the project) is sponsoring or endorsing any other project, service, product or organization.
+
+4. Usage of the Svelte logo, to indicate, imply or assert compatibility or operability with the Svelte library, must be accurate and done in good faith.

src/lib/svelteLogos/svelte-horizontal.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="519" height="139" viewBox="0 0 519 139"><title>svelte-horizontal</title><path d="M172.4428,100.3382a24.0793,24.0793,0,0,1-13.72-3.8769,19.8715,19.8715,0,0,1-8.0107-10.6094l8.3515-3.0683a15.4054,15.4054,0,0,0,5.4541,6.6044,14.3656,14.3656,0,0,0,8.2657,2.4288,12.1375,12.1375,0,0,0,7.8818-2.3858,8.2746,8.2746,0,0,0,2.94-6.8174,7.4559,7.4559,0,0,0-.8095-3.4511,10.325,10.325,0,0,0-1.8321-2.6,12.3611,12.3611,0,0,0-3.1533-2.0879q-2.1314-1.0635-3.5361-1.6192-1.4062-.5521-4.1328-1.4912-3.41-1.1924-5.1133-1.874a38.46,38.46,0,0,1-4.4737-2.2588,16.5385,16.5385,0,0,1-4.1757-3.1523,15.2908,15.2908,0,0,1-2.5137-4.1338,14.77,14.77,0,0,1,4.0049-16.7871q5.1138-4.5162,13.8906-4.5166,7.3272,0,12.0576,3.2382a15.6579,15.6579,0,0,1,6.3487,8.6075l-8.1807,2.7265a9.5238,9.5238,0,0,0-3.9629-4.3887,13.31,13.31,0,0,0-6.9443-1.6621,10.703,10.703,0,0,0-6.69,1.875,6.2891,6.2891,0,0,0-2.4287,5.2832,5.5132,5.5132,0,0,0,1.874,4.0909,12.885,12.885,0,0,0,3.92,2.6416q2.0464.8524,6.2217,2.3007,2.5547.939,3.791,1.4063t3.6221,1.5762a24.997,24.997,0,0,1,3.6641,2.0029,32.1346,32.1346,0,0,1,2.9824,2.4287,12.7235,12.7235,0,0,1,2.6,3.11,17.39,17.39,0,0,1,1.5332,3.8339,17.5828,17.5828,0,0,1,.64,4.8155q0,8.3524-5.71,13.08Q181.3892,100.3388,172.4428,100.3382Zm54.6221-1.0224L206.6128,39.6644h9.5449L229.7065,81.25a64.4659,64.4659,0,0,1,1.875,6.8173,64.0335,64.0335,0,0,1,1.875-6.8173l13.3789-41.586h9.459L235.9272,99.3158Zm47.294,0V39.6644h36.9843V48.016H283.2221V64.3773h18.15v8.3516h-18.15V90.9642h29.9952v8.3516Zm61.44,0V39.6644h8.8633v51.13h29.1435v8.5215Zm71.41-51.13v51.13h-8.8632v-51.13H381.4741V39.6644h42.6074v8.5215Zm35.1934,51.13V39.6644h36.9844V48.016H451.2661V64.3773h18.15v8.3516h-18.15V90.9642h29.9951v8.3516Z" style="fill:#4a4a55"/><path d="M110.2859,28.3189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L38.4118,35.1078A29.9232,29.9232,0,0,0,24.8931,55.1506a31.5143,31.5143,0,0,0,3.1076,20.2318,30.0059,30.0059,0,0,0-4.4761,11.1829,31.8885,31.8885,0,0,0,5.4472,24.1157c10.4022,14.8865,30.9424,19.2966,45.7915,9.8348l26.0826-16.6237a29.9182,29.9182,0,0,0,13.5187-20.0428,31.5276,31.5276,0,0,0-3.1057-20.2323,30.0012,30.0012,0,0,0,4.4742-11.1824,31.88,31.88,0,0,0-5.4472-24.1157" style="fill:#ff3e00"/><path d="M61.9463,112.0815A20.718,20.718,0,0,1,39.71,103.8389a19.173,19.173,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3362.9815a33.6466,33.6466,0,0,0,10.203,5.0978l.9694.2941-.0892.9675a5.8469,5.8469,0,0,0,1.052,3.8781,6.2388,6.2388,0,0,0,6.6952,2.485,5.7456,5.7456,0,0,0,1.602-.7041L85.3993,81.781A5.431,5.431,0,0,0,87.85,78.15a5.7944,5.7944,0,0,0-.9876-4.3712,6.2435,6.2435,0,0,0-6.6977-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9533,6.3449a19.0336,19.0336,0,0,1-5.2964,2.3259A20.7182,20.7182,0,0,1,41.078,72.4241a19.173,19.173,0,0,1-3.2766-14.5024,17.9892,17.9892,0,0,1,8.13-12.0513L72.0125,29.2472a19.0031,19.0031,0,0,1,5.3-2.3287A20.718,20.718,0,0,1,99.549,35.1611a19.1734,19.1734,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9693-.2942.0892-.9675a5.8576,5.8576,0,0,0-1.052-3.878,6.2388,6.2388,0,0,0-6.6952-2.485,5.7456,5.7456,0,0,0-1.602.7041L53.8592,57.219A5.422,5.422,0,0,0,51.41,60.85a5.7858,5.7858,0,0,0,.9857,4.3717,6.2435,6.2435,0,0,0,6.6977,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.952-6.3425a18.9787,18.9787,0,0,1,5.2958-2.3278,20.7183,20.7183,0,0,1,22.2369,8.2427,19.173,19.173,0,0,1,3.2766,14.5024,17.9982,17.9982,0,0,1-8.13,12.0532L67.246,109.7528a19.0031,19.0031,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>

src/lib/svelteLogos/svelte-kit-horizontal.svg

@@ -0,0 +1 @@
+<svg id="svelte" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 688.774 139"><defs><style>.cls-1{fill:#8d8d93;}.cls-2{fill:#4a4a55;}.cls-3{fill:#ff3e00;}.cls-4{fill:#fff;}</style></defs><g id="horizontal"><path id="kit" class="cls-1" d="M547.528,99.316,530.741,68.127,520.173,80.91V99.316h-8.862V39.664h8.862V68.553l23.009-28.889h10.226l-16.7,20.964,21.218,38.688Zm29.569,0V39.664h8.862V99.316Zm55.049-51.13v51.13h-8.863V48.186H606.411V39.664h42.607v8.522Z"/><path id="svelte-2" data-name="svelte" class="cls-2" d="M172.442,100.338a24.076,24.076,0,0,1-13.719-3.877,19.876,19.876,0,0,1-8.011-10.609l8.351-3.068a15.41,15.41,0,0,0,5.455,6.6,14.366,14.366,0,0,0,8.266,2.429,12.137,12.137,0,0,0,7.882-2.386,8.277,8.277,0,0,0,2.94-6.817,7.461,7.461,0,0,0-.81-3.452,10.314,10.314,0,0,0-1.832-2.6,12.342,12.342,0,0,0-3.153-2.088q-2.132-1.063-3.537-1.619t-4.133-1.491q-3.408-1.193-5.112-1.874a38.492,38.492,0,0,1-4.474-2.259,16.522,16.522,0,0,1-4.176-3.153,15.277,15.277,0,0,1-2.513-4.133,14.766,14.766,0,0,1,4-16.787q5.113-4.516,13.889-4.517,7.329,0,12.059,3.238a15.658,15.658,0,0,1,6.348,8.608l-8.18,2.726a9.521,9.521,0,0,0-3.963-4.388,13.306,13.306,0,0,0-6.945-1.663,10.706,10.706,0,0,0-6.69,1.875,6.29,6.29,0,0,0-2.428,5.284,5.511,5.511,0,0,0,1.874,4.09,12.869,12.869,0,0,0,3.92,2.642q2.048.852,6.222,2.3,2.554.939,3.791,1.406t3.622,1.576a25.1,25.1,0,0,1,3.664,2,32.066,32.066,0,0,1,2.983,2.429,12.706,12.706,0,0,1,2.6,3.11,17.342,17.342,0,0,1,1.533,3.834,17.58,17.58,0,0,1,.64,4.816q0,8.352-5.71,13.08T172.442,100.338Zm54.623-1.022L206.613,39.664h9.545L229.707,81.25a64.791,64.791,0,0,1,1.875,6.818,63.829,63.829,0,0,1,1.875-6.818l13.378-41.586h9.459L235.927,99.316Zm47.294,0V39.664h36.984v8.352H283.222V64.377h18.151v8.352H283.222V90.964h30v8.352Zm61.44,0V39.664h8.864v51.13h29.143v8.522Zm71.41-51.13v51.13h-8.863V48.186H381.474V39.664h42.608v8.522ZM442.4,99.316V39.664h36.984v8.352H451.266V64.377h18.15v8.352h-18.15V90.964h30v8.352Z"/><g id="logo"><path id="orange" class="cls-3" d="M110.286,28.319c-10.4-14.885-30.941-19.3-45.792-9.835L38.412,35.108A29.921,29.921,0,0,0,24.893,55.151,31.514,31.514,0,0,0,28,75.382a29.987,29.987,0,0,0-4.476,11.183,31.888,31.888,0,0,0,5.447,24.116c10.4,14.887,30.942,19.3,45.791,9.835l26.083-16.624a29.92,29.92,0,0,0,13.519-20.043,31.529,31.529,0,0,0-3.106-20.232,30,30,0,0,0,4.474-11.182,31.878,31.878,0,0,0-5.447-24.116"/><path id="white" class="cls-4" d="M61.946,112.082a20.72,20.72,0,0,1-22.237-8.243,19.176,19.176,0,0,1-3.276-14.5,18.143,18.143,0,0,1,.623-2.435l.491-1.5,1.337.981a33.633,33.633,0,0,0,10.2,5.1l.969.294-.089.968a5.844,5.844,0,0,0,1.052,3.878,6.24,6.24,0,0,0,6.7,2.485,5.748,5.748,0,0,0,1.6-.7L85.4,81.781A5.43,5.43,0,0,0,87.85,78.15a5.794,5.794,0,0,0-.988-4.371,6.244,6.244,0,0,0-6.7-2.487,5.737,5.737,0,0,0-1.6.7l-9.954,6.345a19.047,19.047,0,0,1-5.3,2.326,20.72,20.72,0,0,1-22.237-8.243,19.171,19.171,0,0,1-3.277-14.5A17.992,17.992,0,0,1,45.932,45.87L72.013,29.247a19.011,19.011,0,0,1,5.3-2.329,20.719,20.719,0,0,1,22.237,8.243,19.176,19.176,0,0,1,3.277,14.5A18.453,18.453,0,0,1,102.2,52.1l-.491,1.5-1.336-.979a33.616,33.616,0,0,0-10.2-5.1l-.97-.294.09-.968a5.859,5.859,0,0,0-1.052-3.878,6.24,6.24,0,0,0-6.695-2.485,5.742,5.742,0,0,0-1.6.7L53.859,57.219a5.425,5.425,0,0,0-2.449,3.63,5.79,5.79,0,0,0,.986,4.372,6.245,6.245,0,0,0,6.7,2.487,5.773,5.773,0,0,0,1.6-.7l9.952-6.342a18.978,18.978,0,0,1,5.3-2.328A20.718,20.718,0,0,1,98.18,66.576a19.171,19.171,0,0,1,3.277,14.5,18,18,0,0,1-8.13,12.054L67.246,109.753a19,19,0,0,1-5.3,2.329"/></g></g></svg>

src/lib/svelteLogos/svelte-kit-logotype.svg

@@ -0,0 +1,4 @@
+<svg viewBox="30 31 400 50" xmlns="http://www.w3.org/2000/svg">
+<path d="M348.645 80.0599L335.205 55.1536L326.745 65.3616V80.0599H319.648V32.4241H326.745V55.4938L345.169 32.4241H353.356L339.986 49.1652L356.974 80.0599H348.645ZM372.319 80.0599V32.4241H379.416V80.0599H372.319ZM416.394 39.2295V80.0599H409.3V39.2295H395.789V32.4241H429.902V39.2295H416.394Z" fill="#8D8D93"/>
+<path d="M48.3359 80.876C44.4451 80.9736 40.6159 79.8942 37.3519 77.78C34.3023 75.7742 32.0378 72.7827 30.9387 69.3081L37.6241 66.8581C38.5518 68.991 40.066 70.8183 41.9916 72.1286C43.9468 73.4367 46.2574 74.1149 48.6113 74.0715C50.8732 74.1893 53.1053 73.5154 54.9219 72.1661C55.7123 71.5043 56.3367 70.6675 56.7454 69.7223C57.1541 68.7772 57.3357 67.7499 57.2758 66.7223C57.2852 65.7649 57.063 64.8193 56.6281 63.9657C56.2495 63.2023 55.7547 62.5019 55.1613 61.8894C54.4103 61.2078 53.5586 60.6454 52.6361 60.222C51.4981 59.6561 50.5542 59.2252 49.8042 58.9292C49.0543 58.6332 47.9513 58.2363 46.4952 57.7385C44.6761 57.1034 43.3118 56.6046 42.4023 56.242C41.1703 55.719 39.9737 55.1164 38.8202 54.4381C37.579 53.7813 36.4506 52.9313 35.4776 51.9202C34.6349 50.9339 33.9554 49.8197 33.4647 48.6198C32.5217 46.3326 32.3235 43.8075 32.8983 41.4018C33.473 38.9961 34.7915 36.8316 36.6673 35.2143C39.3991 32.8106 43.1066 31.6085 47.7898 31.608C51.7018 31.608 54.9201 32.4699 57.4448 34.1937C59.8955 35.819 61.695 38.2524 62.528 41.0678L55.9772 43.2446C55.3192 41.7704 54.2079 40.5431 52.8042 39.7406C51.1067 38.8008 49.184 38.3416 47.2438 38.4125C45.3411 38.3039 43.4564 38.8307 41.8875 39.9098C41.247 40.4053 40.7359 41.0476 40.3976 41.7822C40.0593 42.5168 39.9038 43.322 39.9443 44.1294C39.95 44.7485 40.0866 45.3594 40.3452 45.9222C40.6037 46.485 40.9784 46.987 41.4447 47.3956C42.3512 48.2863 43.4153 49.0016 44.5833 49.5054C45.6753 49.9589 47.3356 50.5712 49.5641 51.342C50.9278 51.8419 51.9396 52.2162 52.5993 52.4648C53.259 52.7134 54.2249 53.1332 55.4968 53.7242C56.5174 54.1744 57.4987 54.7086 58.4304 55.3213C59.2647 55.9196 60.0622 56.5673 60.8187 57.261C61.6416 57.9722 62.3444 58.8107 62.9003 59.7445C63.4302 60.7128 63.8425 61.7406 64.1285 62.8062C64.4763 64.0584 64.6485 65.3527 64.6401 66.6521C64.6401 71.0984 63.1162 74.5802 60.0685 77.0972C57.0207 79.6143 53.1098 80.8739 48.3359 80.876ZM92.0693 80.0599L75.6946 32.4241H83.3367L94.1846 65.6331C94.784 67.4193 95.2852 69.2369 95.6858 71.0777C96.085 69.2366 96.5861 67.4189 97.187 65.6331L107.899 32.4241H115.472L99.1646 80.0599H92.0693ZM129.935 80.0599V32.4241H159.546V39.0937H137.031V52.159H151.563V58.8286H137.031V73.3903H161.05V80.0599H129.935ZM179.126 80.0599V32.4241H186.223V73.2546H209.556V80.0599H179.126ZM236.301 39.2295V80.0599H229.204V39.2295H215.696V32.4241H249.813V39.2295H236.301ZM264.478 80.0599V32.4241H294.088V39.0937H271.574V52.159H286.106V58.8286H271.574V73.3903H295.593V80.0599H264.478Z" fill="#4A4A55"/>
+</svg>

src/lib/svelteLogos/svelte-kit-vertical.svg

@@ -0,0 +1 @@
+<svg id="svelte" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354.69 300"><defs><style>.cls-1{fill:#8d8d93;}.cls-2{fill:#4a4a55;}.cls-3{fill:#ff3e00;}.cls-4{fill:#fff;}</style></defs><g id="vertical"><path id="kit" class="cls-1" d="M262.738,265.277l-9.776-18.162-6.154,7.443v10.719h-5.161V230.539h5.161v16.824l13.4-16.824h5.955l-9.727,12.209,12.357,22.529Zm17.22,0V230.539h5.161v34.738ZM312.016,235.5v29.775h-5.162V235.5h-9.826v-4.963h24.813V235.5Z"/><path id="svelte-2" data-name="svelte" class="cls-2" d="M44.3,265.873a14.021,14.021,0,0,1-7.989-2.258,11.575,11.575,0,0,1-4.665-6.178l4.863-1.787A8.979,8.979,0,0,0,39.69,259.5,8.364,8.364,0,0,0,44.5,260.91a7.068,7.068,0,0,0,4.59-1.389,4.818,4.818,0,0,0,1.713-3.97,4.342,4.342,0,0,0-.472-2.01,6.011,6.011,0,0,0-1.067-1.514,7.214,7.214,0,0,0-1.836-1.216q-1.24-.62-2.06-.943T42.964,249q-1.984-.695-2.977-1.091a22.434,22.434,0,0,1-2.605-1.316,9.6,9.6,0,0,1-2.432-1.836,8.917,8.917,0,0,1-1.464-2.407,8.6,8.6,0,0,1,2.333-9.776,11.785,11.785,0,0,1,8.088-2.63,12.178,12.178,0,0,1,7.023,1.885,9.122,9.122,0,0,1,3.7,5.013l-4.764,1.588a5.548,5.548,0,0,0-2.308-2.556,7.751,7.751,0,0,0-4.045-.968A6.235,6.235,0,0,0,39.615,236a3.662,3.662,0,0,0-1.414,3.077,3.21,3.21,0,0,0,1.091,2.382A7.489,7.489,0,0,0,41.575,243q1.192.5,3.623,1.34,1.488.547,2.208.819t2.109.918a14.553,14.553,0,0,1,2.134,1.167,18.647,18.647,0,0,1,1.737,1.414,7.419,7.419,0,0,1,1.514,1.811,10.557,10.557,0,0,1,1.265,5.037,9.356,9.356,0,0,1-3.325,7.618A12.935,12.935,0,0,1,44.3,265.873Zm31.81-.6L64.2,230.539h5.558l7.891,24.218a37.7,37.7,0,0,1,1.092,3.97,37.217,37.217,0,0,1,1.092-3.97l7.791-24.218h5.508L81.275,265.277Zm27.542,0V230.539h21.538V235.4H108.818v9.528h10.57v4.863h-10.57v10.62h17.468v4.863Zm35.78,0V230.539H144.6v29.776H161.57v4.962ZM181.023,235.5v29.775h-5.162V235.5h-9.826v-4.963h24.813V235.5Zm20.5,29.775V230.539h21.538V235.4H206.679v9.528h10.57v4.863h-10.57v10.62h17.468v4.863Z"/><g id="logo"><path id="orange" class="cls-3" d="M240.635,52.089C224.292,28.7,192.014,21.765,168.677,36.634L127.69,62.757a47.02,47.02,0,0,0-21.244,31.5,49.527,49.527,0,0,0,4.883,31.793,47.178,47.178,0,0,0-7.034,17.573,50.113,50.113,0,0,0,8.56,37.9c16.347,23.393,48.624,30.323,71.958,15.455L225.8,170.847a47.015,47.015,0,0,0,21.244-31.5,49.549,49.549,0,0,0-4.88-31.794A47.162,47.162,0,0,0,249.2,89.985a50.1,50.1,0,0,0-8.56-37.9"/><path id="white" class="cls-4" d="M164.672,183.716a32.556,32.556,0,0,1-34.943-12.953,30.13,30.13,0,0,1-5.149-22.789,28.58,28.58,0,0,1,.979-3.828l.772-2.354,2.1,1.543a52.89,52.89,0,0,0,16.033,8.011l1.524.462-.141,1.52a9.188,9.188,0,0,0,1.654,6.094,9.8,9.8,0,0,0,10.521,3.905,9.018,9.018,0,0,0,2.517-1.106l40.988-26.12a8.534,8.534,0,0,0,3.851-5.706,9.1,9.1,0,0,0-1.552-6.869,9.81,9.81,0,0,0-10.525-3.907,9.006,9.006,0,0,0-2.514,1.105L175.146,130.7a29.912,29.912,0,0,1-8.323,3.655A32.557,32.557,0,0,1,131.879,121.4a30.129,30.129,0,0,1-5.149-22.789A28.268,28.268,0,0,1,139.507,79.67l40.984-26.122a29.851,29.851,0,0,1,8.328-3.66,32.556,32.556,0,0,1,34.943,12.953,30.126,30.126,0,0,1,5.149,22.789,28.92,28.92,0,0,1-.979,3.828l-.772,2.354-2.1-1.54a52.846,52.846,0,0,0-16.034-8.014L207.5,81.8l.14-1.52a9.21,9.21,0,0,0-1.653-6.094,9.8,9.8,0,0,0-10.521-3.905,9.011,9.011,0,0,0-2.518,1.106L151.964,97.5a8.52,8.52,0,0,0-3.848,5.7,9.1,9.1,0,0,0,1.549,6.87,9.81,9.81,0,0,0,10.525,3.907,9.036,9.036,0,0,0,2.517-1.106l15.639-9.967a29.823,29.823,0,0,1,8.322-3.658,32.557,32.557,0,0,1,34.944,12.953A30.13,30.13,0,0,1,226.761,135a28.28,28.28,0,0,1-12.776,18.94L173,180.056a29.838,29.838,0,0,1-8.328,3.66"/></g></g></svg>

src/lib/svelteLogos/svelte-logo-cutout.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.8.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 93.2 112" style="enable-background:new 0 0 93.2 112;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FF3E00;}
+</style>
+<path class="st0" d="M87.3,14.8L87.3,14.8C76.9-0.1,56.3-4.5,41.5,5L15.4,21.6c-7.1,4.5-12,11.8-13.5,20c-1.2,6.9-0.2,14,3.1,20.2
+	c-2.2,3.4-3.8,7.2-4.5,11.2C-1,81.5,1,90.2,5.9,97.2c10.4,14.9,30.9,19.3,45.8,9.8l26.1-16.6c7.1-4.5,12-11.8,13.5-20
+	c1.2-6.9,0.2-14-3.1-20.2c2.2-3.4,3.8-7.2,4.5-11.2C94.2,30.5,92.2,21.8,87.3,14.8z M79.8,36.2c-0.2,0.8-0.4,1.6-0.6,2.4l-0.5,1.5
+	l-1.3-1c-3.1-2.3-6.5-4-10.2-5.1l-1-0.3l0.1-1c0.1-1.4-0.3-2.7-1.1-3.9c-1.5-2.2-4.2-3.1-6.7-2.5c-0.6,0.2-1.1,0.4-1.6,0.7
+	L30.8,43.7c-1.3,0.8-2.2,2.1-2.4,3.6c-0.3,1.5,0.1,3.1,1,4.4c1.5,2.2,4.2,3.1,6.7,2.5c0.6-0.2,1.1-0.4,1.6-0.7l10-6.3
+	c1.6-1,3.4-1.8,5.3-2.3c8.4-2.2,17.3,1.1,22.2,8.2c3,4.2,4.2,9.4,3.3,14.5c-0.9,5-3.8,9.4-8.1,12.1L44.2,96.3
+	c-1.6,1-3.4,1.8-5.3,2.3h0c-8.4,2.2-17.3-1.1-22.2-8.2c-3-4.2-4.2-9.4-3.3-14.5c0.2-0.8,0.4-1.6,0.6-2.4l0.5-1.5l1.3,1
+	c3.1,2.3,6.5,4,10.2,5.1l1,0.3l-0.1,1c-0.1,1.4,0.3,2.8,1.1,3.9c1.5,2.2,4.2,3.1,6.7,2.5c0.6-0.2,1.1-0.4,1.6-0.7l26.1-16.6
+	c1.3-0.8,2.2-2.1,2.5-3.6c0.3-1.5-0.1-3.1-1-4.4c-1.5-2.2-4.2-3.1-6.7-2.5c-0.6,0.2-1.1,0.4-1.6,0.7l-10,6.3c-1.6,1-3.4,1.8-5.3,2.3
+	C31.9,69.4,23,66.1,18,58.9c-3-4.2-4.2-9.4-3.3-14.5c0.9-5,3.8-9.4,8.1-12.1L49,15.7c1.6-1,3.4-1.8,5.3-2.3
+	c8.4-2.2,17.3,1.1,22.2,8.2C79.5,25.9,80.7,31.1,79.8,36.2z"/>
+</svg>

src/lib/svelteLogos/svelte-logo-square.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M416.9 93.1c-41.1-58.9-122.4-76.3-181.2-38.9L132.5 120c-28.2 17.7-47.6 46.5-53.5 79.3-4.9 27.3-.6 55.5 12.3 80-8.8 13.4-14.9 28.5-17.7 44.2-5.9 33.4 1.8 67.8 21.6 95.4 41.2 58.9 122.4 76.3 181.2 38.9L379.6 392c28.2-17.7 47.6-46.5 53.5-79.3 4.9-27.3.6-55.5-12.3-80 8.8-13.4 14.9-28.4 17.7-44.2 5.8-33.4-1.9-67.8-21.6-95.4" style="fill:#ff3e00"/><path d="M225.6 424.5c-33.3 8.6-68.4-4.4-88-32.6-11.9-16.6-16.5-37.3-13-57.4.6-3.3 1.4-6.5 2.5-9.6l1.9-5.9 5.3 3.9c12.2 9 25.9 15.8 40.4 20.2l3.8 1.2-.4 3.8c-.5 5.4 1 10.9 4.2 15.3 5.9 8.5 16.5 12.4 26.5 9.8 2.2-.6 4.4-1.5 6.3-2.8l103.2-65.8c5.1-3.2 8.6-8.4 9.7-14.4 1.1-6.1-.3-12.3-3.9-17.3-5.9-8.5-16.5-12.4-26.5-9.8-2.2.6-4.4 1.5-6.3 2.8L252 291c-6.5 4.1-13.5 7.2-21 9.2-33.3 8.6-68.4-4.4-88-32.6-11.9-16.6-16.5-37.3-13-57.4 3.5-19.7 15.2-37 32.2-47.7l103.2-65.8c6.5-4.1 13.5-7.2 21-9.2 33.3-8.6 68.4 4.4 88 32.6 11.9 16.6 16.5 37.3 13 57.4-.6 3.3-1.4 6.5-2.5 9.6L383 193l-5.3-3.9c-12.2-9-25.9-15.8-40.4-20.2l-3.8-1.2.4-3.8c.5-5.4-1-10.9-4.2-15.3-5.9-8.5-16.5-12.4-26.5-9.8-2.2.6-4.4 1.5-6.3 2.8l-103.2 65.8c-5.1 3.2-8.6 8.4-9.7 14.4-1.1 6.1.3 12.3 3.9 17.3 5.9 8.5 16.5 12.4 26.5 9.8 2.2-.6 4.4-1.5 6.3-2.8L260 221c6.5-4.1 13.5-7.2 21-9.2 33.3-8.6 68.4 4.4 88 32.6 11.9 16.6 16.5 37.3 13 57.4-3.5 19.7-15.2 37-32.2 47.7l-103.2 65.8c-6.5 4.1-13.6 7.2-21 9.2" style="fill:#fff"/></svg>

src/lib/svelteLogos/svelte-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>

src/lib/svelteLogos/svelte-logotype.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="406" height="139" viewBox="0 0 406 139"><title>svelte-logotype</title><path d="M59.4561,100.3382a24.08,24.08,0,0,1-13.72-3.8769,19.8715,19.8715,0,0,1-8.0107-10.6094l8.3515-3.0683a15.4054,15.4054,0,0,0,5.4541,6.6044,14.3656,14.3656,0,0,0,8.2657,2.4288,12.1373,12.1373,0,0,0,7.8818-2.3858,8.2746,8.2746,0,0,0,2.94-6.8174,7.4559,7.4559,0,0,0-.8095-3.4511,10.3225,10.3225,0,0,0-1.8321-2.6,12.3611,12.3611,0,0,0-3.1533-2.0879q-2.1314-1.0635-3.5361-1.6192-1.4062-.5521-4.1328-1.4912-3.41-1.1924-5.1133-1.874a38.4516,38.4516,0,0,1-4.4736-2.2588,16.5374,16.5374,0,0,1-4.1758-3.1523,15.2908,15.2908,0,0,1-2.5137-4.1338,14.77,14.77,0,0,1,4.0049-16.7871q5.1138-4.5162,13.8906-4.5166,7.3272,0,12.0576,3.2382a15.6575,15.6575,0,0,1,6.3487,8.6075L69,53.2142a9.5238,9.5238,0,0,0-3.9629-4.3887,13.31,13.31,0,0,0-6.9443-1.6621,10.703,10.703,0,0,0-6.6895,1.875,6.2891,6.2891,0,0,0-2.4287,5.2832,5.5132,5.5132,0,0,0,1.874,4.0909,12.8853,12.8853,0,0,0,3.92,2.6416q2.0463.8524,6.2216,2.3007,2.5548.939,3.791,1.4063t3.6221,1.5762A24.997,24.997,0,0,1,72.0674,68.34,32.1346,32.1346,0,0,1,75.05,70.7689a12.7235,12.7235,0,0,1,2.6,3.11,17.39,17.39,0,0,1,1.5332,3.8339,17.5828,17.5828,0,0,1,.64,4.8155q0,8.3524-5.71,13.08Q68.4024,100.3388,59.4561,100.3382Zm54.622-1.0224L93.626,39.6644h9.5449L116.72,81.25a64.4659,64.4659,0,0,1,1.875,6.8173A64.0335,64.0335,0,0,1,120.47,81.25l13.3789-41.586h9.459L122.94,99.3158Zm47.294,0V39.6644h36.9843V48.016h-28.121V64.3773h18.15v8.3516h-18.15V90.9642h29.9951v8.3516Zm61.44,0V39.6644h8.8633v51.13h29.1435v8.5215Zm71.41-51.13v51.13h-8.8633v-51.13H268.4873V39.6644h42.6074v8.5215Zm35.1933,51.13V39.6644H366.4V48.016H338.2793V64.3773h18.15v8.3516h-18.15V90.9642h29.9951v8.3516Z" style="fill:#4a4a55"/></svg>

src/lib/svelteLogos/svelte-vertical.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="300" viewBox="0 0 256 300"><title>svelte-vertical</title><path d="M44.4129,265.87a14.0218,14.0218,0,0,1-7.9891-2.2576,11.5714,11.5714,0,0,1-4.6647-6.178l4.8632-1.7867a8.97,8.97,0,0,0,3.1759,3.8459,8.3658,8.3658,0,0,0,4.8132,1.4142,7.068,7.068,0,0,0,4.59-1.3892,4.8185,4.8185,0,0,0,1.7122-3.97,4.3412,4.3412,0,0,0-.4714-2.01,6.0115,6.0115,0,0,0-1.0668-1.5138,7.2027,7.2027,0,0,0-1.8362-1.2158q-1.2411-.6192-2.0591-.9428-.819-.3216-2.4066-.8684-1.9858-.6943-2.9775-1.0912a22.4089,22.4089,0,0,1-2.6051-1.3153,9.6307,9.6307,0,0,1-2.4316-1.8357,8.9022,8.9022,0,0,1-1.4637-2.4071,8.6,8.6,0,0,1,2.3321-9.7753,11.7841,11.7841,0,0,1,8.0886-2.63,12.1677,12.1677,0,0,1,7.0213,1.8857,9.1177,9.1177,0,0,1,3.6969,5.0122l-4.7637,1.5877a5.546,5.546,0,0,0-2.3077-2.5556,7.7507,7.7507,0,0,0-4.0437-.9678,6.2321,6.2321,0,0,0-3.8953,1.0918,3.6619,3.6619,0,0,0-1.4143,3.0764,3.21,3.21,0,0,0,1.0913,2.3822,7.5015,7.5015,0,0,0,2.2826,1.5382q1.1916.4965,3.6229,1.34,1.4877.5468,2.2076.8188t2.1091.9179a14.5435,14.5435,0,0,1,2.1336,1.1663,18.7071,18.7071,0,0,1,1.7367,1.4142,7.4076,7.4076,0,0,1,1.5138,1.8112,10.1257,10.1257,0,0,1,.8928,2.2326,10.24,10.24,0,0,1,.3725,2.8041,9.3524,9.3524,0,0,1-3.325,7.6166A12.9325,12.9325,0,0,1,44.4129,265.87Zm31.807-.5954L64.31,230.5391h5.5581l7.89,24.2159a37.5389,37.5389,0,0,1,1.0919,3.97,37.2955,37.2955,0,0,1,1.0918-3.97l7.7907-24.2159h5.508l-11.86,34.7356Zm27.54,0V230.5391H125.296v4.8632H108.9208V244.93H119.49v4.8632H108.9208v10.6186h17.4665v4.8632Zm35.7774,0V230.5391h5.1612v29.7734h16.9706v4.9622ZM181.12,235.5012v29.7735h-5.1612V235.5012h-9.8248v-4.9621h24.8107v4.9621Zm20.4934,29.7735V230.5391H223.15v4.8632H206.7745V244.93h10.5691v4.8632H206.7745v10.6186h17.4664v4.8632Z" style="fill:#4a4a55"/><path d="M191.8716,52.1065c-16.3379-23.3845-48.6074-30.3158-71.9383-15.45L78.9574,62.7719A47.0092,47.0092,0,0,0,57.72,94.2591a49.5083,49.5083,0,0,0,4.882,31.7842,47.14,47.14,0,0,0-7.032,17.5683,50.097,50.097,0,0,0,8.5576,37.8858c16.3419,23.3867,48.61,30.3149,71.9383,15.45l40.9759-26.1158a47.001,47.001,0,0,0,21.2378-31.4872A49.5286,49.5286,0,0,0,193.4,107.56a47.13,47.13,0,0,0,7.0291-17.5676,50.0832,50.0832,0,0,0-8.5576-37.8857" style="fill:#ff3e00"/><path d="M115.93,183.6976A32.5485,32.5485,0,0,1,80.996,170.7485a30.1218,30.1218,0,0,1-5.1475-22.7834,28.582,28.582,0,0,1,.9792-3.8266l.7717-2.3529,2.0992,1.5418a52.8582,52.8582,0,0,0,16.029,8.0087l1.5229.4621-.14,1.52a9.1869,9.1869,0,0,0,1.6528,6.0925,9.8011,9.8011,0,0,0,10.5181,3.9039,9.0254,9.0254,0,0,0,2.5168-1.1062l40.9769-26.1128a8.5317,8.5317,0,0,0,3.85-5.7043,9.1034,9.1034,0,0,0-1.5515-6.8672,9.8084,9.8084,0,0,0-10.5221-3.9061,9.02,9.02,0,0,0-2.5138,1.1054l-15.6366,9.9678a29.8952,29.8952,0,0,1-8.3206,3.6539A32.5485,32.5485,0,0,1,83.146,121.3959a30.1208,30.1208,0,0,1-5.1475-22.7834A28.261,28.261,0,0,1,90.7712,79.68l40.9729-26.115a29.8528,29.8528,0,0,1,8.3258-3.6584A32.5482,32.5482,0,0,1,175.004,62.8556a30.1218,30.1218,0,0,1,5.1475,22.7834,28.9008,28.9008,0,0,1-.9792,3.8265l-.7717,2.353L176.3024,90.28a52.8164,52.8164,0,0,0-16.03-8.0117l-1.5229-.462.14-1.52a9.2036,9.2036,0,0,0-1.6528-6.0924A9.8011,9.8011,0,0,0,146.7189,70.29a9.0252,9.0252,0,0,0-2.5168,1.1061L103.2252,97.5085a8.5183,8.5183,0,0,0-3.847,5.7035,9.09,9.09,0,0,0,1.5485,6.8681,9.8085,9.8085,0,0,0,10.5221,3.9061,9.0586,9.0586,0,0,0,2.5168-1.1062L129.6,102.9159a29.8159,29.8159,0,0,1,8.32-3.6569,32.5484,32.5484,0,0,1,34.9341,12.9492,30.1207,30.1207,0,0,1,5.1475,22.7834A28.275,28.275,0,0,1,165.23,153.9271l-40.9738,26.112a29.8538,29.8538,0,0,1-8.3257,3.6585" style="fill:#fff"/></svg>

src/routes/+layout.svelte

@@ -1,97 +1,178 @@
+<!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements -->
 <script lang="ts">
-    import { fly } from 'svelte/transition';
+  import "../app.css";
-    import MediaQuery from 'svelte-media-queries';
+  import { fly } from "svelte/transition";
+  import MediaQuery from "svelte-media-queries";
+  import { Dices } from "@lucide/svelte";
+  let hideOnPrint: boolean = $state(false);
 
-    const footerCollapseThreshold : string = '1000px';
+  let { children } = $props();
-    const headerCollapseThreshold : string = '1000px';
-    let footerCollapse : boolean;
-    let headerCollapse : boolean;
 
-    let navbarHidden : boolean = true;
+  import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
+  import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
+
+  const footerCollapseThreshold: string = "1000px";
+  const headerCollapseThreshold: string = "1000px";
+  let footerCollapse: boolean;
+  let isMobile: boolean = $state(false);
+
+  let navbarHidden: boolean = $state(true);
 
   function resetNavBar() {
     navbarHidden = true;
   }
+
+  import { afterNavigate } from "$app/navigation";
+  afterNavigate(() => {
+    const params = new URLSearchParams(window.location.search);
+    hideOnPrint = params.get("hideOnPrint") === "1";
+    console.log(hideOnPrint);
+  });
+
+  import { onMount } from "svelte";
+  import Zooter from "./comps/Zooter.svelte";
+
+  onMount(async () => {
+    const lock = document.createElement("meta");
+    lock.name = "darkreader-lock";
+    document.head.appendChild(lock);
+  });
+
+  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" onclick={nextTheme}> <Dices /></button>
+  </div>
+{/snippet}
+
 <!-- Detect mobile -->
-<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
+<MediaQuery
-<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={headerCollapse} />
+  query="(max-width: {footerCollapseThreshold})"
+  bind:matches={footerCollapse}
+/>
+<MediaQuery
+  query="(max-width: {headerCollapseThreshold})"
+  bind:matches={isMobile}
+/>
 
 <!-- Nav bar -->
-<header>
+<div class=" bg-base-200 p-0">
-    <div class="nav-bar">
+  <header class="{hideOnPrint ? 'hide-on-print' : ''} bg-base-300">
-        {#if !headerCollapse}
+    <div class="nav-bar pr-4">
+      {#if !isMobile}
         <div class="desktop">
           <a href="/" class="nav-head">
-                    <img id="logo-link" src="/images/logo.png" alt="The Deprived Devs Logo"/>
+            <DeprivedLogo
-                    <h3 id="logo-text">The Deprived Devs</h3>
+              Class="fill-base-content p-2"
+              Style="width: 3.5rem; height: auto;"
+            />
+            <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
           </a>
           <div class="nav-spacer" />
-                <a href="/">Home</a>
+
-                <a href="/games">Games</a>
+          <!-- <a href="/">Home</a> -->
-                <a href="/posts">Blog</a>
+          <!-- <a href="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> -->
-                <a href="/about">About</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>
+          <!-- <a href="/posts">Blog</a>
+                    <a href="/about">About</a> -->
         </div>
       {:else}
-            <div class="collapsed">
+        <div class="collapsed shadow-xl">
-                    <a on:click={resetNavBar} href="/" class="nav-head">
+          <a onclick={resetNavBar} href="/" class="nav-head">
-                        <img id="logo-link" src="/images/logo.png" alt="The Deprived Devs Logo"/>
+            <DeprivedLogo
-                        <h3 id="logo-text">The Deprived Devs</h3>
+              Class="fill-base-content p-2"
+              Style="width: 3.5rem; height: auto;"
+            />
+            <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
           </a>
           <div class="nav-spacer" />
-                    <button id="toggle-nav" on:click={() => navbarHidden = !navbarHidden}>
+          {@render SwitchThemeButton()}
-                        <img src="/images/icons/hamburger_menu.svg" alt="Toggle Navigation Bar" />
+          <div class="px-1"></div>
+          <button
+            id="toggle-nav"
+            onclick={() => {
+              navbarHidden = !navbarHidden;
+              console.log(navbarHidden);
+            }}
+          >
+            <HamburgerMenuIcon Class="fill-base-content" />
           </button>
         </div>
         {#if !navbarHidden}
           <div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
-                    <a on:click={resetNavBar} href="/">Home</a>
+            <!-- <a onclick={resetNavBar} href="/">Home</a> -->
-                    <a on:click={resetNavBar} href="/games">Games</a>
+            <a
-                    <a on:click={resetNavBar} href="/posts">Blog</a>
+              onclick={resetNavBar}
-                    <a on:click={resetNavBar} href="/about">About</a>
+              href="https://botalex.itch.io/"
+              target="_blank">Games</a
+            >
+            <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank">Zhen's CV</a>
+            <!-- <a onclick={resetNavBar} href="/posts">Blog</a>
+                        <a onclick={resetNavBar} href="/about">About</a> -->
           </div>
         {/if}
       {/if}
     </div>
-</header>
+  </header>
 
-<!-- Page content -->
+  <!-- Page content -->
-<slot />
+  {@render children?.()}
 
-<!-- About footer -->
+  <Zooter bind:hideOnPrint />
-<footer>
+</div>
-    <div class="about-container">
-        <div class="credits">
-            <span>© 2023-2024</span>
-            <br>
-            <span>Benjamin Dreyer</span>
-            <br>
-            <span>Oliver Schwenger</span>
-            <br>
-            <span>Sylvester Junge</span>
-            <br>
-            <span>Zhentao Wei</span>
-            <br>
-            <br>
-            <span>Website <a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website" target="_blank">source code</a></span>
-        </div>
-        <div>
-            <h3>About Us</h3>
-            <a href="/about">About</a>
-        </div>
-        <div class="contact">
-            <h3>Contact</h3>
-            <a href="https://discord.gg/awatEEqc3M" target="_blank" class="social">
-                <img src="/images/icons/discord.svg" alt="Discord"/>
-                <span>Discord</span>
-            </a>
-        </div>
-    </div>
-</footer>
 
+{#if footerCollapse}
+  <style>
+    .about-container {
+      flex-direction: column;
+      justify-content: center !important;
+      gap: 25px;
+    }
+  </style>
+{/if}
 
-<style>
+{#if isMobile}
+  <style>
+  </style>
+{/if}
+
+<style lang="scss">
   /* Nav bar. */
   header {
     display: flex;
@@ -123,7 +204,6 @@
     border: none;
   }
 
-
   .nav-list {
     display: flex;
     flex-direction: column;
@@ -145,7 +225,7 @@
 
   #logo-text {
     font-size: 24px;
-        color: var(--text2);
+    color: oklch(var(--bc));
     font-family: var(--title-font);
     margin: 0;
 
@@ -162,14 +242,15 @@
 
     font-size: 22px;
     font-family: var(--title-font);
-        color: var(--text2);
+    // Text color
+    color: oklch(var(--bc));
   }
 
   /* Footer. */
   footer {
     margin-top: 50px;
     padding: 25px 0;
-        background-color: var(--background1);
+    background-color: oklch(var(--b3));
 
     height: 100%;
 
@@ -181,11 +262,15 @@
     width: 80%;
     height: 100%;
 
-        color: var(--text2);
+    color: oklch(var(--bc));
 
     display: flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
+
+    & h3 {
+      font-size: larger;
+    }
   }
 
   .about-container > div {
@@ -226,19 +311,3 @@
     filter: brightness(130%);
   }
 </style>
-
-{#if footerCollapse}
-    <style>
-        .about-container {
-            flex-direction: column;
-            justify-content: center !important;
-            gap: 25px;
-        }
-    </style>
-{/if}
-
-{#if headerCollapse}
-    <style>
-
-    </style>
-{/if}

src/routes/+page.svelte

@@ -1,156 +1,259 @@
 <script lang="ts">
+	import ProfileSpacer from './comps/ProfileSpacer.svelte';
     import MediaQuery from 'svelte-media-queries';
     import NewsCard from '$lib/posts/NewsCard.svelte';
     import ShowcaseNewsCard from '$lib/posts/ShowcaseNewsCard.svelte';
     import Button from '$lib/IO/Button.svelte';
     import { ButtonType } from '$lib/IO/ButtonType.ts';
     import Timeline from '../comps/timeline/timeline.svelte';
+    import { onMount, tick } from 'svelte'
 
-    export let data; // <- contains post data
+    import PreviewDeprivedLogo from "$lib/images/DeprivedLogo-NoBackground.png";
 
-    $: most_recent_post = data.summaries[0];
+    import BackgroundVideo from "$lib/videos/DeprivedDevMontage.gif"
+    import Carousel from './comps/Carousel.svelte';
 
-    const mobileThreshold : string = '1000px';
+    import Corrobot1 from "$lib/GamePreviews/Corrobot-rebouce-title.jpg"
+    import Corrobot2 from "$lib/GamePreviews/Corrobot-rebouce-gameplay1.png"
+    import Corrobot3 from "$lib/GamePreviews/Corrobot-rebouce-gameplay2.png"
+
+    import Blood1 from "$lib/GamePreviews/Blood-title.png"
+    import Blood2 from "$lib/GamePreviews/Blood-preview1.png"
+    import Blood3 from "$lib/GamePreviews/Blood-preview2.png"
+    import Blood4 from "$lib/GamePreviews/Blood-preview3.png"
+    import Blood5 from "$lib/GamePreviews/Blood-preview4.png"
+    
+    import Time1 from "$lib/GamePreviews/Time-1.png"
+    import Time2 from "$lib/GamePreviews/time-2.png"
+    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';
+    import Profile from './comps/Profile.svelte';
+    
+    const mobileThreshold : string = '600px'; // was 1000px. zhen testing
     let mobile : boolean;
-    const post_show_count : number = 3;
+
+    onMount(()=> {
+        let tabTittleElement = window.document.getElementById("TabTittle");
+            if (tabTittleElement) // Not null
+        tabTittleElement.innerHTML = "Deprived devs";
+    });
 </script>
 
+
 <!-- Detect mobile -->
 <MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} />
 
-<div class="main-title">
+<title id="TabTittle">We are the DEPRIVED DEVS</title>
-    <h1>The Deprived Devs</h1>
+<meta content="We are the deprived devs" property="og:title" />
+<meta content="We make everything frontend, backend, games, websites, machine learning, whatever. We're just abunch of nerds, and we love it!" property="og:description" />
+<meta content={PreviewDeprivedLogo} property="og:image" />
+<meta content="#bdd6ee" data-react-helmet="true" name="theme-color" />
+
+<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 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);">
+            {#if !mobile}
+                Deprived Devs
+            {:else}
+                Deprived
+                <br/>
+                <span class="-mt-6 prose" style="font-size: 2rem;">
+                    Devs
+                </span>
+            {/if}
+        </h1>
+        {#if mobile}
+            <div style="width: 100px; height: 100px;"></div>
+        {/if}
+    </div>
+</div>
+
+<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 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>
+                    <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>
+            </Profile>
+            
+            <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>
+                    <p><a href="https://www.linkedin.com/in/benjamin-dreyer/" target="_blank" style="color:lightblue;">Linked-in</a></p>
+                </span>
+            </Profile>
+            
+            <Profile isSnorre={true} tags={["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>
+
+            <Profile name="Kim" tags={["Cinemachine", "3D Artist", "Programmer"]} isMobile={mobile}>
+                <span>
+                    <p>Abla espaniol</p>
+                    <p><a href="https://www.linkedin.com/in/kim-rex-de-dios-408860299/" target="_blank" style="color:lightblue;">Linked-in</a></p>
+                </span>
+            </Profile>
+            
+            <Profile name="Zylvester" tags={["Sound/Story", "2D/3D artist"]} isMobile={mobile}>
+                <span>
+                    <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>
+
+<div class="py-4"></div>
+
+<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>
+    </article> -->
+
+    <!-- Spacer -->
+    <!-- <div style="width: 50%;" class="{!mobile ? "py-16" : "py-4"}">
+        <ProfileSpacer/>
+    </div> -->
+    
+    <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>
+
+    <!-- Spacer -->
+    <div style="width: 50%;" class="{!mobile ? "py-8" : "py-4"}">
+        
+    </div>
+
+    <div class="grid grid-flow-row gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">                
+        <!-- Corro rebounce -->
+        <div class="games card bg-base-100 shadow-xl">
+            <figure style="height: 15em;">
+                <Carousel images={[
+                    Corrobot1,
+                    Corrobot2,
+                    Corrobot3,
+                    ]}/>
+            </figure>
+            <div class="card-body">
+                <h2 class="card-title">Corrobot-rebounce</h2>
+                <p>A 3D sequel to Corrobot-Takeover</p>
+                <br/>
+                <p>This was made during <a href="https://itch.io/jam/nordic-game-jam-2024/rate/2659665" class="underline">Nordic gamejam 2024</a></p>
+                <div class="card-actions justify-end">
+                <a href="https://botalex.itch.io/corrobot-rebounce" target="_blank" class="btn btn-primary text-primary-content">View on itch.io</a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Blood -->
+        <div class="games card bg-base-100 w-96 shadow-xl">
+            <figure style="height: 15em;">
+                <Carousel images={[
+                    Blood1,
+                    Blood2,
+                    Blood3,
+                    Blood4,
+                    Blood5,
+                    ]}/>
+            </figure>
+            <div class="card-body">
+                <h2 class="card-title">Unnamed blood game</h2>
+                <p>A game based on an unique kind of combat</p>
+                <br/>
+                <p>This was made during <a href="https://itch.io/jam/future-game-makers-jam-2024" class="underline">Future Game Makers</a>, and of course our team won the competition.</p>
+                <div class="card-actions justify-end">
+                <a href="https://botalex.itch.io/mop-of-the-dead" target="_blank" class="btn btn-primary text-primary-content">View on itch.io</a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Time -->
+        <div class="games card bg-base-100 w-96 shadow-xl">
+            <figure style="height: 15em;">
+                <Carousel images={[
+                    Time1,
+                    Time2,
+                    Time3,
+                    Time4,
+                    Time5,
+                    ]}/>
+            </figure>
+            <div class="card-body">
+                <h2 class="card-title">One More Time</h2>
+                <p>What if time was money? A rougelike where you need to kill for time, which you can choose to spend.</p>
+                <br/>
+                <p>This was made during <a href="https://itch.io/jam/dmspiljam-november-2021" class="underline">Denmark Masters jam</a>. This jam has youths allover Denmark to compete, and of course our team won the competition again.</p>
+                <div class="card-actions justify-end">
+                <a href="https://botalex.itch.io/one-more-time" target="_blank" class="btn btn-primary text-primary-content">View on itch.io</a>
+                </div>
+            </div>
+        </div>
+
+        
+
+        <div class="games card bg-base-100 w-96 shadow-xl">
+            <figure class="rounded-b-none" style="height: 15em;">
+                <div class="bg-grid-100 flex w-full h-full"></div>
+            </figure>
+            <div class="card-body">
+                <h2 class="card-title">What's next?</h2>
+                <div class="skeleton mt-1 h-4 w-28"></div>
+                <div class="skeleton h-4 w-full"></div>
+                <div class="skeleton h-4 w-full"></div>
+                <div class="skeleton h-4 w-28"></div>
+                <div class="skeleton h-4 w-full"></div>
+                <div class="flex grow"/>
+                <div class="card-actions justify-end">
+                    <a href="/" target="_blank" class="btn btn-primary text-primary-content text-primary-content">RECURSION!</a>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
 
-<section id="news-section">
-    <header id="news-header">
-        <h1>Recent News</h1>
-    </header>
-    <div class="news-container">
-        <!-- The newest blog post being showcased -->
-        <div class="showcase">
-            <ShowcaseNewsCard
-                thumbnail_url={most_recent_post.cover_img}
-                thumbnail_alt={most_recent_post.cover_alt}
-                post_url={most_recent_post.url}
-                title={most_recent_post.title}
-                summary={most_recent_post.summary}
-                creation_date={most_recent_post.creation_date}
-            />
-        </div>
-
-        <div class="news-list">
-            {#each data.summaries.slice(1, post_show_count) as summary}
-                <NewsCard
-                    thumbnail_url={summary.cover_img}
-                    thumbnail_alt={summary.cover_alt}
-                    post_url={summary.url}
-                    title={summary.title}
-                    summary={summary.summary}
-                    creation_date={summary.creation_date}
-                />
-            {/each}
-        </div>
-    </div>
-    <footer id="news-footer">
-        <div class="dummy"/>
-        <div id="more-posts">
-            <Button href="/posts" type={ButtonType.Primary}>
-                <span slot="content">More News</span>
-            </Button>
-        </div>
-    </footer>
-</section>
-
-<Timeline/>
-
 <style>
-    #news-section {
+    #backgroundGif{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        transition-duration: 500ms;
-        transition-property: width;
-        width: 80%;
-        max-width: 1400px;
-        margin-inline: auto;
-    }
-
-    #news-header {
-        font-size: min(8vw, 36px);
-        margin-right: auto;
-    }
-
-    .news-container {
-        display: flex;
-        flex-direction: row;
-        gap: 25px;
-
         width: 100%; 
-        align-items: left;
+        height: 100%;
-    }
+        max-height: 40vh;
-
+        object-fit: cover; 
-    .news-list {
+        filter: blur(5px) brightness(0.6);
-        display: flex;
-        flex-direction: column;
-
-        gap: 20px;
-    }
-
-    #news-footer {
-        width: 100%;
-        display: flex;
-
-        margin-top: 25px;
-    }
-
-    .dummy {
-        width: 100%;
-    }
-
-    #more-posts {
-        flex-grow: 1;
-        min-width: 10em;
-    }
-
-    .main-title {
-        color: var(--text1);
-        margin: 0 auto;
-        width: 80%;
-        text-align: center;
-    }
-
-    .main-title > h1 {
-        font-size: 9vw; /* Change if title changes */
-    }
-
-    .main-title {
-        font-family: var(--title-font);
-        color: var(--text1);
     }
 </style>
 
-{#if mobile}
+{#if !mobile}
     <style>
-        #news-section {
+        .games {
-            transition-duration: 500ms;
+            width: 24rem /* 384px */;
-            transition-property: width;
-            width: 90% !important;
         }
-        .news-container {
+    </style>
-            flex-direction: column !important;
+
+{:else}
+    <style>
+        .games {
+            width: 80%;
+            display: flex;
+            justify-self: center;
         }
-
-        .dummy {
-            width: 0% !important;
-        }
-
-        /* #more-posts { */
-        /*     flex-grow: 1 !important; */
-        /* } */
-
     </style>
 {/if}
 

src/routes/baller/+page.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+
+  let scrollY = 0;
+
+  const animateInterval = 16;
+  const startMove = 64;
+  const numFrames = 312;
+
+  let framesLoaded = 1;
+  let ballsLoaded = 0;
+  let frameLoader: HTMLImageElement;
+  let frameLoader2: HTMLImageElement;
+  let frameLoader3: HTMLImageElement;
+  let frameLoader4: HTMLImageElement;
+
+  onMount(()=>{
+
+    // Force load once
+    ballsLoaded = 4;
+    onLoaded();
+  });
+
+  function onLoaded (){
+    ballsLoaded++;
+    if (ballsLoaded > 3) {
+        frameLoader.src = "/images/spinning_cat/untitled_" + framesLoaded.toString().padStart(5, '0') + ".png";
+        framesLoaded++;
+        frameLoader2.src = "/images/spinning_cat/untitled_" + framesLoaded.toString().padStart(5, '0') + ".png";
+        framesLoaded++;
+        frameLoader3.src = "/images/spinning_cat/untitled_" + framesLoaded.toString().padStart(5, '0') + ".png";
+        framesLoaded++;
+        frameLoader4.src = "/images/spinning_cat/untitled_" + framesLoaded.toString().padStart(5, '0') + ".png";
+        framesLoaded++;
+        ballsLoaded = 0;
+    }
+  }
+
+  let frameIndex = 0;
+  $: frameIndex = Math.min(Math.floor(Math.max(scrollY-startMove, 0) / animateInterval+1), numFrames);
+</script>
+
+<svelte:window bind:scrollY />
+
+<div class="w-full flex justify-center" style="height: 5000px;">
+    <!-- Image Loader -->
+    <img on:load={()=>{onLoaded()}} bind:this={frameLoader} style="height: 0.01px; width: 0.01px;" class="" src="/images/spinning_cat/untitled_00001.png" alt="">
+    <img on:load={()=>{onLoaded()}} bind:this={frameLoader2} style="height: 0.01px; width: 0.01px;" class="" src="/images/spinning_cat/untitled_00001.png" alt="">
+    <img on:load={()=>{onLoaded()}} bind:this={frameLoader3} style="height: 0.01px; width: 0.01px;" class="" src="/images/spinning_cat/untitled_00001.png" alt="">
+    <img on:load={()=>{onLoaded()}} bind:this={frameLoader4} style="height: 0.01px; width: 0.01px;" class="" src="/images/spinning_cat/untitled_00001.png" alt="">
+
+    <!-- add "top-0" so it sticks at the top -->
+    <div class="sticky top-0" style="width: 200px; height: 200px;">
+        <div class="flex justify-center items-center" style="width: 200px; height: 200px;">
+            <img src="/images/spinning_cat/untitled_{frameIndex.toString().padStart(5, '0')}.png" class="object-contain w-full h-full" alt="">
+        </div>
+        <div>{frameIndex}</div>
+        
+    </div>
+</div>
+
+<div class="h-[1000px] bg-amber-700 w-full">
+
+</div>

src/routes/comps/Carousel.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  export let images: string[] = []; // Expose images as a parameter
+  let currentIndex: number = 0;
+
+  let startX: number | null = null; // Track touch start X position
+  let deltaX: number = 0; // Track touch delta X
+
+  const nextSlide = (): void => {
+    currentIndex = (currentIndex + 1) % images.length;
+  };
+
+  const prevSlide = (): void => {
+    currentIndex = (currentIndex - 1 + images.length) % images.length;
+  };
+
+  const handleTouchStart = (event: TouchEvent): void => {
+    startX = event.touches[0].clientX;
+  };
+
+  const handleTouchMove = (event: TouchEvent): void => {
+    if (startX !== null) {
+      deltaX = event.touches[0].clientX - startX;
+    }
+  };
+
+  const handleTouchEnd = (): void => {
+    if (startX !== null) {
+      if (deltaX > 50) {
+        prevSlide(); // Swipe right
+      } else if (deltaX < -50) {
+        nextSlide(); // Swipe left
+      }
+    }
+    // Reset touch variables
+    startX = null;
+    deltaX = 0;
+  };
+</script>
+
+<style>
+  .carousel {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    max-width: 800px;
+    height: 100%;
+    margin: auto;
+  }
+
+  .slides {
+    display: flex;
+    transition: transform 0.5s ease-in-out;
+    width: 100%;
+  }
+
+  .slide {
+    flex: 0 0 100%;
+    object-fit: cover;
+    object-position: center;
+  }
+
+  .controls {
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    transform: translateY(-50%);
+  }
+
+  .control {
+    background: rgba(0, 0, 0, 0.5);
+    border: none;
+    color: white;
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: 0.5rem;
+  }
+
+  .indicators {
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    bottom: 10px;
+    width: 100%;
+  }
+
+  .indicator {
+    width: 10px;
+    height: 10px;
+    margin: 0 5px;
+    background: white;
+    border-radius: 50%;
+    opacity: 0.5;
+    cursor: pointer;
+  }
+
+  .indicator.active {
+    opacity: 1;
+  }
+</style>
+
+<div 
+  class="carousel" 
+  on:touchstart|preventDefault={handleTouchStart}
+  on:touchmove|preventDefault={handleTouchMove}
+  on:touchend|preventDefault={handleTouchEnd}
+>
+  <div
+    class="slides"
+    style="transform: translateX(-{currentIndex * 100}%);"
+  >
+    {#each images as image (image)}
+      <img class="slide" src={image} alt="Carousel Slide" />
+    {/each}
+  </div>
+
+  <div class="controls">
+    <button class="control" on:click={prevSlide}>&lt;</button>
+    <button class="control" on:click={nextSlide}>&gt;</button>
+  </div>
+
+  <div class="indicators">
+    {#each images as _, index}
+      <div
+        class="indicator {index === currentIndex ? 'active' : ''}"
+        on:click={() => (currentIndex = index)}
+      ></div>
+    {/each}
+  </div>
+</div>

src/routes/comps/FrontFold.svelte

@@ -0,0 +1,16 @@
+<script>
+    export let Title = "";
+    export let Checked = false;
+</script>
+
+<div class="collapse collapse-arrow bg-base-100 text-start shadow-sm" {...$$restProps}>
+    {#if Checked}
+    <input type="radio" name="{Title}" checked/>
+    {:else}
+    <input type="radio" name="{Title}"/>
+    {/if}
+    <div class="collapse-title text-xl font-medium "><b>{Title}</b></div>
+    <div class="collapse-content" style="border-top: dotted 0.15rem oklch(var(--b3));">
+        <slot/>
+    </div>
+</div>

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

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

src/routes/comps/Profile.svelte

@@ -0,0 +1,67 @@
+<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>
+
+
+<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}/>
+        <slot/>
+        <MobileTags tags={tags} isMobile={isMobile}/>
+    </div>
+{:else}
+    <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>
+                <pre> </pre>
+                <pre> </pre>
+            </span>
+            {#if isMobile}
+                <pre> </pre>
+            {/if}
+        </div>
+        <div class="developersProfile snorre-overlay relative pl-1 font-mono">
+            <NameAndTag name="Snorre" tags={tags} isMobile={isMobile}/>
+            <span>
+                <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>
+            <MobileTags tags={tags} isMobile={isMobile}/>
+        </div>
+    </div>
+{/if}
+</div>
+
+<style>
+    .developersProfile:not(.snorre):not(.snorre-overlay){
+        /* background-image: linear-gradient(var(--color-neutral) 33%, rgba(255,255,255,0) 0%); */
+        /* background-image: linear-gradient(var(--color-neutral) 100%);
+        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%, var(--color-base-200) 40%); */
+        /* background-position: left;
+        background-size: 0.1rem 0.5rem;
+        background-repeat: repeat-y; */
+    }
+</style>

src/routes/comps/ProfileSpacer.svelte

@@ -0,0 +1,8 @@
+<div class="profileSpacer"></div>
+
+<style>
+    .profileSpacer{
+        height: 1px;
+        border-bottom: solid oklch(var(--b3));
+    }
+</style>

src/routes/comps/SlantedText.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
     import { onMount } from "svelte";
-    import { Vector2 } from "./../Utils/Vector2";
+    import { Vector2 } from "../zhen/Utils/Vector2";
-    import TopNameTextPlate from "./TopNameTextPlate.svelte";
-    //import { throttle } from "./../Utils/Throttle";
 
     // Params
     let mouseMoveScale: number = 0.25;
@@ -52,24 +50,32 @@
         windowRef.addEventListener("resize", updateDimensions);
 
         const RevertToOrigin = () => {
-            if(navigator.userAgent.search(/gecko/i)>0 && StartPageAnimated !== null){
+            if (
-                StartPageAnimated.classList.add('FirefoxSmoothTranition');
+                navigator.userAgent.search(/gecko/i) > 0 &&
+                StartPageAnimated !== null
+            ) {
+                StartPageAnimated.classList.add("FirefoxSmoothTranition");
             }
-            updateAnimation(new Vector2(windowWidth/2, windowHeight/2));
+            updateAnimation(new Vector2(windowWidth / 2, windowHeight / 2));
         };
-        document.documentElement.addEventListener('mouseleave', RevertToOrigin)
+        document.documentElement.addEventListener("mouseleave", RevertToOrigin);
 
         const RemoveFirefoxSmoothTranition = () => {
-            if(navigator.userAgent.search(/gecko/i)>0 && StartPageAnimated !== null){
+            if (
-                StartPageAnimated.classList.remove('FirefoxSmoothTranition');
+                navigator.userAgent.search(/gecko/i) > 0 &&
+                StartPageAnimated !== null
+            ) {
+                StartPageAnimated.classList.remove("FirefoxSmoothTranition");
             }
         };
-        document.documentElement.addEventListener('mouseenter', RemoveFirefoxSmoothTranition)
+        document.documentElement.addEventListener(
+            "mouseenter",
+            RemoveFirefoxSmoothTranition,
+        );
 
         return () => {
             windowRef.removeEventListener("resize", updateDimensions);
         };
-
     });
 
     const programmingLanguages: string[] = [
@@ -81,33 +87,30 @@
         "JAVASCRIPT",
         "TYPESCRIPT",
         "HTML",
-        "CSS"
+        "CSS",
     ];
 
     function getRandomInt(max: number) {
         return Math.floor(Math.random() * max);
     }
 
-    function GrabRandomString(){
+    function GrabRandomString() {
         let outString: string = "";
         while (outString.length < targetTextLenght) {
-            outString += programmingLanguages[getRandomInt(programmingLanguages.length)] + " ";
+            outString +=
+                programmingLanguages[
+                    getRandomInt(programmingLanguages.length)
+                ] + " ";
         }
 
         return outString; // At about target size
     }
-
 </script>
 
 <svelte:window on:mousemove={onMouseMoved} />
 
-<div class="StartPageContainer">
+<div
-    <div class="TopOverlay">
+        class="StartPageAnimated top-0 left-0 w-full h-full"
-        <TopNameTextPlate/>
-    </div>
-
-    <div
-        class="StartPageAnimated"
         id="StartPageAnimated"
         bind:this={StartPageAnimated}
         style="transform: translate({mouseRelativeScaled.x}px, {mouseRelativeScaled.y}px) translateZ(0) rotate(0.001deg);"
@@ -122,13 +125,9 @@
         >
         {/each}
     </div>
-</div>
-
-<div id="DummyDiv" class="FirefoxSmoothTranition"/>
-
 <style>
     .StartPageContainer {
-        height: 40vh;
+        /* height: 40vh; */
 
         background-color: burlywood;
         overflow: hidden;
@@ -142,51 +141,37 @@
     }
 
     .StartPageAnimated {
-        /* background: url("https://i1.adis.ws/i/canon/future_of_forests_header_16x9_dc14bbe1e35040f79bf566eedaf5c8f7?$hero-header-half-16by9-dt$"); */
-        background-color: #131313;
-        position: absolute;
-        height: 150vh;
-        width: 150vw;
-
         padding: 0;
 
         transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
         -moz-transition: none;
-
         justify-content: center;
         vertical-align: middle;
         display: flex;
+
+        pointer-events: none;
     }
 
-    .FirefoxSmoothTranition{
+    .FirefoxSmoothTranition {
         transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
         -moz-transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99) !important;
     }
 
-    .SkillsText{
+    .SkillsText {
-        font-family: 'CozetteVector';
+        font-family: "CozetteVector";
 
         text-align: start;
         font-size: x-large;
         display: flex;
         justify-content: center;
         align-items: center;
-        white-space:nowrap; 
+        white-space: nowrap;
 
         width: 2rem;
 
         color: rgb(66, 66, 66);
     }
 
-    .TopOverlay {
-        position: absolute;
-        z-index: 1;
-        width: 100%;
-        height: 100%;
-
-        padding: 0;
-    }
-
     .rotate45 {
         transform: rotate(-45deg); /* Rotate the element by 45 degrees */
     }

src/routes/comps/Tags.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+    export let Tags = ["null"];
+    export let isMobile = false;
+
+    // Define an interface for our detailed color object.
+    interface ColorObject {
+        color1: string;
+        color2: string;
+        rotation: string;
+        offset: string;
+    }
+
+    // ColorType can be a simple string or a ColorObject.
+    type ColorType = string | ColorObject;
+
+    // Create an interface for the color mapping.
+    interface ColorsMapping {
+        [key: string]: ColorType;
+    }
+
+    // Define a class to manage the colors.
+    class ColorManager {
+        private colors: ColorsMapping;
+
+        constructor() {
+            this.colors = {
+                "programmer": "#0CC27F",
+                "uxdesigner": "#027893",
+                "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",
+            };
+        }
+
+        // Return the color for the given key or a default value.
+        getColor(key: string): ColorType {
+            return this.colors[key] || "#ccc";
+        }
+    }
+
+    // Create an instance of ColorManager.
+    const colorManager = new ColorManager();
+</script>
+
+<div class="flex gap-2" style="font-size: { !isMobile ? '0.875rem' : '2vw' };">
+    {#each Tags as tag}
+        {@const key = tag.replaceAll(" ", "").toLowerCase()}
+        {@const color = colorManager.getColor(key)}
+        {#if key.indexOf("/") < 0}
+            <!-- Single Color Badge -->
+            <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 cozette" 
+                    style="background: linear-gradient({color.rotation}, {color.color2} {color.offset}, {color.color1} {color.offset});">
+                    <span class="invert">
+                        {tag}
+                    </span>
+                </div>
+            {:else}
+                <div class="badge2 cozette" style="background-color: #ccc;">
+                    <span class="invert">
+                        {tag}
+                    </span>
+                </div>
+            {/if}
+        {/if}
+    {/each}
+</div>
+
+<style>
+    .badge2 {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: 1.25rem; /* 20px */
+        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>

src/routes/comps/Zooter.svelte

@@ -0,0 +1,258 @@
+<script lang="ts">
+  import svelteLogo from "$lib/svelteLogos/svelte-logo.png";
+  import { browser } from "$app/environment";
+  import { onDestroy, onMount } from "svelte";
+  import { ArrowBigDown } from "lucide-svelte";
+  import { fly } from "svelte/transition";
+  const buildTime = __BUILD_TIME__;
+
+  let scrollY = 0;
+  const unscrollSpeed = 100;
+  let unscrollScrollDiv: HTMLDivElement;
+  let totalScroll = 0;
+
+  let unscrollInterval: number | undefined = undefined;
+  let lastScrollTime = 0; // Used to have delay before unscrolling
+  let isBeingTouched = false; // Phone support
+  const unscrollDelay = 100;
+
+  let isLeavingAnimating = false;
+
+  // prevent direct scroll
+  let notFirstScroll = false;
+
+  let tranisitionOverlay: HTMLElement;
+
+  // Function with more scroll control, by chatgpt
+  function smoothScrollTo(targetY: number, duration: number = 500): void {
+    const startY: number = window.scrollY;
+    const diff: number = targetY - startY;
+
+    if (duration <= 0) {
+      window.scrollTo(0, targetY);
+      return;
+    }
+
+    let startTime: number | null = null;
+
+    function step(timestamp: number): void {
+      if (startTime === null) startTime = timestamp;
+      const time = timestamp - startTime;
+      const percent = Math.min(time / duration, 1);
+
+      // easeInOutQuad easing
+      const ease =
+        percent < 0.5
+          ? 2 * percent * percent
+          : -1 + (4 - 2 * percent) * percent;
+
+      window.scrollTo(0, startY + diff * ease);
+
+      if (time < duration) {
+        requestAnimationFrame(step);
+      }
+    }
+
+    requestAnimationFrame(step);
+  }
+
+  // Out animation:
+  function flyInFromTop(
+    node: HTMLElement,
+    {
+      y = -window.innerHeight,
+      duration = 400,
+      opacity = 0,
+    }: { y?: number; duration?: number; opacity?: number } = {},
+  ) {
+    const {
+      delay = 0,
+      duration: d,
+      easing = (t) => t,
+      css,
+    } = fly(node, { y, duration: d, opacity });
+
+    let start: number;
+    function step(now: number) {
+      if (!start) start = now;
+      const elapsed = now - start - delay;
+      if (elapsed < 0) return requestAnimationFrame(step);
+      const t = Math.min(elapsed / d, 1);
+      if (css) node.style.cssText = css(easing(t), 1 - easing(t));
+      if (elapsed < d) requestAnimationFrame(step);
+    }
+    requestAnimationFrame(step);
+  }
+
+  onMount(() => {
+    return; // Fuck this, I'm too lazy to fix this atm
+    totalScroll = document.documentElement.scrollHeight - window.innerHeight;
+
+    unscrollInterval = setInterval(() => {
+      // Prevents scroll to bottom on first try
+      if (
+        !notFirstScroll &&
+        scrollY > totalScroll - unscrollScrollDiv.scrollHeight
+      ) {
+        smoothScrollTo(totalScroll - unscrollScrollDiv.scrollHeight * 1.1, 0);
+
+        // Allow further scroll after delay
+        setTimeout(() => {
+          notFirstScroll = true;
+        }, 1000);
+      }
+
+      // console.log("Time with delay: " + (Date.now() - -unscrollDelay) + " Other " + lastScrollTime);
+      // console.log(isBeingTouched);
+      if (
+        !notFirstScroll ||
+        isBeingTouched ||
+        Date.now() < lastScrollTime - -unscrollDelay
+      ) {
+        // console.log("nah");
+        return;
+      }
+
+      if (totalScroll - unscrollScrollDiv.scrollHeight < scrollY) {
+        smoothScrollTo(totalScroll - unscrollScrollDiv.scrollHeight, 200);
+      }
+
+      if (totalScroll <= scrollY) {
+        console.log("Hit!");
+        // isLeavingAnimating = true;
+        flyInFromTop(tranisitionOverlay, { duration: 800 });
+      }
+    }, 10);
+  });
+
+  function onScroll() {
+    lastScrollTime = Date.now();
+    // console.log("scroll");
+  }
+
+  function onResize() {
+    totalScroll = document.documentElement.scrollHeight - window.innerHeight;
+  }
+
+  onDestroy(() => {
+    clearInterval(unscrollInterval);
+  });
+
+  export let hideOnPrint: boolean;
+</script>
+
+<svelte:window
+  bind:scrollY
+  on:scroll={() => {
+    onScroll();
+  }}
+  on:touchstart={() => {
+    isBeingTouched = true;
+  }}
+  on:touchend={() => {
+    isBeingTouched = false;
+  }}
+  on:resize={onResize}
+/>
+
+<div class="{hideOnPrint ? 'hide-on-print' : ''} w-full">
+  <!-- Keep scrolling thing -->
+  <div class="hidden h-64 w-full flex flex-col justify-center items-center">
+    <div>Keep scrolling to veiw Zhen's portfolio site!</div>
+    <div class="flex justify-center">
+      <ArrowBigDown />
+      <ArrowBigDown />
+      <ArrowBigDown />
+      <ArrowBigDown />
+    </div>
+  </div>
+
+  <div
+    class="hidden h-64 w-full flex flex-col justify-end items-center"
+    bind:this={unscrollScrollDiv}
+  >
+    <img
+      src="/images/memes/WhatDaDog.png"
+      class="w-32 h-32 object-contain"
+      alt="da dog"
+    />
+  </div>
+
+  <!-- About footer -->
+  <div
+    class="sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8"
+  >
+    <div class="flex justify-center">
+      <div class="grid gap-8 sm:grid-cols-3 items-center w-full">
+        <div class="flex flex-col items-center">
+          <span class="font-bold">© 2023-2025</span>
+          <br />
+          <span>Benjamin Dreyer</span>
+          <br />
+          <span>Oliver Schwenger</span>
+          <br />
+          <span>Sylvester Junge</span>
+          <br />
+          <span>Snorre Ettrup Altschul</span>
+          <br />
+          <span>Zhentao Wei</span>
+        </div>
+        <div class="flex flex-col items-center">
+          <h3><b>About this website</b></h3>
+          <!-- <a href="/" target="_blank">Recursion</a> -->
+          <div class="flex justify-center">
+            This website was made using <a
+              class="grid place-content-center"
+              target="_blank"
+              href="https://kit.svelte.dev/"
+            >
+              <img
+                class="pl-2"
+                src={svelteLogo}
+                style="height: 1.5rem;"
+                alt="SvelteKit logo"
+              /></a
+            >
+          </div>
+          <span
+            >Website <a
+              href="https://git.deprived.dev/DeprivedDevs/deprived-main-website"
+              target="_blank">source code</a
+            ></span
+          >
+        </div>
+        <div class="flex flex-col items-center">
+          <h3><b>Contact</b></h3>
+          <a href="mailto:zhen@deprived.dev">zhen@deprived.dev</a>
+          <div class="mt-2"></div>
+          <a
+            href="https://discord.gg/awatEEqc3M"
+            target="_blank"
+            class="social"
+          >
+            <!-- <span>Discord</span> -->
+            <img
+              src="/images/icons/discord.svg"
+              class="w-8 h-8 object-contain"
+              alt="Discord"
+            />
+          </a>
+        </div>
+      </div>
+    </div>
+    <div
+      class="flex w-full justify-center border-t border-base-100 border-dashed"
+    >
+      Last build: {buildTime} (+2 UTC)
+    </div>
+  </div>
+</div>
+
+<div
+  bind:this={tranisitionOverlay}
+  class="{isLeavingAnimating
+    ? ''
+    : 'hidden'} fixed top-0 left-0 w-screen h-screen bg-base-200"
+></div>
+<!-- {#if isLeavingAnimating}
+{/if} -->

src/routes/sveske/+page.svelte

@@ -20,14 +20,14 @@
             thumbnail_alt={"Teachable Machine"}
             download={"/portfolios/sveske/teachable_machine/teachable_machine_rapport.pdf"}
             title={"1.G - Teachable Machine: Håndtegns detektor"}
-            summary={"I dette projekt udarbejde vi en teachable machine model til at detektere forskellige håndtegn"}
+            summary={"I dette projekt udarbejdede vi en teachable machine model til at detektere forskellige håndtegn"}
         />
         <ProjectEntry
             thumbnail_url={"/portfolios/sveske/firebase/thumb.png"}
             thumbnail_alt={"Firebase"}
             download={"/portfolios/sveske/firebase/firebase_rapport.pdf"}
             title={"1.G - Firebase: Netværk scoreboard i Unity"}
-            summary={"Med brug af Firebase udviklede vi et scoreboard som synkronisere med en Firebase Data Store. Scoreboardet blev implementeret i et tidligere spil udviklet i Teknologi"}
+            summary={"Med brug af Firebase udviklede vi et scoreboard som synkroniserer med en Firebase Data Store. Scoreboardet blev implementeret i et tidligere spil udviklet i Teknologi B"}
         />
         <ProjectEntry
             thumbnail_url={"/portfolios/sveske/the_red_paper/thumb.png"}
@@ -57,6 +57,13 @@
             title={"3.G - Prolog: Rejseekspertsystem"}
             summary={"Brugte prolog programmeringsproget til at lave et ekspertsystem. Specifikt kan det give anbefalinger til rejsedestinationer ud fra en række faktorer som temperatur, økonomi, aktiviter osv."}
         />
+        <ProjectEntry
+            thumbnail_url={"/portfolios/sveske/eksamen/thumb.jpg"}
+            thumbnail_alt={"Informatik Eksamen"}
+            download={"/portfolios/sveske/eksamen/informatik_eksamen_rapport.pdf"}
+            title={"3.G - Eksamens projekt: Udvikling af opgavesystem til fysisk produkt om læringsdisplay af digital logik"}
+            summary={"Udviklede et opgavesystem i form af en app i Unity. Opgavesystemet virker i samarbejde med et fysisk produkt udviklet til eksamensprojektet i teknikfag - Digital Design og Udvikling A. Appen skal undervise computer science elever på gymnasiet om digital logik og logiske porte"}
+        />
     </div>
 </div>
 

src/routes/tools/+page.svelte

@@ -0,0 +1,53 @@
+<script>
+    import A4 from "../zhen/notes/physics/sharedComps/A4.svelte";
+    import ToolButton from "./comps/ToolButton.svelte";
+    import { BatteryMedium } from '@lucide/svelte';
+</script>
+
+<div class="flex justify-center pt-10">
+    <A4
+        bottomBorder={false}
+        bgColor={"rounded-lg bg-base-300"}
+        class="cozette text-base-content h-full"
+    >
+        <div class="p-4 flex flex-col h-full">
+            <h1 class="text-5xl font-bold">Tools (NOT FINISHED. come back in the future.)</h1>
+            <span class="w-full text-xl"
+                >These are the tools collected from different places of the
+                internet</span
+            >
+
+            <!-- Spacing -->
+            <div class="pt-14"></div>
+
+            <div class="p-4 bg-base-200 rounded-lg">
+                <h2 class="text-2xl font-bolc">MPUs/SoCs</h2>
+                <span>Whatever acronym you want lol</span>
+                <div class="grid grid-cols-3 gap-4">
+                    <ToolButton
+                        title="Sleeping battery life"
+                        desc="Calculates the battery life depending on sleep and non-sleep power usage."
+                        btnText="To calculator"
+                        toolIcon={BatteryMedium}
+                    />
+                    <!-- <ToolButton
+                        title="Sleeping battery life"
+                        desc="Calculates the battery life depending on sleep and non-sleep power usage."
+                        btnText="To calculator"
+                        toolIcon={BatteryMedium}
+                    />
+                    <ToolButton
+                        title="Sleeping battery life"
+                        desc="Calculates the battery life depending on sleep and non-sleep power usage."
+                        btnText="To calculator"
+                        toolIcon={BatteryMedium}
+                    /> -->
+                </div>
+            </div>
+
+            <div class="mt-auto align-text-bottom">
+                I if you have tool suggestions, then either create an issue, create a pull request, or send an email. I probably wont add it though, since this is free work lol.
+            </div>
+        </div>
+    </A4>
+</div>

src/routes/tools/battery-life-calculator/+page.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+    import A4 from "../../zhen/notes/physics/sharedComps/A4.svelte";
+    import { BatteryLifeCalculator } from "./pageSrc/BatteryCalc";
+    import { getMCU, type MCU_Type } from "./pageSrc/MCU_defs";
+
+    // let mathMachine = new BatteryLifeCalculator();
+
+    let useCustom: boolean = false;
+    let selectedText: string = "";
+    let selectedMcu: MCU_Type | undefined = undefined;
+    $: selectedMcu = getMCU(selectedText)
+    
+
+
+    const options = ["esp32-s3", "esp32-s3"];
+</script>
+
+<div class="flex justify-center pt-10">
+    <A4
+        bottomBorder={false}
+        bgColor={"rounded-lg bg-base-300"}
+        class="cozette text-base-content h-full"
+    >
+        <div class="p-4 flex flex-col h-full">
+            <h1 class="text-5xl font-bold">Battery life calculator</h1>
+            <span class="w-full text-xl">
+                Calculates the time a battery will last. Too lazy to explain
+                more.
+            </span>
+
+            <!-- Spacing -->
+            <div class="pt-14"></div>
+
+            <div class="p-4 bg-base-200 rounded-lg">
+                <h2 class="text-2xl font-bolc">Software</h2>
+                <div class="grid grid-cols-2 gap-4">
+                    <div class="form-control">
+                        <span class="text-sm text-slate-300 text-opacity-60"
+                            >Duration of code execution</span
+                        >
+                        <div class="join">
+                            <input
+                                type="number"
+                                class="input input-bordered  input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                            />
+                            <div
+                                class="bg-base-content bg-opacity-60 join-item grid place-content-center"
+                            >
+                                <span class="text-center pl-1 pr-2">sec</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-control">
+                        <span class="text-sm text-slate-300 text-opacity-60"
+                            >sleep time</span
+                        >
+                        <div class="join">
+                            <input
+                                type="number"
+                                class="input input-bordered input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                            />
+                            <div
+                                class="bg-base-content bg-opacity-60 join-item grid place-content-center"
+                            >
+                                <span class="text-center pl-1 pr-2">sec</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-span-full">
+                        <h2 class=" text-2xl font-bolc">Hardware</h2>
+                        <div class="flex">
+                            <div
+                                class="text-sm text-slate-300 text-opacity-60 text"
+                            >
+                                Use custom values
+                            </div>
+                            <input
+                                bind:checked={useCustom}
+                                class="ml-2 checkbox checkbox-xs my-auto"
+                                type="checkbox" 
+                            />
+                        </div>
+                    </div>
+
+                    {#if !useCustom}
+                        <div>
+                            <select
+                                bind:value={selectedText}
+                                class="select select-sm select-bordered w-56 max-w-xs"
+                            >
+                                <option disabled value="">Select a text</option>
+                                {#each options as option}
+                                    <option value={option}>{option}</option>
+                                {/each}
+                            </select>
+
+                            {#if selectedMcu != undefined && selectedMcu?.wifi != undefined}
+                                <p class="mt-4 text-lg">
+                                    wifi
+                                </p>
+                            {/if}
+                            {#if selectedMcu != undefined && selectedMcu?.wifi != undefined}
+                                <p class="mt-4 text-lg">
+                                    ble
+                                </p>
+                            {/if}
+                        </div>
+                    {:else}
+                        <div class="form-control">
+                            <span class="text-sm text-slate-300 text-opacity-60"
+                                >Duration of code execution</span
+                            >
+                            <div class="join">
+                                <input
+                                    type="number"
+                                    class="input input-bordered input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                                />
+                                <div
+                                    class="bg-base-content bg-opacity-60 join-item grid place-content-center"
+                                >
+                                    <span class="text-center pl-1 pr-2"
+                                        >sec</span
+                                    >
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-control">
+                            <span class="text-sm text-slate-300 text-opacity-60"
+                                >sleep time</span
+                            >
+                            <div class="join">
+                                <input
+                                    type="number"
+                                    class="input input-bordered input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                                />
+                                <div
+                                    class="bg-base-content bg-opacity-60 join-item grid place-content-center"
+                                >
+                                    <span class="text-center pl-1 pr-2"
+                                        >sec</span
+                                    >
+                                </div>
+                            </div>
+                        </div>
+                    {/if}
+                </div>
+            </div>
+
+            <div class="mt-auto align-text-bottom text-center">
+                Source for the calculations is at this
+                <a
+                    class="text-blue-500 underline"
+                    target="_blank"
+                    href="https://github.com/simonneutert/batterylife-calculator"
+                    >github</a
+                >
+                and the
+                <a
+                    class="text-blue-500 underline"
+                    target="_blank  "
+                    href="https://www.of-things.de/battery-life-calculator.php"
+                    >original website.</a
+                >
+                I just mearly made additions.
+            </div>
+        </div>
+    </A4>
+</div>
+
+<style>
+    /* Hide the spinner for Chrome, Safari, Edge, Opera */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    /* Hide the spinner for Firefox */
+    input[type="number"] {
+        -moz-appearance: textfield;
+    }
+</style>

src/routes/tools/battery-life-calculator/pageSrc/BatteryCalc.ts

@@ -0,0 +1,123 @@
+export class BatteryLifeCalculator {
+  timeRunSeconds: number;
+  timeSleepSeconds: number;
+  consumptionActiveMilliAmpHours: number;
+  consumptionSleepMilliAmpHours: number;
+  powerBatteryTotalMilliAmpHours: number;
+  powerBatteryBufferBeforeEmptyPercent: number;
+
+  constructor(
+    timeRunSeconds: number,
+    timeSleepSeconds: number,
+    consumptionActiveMilliAmpHours: number,
+    consumptionSleepMilliAmpHours: number,
+    powerBatteryTotalMilliAmpHours: number,
+    powerBatteryBufferBeforeEmptyPercent: number = 20
+  ) {
+    this.timeRunSeconds = timeRunSeconds;
+    this.timeSleepSeconds = timeSleepSeconds;
+    this.consumptionActiveMilliAmpHours = consumptionActiveMilliAmpHours;
+    this.consumptionSleepMilliAmpHours = consumptionSleepMilliAmpHours;
+    this.powerBatteryTotalMilliAmpHours = powerBatteryTotalMilliAmpHours;
+    this.powerBatteryBufferBeforeEmptyPercent = powerBatteryBufferBeforeEmptyPercent;
+
+    console.log(
+      "The source of this battery calc is here: https://github.com/simonneutert/batterylife-calculator\nI was too lazy to make the math myself."
+    );
+  }
+
+  // public API
+
+  milliAmpToMicroAmp(milliAmps: number): number {
+    return milliAmps * 1000;
+  }
+
+  microAmpToMilliAmp(milliAmps: number): number {
+    return milliAmps * 0.001;
+  }
+
+  calculate(): {
+    powerAveragePerHour: number;
+    runtimeHoursEstimated: number;
+    runtimeDaysEstimated: number;
+    runtimeDaysRemainingHoursEstimated: number;
+  } {
+    return {
+      powerAveragePerHour: this.powerEstimatedHourly(),
+      runtimeHoursEstimated: this.runtimeHoursEstimated(),
+      runtimeDaysEstimated: this.runtimeDaysEstimated(),
+      runtimeDaysRemainingHoursEstimated: this.runtimeDaysRemainingHoursEstimated(),
+    };
+  }
+
+  powerEstimatedHourly(): number {
+    return this.calcPowerEst(
+      this.powerRun(),
+      this.consumptionActiveMilliAmpHours,
+      this.powerSleep(),
+      this.consumptionSleepMilliAmpHours
+    );
+  }
+
+  runtimeHoursEstimated(): number {
+    return parseInt((this.powerLipo() / this.powerEstimatedHourly()).toString(), 10);
+  }
+
+  runtimeDaysEstimated(): number {
+    return parseInt((this.runtimeHoursEstimated() / 24).toString(), 10);
+  }
+
+  runtimeDaysRemainingHoursEstimated(): number {
+    return parseInt((this.runtimeHoursEstimated() % 24).toString(), 10);
+  }
+
+  // private methods
+
+  private roundOff(x: number): number {
+    return Math.round(x * 100.0) / 100.0;
+  }
+
+  private calcPowerLipo(x: number, y: number): number {
+    return parseFloat(((x * (100 - y)) / 100).toString());
+  }
+
+  private calcRuns(x: number, y: number): number {
+    return parseFloat((60 / (x + y)).toString());
+  }
+
+  private calcRunsHour(x: number, y: number): number {
+    return parseFloat((3600 / (x + y)).toString());
+  }
+
+  private calcPowerRun(x: number, y: number): number {
+    return parseFloat(((x / (x + y)) * 3600).toString());
+  }
+
+  private calcPowerSleep(x: number, y: number): number {
+    return parseFloat(((y / (x + y)) * 3600).toString());
+  }
+
+  powerLipo(): number {
+    return this.calcPowerLipo(this.powerBatteryTotalMilliAmpHours, this.powerBatteryBufferBeforeEmptyPercent);
+  }
+
+  runs(): number {
+    return this.calcRuns(this.timeRunSeconds, this.timeSleepSeconds);
+  }
+
+  runsHour(): number {
+    return this.calcRunsHour(this.timeRunSeconds, this.timeSleepSeconds);
+  }
+
+  powerRun(): number {
+    return this.calcPowerRun(this.timeRunSeconds, this.timeSleepSeconds);
+  }
+
+  powerSleep(): number {
+    return this.calcPowerSleep(this.timeRunSeconds, this.timeSleepSeconds);
+  }
+
+  private calcPowerEst(a: number, b: number, c: number, d: number): number {
+    return parseFloat(((a / 3600) * b + (c / 3600) * d).toString());
+  }
+}

src/routes/tools/battery-life-calculator/pageSrc/MCU_defs.ts

@@ -0,0 +1,63 @@
+export interface MCU_Type {
+    name: string;
+    cpu: { [key: string]: Number }; // state: power consumption
+    sleep: { [key: string]: Number };
+    wifi?: { [key: string]: Number };
+    bluetooth?: { [key: string]: Number };
+}
+
+const MCUs: MCU_Type[] = [
+    {
+        name: "esp32-s3",
+        cpu: { // mili amps
+            single_core_40MHz: 21.8,
+            dual_core_40MHz: 24.4,
+            single_core_80MHz: 42.6,
+            dual_core_80MHz: 47.3,
+            single_core_160MHz: 54.6,
+            dual_core_160MHz: 54.1,
+            single_core_240MHz: 65.9,
+            dual_core_240MHz: 81.3,
+        },
+        sleep: {
+
+        },
+        wifi: { // 
+            dBm_21: 318.2,
+            sleep: 10     
+        },
+        bluetooth: {
+            active: 100,
+            sleep: 5      
+        }
+    },
+
+    {
+        name: "esp32-c3",
+        cpu: {
+            single_core_80MHz: 22,
+            single_core_160MHz: 54.6,
+        },
+        sleep: {
+            
+        },
+        wifi: {
+            active: 110,
+            sleep: 9      
+        },
+        bluetooth: {
+            active: 90, 
+            sleep: 4      
+        }
+    }
+];
+
+export function getMCU(name: string): MCU_Type | undefined{
+    for (let i = 0; i < MCUs.length; i++) {
+        const element = MCUs[i];
+        if (element.name == name)
+            return element
+    }
+
+    return undefined;
+}

src/routes/tools/comps/ToolButton.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import type { Component } from 'svelte';
+
+    export let toolIcon: Component | undefined = undefined;
+
+    export let title: string = "Sleeping battery life";
+    export let desc: string = "Calculates the battery life depending on sleep and non-sleep power usage.";
+    export let btnText: string = "To calculator";
+    export let btnHref: string = "/tools/battery-life-calculator";
+</script>
+
+<div class="min-w-10 min-h-10 bg-base-100 rounded-lg">
+    <div class="p-4">
+        <div class="flex">
+            <div class="font-bold text-xl">{title}</div>
+            
+        </div>
+        <div class="text-sm">{desc}</div>
+
+        <div class="flex pt-4">
+            {#if toolIcon != undefined}
+            <svelte:component this={toolIcon}/>
+            {/if}
+            <a href="{btnHref}" class="btn ml-auto btn-primary btn-sm">{btnText}</a>
+        </div>
+    </div>
+</div>

src/routes/zhen/+page.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-    import TopAnimatedBackground from "./Comps/TopAnimatedBackground.svelte";
-</script>
-
-<TopAnimatedBackground/>

src/routes/zhen/Comps/AboutMe.svelte

@@ -0,0 +1,18 @@
+<div class="public-cv-container">
+    <h1 class="bottom-dotted-line">Public CVs</h1>
+    <div style="padding-left: 0.5vw; margin-top: -1vh;">
+        <b>Rev1: </b><a href="/zhen/cv/rev1?hideOnPrint=1" style="color:lightblue;">Rev1.pdf</a>
+    </div>
+</div>
+
+<style>
+    .public-cv-container {
+        padding-left: 10vw;
+        padding-top: 5vh;
+        width: 79vw;
+    }
+
+    .bottom-dotted-line {
+        border-bottom: 4px dotted rgb(178, 178, 178);
+    }
+</style>

src/routes/zhen/Comps/TopNameTextPlate.svelte

@@ -40,7 +40,7 @@
     .NamePlateText{
         /* font-family: 'CozetteVector'; */
         text-align: left;
-        font-size: 5rem;
+        font-size: 300%;
         color: rgb(225, 225, 225);
 
         border-left: 0.5rem solid rgb(88, 198, 82);
@@ -48,7 +48,7 @@
     }
 
     .NickNameText{
-        font-size: 2rem;
+        font-size: 75%;
         margin: 0;
         margin-top: -1rem;
         

src/routes/zhen/Comps/ZhenInformatikTimeline.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+    import Timeline from "../../../comps/timeline/timeline.svelte";
+    import TimelineItem from "../../../comps/timeline/timelineItem.svelte";
+</script>
+
+<Timeline style="padding: 2rem; padding-left: 3vw; padding-bottom: 5rem;">
+<TimelineItem
+    date="3.G 10/3-20234" 
+    title="Prolog Apple device recommendation"
+    desc='Et program lavet med Prolog, som finder en tilpassende Apple enhed baseret på dato udgivet og pris af enheden. <br/><br/>Link: <a href="/portfolios/alex/Informatik3g2g/Prolog-Rapport-1.pdf" style="color:lightblue;">Rapport</a>'
+    imagePath="/portfolios/sveske/prolog/thumb.png"
+    />
+<TimelineItem
+    date="3.G 3/12-2023" 
+    title="Extraordinær menneskelig sans"
+    desc='Med brug af en M5StickCPlus og en bevægelses sensor, så skabte benjamin og jeg en ekstra menneskelig sans.<br/><br/>Link: <a href="/portfolios/alex/Informatik3g2g/HumanInterface - Rapport-1.pdf" style="color:lightblue;">Rapport</a>'
+    imagePath="/portfolios/sveske/hmi/thumb.png"
+    />
+<TimelineItem
+    date="2.G 16/6-2023" 
+    title="Otakians"
+    desc='Dette projekt repræsenterer apogeeen af mine anstrengelser og stræben inden for teknologisk innovation. Det er en avanceret webapplikation konstrueret med en sofistikeret arkitektur, der omfatter HTML, CSS, C#, og javascript som fundamentale byggesten. Indlejret i dets omfangsrige struktur findes et imponerende repertoire af funktioner, herunder en grundig præsentationssektion, en dynamisk chatmodul, en omfattende FAQ-sektion og et stringent, indbygget login-system. Projektets kerneformål er at fungere som et digitalt samlingspunkt for tilhængere af anime, kendt som "weebs", hvor de kan dele, diskutere og opbygge fællesskaber om deres passion for denne japanske popkulturform. Med en sofistikeret integration af komplekse algoritmer og brugercentrerede designprincipper stræber denne hjemmeside mod at skabe en opslidende og meningsfuld oplevelse for sine brugere, og dermed forstærke forbindelserne inden for dette særlige interessefællesskab. <br/><br/>Link: <a href="/portfolios/alex/Informatik3g2g/Otakians(1).docx" style="color:lightblue;">Rapport</a>'
+    imagePath="/images/Zhen/Infomatik/Otakians.png"
+    />
+<TimelineItem
+    date="2.G 10/3-2023" 
+    title="Makey Makey: pressure plate"
+    desc="Ved anvendelse af Makey Makey har vi skabt en innovativ og funktionel trykplade af papir, tape, aluminiumsfolie og selve Makey Makey-enheden. Denne teknologiske opfindelse udgør et paradigmeskift inden for DIY-elektronik og inkorporerer en særegen symbiose af håndværksmæssig finesse og digital innovation. Ved at omfavne en konvergens af analoge og digitale teknologier demonstrerer denne opfindelse et ekstraordinært niveau af teknisk snilde og kreativ tænkning. Gennem en kompleks integration af disse elementer opnår denne trykplade ikke blot funktionalitet, men repræsenterer også en manifestation af menneskelig opfindsomhed og teknologisk fremgang. <br/><br/>Link: <a href='https://www.youtube.com/watch?v=AIUuqfbgKRw' style='color:lightblue;'>Youtube video</a><br/>Link 2: <a href='https://www.youtube.com/watch?v=tJ_N_K_kbjw' style='color:lightblue;'>Youtube video</a> <br/><br/>Link: <a href='/portfolios/alex/Informatik3g2g/PressurePlate.pdf' style='color:lightblue;'>Rapport</a>"
+    imagePath="/images/Zhen/Infomatik/PressurePlate.png"
+    />
+<TimelineItem
+    date="2.G 11/9-2022" 
+    title="Visit copenhagen"
+    desc="Dette projekt inkorporerede en mangefacetteret tilgang med adskillige elementer af gestaltloven, og det udnyttede HTML og CSS til at animere disse aspekter. Den valgte ramme, .NET Blazor, fungerede som fundamentet for implementeringen af disse avancerede visuelle og interaktive komponenter. Gennem en dybdegående anvendelse af komplekse gestaltprincipper blev en symbiotisk syntese opnået, hvilket resulterede i en dynamisk digital oplevelse, der strømlinede brugerinteraktionen og forbedrede æstetikken af det endelige produkt. <br/><br/>Link: <a href='https://youtu.be/S9Rpm12Al0Y' style='color:lightblue;'>Youtube video</a> <br/><br/>Link: <a href='/portfolios/alex/Informatik3g2g/VisitCopenhagenRapport(1).docx' style='color:lightblue;'>Rapport</a>"
+    imagePath="/images/Zhen/Infomatik/VisitCopenhagen.png"
+    />
+<TimelineItem
+    date="2.G 2022" 
+    title="Uncle roger's recipies"
+    desc="Denne sekundære webplatform, udspringende af mine digitale kreationer, udfolder sig som en kyndig panorama over de bedste 5 opskrifter præsenteret af Uncle Rogers. Udformet med pur HTML og anstrøg af CSS, emmer den af enkelhed kombineret med subtil elegance, og inkorporerer diskrete CSS-animationer for at tilføje en dynamisk dimension til brugeroplevelsen. Med en nøje sammensat struktur og en stringent implementering af webteknologier, udforsker den dybden af kulinariske inspirationer fra den anerkendte kogekunstner, alt imens den søger at fremme gastronomisk kreativitet og forfinelse.<br/><br/>Link: <a href='/portfolios/alex/Informatik3g2g/AsiatiskMad.html' style='color:lightblue;'>Rapport</a>"
+    imagePath="/images/Zhen/Infomatik/UncleRogers.png"
+    />
+<TimelineItem
+    date="2.G 2022" 
+    title="Game rankings website"
+    desc="Denne pionerende webside, skabt med hovedsageligt HTML og et minimængde af CSS, repræsenterer en banebrydende praksis i webudviklingen. Ved at begrænse brugen af CSS til et minimum og ved at undlade JavaScript, demonstrerer den en avantgarde tilgang til design og funktionalitet. Med en fokuseret brug af HTML som kerneelement til opbygning af websiden, fremhæver den vigtigheden af semantisk strukturering og tilgængelighed. Denne minimalistiske tilgang afspejler en dyb forståelse for webudviklingens essentielle principper og skaber samtidig en unik æstetik og brugeroplevelse, der inspirerer til refleksion over konventionelle praksisser inden for digital design.<br/><br/>Link: <a href='/portfolios/alex/Informatik3g2g/SpilHjemmeside.html' style='color:lightblue;'>Rapport</a>"
+    imagePath="/images/Zhen/Infomatik/FirstWebsite.png"
+    />
+<TimelineItem
+    date="1.G 2022" 
+    title="Quest for grass"
+    desc="Dette avancerede projekt udvikler et dynamisk spil i Unity-miljøet med en sofistikeret integration af en database, der skrupelløst opbevarer og manipulerer brugerens præstationer. Den benyttede database struktureres og drives af den altopslugende Google Firebase-platform, der leverer en robust og skalerbar infrastruktur til håndtering af data. Gennem en sublim kombination af komplekse algoritmer og interaktionelle mekanismer, optimeres brugeroplevelsen, og spillets dybde forøges betragteligt. Dette projekt fremhæver det symbiotiske forhold mellem teknologiske avancer og kreative visioner, idet det udforsker nye horisonter inden for spiludvikling og datamanagement. <br/><br/>Link: <a href='https://youtu.be/Vb_2U2lyVFY' style='color:lightblue;'>Youtube video</a> <br/><br/>Link: <a href='/portfolios/alex/Informatik1g/DatabaseProjektTouchGrass.docx' style='color:lightblue;'>Rapport</a>"
+    imagePath="/images/Zhen/Infomatik/QuestForGrass.png"
+    />
+<TimelineItem
+    date="1.G 2022" 
+    desc="Denne applikation, konstrueret i AppLab, agerer som en præcis katalysator, der faciliterer forståelsen af de 13 globale bæredygtighedsmål fastsat af De Forenede Nationer. Med en intuitiv brugergrænseflade og en enestående funktionalitet præsenterer den en omfattende oversigt over disse komplekse mål, hvilket muliggør en dybdegående indsigt i de multidimensionelle aspekter af global udvikling. Med en elegant integration af avancerede algoritmer og interaktive elementer guider denne app brugeren gennem et labyrintisk landskab af komplekse socioøkonomiske og miljømæssige koncepter, hvilket fremmer en dybere forståelse og engagement i bestræbelserne på at opnå en mere bæredygtig planet.<br/><br/>Link: <a href='/portfolios/alex/Informatik1g/AppLabRapport(1).docx' style='color:lightblue;'>Rapport</a>"
+    title="App lab verdensmål"
+    imagePath="/images/Zhen/Infomatik/1.G-App.png"
+    />
+<TimelineItem 
+    date="1.G 2021"
+    desc='Dette initiativ involverede implementeringen af et avanceret værktøj fra Google kendt som "teachable machine", som blev konfigureret til at identificere en række håndudtryk. Med en kompleks kombination af maskinlæringsteknikker og datadrevne algoritmer blev dette projekt realiseret med ekspertise og præcision. Ved at udnytte avancerede neurale netværk og dybdegående datasæt muliggjorde dette værktøj en dybtgående analyse af de subtile nuancer i håndgester, hvilket resulterede i en imponerende nøjagtighed og pålidelighed i genkendelsen af disse udtryk. Dette projekt repræsenterer et skridt fremad i feltet for computer vision og maskinlæring, og det illustrerer potentialet i at anvende avancerede teknologier til at løse komplekse problemer inden for menneske-maskine-interaktion. <br/><br/>Link: <a href="/portfolios/alex/Informatik1g/MachineLearningRapport.docx" style="color:lightblue;">Rapport</a>'
+    title="Machine learning: gesture recognition"
+    imagePath="/portfolios/sveske/teachable_machine/thumb.png"
+    />
+</Timeline>

src/routes/zhen/Utils/Throttle.js

@@ -1,21 +0,0 @@
-export function throttle(callback, wait) {
-    let timeoutId = null;
-    let lastExecutedTime = 0;
-  
-    return function (...args) {
-      const currentTime = Date.now();
-  
-      const execute = () => {
-        lastExecutedTime = currentTime;
-        callback.apply(this, args);
-      };
-  
-      if (currentTime - lastExecutedTime >= wait) {
-        execute();
-      } else {
-        clearTimeout(timeoutId);
-        timeoutId = setTimeout(execute, wait - (currentTime - lastExecutedTime));
-      }
-    };
-  }
-  

src/routes/zhen/Utils/Vector2.ts

@@ -7,15 +7,15 @@ export class Vector2 {
         this.y = y;
     }
 
-    Add(vec2: Vector2){
+    Add(vec2: Vector2) {
         return new Vector2(this.x + vec2.x, this.y + vec2.y);
     }
 
-    Sub(vec2: Vector2){
+    Sub(vec2: Vector2) {
         return new Vector2(this.x - vec2.x, this.y - vec2.y);
     }
 
-    Scale(mult: number){
+    Scale(mult: number) {
         return new Vector2(this.x * mult, this.y * mult);;
     }
 }

src/routes/zhen/cv/Comps/AlexWatermark.svelte

@@ -0,0 +1,19 @@
+<div class="container">
+    ALEX
+</div>
+
+<style lang="scss">
+    .container {
+        position: absolute;
+        display: grid;
+        justify-self: end;
+        vertical-align: bottom;
+        align-self: flex-end;
+        
+        // font settings
+        font-size: 80mm;
+        color: #e4e4e4;
+
+        transform: translate(32%, -32%) rotate(-90deg);
+    }
+</style>

src/routes/zhen/cv/Comps/BottomRightDecor.svelte

@@ -0,0 +1,47 @@
+<div class="container">
+    <div/>
+    <div>
+        <div>
+            Thank you! ❤
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    .container {
+        position: absolute;
+        transform: translate(40.2mm, 5mm) rotate(-45deg);
+        display: grid;
+        justify-self: end;
+        vertical-align: bottom;
+        align-self: flex-end;
+
+        z-index: 0;
+
+        > div:nth-child(1) {
+            padding-top: 5mm;
+            //border-bottom: #4472c4 dashed 2mm;
+
+            background-image: linear-gradient(to right, #4472c4 70%, rgba(255,255,255,0) 0%);
+            background-position: top;
+            background-size: 6mm 1.5mm;
+            background-repeat: repeat-x;
+        }
+
+        > div:nth-child(2) {
+            background-color: #2f5496;
+            width: 100mm;
+            height: 25mm;
+
+            // Text
+            display: grid;
+            place-content: center;
+            align-content: flex-start;
+            > div {
+                padding-top: 3.5mm;
+                color: #4a7bcf;
+                font-weight: bold;
+            }
+        }
+    }
+</style>

src/routes/zhen/cv/Comps/CombinedContacts.svelte

@@ -0,0 +1,7 @@
+<script>
+    import Contact from "./Contact.svelte";
+    import OtherContact from "./OtherContact.svelte";
+</script>
+
+<Contact/>
+<OtherContact/>

src/routes/zhen/cv/Comps/Contact.svelte

@@ -0,0 +1,76 @@
+<div class="container">
+    <div>
+        <b style="text-align:left;">
+            Contact
+        </b>
+    </div>
+    <div class="table-display">
+        <div class="table-item">
+            <div>Email</div>
+            <div>Zhen@deprived.dev</div>
+        </div>
+        <div class="table-item">
+            <div>Phone</div>
+            <div>+45 42535723</div>
+        </div>
+        <div class="table-item">
+            <div>LinkedIn</div>
+            <a href="https://www.linkedin.com/in/zhentao-wei-3a3a0a182/">Zhentao-Wei</a>
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    .container{
+        display: grid;
+        place-items: center;
+        width: 70%;
+    }
+
+    .container > div:first-child {
+        width: 100%;
+
+        /* Bottom border stripe*/
+        border-bottom: 1mm solid black;
+    }
+
+    .table-display {
+        width: 100%;
+    }
+
+    .table-item {
+        display: flex;
+        justify-items: start;
+
+        width: 100%;
+        border-bottom: 0.25mm solid #000000;
+
+        > a {
+            text-decoration: underline;
+        }
+
+        > div, > a {
+            color: #000000;
+
+            &:first-child {
+                width: 35%;
+                font-size: 4mm;
+
+                display: grid;
+                place-content: center start;
+
+                border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm;
+            }
+
+            &:nth-child(2) {
+                width: 65%;
+
+                font-size: 3.25mm;
+                display: grid;
+                place-content: center;
+
+                padding-left: 1mm;
+            }
+        }
+    }
+</style>

src/routes/zhen/cv/Comps/Education.svelte

@@ -0,0 +1,92 @@
+<script>
+    import placeholder from "$lib/zhen/cv-comps/400x400.png"
+    import NextLogo from "$lib/zhen/cv-comps/nextKbhLogo.png"
+    import SasLogo from "$lib/zhen/cv-comps/SASLogo.png"
+    import EmphasysLogo from "$lib/zhen/cv-comps/EmphasysLogo.png"
+</script>
+
+<div class="container">
+    <div>
+        <b style="text-align:left;">
+            Education
+        </b>
+    </div>
+    <div class="table">
+        <div class="table-item">
+            <img src={NextLogo} alt="NextKBH logo" width="15%"/>
+            <div>
+                <span>
+                    <b>Gymnasium/Collage - HTX</b><br>
+                    NEXT-Mediegymnasiet: Computer science<br>
+                    <i>May 2021 - Now</i>
+                </span>
+            </div>
+        </div>
+        <div class="table-item">
+            <img src={SasLogo} alt="SAS logo" width="15%"/>
+            <div>
+                <span>
+                    <b>SAS Master class</b><br>
+                    4-week project about SAS: OnDemand and SAS: Viya <br>
+                    <i>Dec 2023 - Dec 2023</i>
+                </span>
+            </div>
+        </div>
+        <div class="table-item">
+            <img src={EmphasysLogo} alt="Emphasys center logo" width="15%"/>
+            <div>
+                <span>
+                    <b>Emphasys Centre - Erasmus+</b><br>
+                    2 weeks of Unity VR <br>
+                    <i>Oct 2023 - Oct 2023</i>
+                </span>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    .container{
+        display: grid;
+        place-items: center;
+        width: 90%;
+
+        overflow: hidden;
+
+        & > div:first-child {
+            width: 100%;
+
+            /* Bottom border stripe*/
+            border-bottom: 1mm solid black;
+
+            &:first-child {
+                font-size: x-large;
+            }
+        }
+    }
+
+    .table-item {
+        padding: 2mm;
+
+        display: flex;
+        justify-items: start;
+
+        width: 100%;
+
+        &:not(:last-child) {
+            border-bottom: 0.25mm solid #000000;
+        }
+
+        & > div {
+            padding-left: 3mm;
+
+            text-align: start;
+            font-size: 4mm;
+        }
+
+        & > img {
+            border-radius: 2.5mm;
+            filter: drop-shadow(1mm 1mm 1mm #0000009d);
+        }
+    }
+</style>

src/routes/zhen/cv/Comps/Experience.svelte

@@ -0,0 +1,92 @@
+<script>
+    import placeholder from "$lib/zhen/cv-comps/400x400.png"
+    import MakerspaceLogo from "$lib/zhen/cv-comps/MakerspaceLogo.png"
+    import EposLogo from "$lib/zhen/cv-comps/EposLogo.png"
+    import KhoraLogo from "$lib/zhen/cv-comps/KhoraLogo.jpg"
+</script>
+
+<div class="container">
+    <div>
+        <b style="text-align:left;">
+            Experience
+        </b>
+    </div>
+    <div class="table">
+        <div class="table-item">
+            <img src={MakerspaceLogo} alt="NextKBH logo" width="15%"/>
+            <div>
+                <span>
+                    <b>3D printer manager</b> - Volunteer<br>
+                    Makerspace - kildevæld Kulturcenter<br>
+                    <i>Nov 2023 - Now</i>
+                </span>
+            </div>
+        </div>
+        <div class="table-item">
+            <img src={EposLogo} alt="SAS logo" width="15%"/>
+            <div>
+                <span>
+                    <b>Machine Learning Engineer</b> - Short term intern<br>
+                    Product design department - Epos<br>
+                    <i>Apr 2024 - Apr 2024</i>
+                </span>
+            </div>
+        </div>
+        <div class="table-item">
+            <img src={KhoraLogo} alt="Emphasys center logo" width="15%"/>
+            <div>
+                <span>
+                    <b>Assistant</b> - Short term intern<br>
+                    Khora Virtual Reality<br>
+                    <i>Oct 2020 - Oct 2020</i>
+                </span>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    .container{
+        display: grid;
+        place-items: center;
+        width: 90%;
+
+        overflow: hidden;
+
+        & > div:first-child {
+            width: 100%;
+
+            /* Bottom border stripe*/
+            border-bottom: 1mm solid black;
+
+            &:first-child {
+                font-size: x-large;
+            }
+        }
+    }
+
+    .table-item {
+        padding: 2mm;
+
+        display: flex;
+        justify-items: start;
+
+        width: 100%;
+        
+        &:not(:last-child) {
+            border-bottom: 0.25mm solid #000000;
+        }
+
+        & > div {
+            padding-left: 3mm;
+
+            text-align: start;
+            font-size: 4mm;
+        }
+
+        & > img {
+            border-radius: 2.5mm;
+            filter: drop-shadow(1mm 1mm 1mm #0000009d);
+        }
+    }
+</style>

src/routes/zhen/cv/Comps/LeftTopDecor.svelte

@@ -0,0 +1,50 @@
+<script>
+    import RepeatedSkills from "./RepeatedSkills.svelte";
+</script>
+
+<div class="container">
+    <div>
+        <RepeatedSkills textOverride={["Hello", "你好", "Hej"]} targetTextHeight={4} targetTextWidth={50} applyRotation={false}/>
+    </div>
+    <div/>
+</div>
+
+<style lang="scss">
+    .container {
+        position: absolute;
+        transform: translate(-31.9mm, 0mm) rotate(-45deg);
+        display: grid;
+        justify-self: start;
+        vertical-align: top;
+        align-self: flex-start;
+
+        z-index: 0;
+
+        > div:nth-child(1) {
+            //background-color: #2f559622;
+            width: 100mm;
+            height: 17.5mm;
+
+            // Text inside
+            display: grid;
+            place-content: center;
+            border: #4472c4 dotted 1mm;
+
+            &:first-child {
+                color: #4472c4;                
+                font-size: 3mm;
+                //font-weight: bold;
+            }
+        }
+        
+        > div:nth-child(2) {
+            padding-top: 5mm;
+            //border-bottom: #4472c4 dashed 2mm;
+
+            background-image: linear-gradient(to right, #4472c4 70%, rgba(255,255,255,0) 0%);
+            background-position: bottom;
+            background-size: 6mm 1.5mm;
+            background-repeat: repeat-x;
+        }
+    }
+</style>

src/routes/zhen/cv/Comps/LinkToSource.svelte

@@ -0,0 +1,51 @@
+<script>
+    import svelteLogo from "$lib/svelteLogos/svelte-logo-cutout.svg"
+</script>
+
+<div class="container">
+    <div>
+        This CV was made using <a href="https://kit.svelte.dev/"><img src={svelteLogo} alt="SvelteKit logo"/></a>
+    </div>
+    <div>
+        Sources:
+        <a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website">Gitea</a>
+        and
+        <a href="https://dev.deprived.dev/zhen/cv/rev1?hideOnPrint=1">My Website</a>
+    </div>
+</div>
+
+<style lang="scss">
+    .container {
+        z-index: 1;
+        padding-left: 2mm;
+
+        //white-space: nowrap;
+
+        color: #777777;
+
+        * a {
+            color: #3d6ddc;
+            padding-left: 1mm;
+            padding-right: 1mm;
+
+            text-decoration: underline;
+        }
+
+        div:first-child {
+            display: flex;
+            place-content: center;
+            justify-content: start;
+
+            a:nth-child(1) > img {
+                width: 5mm;
+
+                padding-left: 1mm;
+                padding-right: 1mm;
+            }
+        }
+
+        div:nth-child(2){
+            padding-bottom: 2mm;
+        }
+    }
+</style>

src/routes/zhen/cv/Comps/LinkedInQR.svelte

@@ -0,0 +1,24 @@
+<script>
+    import QRCode from "$lib/zhen/cv-comps/LinkedInQrCode.svg?raw"
+</script>
+
+<div class="container">
+    <div>LinkedIn</div>
+    <span class="qrcode">{@html QRCode}</span>
+</div>
+
+<style lang="scss">
+
+    .qrcode {
+        transform: scale(0.9);
+    }
+
+    .container {
+        display: grid;
+        place-items: center;
+
+        & * {
+            font-size: 7.5mm;
+        }
+    }
+</style>

src/routes/zhen/cv/Comps/NameAndImage.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import NamePlate from "./NamePlate.svelte";
+    import selfie from "$lib/zhen/cv-comps/zhenSelfie.jpg"
+</script>
+
+<div class="nameAndImageContainer">
+    <NamePlate/>
+    <img src={selfie} class="selfie-constraints" alt="Zhentao Wei"/>
+</div>
+
+<style>
+    .nameAndImageContainer {
+        display: grid;
+        place-items: center;
+    }
+
+    .selfie-constraints{
+        padding-top: 2.5mm;
+        
+        max-width: 65%;
+        border-radius: 5mm;
+
+        filter: drop-shadow(1mm 1mm 1mm #0000009d);
+    }
+</style>

src/routes/zhen/cv/Comps/NamePlate.svelte

@@ -0,0 +1,21 @@
+<div class="name-plate-container">
+    <span style="text-align: center;">
+        <b>
+            Zhentao Wei
+        </b><br/>
+        (He/Him)
+
+    </span>
+
+</div>
+
+<style>
+    .name-plate-container{
+        display: grid;
+        place-items: center;
+        width: 60%;
+
+        /* Bottom border stripe*/
+        border-bottom: 1mm solid black;
+    }
+</style>

src/routes/zhen/cv/Comps/OtherContact.svelte

@@ -0,0 +1,71 @@
+<div class="container">
+    <div>
+        <b style="text-align:left;">
+            Other
+        </b>
+    </div>
+    <div class="table-display">
+        <div class="table-item">
+            <div>Itch.io</div>
+            <a href="https://github.com/MagicBOTAlex">botalex.itch.io</a>
+        </div>
+        <div class="table-item">
+            <div>Github</div>
+            <a href="https://botalex.itch.io/">@MagicBOTAlex</a>
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    .container{
+        display: grid;
+        place-items: center;
+        width: 70%;
+    }
+
+    .container > div:first-child {
+        width: 100%;
+
+        /* Bottom border stripe*/
+        border-bottom: 1mm solid black;
+    }
+
+    .table-display {
+        width: 100%;
+    }
+
+    .table-item {
+        display: flex;
+        justify-items: start;
+
+        width: 100%;
+        border-bottom: 0.25mm solid #000000;
+
+        > a {
+            text-decoration: underline;
+        }
+
+        > div, > a {
+            color: #000000;
+            &:first-child {
+                width: 35%;
+                font-size: 4mm;
+
+                display: grid;
+                place-content: center start;
+
+                border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm;
+            }
+
+            &:nth-child(2) {
+                width: 65%;
+
+                font-size: 3.25mm;
+                display: grid;
+                place-content: center;
+
+                padding-left: 1mm;
+            }
+        }
+    }
+</style>

src/routes/zhen/cv/Comps/Profile.svelte

@@ -0,0 +1,31 @@
+<div class="short-profile-container">
+    <div>
+        <b style="text-align:left;">
+            About me
+        </b>
+    </div>
+    <div>
+        As a 19-year-old with a deep passion for programming and
+        technology, I am highly dedicated to everything within this field.
+        Most of my knowledge is self-taught from many places on the
+        internet. I encourage you to browse my LinkedIn, since I
+        periodically post my hobby projects on there, and my skills are
+        described further in depth.
+    </div>
+
+</div>
+
+<style>
+    .short-profile-container{
+        display: grid;
+        place-items: center;
+        width: 90%;
+    }
+
+    .short-profile-container > div:first-child {
+        width: 100%;
+
+        /* Bottom border stripe*/
+        border-bottom: 1mm solid black;
+    }
+</style>