cv second page progress

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>