multi lang CV

src/routes/cv/+page.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import re from "@ts/Redaction/Redactor";
+  import * as m from "$paraglide/messages";
+  import { getLocale, setLocale, locales } from "$paraglide/runtime";
 
   // Left side
   import NameAndImage from "./comps/NameAndImage.svelte";
@@ -56,27 +58,37 @@
   <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 class="cv-info-container flex flex-col w-full h-full 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">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 :(
+      + Chrome = PDF
+    </div>
+    <div class="flex gap-2">
+      CV Languages:
+      {#each locales as tag}
+        <button
+          class="btn btn-xs {tag == getLocale()
+            ? 'btn-filled btn-primary text-primary-content'
+            : 'btn-outline'}"
+          onclick={() => {
+            setLocale(tag);
+          }}
+        >
+          {tag.toUpperCase()}
+        </button>
+      {/each}
     </div>
   </div>
   <div class="w-full h-full flex flex-col justify-center overflow-hidden">
-    <div class=" w-full flex h-[1123px] justify-center">
+    <div
+      class="relative w-full flex h-[1123px] justify-center {$re?.name
+        ? 'hidden'
+        : ''}"
+    >
       <RepeatedSkills
-        class="cozette-force text-5xl text-base-300 {$re?.name ? 'hidden' : ''}"
+        class="cozette-force text-5xl text-base-300 "
         style="transform: translateY(-90rem)"
         textOverride={["REDACTED VERSION"]}
         targetTextHeight={90}
@@ -86,7 +98,9 @@
     </div>
 
     <div
-      class="NotoSans cv-config cv-container-container include-in-print absolute"
+      class="NotoSans h-[1123px] cv-config cv-container-container include-in-print {$re?.name
+        ? ''
+        : 'absolute'}"
     >
       <div class="cv-container sections decorations">
         <div id="left-section" class=" flex justify-center">
@@ -221,7 +235,7 @@
   }
 
   .cv-info-container {
-    height: 40mm;
+    height: 15mm;
     background-color: #2b2a2a;
     display: flex;
     justify-content: center;
@@ -236,11 +250,6 @@
 
       background-color: #3e3d3d;
     }
