From 7a400cced7f5556d369453d0769395d72dd8735b Mon Sep 17 00:00:00 2001
From: BOTAlex <zhentao2004@gmail.com>
Date: Mon, 30 Mar 2026 04:57:34 +0200
Subject: [PATCH] big progress

---
 messages/en.json                              |   2 +-
 .../cv/comps/SlantedProjectHighlights.svelte  | 148 ++++++++++++++++--
 src/routes/cv/pages/page2.svelte              |   2 +-
 3 files changed, 136 insertions(+), 16 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index ddf9f08..f9efaf8 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -10,7 +10,7 @@
       },
       "flex": {
         "title": "Key Achievement",
-        "body": "The <a href='https://deprived.dev'>The <span class='text-blue-500 underline'>deprived devs</span></a> has won every gamejam we've participated in!"
+        "body": "<a href='https://deprived.dev'>The <span class='text-blue-500 underline'>deprived devs</span></a> has won every gamejam we've participated in!"
       },
       "projects": {
         "title": "Big projects",
diff --git a/src/routes/cv/comps/SlantedProjectHighlights.svelte b/src/routes/cv/comps/SlantedProjectHighlights.svelte
index 845033c..2ae27ab 100644
--- a/src/routes/cv/comps/SlantedProjectHighlights.svelte
+++ b/src/routes/cv/comps/SlantedProjectHighlights.svelte
@@ -1,32 +1,152 @@
 <script>
   const baseClass =
     "h-56 w-full bg-slate-400 flex text-white font-bold text-2xl";
+  const titleClass = "px-4";
 </script>
 
 <div class="relative w-full flex justify-between">
-  <div class="col-l w-full relative h-full flex flex-col gap-2 p-4">
-    <div class="{baseClass} left-cols">
-      <div class="w-full bg-white">Kubernetes Cluster</div>
+  <div class="col-l w-full relative h-full flex flex-col gap-2 p-8">
+    <div class={baseClass}>
+      <div class="w-full flex flex-col pr-[7cm]">
+        <div class="w-full text-black bg-white">Kubernetes Cluster</div>
+        <div class="relative flex-1 w-full flex min-h-0">
+          <div class="w-full relative max-h-full flex flex-col">
+            <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"
+                alt=""
+              />
+            </div>
+          </div>
+          <div
+            class="absolute kube-split bg-white/32 backdrop-blur left-0 right-0 flex flex-col h-full"
+          >
+            <div class="pl-[250px] h-full w-full">
+              {#if true}
+                {@const rotation = "15deg"}
+                <div
+                  class="h-full flex flex-col text-[#222222] text-xs py-9"
+                  style="transform: rotate({rotation});"
+                >
+                  <div style="transform: rotate(-{rotation});">
+                    Multi-node cluster
+                  </div>
+                  <div style="transform: rotate(-{rotation});">
+                    with vpn vlan
+                  </div>
+                  <div style="transform: rotate(-{rotation});">
+                    connected through
+                  </div>
+                  <div style="transform: rotate(-{rotation});">wide-web by</div>
+                  <div style="transform: rotate(-{rotation});">
+                    Wireguard mesh
+                  </div>
+                  <div style="transform: rotate(-{rotation});">running in</div>
+                  <div style="transform: rotate(-{rotation});">
+                    in Qemu on NixOS
+                  </div>
+                </div>
+              {/if}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class={baseClass}>
+      <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%]">
+            <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"
+              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"
+              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>
+          </div>
+        </div>
+      </div>
     </div>
-    <div class="{baseClass} left-cols"></div>
-    <div class="{baseClass} left-cols"></div>
   </div>
 
-  <div class="col-r absolute left-0 right-0 h-full flex flex-col gap-2 p-4">
-    <div class="{baseClass} right-cols bg-slate-700"></div>
-    <div class="{baseClass} right-cols bg-slate-700"></div>
-    <div class="{baseClass} right-cols bg-slate-700"></div>
+  <div
+    class="col-border absolute bg-black 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"
+  ></div>
+  <div class="col-r absolute left-0 right-0 h-full flex flex-col gap-2 p-8">
+    <div class="{baseClass} ">
+      <div class="w-full flex flex-col pl-[11cm]">
+        <div class="w-full text-slate-900 bg-white text-end">Frontend</div>
+        <div class="w-full h-full"></div>
+      </div>
+    </div>
+    <div class="{baseClass} ">
+      <div class="w-full flex flex-col pl-[9cm]">
+        <div class="w-full text-slate-900 bg-white text-end">Embedded</div>
+        <div class="w-full h-full"></div>
+      </div>
+    </div>
   </div>
 </div>
 
 <style>
+  div {
+    /* Counts from left side*/
+    --top: 60%;
+    --bot: calc(100% - var(--top));
+  }
+
   .col-r {
-    clip-path: polygon(65% 0, 100% 0, 100% 100%, 35% 100%);
+    clip-path: polygon(var(--top) 0, 100% 0, 100% 100%, var(--bot) 100%);
   }
-  .left-cols {
-    /* width: 15cm; */
+  .quad-split {
+    --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%); */
   }
-  .right-cols {
-    /* width: 15cm; */
+  .kube-split {
+    --ratio: 56%;
+    --offset: 1%;
+    clip-path: polygon(
+      calc(var(--ratio) + var(--offset)) 0,
+      100% 0,
+      100% 100%,
+      calc(100% - var(--ratio) + var(--offset)) 100%
+    );
+  }
+  .col-border {
+    --border-size: 16px;
+    clip-path: polygon(
+      calc(var(--top) - var(--border-size)) 0,
+      100% 0,
+      100% 100%,
+      calc(var(--bot) - var(--border-size)) 100%
+    );
+  }
+  .col-border-2 {
+    --border-size: 0px;
+    clip-path: polygon(
+      calc(var(--top) - var(--border-size)) 0,
+      100% 0,
+      100% 100%,
+      calc(var(--bot) - var(--border-size)) 100%
+    );
   }
 </style>
diff --git a/src/routes/cv/pages/page2.svelte b/src/routes/cv/pages/page2.svelte
index 56e736c..8b14f67 100644
--- a/src/routes/cv/pages/page2.svelte
+++ b/src/routes/cv/pages/page2.svelte
@@ -13,6 +13,6 @@
     width: 210mm;
     height: 297mm;
 
-    background-color: #eeeeee;
+    background-color: #121212;
   }
 </style>