cv personlisable now

src/routes/cv/+page.svelte

@@ -3,6 +3,8 @@
   import * as m from "$paraglide/messages";
   import { getLocale, setLocale, locales } from "$paraglide/runtime";
 
+  import SendHorizontal from "@lucide/svelte/icons/send-horizontal";
+
   // Left side
   import NameAndImage from "./comps/NameAndImage.svelte";
   import ShortProfile from "./comps/ShortProfile.svelte";
@@ -50,6 +52,23 @@
     debug = params.has("debug");
   });
 
+  let moticationInput: HTMLInputElement;
+  function loadMotivation() {
+    const motivation = localStorage.getItem("motivation");
+    if (!motivation) return;
+
+    moticationInput.value = motivation;
+  }
+  function submitMotivation() {
+    console.log(moticationInput.value);
+    if (!moticationInput.value) {
+      localStorage.removeItem("motivation");
+    } else {
+      localStorage.setItem("motivation", moticationInput.value);
+    }
+    window.location.reload();
+  }
+
   function getFormattedDate(): string {
     const date = new Date();
     const day = String(date.getDate()).padStart(2, "0");
@@ -73,28 +92,57 @@
   <meta content="#bdd6ee" data-react-helmet="true" name="theme-color" />
 
   <div class="cv-info-container flex flex-col w-full h-full hide-on-print">
-    <div>
+    <div class="flex w-full h-full items-center justify-center gap-8">
-      <div class="keyboard-key">P</div>
+      <div class=" flex flex-col">
-      +
+        <div>
-      <div class="keyboard-key">CTRL</div>
+          <div class="keyboard-key">P</div>
-      + Chrome = PDF
+          +
-    </div>
+          <div class="keyboard-key">CTRL</div>
-    <div class="flex gap-2">
+          + Chrome = PDF
-      CV Languages:
+        </div>
-      {#each locales as tag}
+        <div class="flex gap-2">
-        <button
+          CV Languages:
-          class="btn btn-xs {tag == getLocale()
+          {#each locales as tag}
-            ? 'btn-filled btn-primary text-primary-content'
+            <button
-            : 'btn-outline'}"
+              class="btn btn-xs {tag == getLocale()
-          onclick={() => {
+                ? 'btn-filled btn-primary text-primary-content'
-            setLocale(tag);
+                : 'btn-outline'}"
+              onclick={() => {
+                setLocale(tag);
+              }}
+            >
+              {tag.toUpperCase()}
+            </button>
+          {/each}
+        </div>
+      </div>
+      <div class="flex flex-col">
+        <div>Insert motivation</div>
+        <form
+          onsubmit={(e) => {
+            e.preventDefault();
+            submitMotivation();
           }}
+          class="join"
         >
-          {tag.toUpperCase()}
+          <input
-        </button>
+            bind:this={moticationInput}
-      {/each}
+            class="join-item input input-outline input-xs"
+            type="text"
+            placeholder="Type something..."
+          />
+          <button type="submit" class="btn btn-xs join-item">
+            <SendHorizontal />
+          </button>
+        </form>
+      </div>
     </div>
   </div>
+  <!-- space -->
+  <!-- space -->
+  <!-- space -->
+  <!-- space -->
+
   <div class="w-full h-full flex flex-col justify-center overflow-hidden">
     <div
       class="relative w-full flex justify-center {$re?.name ? 'hidden' : ''}"

src/routes/cv/comps/BiggestFlex.svelte

@@ -1,19 +1,32 @@
 <script lang="ts">
   import * as m from "$paraglide/messages";
+  import { onMount } from "svelte";
+  let motivation: string | null = "";
+  onMount(() => {
+    motivation = localStorage.getItem("motivation");
+  });
 </script>
 
 <div class="short-profile-container">
   <div class="flex gap-1">
-    <b style="text-align:left;">{m["zhen.cv.flex.title"]()}</b>
+    {#if motivation}
-    <h1
+      <b style="text-align:left;">Motivation</b>
-      style="font-size: 0.5rem; color: grey;"
+    {:else}
-      class="flex flex-col justify-end"
+      <b style="text-align:left;">{m["zhen.cv.flex.title"]()}</b>
-    >
+      <h1
-      {m["zhen.cv.flex.tooltip"]()}
+        style="font-size: 0.5rem; color: grey;"
-    </h1>
+        class="flex flex-col justify-end"
+      >
+        {m["zhen.cv.flex.tooltip"]()}
+      </h1>
+    {/if}
   </div>
   <div class="text-[0.85rem] text-left">
-    {@html m["zhen.cv.flex.body"]()}
+    {#if motivation}
+      <div>{motivation}</div>
+    {:else}
+      {@html m["zhen.cv.flex.body"]()}
+    {/if}
   </div>
 </div>