Speedran linkedin portfolio banner

2024-06-12 07:26:18 +02:00 · 2024-06-12 07:26:18 +02:00 · ac789d8a40
parent 8b7210f603
commit ac789d8a40
1 changed files with 117 additions and 0 deletions
--- a/src/routes/zhen/misc/linkedinBanner/+page.svelte
+++ b/src/routes/zhen/misc/linkedinBanner/+page.svelte
@ -0,0 +1,117 @@
+<script lang="ts">
+    import RepeatedSkills from "../../cv/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 LinkedIn banner {getFormattedDate()}</title>
+<meta content="Zhentao Wei's LinkedIn banner" property="og:title" />
+<meta content="This Linkedin banner 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 Linkedin banner. This page has been able to be saved as PDF, and the banner can be extracted as an image fro mthe 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="container include-in-print">
+    <div>
+        <RepeatedSkills targetTextHeight={70} targetTextWidth={175}/>
+    </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;
+            }
+    }
+
+    .include-in-print { &, & * {
+        -webkit-print-color-adjust:exact !important;
+        print-color-adjust:exact !important;
+    }}
+
+    .container {
+        width: 100%;
+        height: 100%;
+
+        display: grid;
+        place-items: center;
+
+        > div:nth-child(1) {
+            width:  419.1mm;
+            height: 104.775mm;
+
+            background-color: #383636;
+            overflow: hidden;
+
+            display: grid;
+            place-content: center;
+
+            font-size: 10mm;
+            font-family: cozetteVector;
+            color: #d4d4d4;
+
+            filter: blur(0); // Force save as image
+        }
+
+        > div:nth-child(2){
+            height: 0;
+        }
+    }
+</style>