deprecated some old things

src/routes/cv/+page.svelte

@@ -0,0 +1,322 @@
+<script lang="ts">
+  // Left side
+  import NameAndImage from "./comps/NameAndImage.svelte";
+  import ShortProfile from "./comps/ShortProfile.svelte";
+  import CombinedContacts from "./comps/CombinedContacts.svelte";
+  import LinkedInQR from "./comps/LinkedInQR.svelte";
+
+  // Right side
+  import Profile from "./comps/Profile.svelte";
+  import Education from "./comps/Education.svelte";
+  import Experience from "./comps/Experience.svelte";
+  import BiggestFlex from "./comps/BiggestFlex.svelte";
+  import TableOfProjects from "./comps/TableOfProjects.svelte";
+
+  // Decorations
+  import LeftTopDecor from "./comps/LeftTopDecor.svelte";
+  import BottomRightDecor from "./comps/BottomRightDecor.svelte";
+  import AlexWatermark from "./comps/AlexWatermark.svelte";
+  import RepeatedSkills from "./comps/RepeatedSkills.svelte";
+
+  // Discord embed
+  import preveiwImage from "$lib/zhen/cv-comps/EposCvPreveiw.png";
+
+  // Print detection setup
+  import { onMount } from "svelte";
+  onMount(() => {
+    // Check if the query parameter exists in the URL
+    const urlParams = new URLSearchParams(window.location.search);
+    const hideOnPrintParam = urlParams.get("hideOnPrint");
+
+    // If the query parameter is not detected, reload the page with the parameter added
+    if (!hideOnPrintParam) {
+      window.location.href = `${window.location.href}?hideOnPrint=1`;
+    }
+  });
+
+  function getFormattedDate(): string {
+    const date = new Date();
+    const day = String(date.getDate()).padStart(2, "0");
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const year = date.getFullYear();
+
+    return `${day}-${month}-${year}`;
+  }
+</script>
+
+<title>Zhentao Wei's CV {getFormattedDate()}</title>
+<meta content="Zhentao Wei's CV" property="og:title" />
+<meta
+  content="This CV is made completely with svelte + html + css + js"
+  property="og:description"
+/>
+<meta content={preveiwImage} property="og:image" />
+<meta content="#bdd6ee" data-react-helmet="true" name="theme-color" />
+
+<div class="cv-info-container hide-on-print">
+  <div>
+    Under here is my CV rev1 for an application made entirely in HTML and CSS.
+    The page is designed to be saved as PDF. This can be done by pressing <div
+      class="keyboard-key"
+    >
+      P
+    </div>
+    +
+    <div class="keyboard-key">CTRL</div>
+    , then set scaling to 100% and no margins. Lastly, select save to PDF or print.
+    <br />
+    <br />
+    I have to sadly recommend chrome for this process. Firefox somehow messes with
+    the quality of the PDF :(
+  </div>
+</div>
+
+<div class="NotoSans cv-config cv-container-container include-in-print">
+  <div class="cv-container sections decorations">
+    <div id="left-section" class="bg-grid-cv">
+      <LeftTopDecor />
+      <BottomRightDecor Style="pointer-events: none;" />
+      <div
+        class="absolute rotate-12 width-[10cm] h-full right-[15cm]"
+        style="background-color: #bdd6ee"
+      ></div>
+      <div class="text-[var(--left-text-color)] pointer-events-none">
+        <div
+          class="pointer-events-auto flex flex-col justify-center w-full items-center"
+        >
+          <NameAndImage />
+          <div class="py-2"></div>
+          <ShortProfile />
+          <div class="py-2"></div>
+          <CombinedContacts />
+          <div class="py-2"></div>
+          <LinkedInQR />
+        </div>
+      </div>
+    </div>
+    <div id="leftSectionSeperator"></div>
+    <div id="right-section" class="text-[var(--right-text-color)]">
+      <AlexWatermark Style="pointer-events: none;" />
+      <div id="TopRightSkillsText">
+        <RepeatedSkills
+          class="cozette-force"
+          targetTextHeight={30}
+          targetTextWidth={75}
+        />
+      </div>
+      <div>
+        <Profile />
+        <BiggestFlex />
+        <TableOfProjects />
+        <Experience />
+        <Education />
+      </div>
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .cv-config * {
+    --left-text-color: #eeeeee;
+    --left-line-color: #999999;
+
+    --left-decor-text-color: #eeeeee;
+    --left-decor-line-color: #999999;
+
+    --qr-color: #999999;
+
+    --left-grid-line-color: #ffffff;
+    --left-grid-bg-color: #000000;
+    --left-grid-opacity: 0.1;
+    --left-grid-size: 10px;
+
+    --right-text-color: #333333;
+  }
+
+  .corner-border-container {
+    background-color: var(--left-grid-bg-color);
+    background-image:
+      linear-gradient(
+        var(--left-decor-line-color),
+        var(--left-decor-line-color)
+      ),
+      linear-gradient(
+        var(--left-decor-line-color),
+        var(--left-decor-line-color)
+      ),
+      linear-gradient(
+        var(--left-decor-line-color),
+        var(--left-decor-line-color)
+      ),
+      linear-gradient(
+        var(--left-decor-line-color),
+        var(--left-decor-line-color)
+      );
+    background-size:
+      30px 4px,
+      /* top-left horizontal */ 4px 30px,
+      /* top-left vertical */ 30px 4px,
+      /* bottom-right horizontal */ 4px 30px; /* bottom-right vertical */
+    background-repeat: no-repeat;
+    background-position:
+      top left,
+      top left,
+      bottom right,
+      bottom right;
+  }
+
+  .bg-grid-cv {
+    background:
+      linear-gradient(
+        -90deg,
+        rgba(255, 255, 255, var(--left-grid-opacity)) 1px,
+        transparent 1px
+      ),
+      linear-gradient(
+        rgba(255, 255, 255, var(--left-grid-opacity)) 1px,
+        transparent 1px
+      ),
+      var(--left-grid-line-color);
+    background-size:
+      var(--left-grid-size) var(--left-grid-size),
+      var(--left-grid-size) var(--left-grid-size),
+      80px 80px,
+      80px 80px,
+      80px 80px,
+      80px 80px,
+      80px 80px,
+      80px 80px;
+    background-color: var(--color-base-100);
+  }
+
+  .cv-info-container {
+    height: 40mm;
+    background-color: #2b2a2a;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .keyboard-key {
+      display: inline;
+      padding-left: 1mm;
+      padding-right: 1mm;
+
+      border-radius: 2mm;
+
+      background-color: #3e3d3d;
+    }
+
+    > div {
+      width: 80%;
+      height: 60%;
+    }
+  }
+
+  .cv-container-container {
+    width: 100%;
+    height: 100%;
+
+    display: grid;
+    place-items: center;
+  }
+
+  .cv-container {
+    width: 210mm;
+    height: 297mm;
+
+    background-color: #eeeeee;
+
+    overflow: visible;
+    display: flex;
+    padding: auto;
+  }
+
+  .sections {
+    // Shared between sections
+    > div {
+      display: grid;
+      z-index: 0;
+
+      // Needed to cuttoff the extra decoration
+      position: relative;
+      overflow: hidden;
+    }
+
+    #left-section {
+      // background-color: #bdd6ee;
+
+      > div:last-child {
+        z-index: 1;
+        width: 100%;
+
+        left: 0;
+
+        display: grid;
+        place-items: center;
+
+        padding-top: 30mm;
+        padding-bottom: 30mm;
+      }
+    }
+
+    #right-section {
+      width: calc(100% / 3 * 2);
+
+      > div:last-child {
+        z-index: 1;
+        width: 100%;
+
+        left: 0;
+
+        display: grid;
+        place-items: center;
+        row-gap: 6mm;
+
+        padding-top: 45mm;
+        padding-bottom: 30mm;
+
+        // Disable interactivity for padding
+        // pointer-events: none;
+      }
+    }
+  }
+
+  .decorations {
+    #leftSectionSeperator {
+      position: relative;
+      height: 100%;
+      width: 0%;
+      z-index: 1;
+      overflow: visible;
+      > div {
+        position: absolute;
+        height: 100%;
+        width: 5mm;
+        z-index: 1;
+        background: linear-gradient(90deg, #3636364f, #00000000);
+      }
+    }
+    > div {
+      #TopRightSkillsText {
+        position: absolute;
+        z-index: 0;
+
+        display: grid;
+        place-items: center;
+        vertical-align: top;
+        width: 100%;
+
+        place-content: center;
+
+        padding: 0;
+        height: 50mm;
+
+        mask-image: linear-gradient(180deg, #000 0%, transparent 110%);
+
+        color: rgb(190, 190, 190);
+        font-family: "CozetteVector";
+        font-size: x-large;
+      }
+    }
+  }
+</style>