-
-    > div {
-      width: 80%;
-      height: 60%;
-    }
   }
 
   .cv-container-container {

src/routes/cv/comps/BiggestFlex.svelte

@@ -1,25 +1,28 @@
-<div class="short-profile-container">
-    <div class="flex gap-1 items-baseline">
-        <b style="text-align:left;">
-            Biggest flex
-        </b>
-        <h1 style="font-size: 0.5rem; color: grey;">*Gamejams that had competitions.</h1>
-    </div>
-    <div class="text-[0.85rem] text-left">
-      <a href="https://deprived.dev" >The <span class="text-blue-500 underline">deprived devs</span></a> has won every gamejam, we've participated. <br/>
-    </div>
+<script lang="ts">
+  import * as m from "$paraglide/messages";
+</script>
 
+<div class="short-profile-container">
+  <div class="flex gap-1 items-baseline">
+    <b style="text-align:left;">{m["zhen.cv.flex.title"]()}</b>
+    <h1 style="font-size: 0.5rem; color: grey;">
+      {m["zhen.cv.flex.tooltip"]()}
+    </h1>
+  </div>
+  <div class="text-[0.85rem] text-left">
+    {@html m["zhen.cv.flex.body"]()}
+  </div>
 </div>
 
 <style>
-    .short-profile-container{
-        width: 90%;
-    }
+  .short-profile-container {
+    width: 90%;
+  }
 
-    .short-profile-container > div:first-child {
-        width: 100%;
+  .short-profile-container > div:first-child {
+    width: 100%;
 
-        /* Bottom border stripe*/
-        border-bottom: 1mm solid black;
-    }
+    /* Bottom border stripe*/
+    border-bottom: 1mm solid black;
+  }
 </style>

src/routes/cv/comps/Profile.svelte

@@ -1,17 +1,16 @@
+<script lang="ts">
+  import * as m from "$paraglide/messages";
+</script>
+
 <div class="short-profile-container">
   <div class="flex gap-1 items-baseline">
-    <b style="text-align:left;"> About me </b>
+    <b style="text-align:left;">{m["zhen.cv.profile.title"]()}</b>
     <div class="opacity-70 text-[0.5rem]">
-      I know the languages listed above in the decor!
+      {m["zhen.cv.profile.tooltip"]()}
     </div>
   </div>
   <span>
-    I love learning on my own, and I try to be honest. I am highly
-    self-motivated and I usually archive any task I put my mind to. This enables
-    me to have countless hobbies, such as 3D printing, soldering, programming.
-    <br />
-    <br />
-    Other than my github, I've listed some projects highlighted below. :)
+    {m["zhen.cv.profile.long"]()}
   </span>
 </div>
 

src/routes/cv/comps/TableOfProjects.svelte

@@ -1,24 +1,28 @@
-<div class="container">
+<script lang="ts">
+  import * as m from "$paraglide/messages";
+</script>
+
+<div class="container flex flex-col items-center">
   <div class="flex gap-1">
-    <b style="text-align:left;"> List of big projects </b>
+    <b style="text-align:left;">
+      {m["zhen.cv.projects.title"]()}
+    </b>
     <div class="opacity-70 text-[0.5rem]">
-      It is likely I'm working on something new, as you're reading this.
-      <br />
-      Contact me if you're curious! :D
+      {m["zhen.cv.projects.tooltip"]()}
     </div>
   </div>
-  <div class="table-display">
+  <div class="table-display text-sm justify-center">
     <div class="table-item">
       <div>HTML</div>
-      <div>This CV is made with HTML, CSS, and Svelte</div>
+      <div>{m["zhen.cv.projects.cv"]()}</div>
     </div>
     <div class="table-item">
       <div>Computer vision</div>
-      <div>Implimented YoloV1 from scratch. (object detection)</div>
+      <div>{m["zhen.cv.projects.CV"]()}</div>
     </div>
     <div class="table-item">
       <div>Arduino/embedded</div>
-      <div>Built custom CNC machine</div>
+      <div>{m["zhen.cv.projects.embedded"]()}</div>
     </div>
     <!-- <div class="table-item"> -->
     <!--   <div>App dev</div> -->
@@ -26,35 +30,30 @@
     <!-- </div> -->
     <div class="table-item">
       <div>Open-source</div>
-      <div>I often contribute to Open-source</div>
+      <div>{m["zhen.cv.projects.open"]()}</div>
     </div>
     <div class="table-item">
       <div>PCB design</div>
-      <div>I have designed multiple Printed Circuit Boards (PCBs)</div>
+      <div>{m["zhen.cv.projects.pcb"]()}</div>
     </div>
     <div class="table-item">
       <div>Kubernetes</div>
-      <div>WIP: Multi node HA Kubernetes cluster with my friends</div>
+      <div>{m["zhen.cv.projects.kube"]()}</div>
     </div>
   </div>
 </div>
 
 <style lang="scss">
-  .container {
-    display: grid;
-    place-items: center;
-    width: 90%;
-  }
-
   .container > div:first-child {
-    width: 100%;
+    width: 90%;
 
     /* Bottom border stripe*/
     border-bottom: 1mm solid black;
+    white-space: pre;
   }
 
   .table-display {
-    width: 100%;
+    width: 90%;
   }
 
   .table-item {
@@ -73,23 +72,14 @@
       color: #000000;
 
       &:first-child {
-        width: 30%;
-        font-size: 4mm;
+        width: 25%;
+        font-size: 3mm;
 
         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/ts/store.ts

@@ -1,3 +1,4 @@
 import { ApiService } from "./api/api";
+import path from "path";
 
 export let api = ApiService;