sync

messages/dk.json

@@ -22,6 +22,14 @@
         "open": "Bidrager ofte til open-source",
         "pcb": "Har designet flere printed circuit boards (PCB'er)",
         "kube": "Multi node HA kube cluster med venner"
+      },
+      "page2": {
+        "title": "Projektfremvisning",
+        "mini-projects": {
+          "title": "Værktøjserfaring",
+          "ask": "Spørg mig",
+          "linked": "Projekter med links"
+        }
       }
     }
   }

messages/en.json

@@ -21,6 +21,14 @@
         "open": "Often contribute to Open-source",
         "pcb": "I have designed multiple Printed Circuit Boards (PCBs)",
         "kube": "Multi node HA Kubernetes cluster with my friends"
+      },
+      "page2": {
+        "title": "Project showcase",
+        "mini-projects": {
+          "title": "Tool experience",
+          "ask": "Ask me",
+          "linked": "Projects with link"
+        }
       }
     }
   }

src/routes/cv/+page.svelte

@@ -168,10 +168,8 @@
           </div>
         </div>
       </div>
-      {#if debug}
       <div class="hide-on-print py-4"><div>===== Next page =====</div></div>
       <Page2 />
-      {/if}
     </div>
   </div>
 </div>

src/routes/cv/comps/Education.svelte

@@ -23,7 +23,7 @@
       <p style="font-size: 0.5rem;">AI and data</p>
     </IconAndText2>
     <IconAndText2 logo={$re?.education[1].imageId ?? ""}>
-      <b>{$re?.education[0].name ?? "High School 🤮"}</b><br />
+      <b>{$re?.education[1].name ?? "High School 🤮"}</b><br />
       <p style="font-size: 0.5rem;">Computer science</p>
     </IconAndText2>
     <IconAndText2 logo={SasLogo}>

src/routes/cv/comps/HexagonSkills.svelte

@@ -1,9 +1,9 @@
-<script>
+<script lang="ts">
-  const cols = 10;
+  const cols = 9;
   const rows = 7;
 
   // Geometry Constants
-  const width = 66; // px
+  const width = 73; // px
   const height = width * 1.1547; // Perfect hexagonal ratio
   const gap = 4; // Space between hexagons
 
@@ -15,13 +15,31 @@
 
   const hexPath =
     "polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)";
+
+  import { getSkills } from "@src/ts/misc/ZhenSkills";
+  import * as m from "$paraglide/messages";
+
+  const skills = getSkills();
+  function getIndex(r: int, c: int): int {
+    return Math.floor(r / 2) * (2 * cols + 1) + (r % 2) * (cols + 1) + c;
+  }
 </script>
 
-<div class="bg-[#eeeeee] flex flex-col h-full">
+<div class="bg-[#eeeeee] text-[#121212] flex flex-col h-full">
-  <div class=" px-8 py-4 text-slate-800 font-semibold text-2xl">
+  <div class="flex justify-between items-center px-8 py-4">
-    Experienced in
+    <div class="font-semibold text-2xl">
+      {m["zhen.cv.page2.mini-projects.title"]()}
     </div>
-  <div class=" overflow-show">
+    <div class="flex gap-4">
+      <div class="border-b-6 border-[#121212]/32">
+        {m["zhen.cv.page2.mini-projects.ask"]()}
+      </div>
+      <div class="border-b-6 border-[#7bd45d]">
+        {m["zhen.cv.page2.mini-projects.linked"]()}
+      </div>
+    </div>
+  </div>
+  <div class="overflow-show">
     <div
       class="relative"
       style="padding-left: 13.5px; width: {cols * horizontalSpacing + offset}px"
@@ -34,16 +52,48 @@
           padding-left: {r % 2 !== 0 ? offset : 0}px;
         "
         >
-          {#each Array(cols + !(r % 2)) as _, c}
+          {#each Array(cols + (r % 2 == 0)) as _, c}
+            {@const x = getIndex(r, c)}
+            {#if x < skills.length}
+              <div class="hidden"></div>
+
               <div
-              class="bg-slate-800 flex items-center justify-center shrink-0"
+                class=" {skills[x].link != undefined
+                  ? 'bg-[#7bd45d]'
+                  : 'bg-[#121212]/32'} flex items-center justify-center shrink-0"
                 style="
               width: {width}px; 
               height: {height}px; 
               clip-path: {hexPath};
               margin-right: {gap}px;
             "
-            ></div>
+              >
+                {#if skills[x].link != undefined}
+                  <a
+                    href={skills[x].link}
+                    class="bg-[#eeeeee] w-full grid items-center shrink-0"
+                    style="
+              width: {width * 0.9}px; 
+              height: {height * 0.9}px; 
+              clip-path: {hexPath};
+            "
+                  >
+                    <img class="p-3.5" src={skills[x].image} alt="" />
+                  </a>
+                {:else}
+                  <div
+                    class="bg-[#eeeeee] w-full grid items-center shrink-0"
+                    style="
+              width: {width * 0.9}px; 
+              height: {height * 0.9}px; 
+              clip-path: {hexPath};
+            "
+                  >
+                    <img class="p-3.5" src={skills[x].image} alt="" />
+                  </div>
+                {/if}
+              </div>
+            {/if}
           {/each}
         </div>
       {/each}

src/routes/cv/comps/SlantedProjectHighlights.svelte

@@ -1,15 +1,17 @@
 <script>
   const baseClass =
     "h-56 w-full bg-slate-400 flex text-white font-bold text-2xl";
-  const titleClass = "px-4";
+  import * as m from "$paraglide/messages";
 </script>
 
 <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="text-2xl p-4">{m["zhen.cv.page2.title"]()}</div>
     <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="w-full text-[#121212] bg-[#f1f1f1] px-2">
+          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">
@@ -64,7 +66,7 @@
     </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="w-full text-[#121212] bg-[#f1f1f1] px-2">PCB Design</div>
         <div class="relative flex-1 w-full flex min-h-0">
           <div
             class="w-full relative h-full flex flex-col justify-evenly pr-[45%]"
@@ -102,7 +104,7 @@
     <div class="text-2xl p-4"><br /></div>
     <div class="{baseClass} ">
       <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 text-[#121212] bg-[#f1f1f1] text-end">Frontend</div>
         <img
           class="w-full h-full object-cover object-top-left"
           src="https://deprived.dev/assets/website/zhen/cv/cv-inception.png"
@@ -112,7 +114,7 @@
     </div>
     <div class="{baseClass} ">
       <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 text-[#121212] bg-[#f1f1f1] text-end">Embedded</div>
         <div class="relative flex-1 w-full flex min-h-0">
           <div class="w-full relative h-full flex flex-col">
             <img

src/ts/misc/ZhenSkills.ts

@@ -0,0 +1,182 @@
+export class Skill {
+  image: string | undefined;
+  alt: string | undefined;
+  link: string | undefined;
+
+  public constructor(
+    alt: string,
+    image: string,
+    link: string | undefined = undefined,
+  ) {
+    this.image = "https://deprived.dev/assets/website/icons/" + image;
+    this.alt = alt;
+    this.link = link;
+  }
+}
+
+export function getSkills(): Skill[] {
+  let arr = []; // ineffecient implimentation, but who cares lol
+
+  arr.push(new Skill("C", "c.svg", "https://github.com/MagicBOTAlex/ZSwitch"));
+  arr.push(
+    new Skill("C++", "cpp.svg", "https://github.com/MagicBOTAlex/DesktopPlus"),
+  );
+  arr.push(new Skill("C#", "csharp.svg"));
+  arr.push(
+    new Skill(
+      "Python",
+      "python.svg",
+      "https://github.com/MagicBOTAlex/MLEyeTrack",
+    ),
+  );
+
+  arr.push(new Skill("Espressif", "espressif.svg"));
+  arr.push(
+    new Skill("ETVR", "etvr.png", "https://github.com/MagicBOTAlex/MLEyeTrack"),
+  );
+
+  // Embedded
+  arr.push(
+    new Skill(
+      "Arduino",
+      "arduino.svg",
+      "https://github.com/MagicBOTAlex/ZSwitch",
+    ),
+  );
+
+  // frontend
+  arr.push(new Skill("Svelte", "svelte.svg", "https://deprived.dev/"));
+  arr.push(new Skill("Tailwind", "tailwind.svg", "https://deprived.dev/"));
+  arr.push(
+    new Skill(
+      "JavaScript",
+      "javascript.svg",
+      "https://github.com/MagicBOTAlex/MomHelper",
+    ),
+  );
+  arr.push(new Skill("TypeScript", "typescript.svg", "https://deprived.dev/"));
+  arr.push(
+    new Skill("Tauri", "tauri.svg", "https://github.com/MagicBOTAlex/ComboFT"),
+  );
+  arr.push(new Skill("CSS", "css.svg", "https://deprived.dev/"));
+  arr.push(new Skill("DaisyUI", "daisyui.svg", "https://deprived.dev/"));
+  arr.push(new Skill("Cloudflare", "cloudflare.svg", "https://deprived.dev/"));
+
+  // homelab
+  arr.push(new Skill("Home Assistant", "homeassistant.svg"));
+  arr.push(new Skill("ESPHome", "esphome.svg"));
+  arr.push(new Skill("WireGuard", "wireguard.svg"));
+  arr.push(
+    new Skill(
+      "Docker",
+      "docker.svg",
+      "https://github.com/MagicBOTAlex/DockeredMLEyeTrack",
+    ),
+  );
+  arr.push(new Skill("Argo", "argo.svg"));
+  arr.push(new Skill("Kubernetes", "kubernetes.svg"));
+  arr.push(
+    new Skill(
+      "Linux",
+      "linux.svg",
+      "https://github.com/MagicBOTAlex/nixos-server",
+    ),
+  );
+  arr.push(
+    new Skill(
+      "NixOS",
+      "nixos.svg",
+      "https://github.com/MagicBOTAlex/nixos-server",
+    ),
+  );
+  arr.push(new Skill("Debian", "debian.svg"));
+  arr.push(new Skill("Ubuntu", "ubuntu.svg"));
+  arr.push(
+    new Skill(
+      "Neovim",
+      "neovim.svg",
+      "https://github.com/MagicBOTAlex/NVimConfigs",
+    ),
+  );
+
+  arr.push(new Skill("nRF", "nrf.svg"));
+  arr.push(new Skill("OpenCV", "opencv.svg"));
+  arr.push(new Skill("OpenPnP", "openpnp.svg"));
+  arr.push(
+    new Skill(
+      "PlatformIO",
+      "platformio.svg",
+      "https://github.com/MagicBOTAlex/ZSwitch",
+    ),
+  );
+  arr.push(new Skill("PocketBase", "pocketbase.svg"));
+  arr.push(
+    new Skill(
+      "QEMU",
+      "qemu.svg",
+      "https://github.com/MagicBOTAlex/nixos-server/tree/master/vms/kube-daddy",
+    ),
+  );
+  arr.push(new Skill("Raspberry Pi", "raspberrypi.svg"));
+  arr.push(new Skill("Rust", "rust.svg"));
+  arr.push(new Skill("Sass", "sass.svg"));
+  arr.push(new Skill("Shopify", "shopify.svg"));
+
+  // VR
+  arr.push(new Skill("SlimeVR", "slimevr.svg"));
+  arr.push(
+    new Skill(
+      "SteamVR",
+      "steamvr.webp",
+      "https://github.com/elvissteinjr/DesktopPlus",
+    ),
+  );
+  arr.push(
+    new Skill(
+      "Babble",
+      "babble.svg",
+      "https://github.com/Project-Babble/Baballonia/pull/215",
+    ),
+  );
+
+  // AI
+  arr.push(new Skill("Jupyter", "jupiter.svg"));
+  arr.push(new Skill("PyTorch", "pytorch.svg"));
+  arr.push(new Skill("Keras", "keras.svg"));
+  arr.push(new Skill("TensorFlow", "tensorflow.svg"));
+
+  // Game dev
+  arr.push(new Skill("Unity", "unity.svg"));
+  arr.push(new Skill("Blender", "blender.svg"));
+  arr.push(
+    new Skill(
+      "CADSketcher",
+      "CADSketcher.png",
+      "https://github.com/hlorus/CAD_Sketcher/pull/481",
+    ),
+  );
+  arr.push(new Skill("FreeCAD", "freecad.svg"));
+  arr.push(
+    new Skill(
+      "Fusion360",
+      "fusion360.svg",
+      "https://github.com/MagicBOTAlex/ZSwitch",
+    ),
+  );
+
+  // Misc
+  arr.push(
+    new Skill(
+      "MudBlazor",
+      "mudblazor.svg",
+      "https://github.com/MudBlazor/MudBlazor/pull/7327",
+    ),
+  );
+  arr.push(new Skill("Ollama", "ollama.svg"));
+  arr.push(new Skill("Gitea", "gitea.svg"));
+  // arr.push(new Skill("Astro", "astro.png"));
+  arr.push(new Skill("KiCad", "kicad.svg"));
+  // arr.push(new Skill("Lua", "lua.svg"));
+
+  return arr;
+}