Update +page.svelte

Centered mobile div
Added confetti
2024-10-17 21:43:32 +02:00 · 2024-10-17 21:27:31 +02:00 · 2024-10-17 21:21:51 +02:00 · 2024-10-13 17:39:54 +02:00 · 2024-10-13 17:36:09 +02:00 · 2024-10-13 17:27:11 +02:00
165 changed files with 13398 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1 @@
+engine-strict=true
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler",
+        "allowImportingTsExtensions": true
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,41 @@
+{
+	"name": "deprived-main-website",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
+	},
+	"devDependencies": {
+		"@poppanator/sveltekit-svg": "^4.2.1",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-static": "^3.0.1",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@tailwindcss/typography": "^0.5.15",
+		"@zerodevx/svelte-img": "^2.1.0",
+		"autoprefixer": "^10.4.20",
+		"daisyui": "^4.12.12",
+		"postcss": "^8.4.47",
+		"sass": "^1.77.4",
+		"svelte": "^4.2.7",
+		"svelte-check": "^3.6.0",
+		"svelte-confetti": "^1.0.0",
+		"svelte-highlight": "^7.6.0",
+		"svelte-parallax": "^0.6.0",
+		"tailwindcss": "^3.4.13",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.3",
+		"vite-plugin-svgr": "^4.2.0"
+	},
+	"type": "module",
+	"dependencies": {
+		"svelte-media-queries": "^1.6.2",
+		"svelte-particles": "^2.12.0",
+		"theme-change": "^2.5.0",
+		"tsparticles-slim": "^2.12.0"
+	}
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/src/app.d.ts
+++ b/src/app.d.ts
@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};
--- a/src/app.html
+++ b/src/app.html
@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en" data-theme="Synthwave">
+	<head>
+		<meta charset="utf-8" />
+		<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%
+
+	</head>
+
+	<div style="display: contents">%sveltekit.body%</div>
+</html>
--- a/src/comps/Utils/HorizonalStack.svelte
+++ b/src/comps/Utils/HorizonalStack.svelte
@ -0,0 +1,12 @@
+<div {...$$restProps}>
+    <slot></slot>
+</div>
+
+<style>
+    .centralize{
+        display: grid;
+        justify-content: center;
+        
+        padding: 0;
+    }
+</style>
--- a/src/comps/Utils/VerticalStack.svelte
+++ b/src/comps/Utils/VerticalStack.svelte
@ -0,0 +1,4 @@
+<!-- Just used for ease of read -->
+<div style="padding: 0;">
+    <slot></slot>
+</div>
--- a/src/comps/Utils/ZSpacer.svelte
+++ b/src/comps/Utils/ZSpacer.svelte
@ -0,0 +1,8 @@
+<div class="grow" />
+
+<style>
+    .grow{
+        display: flex;
+        flex-grow: 1;
+    }
+</style>
--- a/src/comps/timeline/timeline.svelte
+++ b/src/comps/timeline/timeline.svelte
@ -0,0 +1,15 @@
+<script lang="ts">
+    import HorizonalStack from "../Utils/HorizonalStack.svelte";
+    import TimelineItem from "./timelineItem.svelte";
+</script>
+
+<HorizonalStack {...$$restProps}>
+    <slot/>
+</HorizonalStack>
+
+<style>
+    :global(.JustifyStart){
+        display: flex;
+        justify-content: start;
+    }
+</style>
--- a/src/comps/timeline/timelineItem.svelte
+++ b/src/comps/timeline/timelineItem.svelte
@ -0,0 +1,100 @@
+<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>
+
+<MediaQuery query='(max-width: {timelineCollapseThreshhold})' bind:matches={timelineCollaped} />
+
+<div class="flexStart timelineItemContainer" style="overflow: auto;">
+    <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>
--- a/src/lib/IO/Button.svelte
+++ b/src/lib/IO/Button.svelte
@ -0,0 +1,66 @@
+<script lang="ts">
+    import { ButtonType } from "$lib/IO/ButtonType.ts";
+    import { onMount } from "svelte";
+
+    export let href : string = "#";
+    export let type : ButtonType = ButtonType.Primary;
+    let cssName : string;
+
+    const buttonTypeColors = {
+        [ButtonType.Primary]: '--primary',
+        [ButtonType.Secondary]: '--secondary',
+        [ButtonType.Accent]: '--accent',
+    };
+
+    onMount(() => {
+        cssName = buttonTypeColors[type];
+    });
+</script>
+
+<a href={href} class="button" style="--button-color: var({cssName});">
+    <div class="content">
+        <slot name="content">
+            Click Me!
+        </slot>
+    </div>
+</a>
+
+<style>
+    .button {
+        white-space: nowrap;
+        border-radius: 6px;
+        border: none;
+        background-color: var(--button-color);
+        text-decoration: none;
+
+        transition: transform 100ms ease-in-out;
+        transform: translate(0, 0);
+
+        display: flex;
+        justify-content: center;
+        font-size: 1.5em;
+
+        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
+        padding: 0.8em 4em;
+    }
+
+    .button:hover {
+        transition: transform 100ms ease-in-out;
+        transform: translate(0, -5px);
+
+        cursor: pointer;
+
+        filter: brightness(130%);
+    }
+
+    .content {
+        width: 100%;
+        height: 100%;
+
+        color: var(--text1);
+
+        display: flex;
+        justify-content: center;
+        align-content: center;
+    }
+</style>
--- a/src/lib/IO/ButtonType.ts
+++ b/src/lib/IO/ButtonType.ts
@ -0,0 +1,5 @@
+export enum ButtonType {
+    Primary,
+    Secondary,
+    Accent
+}
--- a/src/lib/app.css
+++ b/src/lib/app.css
@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/src/lib/images/DeprivedLogo.svelte
+++ b/src/lib/images/DeprivedLogo.svelte
--- a/src/lib/images/DeprivedLogo.svg
+++ b/src/lib/images/DeprivedLogo.svg
--- a/src/lib/images/HamburgerMenuIcon.svelte
+++ b/src/lib/images/HamburgerMenuIcon.svelte
@ -0,0 +1,20 @@
+<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"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:svg="http://www.w3.org/2000/svg"><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>
--- a/src/lib/posts/NewsCard.svelte
+++ b/src/lib/posts/NewsCard.svelte
@ -0,0 +1,77 @@
+<script lang="ts">
+    export let post_url : string = '404';
+    export let thumbnail_url : string = '/favicon.png';
+    export let thumbnail_alt : string = 'Picture describting the deprived devs logo';
+    export let title : string = '<title>';
+    export let summary : string = '<summary>';
+    export let creation_date : string = '<date>';
+
+    const monthNames : string[] = ["January", "February", "March", "April", "May", "June",
+                  "July", "August", "September", "October", "November", "December"];
+
+    $: human_creation_date = new Date(+creation_date * 1000);
+</script>
+
+<div class="news-card">
+    <a href=/post/{post_url}>
+        <div class="thumbnail">
+            <img src={thumbnail_url} alt={thumbnail_alt}/>
+        </div>
+        <div class="content">
+            <h3 id="title">{title}</h3>
+            <p id="summary-text">{summary}</p>
+            <p id="date">
+                {human_creation_date.getDate()}
+                {monthNames[human_creation_date.getMonth()]}
+                {human_creation_date.getFullYear()}
+            </p>
+        </div>
+    </a>
+</div>
+
+<style>
+    a {
+        text-decoration: none;
+
+        display: flex;
+        flex-direction: row;
+        gap: 15px;
+    }
+
+    .thumbnail > img {
+        object-fit: cover;
+
+        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
+        border-radius: 8px;
+
+        width: 150px;
+        height: auto;
+    }
+
+    .content {
+        flex-shrink: 2;
+
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    #title {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text2);
+    }
+
+    #summary-text {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text3);
+    }
+
+    #date {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text4);
+    }
+
+</style>
--- a/src/lib/posts/NewsVerticalCard.svelte
+++ b/src/lib/posts/NewsVerticalCard.svelte
@ -0,0 +1,79 @@
+<script lang="ts">
+    export let post_url : string = '404';
+    export let thumbnail_url : string = '/favicon.png';
+    export let thumbnail_alt : string = 'Picture describting the deprived devs logo';
+    export let title : string = '<title>';
+    export let summary : string = '<summary>';
+    export let creation_date : string = '<date>';
+
+    const monthNames : string[] = ["January", "February", "March", "April", "May", "June",
+                  "July", "August", "September", "October", "November", "December"];
+
+    $: human_creation_date = new Date(+creation_date * 1000);
+</script>
+
+<div class="news-card">
+    <a href={post_url}>
+        <div class="thumbnail">
+            <img src={thumbnail_url} alt={thumbnail_alt}/>
+        </div>
+        <div class="content">
+            <p id="date">
+                {human_creation_date.getDate()}
+                {monthNames[human_creation_date.getMonth()]}
+                {human_creation_date.getFullYear()}
+            </p>
+            <h3 id="title">{title}</h3>
+            <p id="summary-text">{summary}</p>
+        </div>
+    </a>
+</div>
+
+<style>
+    .news-card {
+        flex: 0 0 300px;
+    }
+
+    a {
+        min-width: 100%;
+        text-decoration: none;
+
+        display: flex;
+        flex-direction: column;
+    }
+
+    .thumbnail > img {
+        object-fit: cover;
+
+        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
+        border-radius: 8px;
+
+        min-width: 100%;
+        aspect-ratio: 16 / 9;
+    }
+
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    #title {
+        font-size: 22px;
+        margin: 0;
+        text-decoration: none;
+        color: var(--text2);
+    }
+
+    #summary-text {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text3);
+    }
+
+    #date {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text4);
+    }
+</style>
--- a/src/lib/posts/ShowcaseNewsCard.svelte
+++ b/src/lib/posts/ShowcaseNewsCard.svelte
@ -0,0 +1,78 @@
+<script>
+    export let post_url = '404';
+    export let thumbnail_url = '/favicon.png';
+    export let thumbnail_alt = 'Picture describting the deprived devs logo';
+    export let title = '<title>';
+    export let summary = '<summary>';
+    export let creation_date = 1710006969;
+
+    const monthNames = ["January", "February", "March", "April", "May", "June",
+                  "July", "August", "September", "October", "November", "December"];
+
+    $: human_creation_date = new Date(+creation_date * 1000);
+</script>
+
+<div class="news-card">
+    <a href=/post/{post_url} >
+        <div title={thumbnail_alt} class="thumbnail" style="background-image: url({thumbnail_url});">
+        </div>
+        <div class="content">
+            <h3 id="title">{title}</h3>
+            <p id="summary-text">{summary}</p>
+            <p id="date">{human_creation_date.getDate()} {monthNames[human_creation_date.getMonth()]} {human_creation_date.getFullYear()}</p>
+        </div>
+    </a>
+</div>
+
+<style>
+    a {
+        text-decoration: none;
+    }
+
+    .news-card {
+        display: inline-flex;
+        flex-direction: column;
+        gap: 15px;
+    }
+
+    .news-card h3 {
+        color: var(--text1);
+        margin: 0px;
+        font-size: 22px;
+    }
+
+    .thumbnail {
+        aspect-ratio: 16 / 9;
+        background-size: cover;
+        background-position: center;
+
+        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
+        border-radius: 8px;
+        margin-bottom: 15px;
+    }
+
+    .content {
+        display: flex;
+        flex-direction: column;
+
+        gap: 10px;
+    }
+
+    #title {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text1);
+    }
+
+    #summary-text {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text2);
+    }
+
+    #date {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text4);
+    }
+</style>
--- a/src/lib/svelteLogos/README.md
+++ b/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.
--- a/src/lib/svelteLogos/svelte-horizontal.png
+++ b/src/lib/svelteLogos/svelte-horizontal.png
--- a/src/lib/svelteLogos/svelte-horizontal.svg
+++ b/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>
--- a/src/lib/svelteLogos/svelte-kit-horizontal.svg
+++ b/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>
--- a/src/lib/svelteLogos/svelte-kit-logotype.svg
+++ b/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>
--- a/src/lib/svelteLogos/svelte-kit-vertical.svg
+++ b/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>
--- a/src/lib/svelteLogos/svelte-logo-cutout.svg
+++ b/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>
--- a/src/lib/svelteLogos/svelte-logo-square.png
+++ b/src/lib/svelteLogos/svelte-logo-square.png
--- a/src/lib/svelteLogos/svelte-logo-square.svg
+++ b/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>
--- a/src/lib/svelteLogos/svelte-logo.pdf
+++ b/src/lib/svelteLogos/svelte-logo.pdf
--- a/src/lib/svelteLogos/svelte-logo.png
+++ b/src/lib/svelteLogos/svelte-logo.png
--- a/src/lib/svelteLogos/svelte-logo.svg
+++ b/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>
--- a/src/lib/svelteLogos/svelte-logotype.png
+++ b/src/lib/svelteLogos/svelte-logotype.png
--- a/src/lib/svelteLogos/svelte-logotype.svg
+++ b/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>
--- a/src/lib/svelteLogos/svelte-vertical.png
+++ b/src/lib/svelteLogos/svelte-vertical.png
--- a/src/lib/svelteLogos/svelte-vertical.svg
+++ b/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>
--- a/src/lib/videos/DeprivedDevMontage.gif
+++ b/src/lib/videos/DeprivedDevMontage.gif
--- a/src/lib/zhen/cv-comps/400x400.png
+++ b/src/lib/zhen/cv-comps/400x400.png
--- a/src/lib/zhen/cv-comps/DTU_Logo.png
+++ b/src/lib/zhen/cv-comps/DTU_Logo.png
--- a/src/lib/zhen/cv-comps/EmphasysLogo.png
+++ b/src/lib/zhen/cv-comps/EmphasysLogo.png
--- a/src/lib/zhen/cv-comps/EposCvPreveiw.png
+++ b/src/lib/zhen/cv-comps/EposCvPreveiw.png
--- a/src/lib/zhen/cv-comps/EposLogo.png
+++ b/src/lib/zhen/cv-comps/EposLogo.png
--- a/src/lib/zhen/cv-comps/GrazperLogo.jpg
+++ b/src/lib/zhen/cv-comps/GrazperLogo.jpg
--- a/src/lib/zhen/cv-comps/KhoraLogo.jpg
+++ b/src/lib/zhen/cv-comps/KhoraLogo.jpg
--- a/src/lib/zhen/cv-comps/LinkedInQrCode.svg
+++ b/src/lib/zhen/cv-comps/LinkedInQrCode.svg
--- a/src/lib/zhen/cv-comps/MakerspaceLogo.png
+++ b/src/lib/zhen/cv-comps/MakerspaceLogo.png
--- a/src/lib/zhen/cv-comps/MoreProfesionalMe.jpg
+++ b/src/lib/zhen/cv-comps/MoreProfesionalMe.jpg
--- a/src/lib/zhen/cv-comps/PrimarySchoolLogo.png
+++ b/src/lib/zhen/cv-comps/PrimarySchoolLogo.png
--- a/src/lib/zhen/cv-comps/SASLogo.png
+++ b/src/lib/zhen/cv-comps/SASLogo.png
--- a/src/lib/zhen/cv-comps/nextKbhLogo.png
+++ b/src/lib/zhen/cv-comps/nextKbhLogo.png
--- a/src/lib/zhen/cv-comps/zhenSelfie.jpg
+++ b/src/lib/zhen/cv-comps/zhenSelfie.jpg
--- a/src/lib/zhen/cv-comps/zylveterSus.png
+++ b/src/lib/zhen/cv-comps/zylveterSus.png
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@ -0,0 +1,19 @@
+/*
+    * Provides post summaries to all pages. That means every page can access summaries
+    * for all posts on the website.
+*/
+
+import { type Post, posts } from './posts/posts_data';
+
+export function load() {
+    let summaries : Post[] = [];
+
+    // Sort by newest news first
+    posts.sort((a, b) => b.creation_date - a.creation_date);
+
+    posts.forEach((post) => {
+        summaries.push(post);
+    });
+
+    return { summaries };
+}
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -0,0 +1,332 @@
+<!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements -->
+<script lang="ts">
+    import "$lib/app.css";
+
+    import { fly } from 'svelte/transition';
+    import MediaQuery from 'svelte-media-queries';
+    export let hideOnPrint: boolean;
+
+    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 headerCollapse : boolean;
+
+    let navbarHidden : boolean = 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 { themeChange } from 'theme-change'
+    onMount(() => {
+        const lock = document.createElement('meta');
+        lock.name = 'darkreader-lock';
+        document.head.appendChild(lock);
+
+		themeChange(false) // false parameter is required for svelte
+    });
+</script>
+
+<!-- Detect mobile -->
+<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
+<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={headerCollapse} />
+
+<!-- Nav bar -->
+<div class="bg-base-200 p-0">
+    <header class="{hideOnPrint ? 'hide-on-print' : ''}">
+        <div class="nav-bar pr-4 bg-base-200">
+            {#if !headerCollapse}
+                <div class="desktop">
+                    <a href="/" class="nav-head">
+                        <DeprivedLogo 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" />
+					<select class="prose" data-choose-theme>
+						<option value="light">Light</option>
+						<option value="dark">Dark</option>
+						<option value="synthwave">Synthwave</option>
+						<option value="retro">Retro</option>
+						<option value="cyberpunk">Cyberpunk</option>
+						<option value="valentine">Valentine</option>
+						<option value="halloween">Halloween</option>
+						<option value="forest">Forest</option>
+						<option value="aqua">Aqua</option>
+						<option value="black">Black</option>
+						<option value="luxury">Luxury</option>
+						<option value="dracula">Dracula</option>
+						<option value="business">Business</option>
+						<option value="night">Night</option>
+						<option value="coffee">Coffee</option>
+						<option value="dim">Dim</option>
+						<option value="sunset" selected>Sunset</option>
+					</select>
+
+                    <a href="/">Home</a>
+                    <a href="https://botalex.itch.io/">Games</a>
+                    <!-- <a href="/posts">Blog</a>
+                    <a href="/about">About</a> -->
+                </div>
+            {:else}
+                <div class="collapsed">
+                    <a on:click={resetNavBar} href="/" class="nav-head">
+                        <DeprivedLogo 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}>
+                        <HamburgerMenuIcon Class="fill-base-content"/>
+                    </button>
+                </div>
+                {#if !navbarHidden}
+                    <div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
+						<select data-choose-theme>
+							<option value="light">Default</option>
+							<option value="dark">Dark</option>
+							<option value="cupcake">Cupcake</option>
+							<option value="bumblebee">Bumblebee</option>
+							<option value="emerald">Emerald</option>
+							<option value="corporate">Corporate</option>
+							<option value="synthwave">Synthwave</option>
+							<option value="retro">Retro</option>
+							<option value="cyberpunk">Cyberpunk</option>
+							<option value="valentine">Valentine</option>
+							<option value="halloween">Halloween</option>
+							<option value="garden">Garden</option>
+							<option value="forest">Forest</option>
+							<option value="aqua">Aqua</option>
+							<option value="lofi">Lofi</option>
+							<option value="pastel">Pastel</option>
+							<option value="fantasy">Fantasy</option>
+							<option value="wireframe">Wireframe</option>
+							<option value="black">Black</option>
+							<option value="luxury">Luxury</option>
+							<option value="dracula">Dracula</option>
+							<option value="cmyk">CMYK</option>
+							<option value="autumn">Autumn</option>
+							<option value="business">Business</option>
+							<option value="acid">Acid</option>
+							<option value="lemonade">Lemonade</option>
+							<option value="night">Night</option>
+							<option value="coffee">Coffee</option>
+							<option value="winter">Winter</option>
+							<option value="dim">Dim</option>
+							<option value="nord">Nord</option>
+							<option value="sunset">Sunset</option>
+						</select>
+						
+                        <a on:click={resetNavBar} href="/">Home</a>
+                        <a on:click={resetNavBar} href="https://botalex.itch.io/">Games</a>
+                        <!-- <a on:click={resetNavBar} href="/posts">Blog</a>
+                        <a on:click={resetNavBar} href="/about">About</a> -->
+                    </div>
+                {/if}
+            {/if}
+        </div>
+    </header>
+    
+    <!-- Page content -->
+    <slot />
+    
+    <!-- About footer -->
+    <footer class="{hideOnPrint ? 'hide-on-print' : ''}">
+        <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/src/branch/dev" 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>
+</div>
+
+
+<style lang="scss">
+    /* Nav bar. */
+    header {
+        display: flex;
+        justify-content: center;
+    }
+
+    header a {
+        text-decoration: none;
+    }
+
+    .nav-bar {
+        width: 100%;
+        max-width: 1400px;
+    }
+
+    .desktop {
+        width: 100%;
+        display: flex;
+        gap: 30px;
+    }
+
+    .collapsed {
+        width: 100%;
+        display: flex;
+    }
+
+    #toggle-nav {
+        background: transparent;
+        border: none;
+    }
+
+
+    .nav-list {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+
+        align-items: center;
+    }
+
+    .nav-head {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+
+    #logo-link {
+        width: 64px;
+        aspect-ratio: 1 / 1;
+    }
+
+    #logo-text {
+        font-size: 24px;
+        color: oklch(var(--bc));
+        font-family: var(--title-font);
+        margin: 0;
+
+        min-width: 200px;
+    }
+
+    .nav-spacer {
+        width: 100%;
+    }
+
+    header a {
+        display: flex;
+        align-items: center;
+
+        font-size: 22px;
+        font-family: var(--title-font);
+        // Text color
+        color: oklch(var(--bc));
+    }
+
+    /* Footer. */
+    footer {
+        margin-top: 50px;
+        padding: 25px 0;
+        background-color: oklch(var(--b3));
+
+        height: 100%;
+
+        display: flex;
+        justify-content: center;
+    }
+
+    .about-container {
+        width: 80%;
+        height: 100%;
+
+        color: oklch(var(--bc));
+
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+    }
+
+    .about-container > div {
+        align-items: center;
+        text-align: center;
+    }
+
+    .credits {
+        line-height: 2;
+    }
+
+    .contact {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .social {
+        display: flex;
+        align-content: center;
+        gap: 10px;
+    }
+
+    .social > img {
+        width: 24px;
+    }
+
+    footer h3 {
+        margin-top: 0px;
+        color: var(--text2);
+    }
+
+    footer a {
+        color: var(--text2);
+        text-decoration-line: underline;
+    }
+
+    a:hover {
+        filter: brightness(130%);
+    }
+
+    @media print {
+    .hide-on-print {
+        display: none;
+    }
+}
+</style>
+
+{#if footerCollapse}
+    <style>
+        .about-container {
+            flex-direction: column;
+            justify-content: center !important;
+            gap: 25px;
+        }
+    </style>
+{/if}
+
+{#if headerCollapse}
+    <style>
+
+    </style>
+{/if}
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@ -0,0 +1 @@
+export const prerender = true;
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -0,0 +1,168 @@
+<script lang="ts">
+    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 { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
+    import { Confetti } from "svelte-confetti"
+    import { tick } from 'svelte'
+
+
+    import BackgroundVideo from "$lib/videos/DeprivedDevMontage.gif"
+    import FrontFold from './comps/FrontFold.svelte';
+
+    const mobileThreshold : string = '600px'; // was 1000px. zhen testing
+    let mobile : boolean;
+
+    import { onMount } from 'svelte';
+
+    // Restore scroll position on mount
+    
+    let showConfetti: boolean = false;
+    function onProgressConfetti(progress: number){
+        console.log(progress);
+
+        showConfetti = !mobile && progress > 0.225 || mobile && progress > 0.32;
+    }
+</script>
+
+
+<!-- Detect mobile -->
+<MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} />
+
+<Parallax sections={2.5}>
+    <ParallaxLayer span={0.6} rate={0.2} class="pointer-events-none">
+        <div class="pointer-events-auto" style="position: relative; width: 100%; height: 100%; overflow: hidden;">
+            <img src="{BackgroundVideo}" style="width: 100%; height: 100%; object-fit: cover; filter: blur(5px) brightness(0.6);" alt="Background video"/>
+            <div class="main-title m-auto" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 2rem; color: white; padding: 1rem;">
+                <h1  style="font-size: {!mobile ? 5 : 3}rem; text-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.9); z-index: 100;">{@html !mobile ? "Deprived Devs" : "Deprived<br/>Devs"}</h1>
+                {#if mobile}
+                    <div style="width: 100px; height: 100px;"></div>
+                {/if}
+            </div>
+        </div>
+    </ParallaxLayer>
+    <ParallaxLayer offset={0.55} rate={0.3} class="bg-base-200 pointer-events-none">
+        
+    </ParallaxLayer>
+
+    <ParallaxLayer onProgress={onProgressConfetti} offset={0.75}>
+        <div class="prose flex justify-center m-auto">
+            <h1 class="main-title text-center" style="font-size: {!mobile ? 3 : 2}rem;">
+                Developers!
+            </h1>
+        </div>
+    </ParallaxLayer>
+
+    <!-- Decorative:  -->
+    <StickyLayer offset={(!mobile) ? ({ top: 0.4, bottom: 0.75 }) : ({ top: 0.4, bottom: 0.4 })} class="pointer-events-none">
+        <div class="prose font-mono pointer-events-auto  h-full" style="max-width: 100%;">
+            <div class="flex justify-center items-center h-full relative">
+                <div class="flex justify-center" style="position: absolute; top: 30vh; {!mobile ? "max-width: 35vw;" : "width: 100%;"}">
+                    {#if showConfetti}
+                    <div>
+                        <Confetti noGravity cone  amount={50} colorArray={["white"]} />
+                    </div>
+                    {/if}
+                </div>
+                <div class="grid gap-4" style="{!mobile ? "max-width: 50vw;" : ""} background: linear-gradient(to bottom, transparent 0%, oklch(var(--b2)) 5%)">
+                    <FrontFold Title="Alex / Zhen" Checked={true}>
+                        <p>Hi, I am Alex/Zhen, I'm that chinese guy.</p>
+                        <p>Here's my CV: <a href="/zhen/cv/rev2?hideOnPrint=1" style="color:lightblue;">pdf</a></p>
+                    </FrontFold>
+                    <FrontFold Title="Sveske / Benjamin">
+                        <p>Hi, I use Arch, btw.</p>
+                        <p>Here's my Linked-in: <a href="https://www.linkedin.com/in/benjamin-dreyer/" style="color:lightblue;">Linked-in</a></p>'
+                    </FrontFold>
+                    <FrontFold Title="Zylvester">
+                        <p>Hi, I am [insert text here]</p>
+                        <p>Here's a joke about recursion: <a href="/" style="color:lightblue;">recursion</a></p>
+                    </FrontFold>
+                </div>
+            </div>
+        </div>
+    </StickyLayer>
+
+    <ParallaxLayer offset={1.5} rate={0.3} class="bg-base-200 pointer-events-none" style="box-shadow: 0 -1rem 10px rgba(0, 0, 0, 0.2);" >
+        <div class="grid place-content-center place-items-center min-h-screen pointer-events-auto">
+            <article class="pt-16 prose overflow-hidden font-mono {mobile ? "px-8" : ""}">
+                <h1 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 5 : 3}rem; ">About us</h1>
+                <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 class="{!mobile ? "py-16" : "py-4"}"/> 
+
+            <div class="grid grid-flow-row gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">                
+                <div class="flex w-52 flex-col gap-4">
+                    <div class="skeleton h-32 w-full"></div>
+                    <div class="skeleton h-4 w-28"></div>
+                    <div class="skeleton h-4 w-full"></div>
+                    <div class="skeleton h-4 w-full"></div>
+                </div>
+                <div class="flex w-52 flex-col gap-4">
+                    <div class="skeleton h-32 w-full"></div>
+                    <div class="skeleton h-4 w-28"></div>
+                    <div class="skeleton h-4 w-full"></div>
+                    <div class="skeleton h-4 w-full"></div>
+                </div>
+                {#if !mobile}
+                <div class="flex w-52 flex-col gap-4">
+                    <div class="skeleton h-32 w-full"></div>
+                    <div class="skeleton h-4 w-28"></div>
+                    <div class="skeleton h-4 w-full"></div>
+                    <div class="skeleton h-4 w-full"></div>
+                </div>
+                <div class="flex w-52 flex-col gap-4">
+                    <div class="skeleton h-32 w-full"></div>
+                    <div class="skeleton h-4 w-28"></div>
+                    <div class="skeleton h-4 w-full"></div>
+                    <div class="skeleton h-4 w-full"></div>
+                </div>
+                {/if}
+            </div>
+
+            <h6 class="prose text-base-300"><b>(These will never load)</b></h6>
+        </div>
+    </ParallaxLayer>
+
+    <!-- <StickyLayer offset={{ top: 1.75, bottom: 2 }} >
+        <div class="flex justify-center prose main-title overflow-hidden">
+            <h1 style="font-size: {!mobile ? 5 : 3}rem;">About us</h1>
+        </div>
+    </StickyLayer> -->
+</Parallax>
+
+<Timeline/>
+
+<style>
+    .main-title {
+        width: 80%;
+        font-family: var(--title-font);
+    }
+</style>
+
+{#if mobile}
+    <style>
+        #news-section {
+            transition-duration: 500ms;
+            transition-property: width;
+            width: 90% !important;
+        }
+        .news-container {
+            flex-direction: column !important;
+        }
+
+        .dummy {
+            width: 0% !important;
+        }
+
+        /* #more-posts { */
+        /*     flex-grow: 1 !important; */
+        /* } */
+
+    </style>
+{/if}
+
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@ -0,0 +1 @@
+<p>This is an informative about page :) </p>
--- a/src/routes/comps/FrontFold.svelte
+++ b/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>
--- a/src/routes/games/+page.svelte
+++ b/src/routes/games/+page.svelte
@ -0,0 +1 @@
+WIP
--- a/src/routes/post/+layout.svelte
+++ b/src/routes/post/+layout.svelte
@ -0,0 +1,92 @@
+<!-- Layout for posts -->
+<script lang="ts">
+    import { type BlogData } from './+layout';
+
+    export let data : BlogData
+
+    const monthNames : string[] = ["January", "February", "March", "April", "May", "June",
+                  "July", "August", "September", "October", "November", "December"];
+    function humanDate(date : Date) : string {
+        return `${date.getDate()} ${monthNames[date.getMonth()]} ${date.getFullYear()}`;
+    }
+</script>
+
+<article>
+    <div class="body">
+        <header>
+            <img id="blog-cover-img" src={data.post.cover_img} alt={data.post.cover_alt} />
+            <h3 id="title">{data.post.title}</h3>
+            <div class="dates">
+                <span class="date">Created {humanDate(new Date(+data.post.creation_date * 1000))}</span>
+                <span class="date">Last Modified {humanDate(new Date(+data.post.modification_date * 1000))}</span>
+            </div>
+        </header>
+        <div class="content">
+            <slot />
+        </div>
+    </div>
+</article>
+
+
+<style>
+    article {
+        margin-top: 25px;
+        margin-inline: auto;
+        max-width: 1000px;
+
+        /* background: var(--background1); */
+    }
+
+    header {
+        display: flex;
+        flex-direction: column;
+
+        margin-bottom: 50px;
+    }
+
+    #blog-cover-img {
+        aspect-ratio: 16 / 9;
+        max-width: 100%;
+
+        border-radius: 0.5rem;
+    }
+
+    #title {
+        font-family: var(--title-font);
+        font-size: 36px;
+        margin: 0;
+    }
+
+    .dates {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 10px;
+    }
+
+    .date {
+        color: var(--text3);
+    }
+
+    .body {
+        margin-inline: auto;
+        max-width: 1200px;
+        padding: 25px;
+    }
+
+    .content {
+        line-height: 2;
+        font-size: 18px;
+        text-rendering: optimizeLegibility;
+    }
+
+    /* CSS for posts - child rooutes. */
+    img {
+        width: 100%;
+    }
+
+    :global(a) {
+        color: var(--text1);
+        text-decoration-line: underline;
+    }
+</style>
--- a/src/routes/post/+layout.ts
+++ b/src/routes/post/+layout.ts
@ -0,0 +1,17 @@
+import { posts, type Post } from '../posts/posts_data';
+
+export interface BlogData {
+    summaries: Post[],
+    post: Post
+}
+
+export async function load({ url, parent }) : Promise<BlogData> {
+    const { summaries } = await parent();
+    const websiteUrl = url.pathname.split('/');
+    const windowUrl = websiteUrl.pop() || websiteUrl.pop(); // Handle trailing /
+
+    return {
+        summaries: summaries,
+        post: posts.filter((post) => post.url == windowUrl)[0],
+    };
+}
--- a/src/routes/post/Post.svelte
+++ b/src/routes/post/Post.svelte
@ -0,0 +1,10 @@
+<div class="post-container">
+    <div class="post-header">
+        <slot name="title" />
+        <slot name="creation-date" />
+        <slot name="modification-date" />
+
+        <!-- the post content goes in this slot -->
+        <slot />
+    </div>
+</div>
--- a/src/routes/post/folder-icons/+page.svelte
+++ b/src/routes/post/folder-icons/+page.svelte
@ -0,0 +1,2 @@
+Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
+
--- a/src/routes/post/git-bisecting/+page.svelte
+++ b/src/routes/post/git-bisecting/+page.svelte
@ -0,0 +1,66 @@
+<script>
+    import Highlight from "svelte-highlight";
+    import { shell } from "svelte-highlight/languages";
+    import obsidian from "svelte-highlight/styles/obsidian";
+</script>
+
+<svelte:head>
+    {@html obsidian}
+</svelte:head>
+
+<p>
+Finding the specific commit that introduced a bug in your code can be frustrating,
+especially in big projects with a lot of commits. Git bisecting is a method
+used to quickly find which commit is the culprit. Git bisect works by you specifying
+a so called 'bad' commit where you know the bug occurs and a commit where you know the
+bug doesn't occur. Afterwards git will binary search it's way to find the commit
+introducing the bug.
+</p>
+<p>
+Suppose we've the following git history:
+</p>
+
+<img src="/images/posts/git-bisecting/bisect_problem.png" alt="Showing a git history, where on the left there is a 'good' commit with a couple of commits between the current commit on the right"/>
+<p>
+It could potentially contain many more commits between the known 'good' commit and the
+current one. Somewhere in the commits 1, 2, 3, 4 or the current one, a bug was
+introduced. One way to find the specific commit that introduced the bug, could
+be to check each commit starting from commit 1 then 2 then 3 ... and so on.
+This is known as a linear search, and would take very long if there are a lot
+of commits between the bad and the current.
+</p>
+<p>
+Instead git bisect comes to the rescue. Git bisect performs a
+<a href="https://en.wikipedia.org/wiki/Binary_search_algorithm" target="_blank">binary search</a>,
+which is much faster.
+To use git bisect, you must tell git to start bisecting:
+</p>
+<Highlight language={shell} code="$ git bisect start" />
+<p>
+Afterwards we mark the 'bad' commit - any commit we know the bug occurs in. In this example
+the current commit that we know is bad have the commit hash <code>c26cf8a</code>, so
+we mark the commit bad:
+</p>
+<Highlight language={shell} code="$ git bisect bad c26cf8a" />
+<p>
+After that we mark a previous commit that we know the bug doesn't occur in. In this
+example it's the 'good' commit (se picture above), which has a commit hash of <code>b34ec52</code>
+</p>
+<Highlight language={shell} code="$ git bisect good b34ec52" />
+<p>
+Now git will automatically checkout a commit somewhere in between the good and bad commit.
+Your job is now to re-build your project and test if the bug occurs. If the bug
+<b>doesn't</b> occur you report it to git:
+</p>
+<Highlight language={shell} code="$ git bisect good" />
+<p>
+However if it does occur you mark it bad:
+</p>
+<Highlight language={shell} code="$ git bisect bad" />
+<p>
+You continue to do this until git has tracked down the first bad commit, ie. the
+commit that introduced the bug.
+</p>
+
+<h2>Resources</h2>
+Git bisect man page: <a href="https://git-scm.com/docs/git-bisect">https://git-scm.com/docs/git-bisect</a>
--- a/src/routes/post/lorem/+page.svelte
+++ b/src/routes/post/lorem/+page.svelte
--- a/src/routes/post/lorem1/+page.svelte
+++ b/src/routes/post/lorem1/+page.svelte
--- a/src/routes/posts/+page.svelte
+++ b/src/routes/posts/+page.svelte
@ -0,0 +1,81 @@
+<script lang="ts">
+    import { type Post } from './posts_data';
+    import NewsVerticalCard from '$lib/posts/NewsVerticalCard.svelte';
+
+    export let data; // <- contains post data
+
+    let search : string;
+    $: regex = search ? new RegExp(search, 'i') : null;
+    $: matches = (item : Post) =>
+        regex ? regex.test(item.title) || regex.test(item.summary) : true;
+    $: matched_posts = data.summaries.filter(matches);
+</script>
+
+<div class="head">
+    <header>
+        <h1>Blog Posts</h1>
+        <input id="search" placeholder="Search Blog Posts" bind:value={search} />
+    </header>
+</div>
+
+<div class="list">
+    {#if matched_posts.length == 0}
+        <span>No Matches</span>
+    {/if}
+    {#each matched_posts as summary}
+        <NewsVerticalCard
+            post_url="/post/{summary.url}"
+            title={summary.title}
+            summary={summary.summary}
+            creation_date={summary.creation_date.toString()}
+        />
+    {/each}
+</div>
+
+<style>
+    h1 {
+        font-size: 48px;
+        font-family: var(--title-font);
+    }
+    .head {
+        width: 100%;
+        background-color: var(--primary);
+    }
+
+    header {
+        display: flex;
+        flex-wrap: wrap;
+
+        align-content: center;
+        justify-content: space-around;
+
+        padding: 0 0 20px 0;
+        margin-bottom: 25px;
+    }
+
+    #search {
+        height: 40px;
+
+        align-self: center;
+        border: none;
+        border-radius: 10px;
+        font-size: 18px;
+        line-height: 2;
+        padding: 0.5rem 0.8rem;
+        margin-top: 0px;
+
+        background-color: var(--background);
+        color: var(--text1);
+    }
+
+    .list {
+        max-width: 1500px;
+        margin-inline: auto;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 25px;
+
+        justify-content: center;
+    }
+
+</style>
--- a/src/routes/posts/posts_data.ts
+++ b/src/routes/posts/posts_data.ts
@ -0,0 +1,53 @@
+// TODO: document members
+export type Post = {
+    // Required
+    url : string,
+    cover_img : string,
+    cover_alt : string,
+    title: string,
+    summary : string,
+    creation_date : number
+    modification_date: number,
+
+    // Optional
+    // TODO: author?
+}
+
+export const posts : Post[] = [
+    {
+        url: 'git-bisecting',
+        cover_img: '/images/posts/git-bisecting/thumbnail.png',
+        cover_alt: 'Photo of a bug',
+        title: 'Tracking down bugs in your code — using git bisect',
+        summary: 'Track down which specific change introduced a bug using the binary search tool provided by git.',
+        creation_date: 1709907213,
+        modification_date: 1709907213,
+    },
+    {
+        url: 'folder-icons',
+        cover_img: '/images/posts/folder-icons/cover.png',
+        cover_alt: 'Image of folder icons being used in the editor',
+        title: 'Amazing Icons for Folders in Unity!',
+        summary: 'See how you can use Zhen\'s folder icons for Unity to boost your developer experience',
+        creation_date: 1708382491,
+        modification_date: 1708382491,
+    },
+    {
+        url: 'lorem',
+        cover_img: '/images/posts/folder-icons/cover.png',
+        cover_alt: 'Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.',
+        title: 'Lorem Ipsum !!',
+        summary: 'This is a nice exploanation on lorem ipsum latin',
+        creation_date: 1708382491,
+        modification_date: 1708382491,
+    },
+    {
+        url: 'lorem1',
+        cover_img: '/images/posts/folder-icons/cover.png',
+        cover_alt: 'Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.',
+        title: 'Idk some arcticle bruh!',
+        summary: 'Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.',
+        creation_date: 1708558377,
+        modification_date: 1708558377,
+    },
+];
--- a/src/routes/sveske/+page.svelte
+++ b/src/routes/sveske/+page.svelte
@ -0,0 +1,86 @@
+<script lang="ts">
+    import ProjectEntry from "./lib/ProjectEntry.svelte";
+</script>
+
+<div class="content">
+    <h1>Benjamin's portfolie for Informatik</h1>
+    <p>
+    Forneden kan ses en række projekter som er blevet lavet i Informatik C og efterfølgende Informatik B.
+    </p>
+    <div class="projects">
+        <ProjectEntry
+            thumbnail_url={"/portfolios/sveske/appLab/thumb.png"}
+            thumbnail_alt={"App Lab"}
+            download={"/portfolios/sveske/appLab/applab_rapport.pdf"}
+            title={"1.G - App Lab: Idle spil i browseren"}
+            summary={"Vi udviklede et idle spil i App Lab. Brugte JavaScript til at programmere spillet."}
+        />
+        <ProjectEntry
+            thumbnail_url={"/portfolios/sveske/teachable_machine/thumb.png"}
+            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 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 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"}
+            thumbnail_alt={"The Red Paper"}
+            download={"/portfolios/sveske/the_red_paper/the_red_paper_rapport.pdf"}
+            title={"2.G - HTML: Hjemmeside udviklet ud fra gestalt lovene"}
+            summary={"Udviklede en klon af \"Den Blå Avis\", som forsøger at demonstrere en række af de forskellige gestaltlove"}
+        />
+        <ProjectEntry
+            thumbnail_url={"/portfolios/sveske/makeymakey/thumb.png"}
+            thumbnail_alt={"MakyeMakey"}
+            download={"/portfolios/sveske/makeymakey/makeymakey_rapport.pdf"}
+            title={"2.G - MakeyMakey: Installation som spiller Minecraft lyde i en af skolens gange"}
+            summary={"Skulle lave en interresant installation til en lokation på skolen. Vi udviklede en sensor, som detekterede når en person gik ind på en af skolens gange med makeymakey'en og spillede grotte lyde fra Minecraft"}
+        />
+        <ProjectEntry
+            thumbnail_url={"/portfolios/sveske/hmi/thumb.png"}
+            thumbnail_alt={"HMI"}
+            download={"/portfolios/sveske/hmi/hmi_rapport.pdf"}
+            title={"3.G - Human Machine Interface: Enhed som kan signalere brugeren hvis en person er på vej ind på brugerens værelse"}
+            summary={"Brugte M5 mikrokontrolleren til at forbinde en IR bevægelsessensor. Sensoren sender beskeder over netværket til et armbånd som er bundet om brugerens håndled"}
+        />
+        <ProjectEntry
+            thumbnail_url={"/portfolios/sveske/prolog/thumb.png"}
+            thumbnail_alt={"Prolog"}
+            download={"/portfolios/sveske/prolog/prolog_rapport.pdf"}
+            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>
+
+<style>
+    .content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .projects {
+        margin-top: 25px;
+        display: flex;
+        flex-direction: column;
+        gap: 25px;
+
+        max-width: 1000px;
+    }
+</style>
+
--- a/src/routes/sveske/lib/ProjectEntry.svelte
+++ b/src/routes/sveske/lib/ProjectEntry.svelte
@ -0,0 +1,60 @@
+<script lang="ts">
+    export let download : string = '404';
+    export let thumbnail_url : string = '/favicon.png';
+    export let thumbnail_alt : string = 'Picture describting the deprived devs logo';
+    export let title : string = '<title>';
+    export let summary : string = '<summary>';
+
+</script>
+
+<div class="news-card">
+    <a href={download}>
+        <div class="thumbnail">
+            <img src={thumbnail_url} alt={thumbnail_alt}/>
+        </div>
+        <div class="content">
+            <h3 id="title">{title}</h3>
+            <p id="summary-text">{summary}</p>
+        </div>
+    </a>
+</div>
+
+<style>
+    a {
+        text-decoration: none;
+
+        display: flex;
+        flex-direction: row;
+        gap: 15px;
+    }
+
+    .thumbnail > img {
+        object-fit: cover;
+
+        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
+        border-radius: 8px;
+
+        width: 150px;
+        height: auto;
+    }
+
+    .content {
+        flex-shrink: 2;
+
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    #title {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text2);
+    }
+
+    #summary-text {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text3);
+    }
+</style>
--- a/src/routes/zhen/+page.svelte
+++ b/src/routes/zhen/+page.svelte
@ -0,0 +1,17 @@
+<script lang="ts">
+    import TopAnimatedBackground from "./Comps/TopAnimatedBackground.svelte";
+    import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
+    import ZhenInformatikTimeline from "./Comps/ZhenInformatikTimeline.svelte"
+    import AboutMe from "./Comps/AboutMe.svelte"
+</script>
+
+<Parallax sections={3} config={{ stiffness: 0.1, damping: 0.3 }}>
+    <TopAnimatedBackground/>
+    <ParallaxLayer rate={0.5} offset={0.5} style="background-color: var(--background);">
+        <AboutMe/>
+    </ParallaxLayer>
+    
+    <ParallaxLayer rate={0.5} offset={0.8} style="background-color: var(--background);">
+        <ZhenInformatikTimeline/>
+    </ParallaxLayer>
+</Parallax>
--- a/src/routes/zhen/Comps/AboutMe.svelte
+++ b/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>
--- a/src/routes/zhen/Comps/TopAnimatedBackground.svelte
+++ b/src/routes/zhen/Comps/TopAnimatedBackground.svelte
@ -0,0 +1,229 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { Vector2 } from "./../Utils/Vector2";
+    import TopNameTextPlate from "./TopNameTextPlate.svelte";
+    //import { throttle } from "./../Utils/Throttle";
+
+    import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
+
+    // Params
+    let mouseMoveScale: number = 0.25;
+    let targetTextLenght: number = 100;
+
+    // Site variables
+    let mousePos: Vector2;
+
+    // Element binded variables
+    let mouseRelativeScaled: Vector2 = new Vector2(0, 0);
+
+    let windowWidth = 0;
+    let windowHeight = 0;
+
+    let screenCenter: Vector2;
+
+    let StartPageAnimated: Element | null;
+    let windowRef: Window;
+
+    function onMouseMoved(event: MouseEvent) {
+        mousePos = new Vector2(event.clientX, event.clientY);
+
+        updateAnimation(mousePos);
+    }
+
+    function updateAnimation(mousePos: Vector2) {
+        let mouseRelativePos = mousePos.Sub(screenCenter);
+        mouseRelativeScaled = mouseRelativePos.Scale(mouseMoveScale);
+
+        //console.log(mouseRelativePos.x+"\n"+mouseRelativePos.y);
+    }
+
+    onMount(() => {
+        windowRef = window;
+
+        const updateDimensions = () => {
+            windowWidth = windowRef.innerWidth;
+            windowHeight = windowRef.innerHeight;
+
+            screenCenter = new Vector2(windowWidth / 2, windowHeight / 2);
+
+            //console.log("Window size changed: (" + windowWidth + ", " + windowHeight + ")");
+        };
+
+        updateDimensions(); // On first pass
+
+        windowRef.addEventListener("resize", updateDimensions);
+
+        const RevertToOrigin = () => {
+            if (
+                navigator.userAgent.search(/gecko/i) > 0 &&
+                StartPageAnimated !== null
+            ) {
+                StartPageAnimated.classList.add("FirefoxSmoothTranition");
+            }
+            updateAnimation(new Vector2(windowWidth / 2, windowHeight / 2));
+        };
+        document.documentElement.addEventListener("mouseleave", RevertToOrigin);
+
+        const RemoveFirefoxSmoothTranition = () => {
+            if (
+                navigator.userAgent.search(/gecko/i) > 0 &&
+                StartPageAnimated !== null
+            ) {
+                StartPageAnimated.classList.remove("FirefoxSmoothTranition");
+            }
+        };
+        document.documentElement.addEventListener(
+            "mouseenter",
+            RemoveFirefoxSmoothTranition,
+        );
+
+        return () => {
+            windowRef.removeEventListener("resize", updateDimensions);
+        };
+    });
+
+    const programmingLanguages: string[] = [
+        "C++",
+        "C#",
+        "ARDUINO",
+        "PYTHON",
+        "JAVA",
+        "JAVASCRIPT",
+        "TYPESCRIPT",
+        "HTML",
+        "CSS",
+    ];
+
+    function getRandomInt(max: number) {
+        return Math.floor(Math.random() * max);
+    }
+
+    function GrabRandomString() {
+        let outString: string = "";
+        while (outString.length < targetTextLenght) {
+            outString +=
+                programmingLanguages[
+                    getRandomInt(programmingLanguages.length)
+                ] + " ";
+        }
+
+        return outString; // At about target size
+    }
+</script>
+
+<svelte:window on:mousemove={onMouseMoved} />
+
+
+<ParallaxLayer class="StartPageContainer" rate={0.25} offset={0} span={0}>
+        <div
+            class="StartPageAnimated"
+            bind:this={StartPageAnimated}
+            style="transform: translate({mouseRelativeScaled.x}px, {mouseRelativeScaled.y}px) translateZ(0) rotate(0.001deg);"
+        >
+            {#each { length: 100 } as _, i}
+                <span class="rotate45 SkillsText">
+                    {GrabRandomString()}
+                </span>
+            {/each}
+        </div>
+    </ParallaxLayer>
+
+    <ParallaxLayer rate={0} offset={0.25} span={0}>
+        <TopNameTextPlate />
+    </ParallaxLayer>
+
+<!-- <div class="StartPageContainer">
+    <div class="TopOverlay">
+        <TopNameTextPlate/>
+    </div>
+
+    <div
+        class="StartPageAnimated"
+        id="StartPageAnimated"
+        bind:this={StartPageAnimated}
+        style="transform: translate({mouseRelativeScaled.x}px, {mouseRelativeScaled.y}px) translateZ(0) rotate(0.001deg);"
+    >
+        {#each {length: 100} as _, i}
+
+            <span
+            class="rotate45 SkillsText"
+            >
+                {GrabRandomString()}
+            </span
+        >
+        {/each}
+    </div>
+</div> -->
+
+<div id="DummyDiv" class="FirefoxSmoothTranition StartPageContainer TopOverlay" style="display: none !important;" />
+
+<style>
+    .StartPageContainer {
+        /* height: 40vh; */
+
+        background-color: burlywood;
+        overflow: hidden;
+        position: relative;
+
+        justify-content: center;
+        align-items: center;
+        display: flex;
+
+        padding: 0;
+    }
+
+    .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;
+
+        left: -25vw;
+        top: -50vh;
+
+        justify-content: center;
+        vertical-align: middle;
+        display: flex;
+
+        pointer-events: none;
+    }
+
+    .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 {
+        font-family: "CozetteVector";
+
+        text-align: start;
+        font-size: x-large;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        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 */
+    }
+</style>
--- a/src/routes/zhen/Comps/TopNameTextPlate.svelte
+++ b/src/routes/zhen/Comps/TopNameTextPlate.svelte
@ -0,0 +1,57 @@
+<script lang="ts">
+    import HorizonalStack from './../../../comps/Utils/HorizonalStack.svelte'
+</script>
+
+<div class="container">
+    <div style="flex-grow: 1;" />
+    <div class="TextContainer">
+        <span class="NamePlateText"  >
+            Zhentao Wei
+            <br/>
+            <p class="NickNameText">Alex</p>
+        </span>
+    </div>
+    <div style="flex-grow: 2;" />
+</div>
+
+<style>
+    .container{
+        width: 100%;
+        height: 100%;
+
+        align-items: center;
+        vertical-align: middle;
+        display: flex;
+    }
+
+    .TextContainer{
+        align-items: center;
+        vertical-align: middle;
+        display: flex;
+
+        /* background-color: aliceblue; */
+        background-color: rgba(45, 45, 45, 0.645);
+        padding: 0.75rem 1rem;
+        border-radius: 20px;
+
+        backdrop-filter: blur(1px);
+    }
+
+    .NamePlateText{
+        /* font-family: 'CozetteVector'; */
+        text-align: left;
+        font-size: 300%;
+        color: rgb(225, 225, 225);
+
+        border-left: 0.5rem solid rgb(88, 198, 82);
+        padding-left: 1rem;
+    }
+
+    .NickNameText{
+        font-size: 75%;
+        margin: 0;
+        margin-top: -1rem;
+        
+        color: rgb(99, 99, 99);
+    }
+</style>
--- a/src/routes/zhen/Comps/ZhenInformatikTimeline.svelte
+++ b/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>
--- a/src/routes/zhen/Utils/Throttle.js
+++ b/src/routes/zhen/Utils/Throttle.js
@ -0,0 +1,21 @@
+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));
+      }
+    };
+  }
+  
--- a/src/routes/zhen/Utils/Vector2.ts
+++ b/src/routes/zhen/Utils/Vector2.ts
@ -0,0 +1,21 @@
+export class Vector2 {
+    x: number;
+    y: number;
+
+    constructor(x: number, y: number) {
+        this.x = x;
+        this.y = y;
+    }
+
+    Add(vec2: Vector2){
+        return new Vector2(this.x + vec2.x, this.y + vec2.y);
+    }
+
+    Sub(vec2: Vector2){
+        return new Vector2(this.x - vec2.x, this.y - vec2.y);
+    }
+
+    Scale(mult: number){
+        return new Vector2(this.x * mult, this.y * mult);;
+    }
+}
--- a/src/routes/zhen/cv/Comps/AlexWatermark.svelte
+++ b/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>
--- a/src/routes/zhen/cv/Comps/BottomRightDecor.svelte
+++ b/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>
--- a/src/routes/zhen/cv/Comps/CombinedContacts.svelte
+++ b/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/>
--- a/src/routes/zhen/cv/Comps/Contact.svelte
+++ b/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>
--- a/src/routes/zhen/cv/Comps/Education.svelte
+++ b/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>
--- a/src/routes/zhen/cv/Comps/Experience.svelte
+++ b/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>
--- a/src/routes/zhen/cv/Comps/LeftTopDecor.svelte
+++ b/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>
--- a/src/routes/zhen/cv/Comps/LinkToSource.svelte
+++ b/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>
--- a/src/routes/zhen/cv/Comps/LinkedInQR.svelte
+++ b/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>
--- a/src/routes/zhen/cv/Comps/NameAndImage.svelte
+++ b/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>
--- a/src/routes/zhen/cv/Comps/NamePlate.svelte
+++ b/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>
--- a/src/routes/zhen/cv/Comps/OtherContact.svelte
+++ b/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>
--- a/src/routes/zhen/cv/Comps/Profile.svelte
+++ b/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>
--- a/src/routes/zhen/cv/Comps/RepeatedSkills.svelte
+++ b/src/routes/zhen/cv/Comps/RepeatedSkills.svelte
@ -0,0 +1,62 @@
+<script lang="ts">
+    // Width of num chars and height nom of chars
+    export let targetTextWidth: number;
+    export let targetTextHeight: number;
+
+    export let applyRotation: boolean = true;
+
+    export let textOverride: string[] | undefined = undefined;
+
+    // Assign default value if textOverride is undefined
+    let repeatingText : string[] = textOverride ?? [
+        "C++",
+        "C#",
+        "ARDUINO",
+        "PYTHON",
+        "JAVA",
+        "JAVASCRIPT",
+        "TYPESCRIPT",
+        "HTML",
+        "CSS",
+    ];
+
+    function getRandomInt(max: number) {
+        return Math.floor(Math.random() * max);
+    }
+
+    function GrabRandomString() {
+        let outString: string = "";
+        while (outString.length < targetTextWidth) {
+            outString +=
+                repeatingText[
+                    getRandomInt(repeatingText.length)
+                ] + " ";
+        }
+
+        return outString; // At about target size
+    }
+</script>
+
+<div {...$$restProps}>
+    {#each { length: targetTextHeight } as _, i}
+        <span class="{applyRotation ? "rotate45" : ""} SkillsText">
+            {GrabRandomString()}
+        </span>
+    {/each}
+</div>
+
+<style>
+    .SkillsText {
+        text-align: start;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        white-space: nowrap;
+
+        width: 2rem;
+    }
+
+    .rotate45 {
+        transform: rotate(-45deg);
+    }
+</style>
--- a/src/routes/zhen/cv/Comps/ShortProfile.svelte
+++ b/src/routes/zhen/cv/Comps/ShortProfile.svelte
@ -0,0 +1,29 @@
+<div class="short-profile-container">
+    <div>
+        <b style="text-align:left;">
+            Short profile
+        </b>
+    </div>
+    <div>
+        Student at NEXT-Copenhagen
+        Mediagymnasium and
+        volunteer at Kildevæld
+        Makerspace.
+    </div>
+
+</div>
+
+<style>
+    .short-profile-container{
+        display: grid;
+        place-items: center;
+        width: 70%;
+    }
+
+    .short-profile-container > div:first-child {
+        width: 100%;
+
+        /* Bottom border stripe*/
+        border-bottom: 1mm solid black;
+    }
+</style>
--- a/src/routes/zhen/cv/CompsRev2/AlexWatermark.svelte
+++ b/src/routes/zhen/cv/CompsRev2/AlexWatermark.svelte
@ -0,0 +1,23 @@
+<script>
+export let Style = "";
+</script>
+
+<div class="container" style="{Style}">
+    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>
--- a/src/routes/zhen/cv/CompsRev2/BiggestFlex.svelte
+++ b/src/routes/zhen/cv/CompsRev2/BiggestFlex.svelte
@ -0,0 +1,27 @@
+<div class="short-profile-container">
+    <div>
+        <b style="text-align:left;">
+            Biggest flex
+        </b>
+    </div>
+    <div>
+        Me and my small group of devs has won each and every gamejam, which we have participated in. <br/>
+        <h1 style="font-size: 0.75rem; color: grey;">*Gamejams that had competitions.</h1>
+    </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>
--- a/src/routes/zhen/cv/CompsRev2/BottomRightDecor.svelte
+++ b/src/routes/zhen/cv/CompsRev2/BottomRightDecor.svelte
@ -0,0 +1,51 @@
+<script>
+    export let Style = "";
+</script>
+
+<div class="container" style="{Style}">
+    <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>
--- a/src/routes/zhen/cv/CompsRev2/CombinedContacts.svelte
+++ b/src/routes/zhen/cv/CompsRev2/CombinedContacts.svelte
@ -0,0 +1,7 @@
+<script>
+    import Contact from "./Contact.svelte";
+    import OtherContact from "./OtherContact.svelte";
+</script>
+
+<Contact/>
+<OtherContact/>
--- a/src/routes/zhen/cv/CompsRev2/Contact.svelte
+++ b/src/routes/zhen/cv/CompsRev2/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>
--- a/src/routes/zhen/cv/CompsRev2/Education.svelte
+++ b/src/routes/zhen/cv/CompsRev2/Education.svelte
@ -0,0 +1,63 @@
+<script>
+    import placeholder from "$lib/zhen/cv-comps/400x400.png"
+    import DTU_Logo from "$lib/zhen/cv-comps/DTU_Logo.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"
+
+    import IconAndText2 from "./IconAndText2.svelte"
+</script>
+
+<div class="container">
+    <div>
+        <b style="text-align:left;">
+            Education
+        </b>
+    </div>
+    <div class="imagesContainer flex justify-center p-2 gap-4" id="balls">
+        <IconAndText2 logo={DTU_Logo}>
+            <b>DTU</b><br/>
+            <p style="font-size: 0.6rem;">
+                Artificial intelligence
+            </p>
+        </IconAndText2>
+        <IconAndText2 logo={NextLogo}>
+            <b>Next</b><br/>
+            <p style="font-size: 0.6rem;">
+                Computer science
+            </p>
+        </IconAndText2>
+        <IconAndText2 logo={SasLogo}>
+            <b>Master class</b><br/>
+            <p style="font-size: 0.6rem;">
+                SAS Programming
+            </p>
+        </IconAndText2>
+        <IconAndText2 logo={EmphasysLogo}>
+            <b>Emphasys center</b><br/>
+            <p style="font-size: 0.6rem;">
+                VR development
+            </p>
+        </IconAndText2>
+    </div>
+</div>
+
+<style lang="scss">
+    .container{
+        display: grid;
+        place-items: center;
+        width: 90%;
+
+        > div:first-child {
+            border-bottom: black 1mm solid;
+            width: 100%;
+        }
+    }
+
+    .imagesContainer {
+        > img {
+            border-radius: 5mm;
+            filter: drop-shadow(1mm 1mm 1mm #0000009d);
+        }
+    }
+</style>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
BOTAlex	73c366e0f0	Update +page.svelte	2024-10-17 21:43:32 +02:00
BOTAlex	046239e1a0	Centered mobile div	2024-10-17 21:27:31 +02:00
BOTAlex	beb02ef577	Added confetti	2024-10-17 21:21:51 +02:00
BOTAlex	55ab4d342a	added zyl sussy	2024-10-13 17:39:54 +02:00
BOTAlex	d718fde866	rev2 done	2024-10-13 17:36:09 +02:00
BOTAlex	fa5deb7985	rev2 almost finished	2024-10-13 17:27:11 +02:00
BOTAlex	8678c084e8	My CV rev2 progress backup	2024-10-13 16:10:04 +02:00
BOTAlex	2e7a0d2a91	changed default theme	2024-10-13 14:56:45 +02:00
BOTAlex	2feaecc54c	Added theme selector	2024-10-12 05:11:55 +02:00
BOTAlex	1f77e03da2	Made my info showen, because im cool	2024-10-12 04:48:56 +02:00
BOTAlex	1c260e5b8f	Added some placeholder items	2024-10-12 04:44:37 +02:00
BOTAlex	f1d32c7316	Added a small "about us section"	2024-10-12 04:31:19 +02:00
BOTAlex	ba58ba5f59	reworked some backend things	2024-10-12 02:05:37 +02:00
BOTAlex	e546b1945d	Complete overhaul of deprived website	2024-10-11 06:20:57 +02:00
BOTAlex	ec1ff4ad57	Started overhaul of website. Currently still in progress	2024-10-09 11:48:06 +02:00
BOTAlex	04202dd936	Updated npm and installed daisyUI and tailwind	2024-10-09 11:32:22 +02:00
BOTAlex	ac789d8a40	Speedran linkedin portfolio banner	2024-06-12 07:26:18 +02:00
BOTAlex	8b7210f603	Accidentally sent out an old link. So this is here for a temp	2024-06-12 06:56:36 +02:00
BOT Alex	9460d8c04a	FORGOT ugh	2024-06-11 20:45:40 +02:00
BOTAlex	d5fb1c36a1	Update +page.svelte	2024-06-11 16:34:44 +02:00
BOTAlex	5c6d608d56	Made cv as general cv	2024-06-11 16:11:53 +02:00
BOTAlex	62e803868c	Fixed everything on the left side being converted into image	2024-06-11 00:50:26 +02:00
BOTAlex	94d3d722ae	Disables the dark reader	2024-06-10 14:24:41 +02:00
BOTAlex	a2c00eb098	MORE DISCORD EMBEDDIG!	2024-06-10 14:14:52 +02:00
BOTAlex	6878d2f67a	Testing discord embedding	2024-06-10 14:03:35 +02:00
BOTAlex	fe24a60314	Stupid	2024-06-10 13:56:55 +02:00
BOTAlex	510ec3ab9b	Added linked to contacts	2024-06-10 07:32:02 +02:00
BOTAlex	952cfa28bf	Added guide for saving as pdf	2024-06-10 07:26:55 +02:00
BOTAlex	d6de99486c	removed debug print	2024-06-10 06:56:35 +02:00
BOTAlex	bd4124cd83	I think my CV done!	2024-06-10 06:55:08 +02:00
BOTAlex	e6b2d05463	Added a little dash of spacing	2024-06-10 04:28:32 +02:00
BOTAlex	718dd4f65a	Added shadow to images	2024-06-10 04:26:00 +02:00
BOTAlex	1bef85049e	Renamed folder "CVs" to "cv"	2024-06-10 04:19:22 +02:00
BOT Alex	74ed2460b3	Progress in polishing	2024-06-08 15:53:42 +02:00
BOTAlex	7c01dcef6f	all HTML done. Need css polishing though	2024-06-08 04:04:25 +02:00
BOTAlex	2a7085d4ca	Added experience. now only missing details	2024-06-07 23:44:39 +02:00
BOTAlex	cf041b8c89	Started on profile. Not done	2024-06-06 03:50:14 +02:00
BOTAlex	6e78a6220b	Added education	2024-06-06 03:42:25 +02:00
BOTAlex	defabaeade	QR code done	2024-06-06 01:29:44 +02:00
BOTAlex	87b2af3118	Added contacts to my cv	2024-06-06 00:09:49 +02:00
BOTAlex	41a6bb66b7	Added short profile	2024-06-05 16:31:35 +02:00
BOTAlex	76cba0b60d	Updated packages and noprint now working better	2024-06-05 05:10:02 +02:00
BOTAlex	23ade8d085	Big progress on personal cv from pdf to html	2024-06-05 04:32:16 +02:00
BOTAlex	88a86fe2b0	Added reports to each entroy. WE GOOOD	2024-05-19 23:16:36 +02:00
Sveske_Juice	08f8621ec3	merge zhens	2024-05-19 17:36:50 +02:00
Sveske_Juice	c258d26abf	exam informatik portfolie	2024-05-19 17:32:36 +02:00
BOT Alex	7785cfeb7b	Merge branch 'dev-Zhen' into dev	2024-04-11 15:54:47 +02:00
BOT Alex	b19050aae1	Less bouncy	2024-04-11 15:54:26 +02:00
BOTAlex	2fafda2ce7	Timeline strip better looking	2024-04-07 06:03:44 +02:00
BOTAlex	f3289e6a0a	Fixed my images	2024-04-07 06:02:02 +02:00
BOTAlex	56e27d284f	Merge branch 'dev-sveske' into dev	2024-04-07 05:57:26 +02:00
BOTAlex	9ca3336059	Finished infomatik website	2024-04-07 05:56:22 +02:00
Sveske_Juice	fbbb3ac1f7	simple site that displays projects	2024-04-07 01:09:00 +02:00
Sveske_Juice	dc6a8b7ecc	import all projects from informatik	2024-04-07 01:08:42 +02:00
BOTAlex	90f0e40ddf	[Sync] I forgor	2024-04-04 01:46:20 +02:00
BOT Alex	e19bc385a1	[Sync] Continue on timeline	2024-04-03 17:56:31 +02:00
BOT Alex	172c49f72e	[Sync] started on timeline and added improvements for utils	2024-04-02 20:20:38 +02:00
BOTAlex	1f5f7a3777	[Sync] Starting to use parallex again	2024-04-02 18:13:54 +02:00
BOTAlex	041e2935c7	Revert "Progress sync" This reverts commit `359018746c`.	2024-03-31 21:49:37 +02:00
BOT Alex	359018746c	Progress sync	2024-03-31 21:48:43 +02:00
BOT Alex	73dc865900	Fixed not supported text-wrap problem	2024-03-31 17:18:58 +02:00
BOTAlex	72e5b2071a	Firefox patch patched	2024-03-31 07:36:35 +02:00
BOTAlex	878c1f6b5f	Bounce back on mouse leave. Firefox is garbage	2024-03-31 07:32:28 +02:00
BOTAlex	c3a0c735fa	Bounce back to center if mouse leave	2024-03-31 07:26:15 +02:00
BOTAlex	b444948903	Fixed firefox, because of firefox limitation	2024-03-31 07:22:04 +02:00
BOTAlex	7134f79809	Added a name plate for me	2024-03-31 06:41:56 +02:00
BOTAlex	3d54793847	Made text not interactable	2024-03-31 05:31:28 +02:00
BOTAlex	8738a77a4e	Added text at background	2024-03-31 05:24:19 +02:00
BOTAlex	e75b6358ef	ZhenPort: Fixed a bug	2024-03-31 03:50:29 +02:00
BOTAlex	8ed6d26c40	Better Zhen animation	2024-03-31 01:02:29 +01:00
BOTAlex	03cfd5a617	Better animated Zhen Site	2024-03-30 16:04:44 +01:00
BOTAlex	e79408b9bc	Started on zhen portfolio with animation	2024-03-29 16:26:02 +01:00
BOT Alex	d2b4e839c9	Removed margin from body	2024-03-18 09:04:44 +01:00
BOT Alex	be35022ed2	Create zhen.svelte	2024-03-11 09:07:55 +01:00
Sveske_Juice	bb564a53d1	fix button txt decoration	2024-03-09 18:40:15 +01:00
Sveske_Juice	65cc1f52d9	Merge Zhens med Sveske	2024-03-09 18:37:12 +01:00
Sveske_Juice	a46702de0a	git bisect blog post	2024-03-09 18:33:40 +01:00
Sveske_Juice	3f47b79603	import code highlight lib	2024-03-09 17:36:13 +01:00
BOTAlex	76e57d82c5	Started on timeline	2024-02-27 10:26:04 +01:00
Sveske_Juice	3d36a59d36	defualt post layout	2024-02-26 20:50:00 +01:00
Sveske_Juice	110720ea59	Get post data associated with current blog post being read	2024-02-26 20:06:38 +01:00
Sveske_Juice	550b1410e3	hamburger transition	2024-02-25 22:35:31 +01:00
Sveske_Juice	1422b93fcd	fix hamburger menu	2024-02-25 22:29:36 +01:00
Sveske_Juice	2bc072e4b3	Simple responsive nav bar	2024-02-25 22:22:15 +01:00
Sveske_Juice	fc160a23fd	footer responsive	2024-02-25 20:13:13 +01:00
Sveske_Juice	21428cd03e	Simple footer	2024-02-24 01:36:25 +01:00
Sveske_Juice	3bb2b0ba31	blog post header align	2024-02-24 00:36:18 +01:00
Sveske_Juice	7734fb45f5	fix button collider	2024-02-24 00:29:23 +01:00
Sveske_Juice	5be1a80ff4	fix post center	2024-02-23 21:32:02 +01:00
Sveske_Juice	b6b1f5ecfc	/post page styled	2024-02-23 21:27:29 +01:00
Sveske_Juice	56304e0ca5	news post hover	2024-02-23 20:13:31 +01:00
Sveske_Juice	14c9a24402	news header responsive	2024-02-23 19:35:39 +01:00
Sveske_Juice	e07cd844db	more posts button	2024-02-23 19:29:49 +01:00
Sveske_Juice	547063bfc0	color palette update	2024-02-23 19:29:38 +01:00
Sveske_Juice	4d43f20a9c	gotobed zz	2024-02-22 03:04:32 +01:00
Sveske_Juice	81ffeaa780	Sort by newest news & display human readable date	2024-02-22 00:59:46 +01:00
Sveske_Juice	c7fb3f7945	Responsive news (+ import svelte-media-queries lib)	2024-02-22 00:46:51 +01:00
Sveske_Juice	b6f8ef8f37	Update /post to use news card component	2024-02-20 21:09:53 +01:00
Sveske_Juice	8b8b81f3d1	Made a 'pretty' news section on the main page for the latest news	2024-02-20 21:05:42 +01:00
Sveske_Juice	8b533b296c	Global access to post summaries for all posts on site	2024-02-20 01:08:58 +01:00
Sveske_Juice	a0106369c9	Load post data/summary into /post	2024-02-20 00:23:00 +01:00
Sveske_Juice	8457f32dd5	SSG setup	2024-02-19 19:55:13 +01:00
Sveske_Juice	773645f5be	Organize stylesheets and themes	2024-02-19 17:33:34 +01:00
Sveske_Juice	0f4764052f	Stylesheet themes	2024-02-15 02:08:09 +01:00
Sveske_Juice	f5bc1db8f1	Title	2024-02-15 01:12:51 +01:00
Sveske_Juice	718788bb0a	Add CozetteVector v.1.23.2	2024-02-15 01:12:42 +01:00
Sveske_Juice	9eae4e8d11	Barebones sveltekit setup	2024-02-14 23:34:30 +01:00
				`@ -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>
				`@ -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>
				`@ -0,0 +1 @@`
				`<p>This is an informative about page :) </p>`
				`@ -0,0 +1,2 @@`
				Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.