src/routes/cv/comps/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>

src/routes/cv/comps/BiggestFlex.svelte

@@ -0,0 +1,25 @@
+<div class="short-profile-container">
+    <div class="flex gap-1 items-baseline">
+        <b style="text-align:left;">
+            Biggest flex
+        </b>
+        <h1 style="font-size: 0.5rem; color: grey;">*Gamejams that had competitions.</h1>
+    </div>
+    <div class="text-[0.85rem] text-left">
+      <a href="https://deprived.dev" >The <span class="text-blue-500 underline">deprived devs</span></a> has won every gamejam, we've participated. <br/>
+    </div>
+
+</div>
+
+<style>
+    .short-profile-container{
+        width: 90%;
+    }
+
+    .short-profile-container > div:first-child {
+        width: 100%;
+
+        /* Bottom border stripe*/
+        border-bottom: 1mm solid black;
+    }
+</style>

src/routes/cv/comps/BottomRightDecor.svelte

@@ -0,0 +1,53 @@
+<script>
+  export let Style = "";
+</script>
+
+<div class="container" style={Style}>
+  <div class="w-full flex justify-center">
+    <div class="text-center"></div>
+  </div>
+</div>
+
+<style lang="scss">
+  .container {
+    position: absolute;
+    transform: translate(20.3mm, -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,
+        var(--left-decor-line-color) 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: var(--left-decor-line-color);
+      width: 100mm;
+      height: 25mm;
+
+      // Text
+      display: grid;
+      place-content: center;
+      align-content: flex-start;
+      > div {
+        padding-top: 3.5mm;
+        color: #4a7bcf;
+        font-weight: bold;
+      }
+    }
+  }
+</style>
+

