cv second page progress

src/routes/cv/+page.svelte

@@ -25,6 +25,9 @@
   // Discord embed
   import preveiwImage from "$lib/alex/cv-comps/preview.png";
 
+  // pages
+  import Page2 from "./pages/page2.svelte";
+
   // Print detection setup
   import onMount from "@e/onMount";
   let debug = false;
@@ -167,9 +170,7 @@
       </div>
       {#if debug}
         <div class="hide-on-print py-4"><div>===== Next page =====</div></div>
-        <div class="cv-container flex-col flex-col-reverse include-in-print">
+        <Page2 />
-          <div class="text-black text-wrap">hello</div>
-        </div>
       {/if}
     </div>
   </div>

src/routes/cv/comps/HexagonSkills.svelte

@@ -0,0 +1,48 @@
+<script>
+  const cols = 10;
+  const rows = 5;
+
+  // Geometry Constants
+  const width = 66; // px
+  const height = width * 1.1547; // Perfect hexagonal ratio
+  const gap = 4; // Space between hexagons
+
+  // Calculations for layout
+  const horizontalSpacing = width + gap;
+  const verticalOverlap = height * 0.25;
+  const rowHeight = height - verticalOverlap + gap;
+  const offset = horizontalSpacing / 2;
+
+  const hexPath =
+    "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="
+          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="
+              width: {width}px; 
+              height: {height}px; 
+              clip-path: {hexPath};
+              margin-right: {gap}px;
+            "
+          ></div>
+        {/each}
+      </div>
+    {/each}
+  </div>
+</div>

src/routes/cv/comps/SlantedProjectHighlights.svelte

@@ -0,0 +1,39 @@
+<script>
+  const leftCells = [
+    { label: "Cell 1", bg: "bg-blue-600" },
+    { label: "Cell 2", bg: "bg-blue-500" },
+    { label: "Cell 3", bg: "bg-blue-400" },
+  ];
+
+  const rightCells = [
+    { label: "Cell 4", bg: "bg-emerald-600" },
+    { label: "Cell 5", bg: "bg-emerald-500" },
+    { label: "Cell 6", bg: "bg-emerald-400" },
+  ];
+
+  const baseClass =
+    "h-56 w-full flex items-center justify-center text-white font-bold text-2xl";
+</script>
+
+<div class="relative w-full flex justify-between">
+  <div class="col-l relative h-full flex flex-col gap-2 p-4">
+    {#each leftCells as cell}
+      <div class="{baseClass} {cell.bg} pr-[15cm]">{cell.label}</div>
+    {/each}
+  </div>
+
+  <div class="col-r absolute right-0 h-full flex flex-col gap-2 p-4">
+    {#each rightCells as cell}
+      <div class="{baseClass} {cell.bg} pl-[15cm]">{cell.label}</div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .col-l {
+    clip-path: polygon(0 0, 100% 0, 65% 100%, 0 100%);
+  }
+  .col-r {
+    clip-path: polygon(40% 0, 100% 0, 100% 100%, 5% 100%);
+  }
+</style>

src/routes/cv/pages/page2.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import HexagonSkills from "../comps/HexagonSkills.svelte";
+  import SlantedProjectHighlights from "../comps/SlantedProjectHighlights.svelte";
+</script>
+
+<div class="A4 include-in-print">
+  <SlantedProjectHighlights />
+  <HexagonSkills />
+</div>
+
+<style>
+  .A4 {
+    width: 210mm;
+    height: 297mm;
+
+    background-color: #eeeeee;
+  }
+</style>