CV update

src/routes/comps/CustomScrollBar.svelte

@@ -30,6 +30,8 @@
   export let scrollThumbText =
     "-------------------------------------------------------------------------------------------------------------------------------Scroll-------------------------------------------------------------------------------------------------------------------------------";
 
+  let hideOnPrint = false;
+
   let viewport: HTMLDivElement;
   let vBar: HTMLDivElement; // vertical bar container
   let hBar: HTMLDivElement; // horizontal bar container
@@ -246,6 +248,9 @@
   let ro: ResizeObserver;
 
   onMount(() => {
+    const params = new URLSearchParams(window.location.search);
+    hideOnPrint = params.get("hideOnPrint") === "1";
+
     const onScroll = () => {
       updateVerticalThumb();
       updateHorizontalThumb();
@@ -316,7 +321,7 @@
   {#if showBarY}
     <div
       bind:this={vBar}
-      class="absolute bg-base-200"
+      class="absolute bg-base-200 {hideOnPrint ? 'hide-on-print' : ''} "
       style="
       top: {padding}px;
       bottom: {padding}px;
@@ -361,7 +366,7 @@
   {#if showBarX}
     <div
       bind:this={hBar}
-      class="absolute"
+      class="absolute {hideOnPrint ? 'hide-on-print' : ''} "
       style="
         left: {padding}px;
         right: {padding}px;

src/routes/cv/+page.svelte

@@ -74,7 +74,7 @@
     </div>
   </div>
   <div class="w-full h-full flex flex-col justify-center overflow-hidden">
-    <div class=" w-full flex h-[1131.25px] justify-center">
+    <div class=" w-full flex h-[1123px] justify-center">
       <RepeatedSkills
         class="cozette-force text-5xl text-base-300 {$re?.name ? 'hidden' : ''}"
         style="transform: translateY(-90rem)"

src/routes/cv/comps/AlexWatermark.svelte

@@ -1,23 +1,22 @@
 <script>
-export let Style = "";
+  export let Style = "";
 </script>
 
-<div class="container" style="{Style}">
+<div class="container" style={Style}>ALEX</div>
-    ALEX
-</div>
 
 <style lang="scss">
-    .container {
+  .container {
-        position: absolute;
+    position: absolute;
-        display: grid;
+    display: grid;
-        justify-self: end;
+    justify-self: end;
-        vertical-align: bottom;
+    vertical-align: bottom;
-        align-self: flex-end;
+    align-self: flex-end;
-        
-        // font settings
-        font-size: 80mm;
-        color: #e4e4e4;
 
-        transform: translate(32%, -32%) rotate(-90deg);
+    // font settings
-    }
+    font-size: 80mm;
+    color: black;
+    opacity: 5%;
+
+    transform: translate(28%, -7.5mm) rotate(-90deg);
+  }
 </style>

src/routes/cv/comps/LeftTopDecor.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <div class="container {Class}" style={Style}>
-  <div class=" text-center bg-[var(--left-grid-bg-color)]">
+  <div class="NotoSans-cn text-center bg-[var(--left-grid-bg-color)]">
     <RepeatedSkills
       textOverride={["Hello", "你好", "Hej"]}
       targetTextHeight={3}
@@ -17,12 +17,12 @@
       applyRotation={false}
     />
   </div>
-  <div />
+  <!-- <div /> -->
-  <div class="flex bg-black justify-center">
+  <!-- <div class="flex bg-black justify-center"> -->
-    <div class="w-[6cm]">
+  <!--   <div class="w-[6cm]"> -->
-      <LinkToSource />
+  <!--     <LinkToSource /> -->
-    </div>
+  <!--   </div> -->
-  </div>
+  <!-- </div> -->
 </div>
 
 <style lang="scss">

src/routes/cv/comps/ShortProfile.svelte

@@ -1,25 +1,29 @@
 <script lang="ts">
   import re from "@ts/Redaction/Redactor";
+  import Circle from "lucide-svelte/icons/circle";
 </script>
 
-<div class="short-profile-container">
+<div class="short-profile-container grid items-start text-sm">
   <div>
     <b style="text-align:left;"> Short profile </b>
   </div>
-  <div>
+  <div class="p-0">
-    ◾ Full-stack at {$re?.shortProfileHiddenContent[0] ?? "Deprived devs"}
+    <Circle class="inline py-2" />Full-stack at {$re
+      ?.shortProfileHiddenContent[0] ?? "Deprived devs"}
     <br />
-    ◾ "AI and data" at {$re?.shortProfileHiddenContent[1] ?? "some uni"}.
+    <Circle class="inline py-2" />Annotator at {$re
+      ?.shortProfileHiddenContent[2] ?? "somewhere"}
     <br />
-    ◾ Working at {$re?.shortProfileHiddenContent[2] ?? "somewhere"} <br />
+    <Circle class="inline py-2" />"AI and data" at {$re
-    ◾ Volunteer at {$re?.shortProfileHiddenContent[3] ?? "Deprived devs"}.
+      ?.shortProfileHiddenContent[1] ?? "some uni"}.
+    <br />
+    <Circle class="inline py-2" />Volunteer at {$re
+      ?.shortProfileHiddenContent[3] ?? "Deprived devs"}.
   </div>
 </div>
 
 <style>
   .short-profile-container {
-    display: grid;
-    place-items: center;
     width: 70%;
   }
 

src/routes/cv/comps/TableOfProjects.svelte

@@ -1,88 +1,95 @@
 <div class="container">
   <div class="flex gap-1">
-        <b style="text-align:left;">
+    <b style="text-align:left;"> List of big projects </b>
-            List of big projects
+    <div class="opacity-70 text-[0.5rem]">
-        </b>
+      It is likely I'm working on something new, as you're reading this.
-        <div class="opacity-70 text-[0.5rem]">
+      <br />
-          It is likely I'm working on something new, as you're reading this.
+      Contact me if you're curious! :D
-          <br/> 
-          Contact me if you're curious! :D
-        </div>
     </div>
-    <div class="table-display">
+  </div>
-        <div class="table-item">
+  <div class="table-display">
-            <div>Computer vision</div>
+    <div class="table-item">
-            <div>Implimented YoloV1 from scratch. (object detection)</div>
+      <div>HTML</div>
-        </div>
+      <div>This CV is made with HTML, CSS, and Svelte</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 class="table-item">
+      <div>Computer vision</div>
+      <div>Implimented YoloV1 from scratch. (object detection)</div>
+    </div>
+    <div class="table-item">
+      <div>Arduino/embedded</div>
+      <div>Built custom CNC machine</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 often contribute to Open-source</div>
+    </div>
+    <div class="table-item">
+      <div>PCB design</div>
+      <div>I have designed multiple Printed Circuit Boards (PCBs)</div>
+    </div>
+    <div class="table-item">
+      <div>Kubernetes</div>
+      <div>WIP: Multi node HA Kubernetes cluster with my friends</div>
+    </div>
+  </div>
 </div>
 
 <style lang="scss">
-    .container{
+  .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-items: center;
+        place-content: center start;
-        width: 90%;
+
-    }
+        border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm;
-
+      }
-    .container > div:first-child {
+
-        width: 100%;
+      &:nth-child(2) {
-
+        width: 70%;
-        /* Bottom border stripe*/
+
-        border-bottom: 1mm solid black;
+        font-size: 3.25mm;
-    }
+        display: grid;
-
+
-    .table-display {
+        padding-left: 1mm;
-        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>

static/stylesheets/global.css

@@ -13,6 +13,13 @@
     url("/fonts/NotoSans.ttf") format("truetype");
 }
 
+@font-face {
+  font-family: "NotoSans-cn";
+  src:
+    local("NotoSans-cn"),
+    url("/fonts/NotoSerifCJKsc-VF.ttf") format("truetype");
+}
+
 .cozette * {
   font-family: "CozetteVector";
 }
@@ -25,6 +32,10 @@
   font-family: "NotoSans";
 }
 
+.NotoSans-cn * {
+  font-family: "NotoSans-cn";
+}
+
 /* fuck it */
 body * {
   font-family: "CozetteVector";