qr code to interactive website

src/routes/cv/comps/HexagonSkills.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import QrCode from "svelte-qrcode";
+
   const cols = 9;
   const rows = 7;
 
@@ -18,14 +20,14 @@
 
   import { getSkills, Skill } from "@src/ts/misc/ZhenSkills";
   import * as m from "$paraglide/messages";
-  import onMount from "@src/optimizers/onMount";
   import { getLocale, setLocale, locales } from "$paraglide/runtime";
   import re from "@ts/Redaction/Redactor";
+  import { redirect } from "@sveltejs/kit";
+
+  let cvLink = `/cv?locale=${getLocale() == "en" ? "dk" : "en"}&key=${$re?.key ?? "nah"}`;
 
   let skills: Skill[] = [];
-  $: skills = getSkills(
-    `/cv?locale=${getLocale() == "en" ? "dk" : "en"}&key=${$re?.key ?? "nah"}`,
-  );
+  $: skills = getSkills(cvLink);
 
   function getIndex(r: int, c: int): int {
     return Math.floor(r / 2) * (2 * cols + 1) + (r % 2) * (cols + 1) + c;
@@ -46,9 +48,9 @@
       </div>
     </div>
   </div>
-  <div class="overflow-show">
+  <div class="relative overflow-show">
     <div
-      class="relative"
+      class="relative pb-12"
       style="padding-left: 13.5px; width: {cols * horizontalSpacing + offset}px"
     >
       {#each Array(rows) as _, r}
@@ -120,8 +122,8 @@
                     </div>
                     <!-- <div class="absolute top-0 right-0"> -->
                     <!--   <div -->
-                    <!--     class="w-0 text-[0.2cm] w-full pt-1" -->
                     <!--     style="transform: translate(0, 0%) rotate(30deg); " -->
+                    <!--     class="w-0 text-[0.2cm] w-full pt-1" -->
                     <!--   > -->
                     <!--     {skills[x].alt} -->
                     <!--   </div> -->
@@ -134,5 +136,21 @@
         </div>
       {/each}
     </div>
+
+    <div class="absolute right-0 bottom-0 px-4">
+      <div class="w-full flex justify-end">
+        <div class="flex flex-col justify-center items-center">
+          <div>Interactive version</div>
+          <div class="w-[50px] h-[50px] overflow-hidden">
+            <QrCode
+              size={205}
+              padding={0}
+              value={"https://deprived.dev" + cvLink}
+              background={"#eeeeee"}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>