src/routes/cv/comps/CombinedContacts.svelte

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

src/routes/cv/comps/Contact.svelte

@@ -0,0 +1,75 @@
+<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 var(--left-line-color);
+    }
+
+    .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 {
+
+            &:first-child {
+                width: 35%;
+                font-size: 4mm;
+
+                display: grid;
+                place-content: center start;
+
+                border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm;
+            }
+
+            &:nth-child(2) {
+                width: 65%;
+
+                font-size: 3.25mm;
+                display: grid;
+                place-content: center;
+
+                padding-left: 1mm;
+            }
+        }
+    }
+</style>

src/routes/cv/comps/Education.svelte

@@ -0,0 +1,47 @@
+<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 h-10">
+  <div>
+    <b style="text-align:left;"> Education </b>
+  </div>
+  <div class="flex justify-center p-2 w-full">
+    <IconAndText2 logo={DTU_Logo}>
+      <b>DTU</b><br />
+      <p style="font-size: 0.5rem;">AI and data</p>
+    </IconAndText2>
+    <IconAndText2 logo={NextLogo}>
+      <b>Next</b><br />
+      <p style="font-size: 0.5rem;">Computer science</p>
+    </IconAndText2>
+    <IconAndText2 logo={SasLogo}>
+      <b>Master class</b><br />
+      <p style="font-size: 0.5rem;">SAS Programming</p>
+    </IconAndText2>
+    <IconAndText2 logo={EmphasysLogo}>
+      <span class="font-semibold">Emphasys center</span><br />
+      <p style="font-size: 0.5rem;">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%;
+    }
+  }
+</style>
+

src/routes/cv/comps/Experience.svelte

