From c86b5524eb3df8628f4c03d7055333fa6a96bcae Mon Sep 17 00:00:00 2001
From: BOTAlex <zhentao2004@gmail.com>
Date: Mon, 30 Mar 2026 07:22:42 +0200
Subject: [PATCH] sync

---
 src/routes/cv/comps/HexagonSkills.svelte      | 44 +++++-----
 .../cv/comps/SlantedProjectHighlights.svelte  | 88 +++++++++++++++----
 src/routes/cv/pages/page2.svelte              | 15 +++-
 3 files changed, 111 insertions(+), 36 deletions(-)

diff --git a/src/routes/cv/comps/HexagonSkills.svelte b/src/routes/cv/comps/HexagonSkills.svelte
index b98f515..6d421d2 100644
--- a/src/routes/cv/comps/HexagonSkills.svelte
+++ b/src/routes/cv/comps/HexagonSkills.svelte
@@ -1,6 +1,6 @@
 <script>
   const cols = 10;
-  const rows = 5;
+  const rows = 7;
 
   // Geometry Constants
   const width = 66; // px
@@ -17,32 +17,36 @@
     "polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)";
 </script>
 
-<div class="text-xl px-8 py-4 text-slate-800">Skills</div>
-<div class="bg-slate-100 overflow-show">
-  <div
-    class="relative"
-    style="padding-left: 13.5px; width: {cols * horizontalSpacing + offset}px"
-  >
-    {#each Array(rows) as _, r}
-      <div
-        class="flex"
-        style="
+<div class="bg-[#eeeeee] flex flex-col h-full">
+  <div class=" px-8 py-4 text-slate-800 font-semibold text-2xl">
+    Experienced in
+  </div>
+  <div class=" overflow-show">
+    <div
+      class="relative"
+      style="padding-left: 13.5px; width: {cols * horizontalSpacing + offset}px"
+    >
+      {#each Array(rows) as _, r}
+        <div
+          class="flex"
+          style="
           margin-bottom: -{verticalOverlap - gap}px; 
           padding-left: {r % 2 !== 0 ? offset : 0}px;
         "
-      >
-        {#each Array(cols + !(r % 2)) as _, c}
-          <div
-            class="bg-slate-800 flex items-center justify-center shrink-0"
-            style="
+        >
+          {#each Array(cols + !(r % 2)) as _, c}
+            <div
+              class="bg-slate-800 flex items-center justify-center shrink-0"
+              style="
               width: {width}px; 
               height: {height}px; 
               clip-path: {hexPath};
               margin-right: {gap}px;
             "
-          ></div>
-        {/each}
-      </div>
-    {/each}
+            ></div>
+          {/each}
+        </div>
+      {/each}
+    </div>
   </div>
 </div>
diff --git a/src/routes/cv/comps/SlantedProjectHighlights.svelte b/src/routes/cv/comps/SlantedProjectHighlights.svelte
index 2ae27ab..4cdae96 100644
--- a/src/routes/cv/comps/SlantedProjectHighlights.svelte
+++ b/src/routes/cv/comps/SlantedProjectHighlights.svelte
@@ -6,6 +6,7 @@
 
 <div class="relative w-full flex justify-between">
   <div class="col-l w-full relative h-full flex flex-col gap-2 p-8">
+    <div class="text-2xl p-4">Small projects showcase</div>
     <div class={baseClass}>
       <div class="w-full flex flex-col pr-[7cm]">
         <div class="w-full text-black bg-white">Kubernetes Cluster</div>
@@ -14,7 +15,7 @@
             <div class="w-full h-full flex flex-col">
               <img
                 class="w-full h-full object-cover"
-                src="https://preview.redd.it/my-first-ever-by-hand-smd-soldering-i-just-have-a-soldering-v0-mc1kfp8fyood1.jpg?width=640&crop=smart&auto=webp&s=0336281767138bd92c632a96cd4df7c41805ef55"
+                src="https://deprived.dev/assets/website/zhen/cv/fossflow-kubernetes.png"
                 alt=""
               />
             </div>
@@ -26,7 +27,7 @@
               {#if true}
                 {@const rotation = "15deg"}
                 <div
-                  class="h-full flex flex-col text-[#222222] text-xs py-9"
+                  class="h-full flex flex-col text-[#222222] text-xs py-7"
                   style="transform: rotate({rotation});"
                 >
                   <div style="transform: rotate(-{rotation});">
@@ -46,6 +47,14 @@
                   <div style="transform: rotate(-{rotation});">
                     in Qemu on NixOS
                   </div>
+                  <div style="transform: rotate(-{rotation});"><br /></div>
+                  <div style="transform: rotate(-{rotation});"><br /></div>
+                  <div
+                    style="transform: rotate(-{rotation});"
+                    class="text-[0.6rem]"
+                  >
+                    Actual cluster diagram
+                  </div>
                 </div>
               {/if}
             </div>
@@ -57,21 +66,26 @@
       <div class="w-full flex flex-col pr-[9cm]">
         <div class="w-full text-slate-900 bg-white">PCB Design</div>
         <div class="relative flex-1 w-full flex min-h-0">
-          <div class="w-full relative h-full flex flex-col pr-[45%]">
+          <div
+            class="w-full relative h-full flex flex-col justify-evenly pr-[45%]"
+          >
             <img
-              class="w-full h-full object-cover"
-              src="https://preview.redd.it/my-first-ever-by-hand-smd-soldering-i-just-have-a-soldering-v0-mc1kfp8fyood1.jpg?width=640&crop=smart&auto=webp&s=0336281767138bd92c632a96cd4df7c41805ef55"
+              class="w-full flex-1 object-cover min-h-0"
+              src="https://deprived.dev/assets/website/zhen/cv/kicad-pcb.png"
               alt=""
             />
             <img
-              class="w-full h-full object-cover"
-              src="https://preview.redd.it/my-first-ever-by-hand-smd-soldering-i-just-have-a-soldering-v0-mc1kfp8fyood1.jpg?width=640&crop=smart&auto=webp&s=0336281767138bd92c632a96cd4df7c41805ef55"
+              class="w-full flex-1 object-cover min-h-0"
+              src="https://deprived.dev/assets/website/zhen/cv/soldering-stack.jpeg"
               alt=""
             />
           </div>
           <div class="absolute quad-split left-0 right-0 flex flex-col h-full">
-            <div class="bg-lime-400 h-full w-full"></div>
-            <div class="bg-yellow-400 h-full w-full"></div>
+            <img
+              class="w-full h-full object-fit"
+              src="https://deprived.dev/assets/website/zhen/cv/pnp.png"
+              alt=""
+            />
           </div>
         </div>
       </div>
@@ -79,22 +93,44 @@
   </div>
 
   <div
-    class="col-border absolute bg-black left-0 right-0 h-full flex flex-col gap-2 p-8"
+    class="col-border absolute bg-[#121212] left-0 right-0 h-full flex flex-col gap-2 p-8"
   ></div>
   <div
-    class="col-border-2 absolute bg-slate-500 left-0 right-0 h-full flex flex-col gap-2 p-8"
+    class="col-border-2 absolute left-0 right-0 h-full flex flex-col gap-2 p-8"
   ></div>
   <div class="col-r absolute left-0 right-0 h-full flex flex-col gap-2 p-8">
+    <div class="text-2xl p-4"><br /></div>
     <div class="{baseClass} ">
-      <div class="w-full flex flex-col pl-[11cm]">
+      <div class="w-full flex flex-col pl-[9.5cm]">
         <div class="w-full text-slate-900 bg-white text-end">Frontend</div>
-        <div class="w-full h-full"></div>
+        <img
+          class="w-full h-full object-cover object-top-left"
+          src="https://deprived.dev/assets/website/zhen/cv/cv-inception.png"
+          alt=""
+        />
       </div>
     </div>
     <div class="{baseClass} ">
-      <div class="w-full flex flex-col pl-[9cm]">
+      <div class="w-full flex flex-col pl-[7.5cm]">
         <div class="w-full text-slate-900 bg-white text-end">Embedded</div>
-        <div class="w-full h-full"></div>
+        <div class="relative flex-1 w-full flex min-h-0">
+          <div class="w-full relative h-full flex flex-col">
+            <img
+              class="w-full h-full object-cover pr-25"
+              src="https://deprived.dev/assets/website/zhen/cv/countrProto.jpeg"
+              alt=""
+            />
+          </div>
+          <div
+            class="absolute split-embedded left-0 right-0 flex flex-col h-full"
+          >
+            <img
+              class="w-full h-full pl-45 object-cover"
+              src="https://deprived.dev/assets/website/zhen/cv/selfie.jpeg"
+              alt=""
+            />
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -121,6 +157,28 @@
     );
     /* clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); */
   }
+  .split-frontend {
+    --ratio: 57.5%;
+    --offset: 7.5%;
+    clip-path: polygon(
+      calc(var(--ratio) + var(--offset)) 0,
+      100% 0,
+      100% 100%,
+      calc(100% - var(--ratio) + var(--offset)) 100%
+    );
+    /* clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); */
+  }
+  .split-embedded {
+    --ratio: 56%;
+    --offset: 0%;
+    clip-path: polygon(
+      calc(var(--ratio) + var(--offset)) 0,
+      100% 0,
+      100% 100%,
+      calc(100% - var(--ratio) + var(--offset)) 100%
+    );
+    /* clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); */
+  }
   .kube-split {
     --ratio: 56%;
     --offset: 1%;
diff --git a/src/routes/cv/pages/page2.svelte b/src/routes/cv/pages/page2.svelte
index 8b14f67..4c5e1bf 100644
--- a/src/routes/cv/pages/page2.svelte
+++ b/src/routes/cv/pages/page2.svelte
@@ -5,6 +5,9 @@
 
 <div class="A4 include-in-print">
   <SlantedProjectHighlights />
+
+  <div class="warning-tape w-full h-4"></div>
+
   <HexagonSkills />
 </div>
 
@@ -12,7 +15,17 @@
   .A4 {
     width: 210mm;
     height: 297mm;
-
     background-color: #121212;
   }
+
+  .warning-tape {
+    --color1: #eeeeee;
+    background: repeating-linear-gradient(
+      -45deg,
+      var(--color1),
+      var(--color1) 20px,
+      #121212 20px,
+      #121212 40px
+    );
+  }
 </style>