From d3e11c32e6d26e2c2b0c595a4cecee635d61d49a Mon Sep 17 00:00:00 2001
From: BOTAlex <zhentao2004@gmail.com>
Date: Sun, 25 May 2025 00:15:40 +0200
Subject: [PATCH] fixed header not hiding when wanting to print

---
 src/app.css                          |  21 +-
 src/routes/+layout.svelte            | 542 ++++++++++++++-------------
 src/routes/comps/Zooter.svelte       |   6 +-
 src/routes/zhen/cv/rev2/+page.svelte | 425 +++++++++++----------
 4 files changed, 512 insertions(+), 482 deletions(-)

diff --git a/src/app.css b/src/app.css
index 8aeb889..c2958a3 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,7 +1,6 @@
 @import "tailwindcss";
 @plugin "daisyui";
 
-
 @plugin "daisyui/theme" {
   name: "Deprived";
   default: true;
@@ -36,7 +35,6 @@
   --noise: 0;
 }
 
-
 @plugin "daisyui/theme" {
   name: "dark";
   color-scheme: "dark";
@@ -70,7 +68,6 @@
   --noise: 1;
 }
 
-
 @plugin "daisyui/theme" {
   name: "pink";
   color-scheme: "light";
@@ -104,7 +101,6 @@
   --noise: 0;
 }
 
