src/pages/shop/_trackers.svelte

@@ -15,8 +15,12 @@
   });
 </script>
 
-<div class="grid grid-cols-6 items-center gap-x-16 pt-32">
+<div class="grid grid-cols-6 gap-8 items-center gap-x-16 pt-32 lg:px-32">
-  <div class="w-48 h-48 bg-blue-500 justify-self-end col-start-3"></div>
+  {#each { length: 6 } as i}
+    <div
+      class="w-48 h-48 bg-blue-500 justify-self-end max-md:col-start-3"
+    ></div>
+    <div class="flex flex-col">
       <div class="justify-self-start flex flex-col w-full col-start-4">
         <div>Tracker</div>
         <div>NRF52840 + ICM45856</div>
@@ -49,4 +53,27 @@
           </div>
         </div>
       </div>
+    </div>
+  {/each}
 </div>
+{#if isDevUrl}
+  <!-- This just visualizes the current tailwind breakpoint -->
+  <div
+    class="back-to-top text-content rounded-full bg-base-300 p-4 border-secondary border-2 text-primary transition-all duration-300 z-50 fixed"
+  >
+    <span style="font-size: 2rem;" class="block sm:hidden"><b>Default</b></span>
+    <span style="font-size: 2rem;" class="hidden sm:block md:hidden"
+      ><b>SM</b></span
+    >
+    <span style="font-size: 2rem;" class="hidden md:block lg:hidden"
+      ><b>MD</b></span
+    >
+    <span style="font-size: 2rem;" class="hidden lg:block xl:hidden"
+      ><b>LG</b></span
+    >
+    <span style="font-size: 2rem;" class="hidden xl:block 2xl:hidden"
+      ><b>XL</b></span
+    >
+    <span style="font-size: 2rem;" class="hidden 2xl:block"><b>2XL</b></span>
+  </div>
+{/if}

src/routes/+layout.svelte

@@ -18,6 +18,7 @@
   let isMobile: boolean = $state(false);
 
   let navbarHidden: boolean = $state(true);
+  let isDevUrl = $state(false);
 
   function resetNavBar() {
     navbarHidden = true;
@@ -48,6 +49,8 @@
     document.head.appendChild(lock);
 
     await re.TryGetUnredacter();
+    const { hostname } = window.location;
+    isDevUrl = hostname.includes("dev") || hostname.includes("localhost");
   });
 
   function nextTheme() {
@@ -190,11 +193,6 @@
   </style>
 {/if}
 
-{#if isMobile}
-  <style>
-  </style>
-{/if}
-
 <style>
   /* Nav bar. */
   header {
@@ -202,6 +200,13 @@
     justify-content: center;
   }
 
+  .back-to-top {
+    opacity: 1;
+    right: 16px;
+    user-select: none;
+    bottom: 80px;
+  }
+
   header a {
     text-decoration: none;
   }

src/routes/cv/+page.svelte

@@ -89,7 +89,13 @@
       class="NotoSans cv-config cv-container-container include-in-print absolute"
     >
       <div class="cv-container sections decorations">
-        <div id="left-section" class="bg-grid-cv flex justify-center">
+        <div id="left-section" class=" flex justify-center">
+          <img
+            class="absolute self-center top-0 bottom-0 text-white"
+            style="transform: rotate(-90deg) scale(550%) translate(-2.5mm, 0); background-color: rgba(1, 1, 1, 0.85)"
+            src="/images/Zhen/cv/ZRuler-F_Cu.svg"
+            alt=""
+          />
           <LeftTopDecor />
           <BottomRightDecor Style="pointer-events: none;" />
           <div
@@ -109,6 +115,13 @@
               <LinkedInQR />
             </div>
           </div>
+          <div class="relative h-full flex flex-col justify-end items-center">
+            <div class="text-sm w-32 mr-32 opacity-90 text-slate-400">
+              <div class="bg-black opacity-75 rounded">
+                I designed this PCB<br />For the nRF52840
+              </div>
+            </div>
+          </div>
         </div>
         <div id="leftSectionSeperator"></div>
         <div id="right-section" class="text-[var(--right-text-color)] bg-white">
@@ -263,14 +276,13 @@
     #left-section {
       // background-color: #bdd6ee;
 
-      > div:last-child {
+      > div:nth-child(5) {
         z-index: 1;
         width: 17.5rem;
 
         left: 0;
 
         padding-top: 30mm;
-        padding-bottom: 30mm;
       }
     }
 

src/routes/cv/comps/IconAndText2.svelte

@@ -3,7 +3,7 @@
   export let logoWidths: string = "35%";
 
   import onMount from "@e/onMount";
-  import env, { initEnv } from "@src/ts/EnvHandler";
+  import { env, initEnv } from "@src/ts/EnvHandler";
   onMount(() => {
     imageCaption = logo.split(/(\\|\/)/g).pop();
     initEnv();

src/routes/cv/comps/LeftTopDecor.svelte

@@ -18,7 +18,7 @@
     />
   </div>
   <div />
-  <div class="flex justify-center">
+  <div class="flex bg-black justify-center">
     <div class="w-[6cm]">
       <LinkToSource />
     </div>

src/routes/cv/comps/LinkToSource.svelte

@@ -33,10 +33,7 @@
 
     //white-space: nowrap;
 
-    color: #777777;
-
     * a {
-      color: #3d6ddc;
       padding-left: 1mm;
       padding-right: 1mm;
 

src/routes/cv/comps/NameAndImage.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
+  import re from "@ts/Redaction/Redactor";
+
   import NamePlate from "./NamePlate.svelte";
   import selfie from "$lib/alex/cv-comps/VRNerd.jpg";
+  import env from "@src/ts/EnvHandler";
 </script>
 
 <div class="nameAndImageContainer">
@@ -8,7 +11,11 @@
   <div
     class="mt-4 w-48 h-48 overflow-hidden shadow-xl rounded-lg flex justify-center items-center"
   >
-    <img src={selfie} class="selfie-constraints object-cover" alt="Selfie" />
+    <img
+      src={$re?.selfie.replace("[PB]", env.POCKETBASE_URL) ?? selfie}
+      class="selfie-constraints object-cover"
+      alt="Selfie"
+    />
   </div>
 </div>
 

src/ts/Redaction/Profile.ts

@@ -24,6 +24,7 @@ const CV = z.object({
 
 const ProfileSchema = z.object({
   name: z.string().min(1),
+  selfie: z.string().min(1),
   nick: z.string().min(1),
   shortProfileHiddenContent: z.array(z.string()),
   email: z.string().email(),