From 7524eb3fe5e8e9b1e6774ad607762d779519e676 Mon Sep 17 00:00:00 2001
From: BOTAlex <alex@deprived.dev>
Date: Thu, 9 Oct 2025 07:19:08 +0200
Subject: [PATCH] added redacted backeground

---
 src/routes/cv/+page.svelte                | 140 ++++++++++++----------
 src/routes/cv/comps/RepeatedSkills.svelte |  95 +++++++--------
 2 files changed, 126 insertions(+), 109 deletions(-)

diff --git a/src/routes/cv/+page.svelte b/src/routes/cv/+page.svelte
index 38aa8b7..5c58b9b 100644
--- a/src/routes/cv/+page.svelte
+++ b/src/routes/cv/+page.svelte
@@ -46,72 +46,88 @@
   }
 </script>
 
-<title>{$re?.name ?? "Alex"}'s CV {getFormattedDate()}</title>
-<meta content="{$re?.name ?? 'Alex'}'s CV" property="og:title" />
-<meta
-  content="This CV is made completely with svelte + html + css + js"
-  property="og:description"
-/>
-<meta content={preveiwImage} property="og:image" />
-<meta content="#bdd6ee" data-react-helmet="true" name="theme-color" />
+<div>
+  <title>{$re?.name ?? "Alex"}'s CV {getFormattedDate()}</title>
+  <meta content="{$re?.name ?? 'Alex'}'s CV" property="og:title" />
+  <meta
+    content="This CV is made completely with svelte + html + css + js"
+    property="og:description"
+  />
+  <meta content={preveiwImage} property="og:image" />
+  <meta content="#bdd6ee" data-react-helmet="true" name="theme-color" />
 
