sync

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,8 +17,11 @@
     "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-[#eeeeee] flex flex-col h-full">
-<div class="bg-slate-100 overflow-show">
+  <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"
@@ -45,4 +48,5 @@
         </div>
       {/each}
     </div>
+  </div>
 </div>

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"
+              class="w-full flex-1 object-cover min-h-0"
-              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/kicad-pcb.png"
               alt=""
             />
             <img
-              class="w-full h-full object-cover"
+              class="w-full flex-1 object-cover min-h-0"
-              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/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>
+            <img
-            <div class="bg-yellow-400 h-full w-full"></div>
+              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%;

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>