@@ -0,0 +1,78 @@
+<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";
+  import GrazperAILogo from "$lib/zhen/cv-comps/GrazperLogo.jpg";
+  import YaaummaLogo from "$lib/zhen/cv-comps/YaaummaLogo.png";
+
+  import IconAndText from "./IconAndText.svelte";
+</script>
+
+<div class="container">
+  <div>
+    <b style="text-align:left;"> Experience </b>
+  </div>
+  <div class="table">
+    <div class="table-item">
+      <IconAndText logo={YaaummaLogo}>
+        <b>Full-stack</b><br />
+        Yaaumma<br />
+        <i>Feb 2025 - Now</i>
+      </IconAndText>
+    </div>
+    <div class="table-item">
+      <IconAndText logo={GrazperAILogo}>
+        <b>Data annotator</b><br />
+        GrazperAI<br />
+        <i>Jul 2024 - Now</i>
+      </IconAndText>
+    </div>
+    <div class="table-item">
+      <IconAndText logo={MakerspaceLogo}>
+        <b>3D printer manager</b> - Volunteer<br />
+        Makerspace - kildevæld Kulturcenter<br />
+        <i>Nov 2023 - Now</i>
+      </IconAndText>
+    </div>
+    <div class="table-item">
+      <IconAndText logo={EposLogo}>
+        <b>Machine Learning Engineer</b> - Short term intern<br />
+        Product design department - Epos<br />
+        <i>Apr 2024 - Apr 2024</i>
+      </IconAndText>
+    </div>
+    <div class="table-item">
+      <IconAndText logo={KhoraLogo}>
+        <b>Assistant</b> - Short term intern<br />
+        Khora Virtual Reality<br />
+        <i>Oct 2020 - Oct 2020</i>
+      </IconAndText>
+    </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;
+    }
+  }
+
+  .table-item {
+    padding: 2mm;
+
+    &:not(:last-child) {
+      border-bottom: 0.25mm solid #000000;
+    }
+  }
+</style>

src/routes/cv/comps/IconAndText.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  export let logo: string;
+  export let logoWidths: string = "10%";
+
+  export let fontSize: string = "3mm";
+  export let lineHeight: string = "3.1mm";
+
+  import { onMount } from "svelte";
+  onMount(() => {
+    imageCaption = logo.split(/(\\|\/)/g).pop();
+  });
+
+  let imageCaption: undefined | string; // Not a high piority, you get the file name and thats it
+</script>
+
+<div class="container">
+  <img
+    src={logo}
+    class="bg-white w-10 h-10 object-contain rounded shadow"
+    alt={imageCaption}
+    width={logoWidths}
+  />
+  <div style="line-height: {lineHeight};">
+    <span style="font-size: {fontSize};">
+      <slot />
+    </span>
+  </div>
+</div>
+
+<style lang="scss">
+  .container {
+    display: flex;
+    justify-items: start;
+
+    & > div {
+      padding-left: 3mm;
+
+      text-align: start;
+    }
+
+  }
+</style>
+

src/routes/cv/comps/IconAndText2.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  export let logo: string;
+  export let logoWidths: string = "35%";
+
+
+  import { onMount } from "svelte";
+  onMount(() => {
+    imageCaption = logo.split(/(\\|\/)/g).pop();
+  });
+
+  let imageCaption: undefined | string; // Not a high piority, you get the file name and thats it
+</script>
+
+<div class=" h-full container flex">
+  <div class="flex h-full w-6 items-center overflow-hidden rounded">
+    <img
+    src={logo}
+    class=" w-6 h-6 object-cover shadow"
+    alt={imageCaption}
+    width={logoWidths}
+    />
+  </div>
+  <div class="px-1 ml-1 h-full text-[0.5rem]" >
+    <span class="inline " >
+      <slot />
+    </span>
+  </div>
+</div>
+
+
+

src/routes/cv/comps/LeftTopDecor.svelte

@@ -0,0 +1,75 @@
+<script>
+  import RepeatedSkills from "./RepeatedSkills.svelte";
+
+  // Cedit
+  import LinkToSource from "./LinkToSource.svelte";
+
+  export let Style = "";
+  export let Class = "";
+</script>
+
+<div class="container {Class}" style={Style}>
+  <div class=" text-center bg-[var(--left-grid-bg-color)]">
+    <RepeatedSkills
+      textOverride={["Hello", "你好", "Hej"]}
+      targetTextHeight={3}
+      targetTextWidth={50}
+      applyRotation={false}
+    />
+  </div>
+  <div />
+  <div class="flex justify-center">
+    <div class="w-[6cm]">
+      <LinkToSource />
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .container {
+    position: absolute;
+    transform: translate(-30mm, 7.5mm) 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;
+      padding-bottom: 1mm;
+      padding-top: 1mm;
+
+      // Text inside
+      display: grid;
+      place-content: center;
+      border-bottom: var(--left-decor-line-color) dotted 0.5mm;
+      border-top: var(--left-decor-line-color) dotted 0.5mm;
+
+      &:first-child {
+        color: var(--left-decor-text-color);
+        font-size: 3mm;
+        //font-weight: bold;
+      }
+    }
+
+    > div:nth-child(2) {
+      padding-top: 4mm;
+      //border-bottom: #4472c4 dashed 2mm;
+
+      // background-color: var(--left-grid-bg-color);
+
+      background-image: linear-gradient(
+        to right,
+        var(--left-decor-line-color) 70%,
+        rgba(255, 255, 255, 0) 0%
+      );
+      background-position: bottom;
+      background-size: 6mm 1.5mm;
+      background-repeat: repeat-x;
+    }
+  }
+</style>

