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,6 +92,8 @@
   <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 class="flex w-full h-full items-center justify-center gap-8">
+      <div class=" flex flex-col">
         <div>
           <div class="keyboard-key">P</div>
           +
@@ -95,6 +116,33 @@
           {/each}
         </div>
       </div>
+      <div class="flex flex-col">
+        <div>Insert motivation</div>
+        <form
+          onsubmit={(e) => {
+            e.preventDefault();
+            submitMotivation();
+          }}
+          class="join"
+        >
+          <input
+            bind:this={moticationInput}
+            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,9 +1,17 @@
 <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">
+    {#if motivation}
+      <b style="text-align:left;">Motivation</b>
+    {:else}
       <b style="text-align:left;">{m["zhen.cv.flex.title"]()}</b>
       <h1
         style="font-size: 0.5rem; color: grey;"
@@ -11,9 +19,14 @@
       >
         {m["zhen.cv.flex.tooltip"]()}
       </h1>
+    {/if}
   </div>
   <div class="text-[0.85rem] text-left">
+    {#if motivation}
+      <div>{motivation}</div>
+    {:else}
       {@html m["zhen.cv.flex.body"]()}
+    {/if}
   </div>
 </div>