-
 @plugin "daisyui/theme" {
   name: "netherrack";
   color-scheme: "dark";
@@ -174,8 +170,7 @@
 .bg-grid-100 {
   background:
     linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
-    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
-    #f2f2f2;
+    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), #f2f2f2;
   background-size:
     4px 4px,
     4px 4px,
@@ -191,8 +186,7 @@
 .bg-grid-200 {
   background:
     linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
-    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
-    #f2f2f2;
+    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), #f2f2f2;
   background-size:
     4px 4px,
     4px 4px,
@@ -208,8 +202,7 @@
 .bg-grid-300 {
   background:
     linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
-    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
-    #f2f2f2;
+    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), #f2f2f2;
   background-size:
     4px 4px,
     4px 4px,
@@ -220,4 +213,10 @@
     80px 80px,
     80px 80px;
   background-color: var(--color-base-300);
-}
\ No newline at end of file
+}
+
+@media print {
+  .hide-on-print {
+    display: none !important;
+  }
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5667969..3e118f8 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,291 +1,313 @@
 <!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements -->
 <script lang="ts">
-    import "../app.css";
-    import { fly } from 'svelte/transition';
-    import MediaQuery from 'svelte-media-queries';
-    import { Dices } from "@lucide/svelte";
-    let hideOnPrint: boolean;
+  import "../app.css";
+  import { fly } from "svelte/transition";
+  import MediaQuery from "svelte-media-queries";
+  import { Dices } from "@lucide/svelte";
+  let hideOnPrint: boolean = $state(false);
 
-    let { children } = $props();
+  let { children } = $props();
 
-    import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
-    import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
+  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 isMobile : boolean = $state(false);
+  const footerCollapseThreshold: string = "1000px";
+  const headerCollapseThreshold: string = "1000px";
+  let footerCollapse: boolean;
+  let isMobile: boolean = $state(false);
 
-    let navbarHidden : boolean = $state(true);
+  let navbarHidden: boolean = $state(true);
 
-    function resetNavBar() {
-        navbarHidden = 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 Zooter from "./comps/Zooter.svelte";
+
+  onMount(async () => {
+    const lock = document.createElement("meta");
+    lock.name = "darkreader-lock";
+    document.head.appendChild(lock);
+  });
+
+  function nextTheme() {
+    let theme: string | null = null;
+
+    if (typeof localStorage !== "undefined") {
+      theme = localStorage.getItem("theme");
     }
 
-    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 Zooter from "./comps/Zooter.svelte";
-    
-    onMount(async () => {
-        const lock = document.createElement('meta');
-        lock.name = 'darkreader-lock';
-        document.head.appendChild(lock);
-    });
-
-    function nextTheme(){
-        let theme: string | null = null;
-
-        if (typeof localStorage !== 'undefined') {
-            theme = localStorage.getItem('theme');
-        }
-
-        const themesArr = (window as any).AvailableThemes;
-        let nextTheme = "dark";
-        if (theme == "null" || theme == "undefined" || theme == undefined || theme == null){
-
-        } else {
-            nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length];
-        }
-
-        console.log("Slecting: " + nextTheme);
-        document.documentElement.setAttribute('data-theme', nextTheme);
-        localStorage.setItem('theme', nextTheme);
+    const themesArr = (window as any).AvailableThemes;
+    let nextTheme = "dark";
+    if (
+      theme == "null" ||
+      theme == "undefined" ||
+      theme == undefined ||
+      theme == null
+    ) {
+    } else {
+      nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length];
     }
 
-    
+    console.log("Slecting: " + nextTheme);
+    document.documentElement.setAttribute("data-theme", nextTheme);
+    localStorage.setItem("theme", nextTheme);
+  }
 </script>
 
 {#snippet SwitchThemeButton()}
-<div class="tooltip tooltip-bottom grid place-content-center" data-tip="Switch theme">
-    <button class="cursor-pointer" onclick={nextTheme}> <Dices/></button>
-</div>
+  <div
+    class="tooltip tooltip-bottom grid place-content-center"
+    data-tip="Switch theme"
+  >
+    <button class="cursor-pointer" onclick={nextTheme}> <Dices /></button>
+  </div>
 {/snippet}
 
 <!-- Detect mobile -->
-<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
-<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={isMobile} />
+<MediaQuery
+  query="(max-width: {footerCollapseThreshold})"
+  bind:matches={footerCollapse}
+/>
+<MediaQuery
+  query="(max-width: {headerCollapseThreshold})"
+  bind:matches={isMobile}
+/>
 
 <!-- Nav bar -->
-<div class="bg-base-200 p-0">
-    <header class="{hideOnPrint ? 'hide-on-print' : ''} bg-base-300">
-        <div class="nav-bar pr-4">
-            {#if !isMobile}
-                <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" />
+<div class=" bg-base-200 p-0">
+  <header class="{hideOnPrint ? 'hide-on-print' : ''} bg-base-300">
+    <div class="nav-bar pr-4">
+      {#if !isMobile}
+        <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" />
 
-                    <!-- <a href="/">Home</a> -->
-                    <!-- <a href="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> -->
+          <!-- <a href="/">Home</a> -->
+          <!-- <a href="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> -->
 
-                    {@render SwitchThemeButton()}
-                    
-                    <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Zhen CV</a>
-                    <a href="/tools" style="width: 7.5rem;">Tools</a>
-                    <a href="https://botalex.itch.io/" target="_blank">Games</a>
-                    <!-- <a href="/posts">Blog</a>
+          {@render SwitchThemeButton()}
+
+          <a
+            href="/zhen/cv/rev2?hideOnPrint=1"
+            target="_blank"
+            style="width: 7.5rem;">Zhen CV</a
+          >
+          <a href="/tools" style="width: 7.5rem;">Tools</a>
+          <a href="https://botalex.itch.io/" target="_blank">Games</a>
+          <!-- <a href="/posts">Blog</a>
                     <a href="/about">About</a> -->
-                </div>
-            {:else}
-                <div class="collapsed shadow-xl">
-                    <a onclick={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" />
-                    {@render SwitchThemeButton()}
-                    <div class="px-1"></div>
-                    <button id="toggle-nav" onclick={() => {navbarHidden = !navbarHidden; console.log(navbarHidden);}}>
-                        <HamburgerMenuIcon Class="fill-base-content"/>
-                    </button>
-                </div>
-                {#if !navbarHidden}
-                <div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
-                    <!-- <a onclick={resetNavBar} href="/">Home</a> -->
-                    <a onclick={resetNavBar} href="https://botalex.itch.io/" target="_blank">Games</a>
-                    <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank">Zhen's CV</a>
-                        <!-- <a onclick={resetNavBar} href="/posts">Blog</a>
-                        <a onclick={resetNavBar} href="/about">About</a> -->
-                    </div>
-                {/if}
-            {/if}
         </div>
-    </header>
-    
-    <!-- Page content -->
-    {@render children?.()}
+      {:else}
+        <div class="collapsed shadow-xl">
+          <a onclick={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" />
+          {@render SwitchThemeButton()}
+          <div class="px-1"></div>
+          <button
+            id="toggle-nav"
+            onclick={() => {
+              navbarHidden = !navbarHidden;
+              console.log(navbarHidden);
+            }}
+          >
+            <HamburgerMenuIcon Class="fill-base-content" />
+          </button>
+        </div>
+        {#if !navbarHidden}
+          <div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
+            <!-- <a onclick={resetNavBar} href="/">Home</a> -->
+            <a
+              onclick={resetNavBar}
+              href="https://botalex.itch.io/"
+              target="_blank">Games</a
+            >
+            <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank">Zhen's CV</a>
+            <!-- <a onclick={resetNavBar} href="/posts">Blog</a>
+                        <a onclick={resetNavBar} href="/about">About</a> -->
+          </div>
+        {/if}
+      {/if}
+    </div>
+  </header>
 
-    <Zooter bind:hideOnPrint/>
+  <!-- Page content -->
+  {@render children?.()}
+
+  <Zooter bind:hideOnPrint />
 </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;
-
-        & h3 {
-            font-size: larger;
-        }
-    }
-
-    .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>
+  <style>
+    .about-container {
+      flex-direction: column;
+      justify-content: center !important;
+      gap: 25px;
+    }
+  </style>
 {/if}
 
 {#if isMobile}
-    <style>
-
-    </style>
+  <style>
+  </style>
 {/if}
+
+<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;
+
+    & h3 {
+      font-size: larger;
+    }
+  }
+
+  .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%);
+  }
+</style>
diff --git a/src/routes/comps/Zooter.svelte b/src/routes/comps/Zooter.svelte
index 9c20b3e..3c52722 100644
--- a/src/routes/comps/Zooter.svelte
+++ b/src/routes/comps/Zooter.svelte
@@ -155,7 +155,7 @@
   on:resize={onResize}
 />
 
-<div class="w-full">
+<div class="{hideOnPrint ? 'hide-on-print' : ''} w-full">
   <!-- Keep scrolling thing -->
   <div class="hidden h-64 w-full flex flex-col justify-center items-center">
     <div>Keep scrolling to veiw Zhen's portfolio site!</div>
@@ -180,9 +180,7 @@
 
   <!-- About footer -->
   <div
-    class="{hideOnPrint
-      ? 'hide-on-print'
-      : ''} sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8"
+    class="sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8"
   >
     <div class="flex justify-center">
       <div class="grid gap-8 sm:grid-cols-3 items-center w-full">
diff --git a/src/routes/zhen/cv/rev2/+page.svelte b/src/routes/zhen/cv/rev2/+page.svelte
index 4bc9658..2588899 100644
--- a/src/routes/zhen/cv/rev2/+page.svelte
+++ b/src/routes/zhen/cv/rev2/+page.svelte
@@ -1,243 +1,254 @@
 <script lang="ts">
-    // Left side
-    import NameAndImage from "../CompsRev2/NameAndImage.svelte";
-    import ShortProfile from "../CompsRev2/ShortProfile.svelte"
-    import CombinedContacts from "../CompsRev2/CombinedContacts.svelte"
-    import LinkedInQR from "../CompsRev2/LinkedInQR.svelte";
-    
-    // Right side
-    import Profile from "../CompsRev2/Profile.svelte";
-    import Education from "../CompsRev2/Education.svelte";
-    import Experience from "../CompsRev2/Experience.svelte";
-    import BiggestFlex from "../CompsRev2/BiggestFlex.svelte";
-    import TableOfProjects from "../CompsRev2/TableOfProjects.svelte";
+  // Left side
+  import NameAndImage from "../CompsRev2/NameAndImage.svelte";
+  import ShortProfile from "../CompsRev2/ShortProfile.svelte";
+  import CombinedContacts from "../CompsRev2/CombinedContacts.svelte";
+  import LinkedInQR from "../CompsRev2/LinkedInQR.svelte";
 
-    // Decorations
-    import LeftTopDecor from "../CompsRev2/LeftTopDecor.svelte";
-    import BottomRightDecor from "../CompsRev2/BottomRightDecor.svelte";
-    import AlexWatermark from "../CompsRev2/AlexWatermark.svelte";
-    import RepeatedSkills from "../CompsRev2/RepeatedSkills.svelte";
+  // Right side
+  import Profile from "../CompsRev2/Profile.svelte";
+  import Education from "../CompsRev2/Education.svelte";
+  import Experience from "../CompsRev2/Experience.svelte";
+  import BiggestFlex from "../CompsRev2/BiggestFlex.svelte";
+  import TableOfProjects from "../CompsRev2/TableOfProjects.svelte";
 
-    // Cedit
-    import LinkToSource from "../CompsRev2/LinkToSource.svelte";
+  // Decorations
+  import LeftTopDecor from "../CompsRev2/LeftTopDecor.svelte";
+  import BottomRightDecor from "../CompsRev2/BottomRightDecor.svelte";
+  import AlexWatermark from "../CompsRev2/AlexWatermark.svelte";
+  import RepeatedSkills from "../CompsRev2/RepeatedSkills.svelte";
 
-    // Discord embed
-    import preveiwImage from "$lib/zhen/cv-comps/EposCvPreveiw.png"
+  // Cedit
+  import LinkToSource from "../CompsRev2/LinkToSource.svelte";
 
-    // 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');
+  // Discord embed
+  import preveiwImage from "$lib/zhen/cv-comps/EposCvPreveiw.png";
 
-        // If the query parameter is not detected, reload the page with the parameter added
-        if (!hideOnPrintParam) {
-            window.location.href = `${window.location.href}?hideOnPrint=1`;
-        }
-    });
+  // 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");
 
-    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}`;
+    // 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="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>
+    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="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 targetTextHeight={30} targetTextWidth={75}/>
-            </div>
-            <div id="Credit">
-                <LinkToSource/>
-            </div>
-            <div>
-                <Profile/>
-                <BiggestFlex/>
-                <TableOfProjects/>
-                <Experience/>
-                <Education/>
-            </div>
-        </div>
+  <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> 
+    <div id="leftSectionSeperator"></div>
+    <div id="right-section">
+      <AlexWatermark Style="pointer-events: none;" />
+      <div id="TopRightSkillsText">
+        <RepeatedSkills 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;
+  .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;
+    .keyboard-key {
+      display: inline;
+      padding-left: 1mm;
+      padding-right: 1mm;
 
-            border-radius: 2mm;
+      border-radius: 2mm;
 
-            background-color: #3e3d3d;
-        }
-
-        > div {
-            width: 80%;
-            height: 60%;
-        }
+      background-color: #3e3d3d;
     }
 
-    .cv-container-container{
+    > 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%;
-        height: 100%;
+
+        left: 0;
 
         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;
-            }
+        padding-top: 30mm;
+        padding-bottom: 30mm;
       }
     }
-</style>
\ No newline at end of file
+
+    #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>
+