Changed photo to vr setup

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

src/routes/zhen/cv/CompsRev3/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,
+        #4472c4 70%,
+        rgba(255, 255, 255, 0) 0%
+      );
+      background-position: top;
+      background-size: 6mm 1.5mm;
+      background-repeat: repeat-x;
+    }
+
+    > div:nth-child(2) {
+      background-color: #2f5496;
+      width: 100mm;
+      height: 25mm;
+
+      // Text
+      display: grid;
+      place-content: center;
+      align-content: flex-start;
+      > div {
+        padding-top: 3.5mm;
+        color: #4a7bcf;
+        font-weight: bold;
+      }
+    }
+  }
+</style>
+

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

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

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

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

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

@@ -0,0 +1,56 @@
+<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%;
+        }
+    }
+</style>

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

@@ -0,0 +1,72 @@
+<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 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={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/zhen/cv/CompsRev3/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="" 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;
+
+        width: 100%;
+
+        & > div {
+            padding-left: 3mm;
+
+            text-align: start;
+        }
+
+        & > img {
+            border-radius: 2.5mm;
+            filter: drop-shadow(1mm 1mm 1mm #0000009d);
+        }
+    }
+</style>

src/routes/zhen/cv/CompsRev3/IconAndText2.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    export let logo:string;
+    export let logoWidths: string = "35%";
+    
+    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} alt="{imageCaption}" width="{logoWidths}"/>
+    <div style="line-height: {lineHeight};">
+        <span style="font-size: {fontSize};">
+            <slot/>
+        </span>
+    </div>
+</div>
+
+<style lang="scss">
+    .container {
+        width: 100%;
+
+        & > div {
+            margin-top: 2mm;
+            padding-left: 2mm;
+            padding-bottom: 1mm;
+
+            text-align: start;
+
+            border-left: 0.5mm solid black;
+        }
+
+        & > img {
+            border-radius: 2.5mm;
+            filter: drop-shadow(1mm 1mm 1mm #0000009d);
+        }
+    }
+</style>

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

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

src/routes/zhen/cv/CompsRev3/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 html, css and <a class="grid place-content-center" href="https://kit.svelte.dev/"><img src={svelteLogo} alt="SvelteKit logo"/></a>
+        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>
+
+<style lang="scss">
+    .container {
+        z-index: 1;
+        padding-left: 2mm;
+
+        font-size: 0.75rem;
+
+        //white-space: nowrap;
+
+        color: #777777;
+
+        * a {
+            color: #3d6ddc;
+            padding-left: 1mm;
+            padding-right: 1mm;
+
+            text-decoration: underline;
+        }
+
+        div:first-child {
+            display: flex;
+            place-content: center;
+            justify-content: start;
+
+            a:nth-child(1) > img {
+                width: 5mm;
+
+                padding-left: 1mm;
+                padding-right: 1mm;
+            }
+        }
+
+        div:nth-child(2){
+            padding-bottom: 2mm;
+        }
+    }
+</style>

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

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

src/routes/zhen/cv/CompsRev3/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/zhen/cv/CompsRev3/NamePlate.svelte

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

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

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

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

@@ -0,0 +1,31 @@
+<div class="short-profile-container">
+    <div>
+        <b style="text-align:left;">
+            About me
+        </b>
+    </div>
+    <div>
+        I'm a 20-year-old with a deep passion for programming and
+        technology.
+        Most of my knowledge is self-taught from many places on the
+        internet, so university hasn't helped much. 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>

src/routes/zhen/cv/CompsRev3/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/zhen/cv/CompsRev3/ShortProfile.svelte

@@ -0,0 +1,28 @@
+<div class="short-profile-container">
+    <div>
+        <b style="text-align:left;">
+            Short profile
+        </b>
+    </div>
+    <div>
+        ◾ "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 black;
+    }
+</style>

src/routes/zhen/cv/CompsRev3/TableOfProjects.svelte