-<div class="cv-info-container hide-on-print">
-  <div>
-    Under here is my CV rev1 for an application made entirely in HTML and CSS.
-    The page is designed to be saved as PDF. This can be done by pressing <div
-      class="keyboard-key"
-    >
-      P
+  <div class="cv-info-container hide-on-print">
+    <div>
+      Under here is my CV rev1 for an application made entirely in HTML and CSS.
+      The page is designed to be saved as PDF. This can be done by pressing <div
+        class="keyboard-key"
+      >
+        P
+      </div>
+      +
+      <div class="keyboard-key">CTRL</div>
+      , then set scaling to 100% and no margins. Lastly, select save to PDF or print.
+      <br />
+      <br />
+      I have to sadly recommend chrome for this process. Firefox somehow messes with
+      the quality of the PDF :(
     </div>
-    +
-    <div class="keyboard-key">CTRL</div>
-    , then set scaling to 100% and no margins. Lastly, select save to PDF or print.
-    <br />
-    <br />
-    I have to sadly recommend chrome for this process. Firefox somehow messes with
-    the quality of the PDF :(
   </div>
-</div>
-
-<div class="NotoSans cv-config cv-container-container include-in-print">
-  <div class="cv-container sections decorations">
-    <div id="left-section" class="bg-grid-cv flex justify-center">
-      <LeftTopDecor />
-      <BottomRightDecor Style="pointer-events: none;" />
-      <div
-        class="absolute rotate-12 width-[10cm] h-full right-[15cm]"
-        style="background-color: #bdd6ee"
-      ></div>
-      <div class="text-[var(--left-text-color)] pointer-events-none">
-        <div
-          class="pointer-events-auto flex flex-col justify-center w-full items-center"
-        >
-          <NameAndImage />
-          <div class="py-2"></div>
-          <ShortProfile />
-          <div class="py-2"></div>
-          <CombinedContacts />
-          <div class="py-2"></div>
-          <LinkedInQR />
-        </div>
-      </div>
+  <div class="w-full h-full flex flex-col justify-center overflow-hidden">
+    <div class=" w-full flex h-[1131.25px] justify-center">
+      <RepeatedSkills
+        class="cozette-force text-5xl text-base-300 {$re?.name ? 'hidden' : ''}"
+        style="transform: translateY(-90rem)"
+        textOverride={["REDACTED VERSION"]}
+        targetTextHeight={90}
+        targetTextWidth={150}
+        textRowPadding={"1rem"}
+      />
     </div>
-    <div id="leftSectionSeperator"></div>
-    <div id="right-section" class="text-[var(--right-text-color)]">
-      <AlexWatermark Style="pointer-events: none;" />
-      <div id="TopRightSkillsText">
-        <RepeatedSkills
-          class="cozette-force"
-          targetTextHeight={30}
-          targetTextWidth={75}
-        />
-      </div>
-      <div>
-        <Profile />
-        <BiggestFlex />
-        <TableOfProjects />
-        <Experience />
-        <Education />
+
+    <div
+      class="NotoSans cv-config cv-container-container include-in-print absolute"
+    >
+      <div class="cv-container sections decorations">
+        <div id="left-section" class="bg-grid-cv flex justify-center">
+          <LeftTopDecor />
+          <BottomRightDecor Style="pointer-events: none;" />
+          <div
+            class="absolute rotate-12 width-[10cm] h-full right-[15cm]"
+            style="background-color: #bdd6ee"
+          ></div>
+          <div class="text-[var(--left-text-color)] pointer-events-none">
+            <div
+              class="pointer-events-auto flex flex-col justify-center w-full items-center"
+            >
+              <NameAndImage />
+              <div class="py-2"></div>
+              <ShortProfile />
+              <div class="py-2"></div>
+              <CombinedContacts />
+              <div class="py-2"></div>
+              <LinkedInQR />
+            </div>
+          </div>
+        </div>
+        <div id="leftSectionSeperator"></div>
+        <div id="right-section" class="text-[var(--right-text-color)] bg-white">
+          <AlexWatermark Style="pointer-events: none;" />
+          <div id="TopRightSkillsText">
+            <RepeatedSkills
+              class="cozette-force"
+              targetTextHeight={30}
+              targetTextWidth={75}
+            />
+          </div>
+          <div>
+            <Profile />
+            <BiggestFlex />
+            <TableOfProjects />
+            <Experience />
+            <Education />
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/routes/cv/comps/RepeatedSkills.svelte b/src/routes/cv/comps/RepeatedSkills.svelte
index acc7e7e..8ec50bd 100644
--- a/src/routes/cv/comps/RepeatedSkills.svelte
+++ b/src/routes/cv/comps/RepeatedSkills.svelte
@@ -1,62 +1,63 @@
 <script lang="ts">
-    // Width of num chars and height nom of chars
-    export let targetTextWidth: number;
-    export let targetTextHeight: number;
+  // Width of num chars and height nom of chars
+  export let targetTextWidth: number;
+  export let targetTextHeight: number;
+  export let textRowPadding: string = "";
 
-    export let applyRotation: boolean = true;
+  export let applyRotation: boolean = true;
 
-    export let textOverride: string[] | undefined = undefined;
+  export let textOverride: string[] | undefined = undefined;
 
-    // Assign default value if textOverride is undefined
-    let repeatingText : string[] = textOverride ?? [
-        "C++",
-        "C#",
-        "ARDUINO",
-        "PYTHON",
-        "JAVA",
-        "JAVASCRIPT",
-        "TYPESCRIPT",
-        "HTML",
-        "CSS",
-    ];
+  // Assign default value if textOverride is undefined
+  let repeatingText: string[] = textOverride ?? [
+    "C++",
+    "C#",
+    "ARDUINO",
+    "PYTHON",
+    "JAVA",
+    "JAVASCRIPT",
+    "TYPESCRIPT",
+    "HTML",
+    "CSS",
+  ];
 
-    function getRandomInt(max: number) {
-        return Math.floor(Math.random() * max);
+  function getRandomInt(max: number) {
+    return Math.floor(Math.random() * max);
+  }
+
+  function GrabRandomString() {
+    let outString: string = "";
+    while (outString.length < targetTextWidth) {
+      outString += repeatingText[getRandomInt(repeatingText.length)] + " ";
     }
 
-    function GrabRandomString() {
-        let outString: string = "";
-        while (outString.length < targetTextWidth) {
-            outString +=
-                repeatingText[
-                    getRandomInt(repeatingText.length)
-                ] + " ";
-        }
-
-        return outString; // At about target size
-    }
+    return outString; // At about target size
+  }
 </script>
 
 <div {...$$restProps}>
-    {#each { length: targetTextHeight } as _, i}
-        <span class="{applyRotation ? "rotate45" : ""} SkillsText">
-            {GrabRandomString()}
-        </span>
-    {/each}
+  {#each { length: targetTextHeight } as _, i}
+    <span
+      class="{applyRotation ? 'rotate45' : ''} SkillsText"
+      style="padding: {textRowPadding};"
+    >
+      {GrabRandomString()}
+    </span>
+  {/each}
 </div>
 
 <style>
-    .SkillsText {
-        text-align: start;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        white-space: nowrap;
+  .SkillsText {
+    text-align: start;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    white-space: nowrap;
 
-        width: 2rem;
-    }
+    width: 2rem;
+  }
 
-    .rotate45 {
-        transform: rotate(-45deg);
-    }
-</style>
\ No newline at end of file
+  .rotate45 {
+    transform: rotate(-45deg);
+  }
+</style>