src/routes/cv/comps/LinkToSource.svelte

@@ -0,0 +1,76 @@
+<script>
+    import svelteLogo from "$lib/svelteLogos/svelte-logo-cutout.svg"
+</script>
+
+<div class="container">
+    <div class="flex justify-center">
+      <div class="corner-border-container p-1 m-1">
+        <div class="flex">
+          This CV was made using html, css and <a class="grid place-content-center" href="https://kit.svelte.dev/"><img src={svelteLogo} class="w-2 h-2" alt="SvelteKit logo"/></a>
+        </div>
+        Sources:
+        <a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website/src/branch/dev/src/routes/zhen/cv/rev2/+page.svelte">CV source code</a>
+        and
+        <a href="/zhen/cv/rev2?hideOnPrint=1">My Website</a>
+      </div>
+    </div>
+</div>
+
+<style lang="scss">
+.corner-border-container {
+  --length: 5px;
+  --width: 1px;
+  background-color: var(--left-grid-bg-color);
+  background-image:
+    linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
+    linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
+    linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
+    linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
+    linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
+    linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
+    linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
+    linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color));
+  background-size:
+    var(--length) var(--width),
+    var(--width) var(--length),
+    var(--length) var(--width),
+    var(--width) var(--length),
+    var(--length) var(--width),
+    var(--width) var(--length),
+    var(--length) var(--width),
+    var(--width) var(--length);
+  background-position:
+    top left,
+    top left,
+    top right,
+    top right,
+    bottom right,
+    bottom right,
+    bottom left,
+    bottom left;
+  background-repeat: no-repeat;
+}
+
+    .container {
+        z-index: 1;
+
+        font-size: 0.5rem;
+
+        //white-space: nowrap;
+
+        color: #777777;
+
+        * a {
+            color: #3d6ddc;
+            padding-left: 1mm;
+            padding-right: 1mm;
+
+            text-decoration: underline;
+        }
+
+
+        div:nth-child(2){
+            padding-bottom: 2mm;
+        }
+    }
+</style>

src/routes/cv/comps/LinkedInQR.svelte

@@ -0,0 +1,58 @@
+<script>
+    import QRCode from "$lib/zhen/cv-comps/LinkedInQrCode.svg?raw"
+</script>
+
+<div class="container">
+    <div>LinkedIn</div>
+    <div class="qrcode corner-border-container p-4">{@html QRCode}</div>
+</div>
+
+<style lang="scss">
+  .corner-border-container {
+    --length: 20px;
+    --width: 4px;
+    background-color: var(--left-grid-bg-color);
+    background-image:
+      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
+      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
+      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
+      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
+      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
+      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
+      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
+      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color));
+    background-size:
+      var(--length) var(--width),
+      var(--width) var(--length),
+      var(--length) var(--width),
+      var(--width) var(--length),
+      var(--length) var(--width),
+      var(--width) var(--length),
+      var(--length) var(--width),
+      var(--width) var(--length);
+    background-position:
+      top left,
+      top left,
+      top right,
+      top right,
+      bottom right,
+      bottom right,
+      bottom left,
+      bottom left;
+    background-repeat: no-repeat;
+  }
+
+
+    .qrcode {
+        transform: scale(0.9);
+    }
+
+    .container {
+        display: grid;
+        place-items: center;
+
+        & * {
+            font-size: 7.5mm;
+        }
+    }
+</style>

