From 8b7210f6034cf1848cc8402abbf61bff334dc49a Mon Sep 17 00:00:00 2001
From: BOTAlex <zhentao2004@gmail.com>
Date: Wed, 12 Jun 2024 06:56:36 +0200
Subject: [PATCH] Accidentally sent out an old link. So this is here for a temp

---
 src/routes/zhen/cv/epos/+page.svelte | 250 +++++++++++++++++++++++++++
 1 file changed, 250 insertions(+)
 create mode 100644 src/routes/zhen/cv/epos/+page.svelte

diff --git a/src/routes/zhen/cv/epos/+page.svelte b/src/routes/zhen/cv/epos/+page.svelte
new file mode 100644
index 0000000..721d9a0
--- /dev/null
+++ b/src/routes/zhen/cv/epos/+page.svelte
@@ -0,0 +1,250 @@
+<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";
+
+    // 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";
+
+    // Cedit
+    import LinkToSource from "../Comps/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 Epos CV" property="og:title" />
+<meta content="This CV is made completely with 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. This page has been able 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="cv-container-container include-in-print">
+    <div class="cv-container sections decorations">
+        <div id="left-section">
+            <LeftTopDecor/>
+            <BottomRightDecor/>
+            <div>
+                <NameAndImage/>
+                <ShortProfile/>
+                <CombinedContacts/>
+                <LinkedInQR/>
+            </div>
+        </div>
+        <div id="leftSectionSeperator"><div/></div>
+        <div id="right-section">
+            <AlexWatermark/>
+            <div id="TopRightSkillsText">
+                <RepeatedSkills targetTextHeight={30} targetTextWidth={75}/>
+            </div>
+            <div id="Credit">
+                <LinkToSource/>
+            </div>
+            <div>
+                <Profile/>
+                <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%;
+        }
+    }
+
+    @media print {
+    .hide-on-print {
+        display: none;
+    }
+}
+
+    .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;
+    }
+
+    .include-in-print { &, & * {
+        -webkit-print-color-adjust:exact !important;
+        print-color-adjust:exact !important;
+    }}
+
+    .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>
\ No newline at end of file