@@ -0,0 +1,88 @@
+<div class="container">
+    <div>
+        <b style="text-align:left;">
+            List of big projects
+        </b>
+    </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 with 2 dimentions of movement</div>
+        </div>
+        <div class="table-item">
+            <div>App dev</div>
+            <div>Made an Doulingo'ish app for learning chinese in 9 days</div>
+        </div>
+        <div class="table-item">
+            <div>Open-source help</div>
+            <div>Contributed in multiple Open-source projects on github</div>
+        </div>
+        <div class="table-item">
+            <div>PCB designing</div>
+            <div>I am currently designing my own circuit board</div>
+        </div>
+    </div>
+    <div class="flex" style="font-size: 0.75rem; color: sgray; align-content: start; width: 100%;">
+        <p>
+            If you want proof or want to know about other projects. Contact me!
+        </p>
+    </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>

src/routes/zhen/cv/rev2/+page.svelte

@@ -35,7 +35,7 @@
     if (!hideOnPrintParam) {
       window.location.href = `${window.location.href}?hideOnPrint=1`;
     }
-  });
+  })
 
   function getFormattedDate(): string {
     const date = new Date();
@@ -100,7 +100,7 @@
         <LinkToSource />
       </div>
       <div>
-        <Profile />
+        <Profile/>
         <BiggestFlex />
         <TableOfProjects />
         <Experience />

src/routes/zhen/cv/rev3/+page.svelte

@@ -0,0 +1,257 @@
+<script lang="ts">
+  // Left side
+  import NameAndImage from "../CompsRev3/NameAndImage.svelte";
+  import ShortProfile from "../CompsRev3/ShortProfile.svelte";
+  import CombinedContacts from "../CompsRev3/CombinedContacts.svelte";
+  import LinkedInQR from "../CompsRev3/LinkedInQR.svelte";
+
+  // Right side
+  import Profile from "../CompsRev3/Profile.svelte";
+  import Education from "../CompsRev3/Education.svelte";
+  import Experience from "../CompsRev3/Experience.svelte";
+  import BiggestFlex from "../CompsRev3/BiggestFlex.svelte";
+  import TableOfProjects from "../CompsRev3/TableOfProjects.svelte";
+
+  // Decorations
+  import LeftTopDecor from "../CompsRev3/LeftTopDecor.svelte";
+  import BottomRightDecor from "../CompsRev3/BottomRightDecor.svelte";
+  import AlexWatermark from "../CompsRev3/AlexWatermark.svelte";
+  import RepeatedSkills from "../CompsRev3/RepeatedSkills.svelte";
+
+  // Cedit
+  import LinkToSource from "../CompsRev3/LinkToSource.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-container-container include-in-print">
+  <div class="cv-container sections decorations">
+    <div id="left-section">
+      <LeftTopDecor Style="pointer-events: none;" />
+      <BottomRightDecor Style="pointer-events: none;" />
+      <div>
+        <NameAndImage />
+        <ShortProfile />
+        <CombinedContacts />
+        <LinkedInQR />
+      </div>
+    </div>
+    <div id="leftSectionSeperator"></div>
+    <div id="right-section">
+      <AlexWatermark Style="pointer-events: none;" />
+      <div id="TopRightSkillsText">
+        <RepeatedSkills
+          class="Cozette"
+          targetTextHeight={30}
+          targetTextWidth={75}
+        />
+      </div>
+      <div id="Credit">
+        <LinkToSource />
+      </div>
+      <div>
+        <Profile/>
+        <BiggestFlex />
+        <TableOfProjects />
+        <Experience />
+        <Education />
+      </div>
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .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-container * {
+    color: black; // Set all text black
+  }
+
+  .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;
+      width: calc(100% / 3 * 1);
+
+      > 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;
+      }
+
+      #Credit {
+        position: absolute;
+        z-index: 0;
+
+        display: flex;
+        align-self: flex-end;
+      }
+    }
+  }
+</style>