src/routes/cv/comps/NameAndImage.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import NamePlate from "./NamePlate.svelte";
+    import selfie from "$lib/zhen/cv-comps/VRNerd.jpg"
+    import zylveterSus from "$lib/zhen/cv-comps/zylveterSus.png"
+</script>
+
+<div class="nameAndImageContainer">
+    <NamePlate/>
+    <div class="mt-4 w-48 h-48 overflow-hidden shadow-xl rounded-lg flex justify-center items-center">
+      <img src={selfie} class="selfie-constraints object-cover"  alt="Zhentao Wei"/>
+
+    </div>
+</div>
+
+<style>
+    .nameAndImageContainer {
+        display: grid;
+        place-items: center;
+    }
+
+    .selfie-constraints{
+        
+        max-width:  100%;
+
+    }
+</style>

src/routes/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 var(--left-line-color);
+    }
+</style>

src/routes/cv/comps/OtherContact.svelte

@@ -0,0 +1,70 @@
+<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 var(--left-line-color);
+    }
+
+    .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 {
+            &:first-child {
+                width: 35%;
+                font-size: 4mm;
+
+                display: grid;
+                place-content: center start;
+
+                border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm;
+            }
+
+            &:nth-child(2) {
+                width: 65%;
+
+                font-size: 3.25mm;
+                display: grid;
+                place-content: center;
+
+                padding-left: 1mm;
+            }
+        }
+    }
+</style>

src/routes/cv/comps/Profile.svelte

@@ -0,0 +1,34 @@
+<div class="short-profile-container">
+  <div class="flex gap-1 items-baseline">
+        <b style="text-align:left;">
+            About me
+        </b>
+        <div class="opacity-70 text-[0.5rem]">
+          I know the languages listed above in the decor!
+        </div>
+    </div>
+    <span>
+      I love learning on my own. I've placed my education at the bottom of my CV.
+      This is because everything I've learnt is on my own, and I refuse to give too much credit to my education.
+      I encurage you to checkout which <span class="font-semibold">Open-source</span> projects I've worked on, on my <a  href="https://github.com/MagicBOTAlex"><span class="text-blue-500 underline">github</span></a>.
+      <br>
+      <br>
+      Other than my github, I've listed some projectss highlighted below. :) 
+    </span>
+
+</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>

src/routes/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>

src/routes/cv/comps/ShortProfile.svelte

@@ -0,0 +1,29 @@
+<div class="short-profile-container">
+    <div>
+        <b style="text-align:left;">
+            Short profile
+        </b>
+    </div>
+    <div>
+        ◾ Full-stack at Yaaumma <br>
+        ◾ "AI and data" at DTU. <br>
+        ◾ Working at <a class="underline" href="https://grazper.com/">GrazperAI</a> <br/>
+        ◾ 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 var(--left-line-color);
+    }
+</style>

src/routes/cv/comps/TableOfProjects.svelte

@@ -0,0 +1,88 @@
+<div class="container">
+  <div class="flex gap-1">
+        <b style="text-align:left;">
+            List of big projects
+        </b>
+        <div class="opacity-70 text-[0.5rem]">
+          It is likely I'm working on something new, as you're reading this.
+          <br/> 
+          Contact me if you're curious! :D
+        </div>
+    </div>
+    <div class="table-display">
+        <div class="table-item">
+            <div>Computer vision</div>
+            <div>Implimented YoloV1 from scratch. (object detection)</div>
+        </div>
+        <div class="table-item">
+            <div>Arduino</div>
+            <div>Built my own claw machine from scratch.</div>
+        </div>
+        <div class="table-item">
+            <div>App dev</div>
+            <div>Made an Doulingo'ish app for learning chinese.</div>
+        </div>
+        <div class="table-item">
+            <div>Open-source</div>
+            <div>I contribute often to Open-source</div>
+        </div>
+        <div class="table-item">
+            <div>PCB designing</div>
+            <div>I am currently designing my own circuit board</div>
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    .container{
+        display: grid;
+        place-items: center;
+        width: 90%;
+    }
+
+    .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: 30%;
+                font-size: 4mm;
+
+                display: grid;
+                place-content: center start;
+
+                border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm;
+            }
+
+            &:nth-child(2) {
+                width: 70%;
+
+                font-size: 3.25mm;
+                display: grid;
+
+                padding-left: 1mm;
+            }
+        }
+    }
+</style>