added redacted backeground

src/routes/cv/+page.svelte

@@ -46,16 +46,17 @@
   }
 </script>
 
-<title>{$re?.name ?? "Alex"}'s CV {getFormattedDate()}</title>
-<meta content="{$re?.name ?? 'Alex'}'s CV" property="og:title" />
-<meta
+<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" />
+  />
+  <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 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
@@ -71,9 +72,22 @@
       I have to sadly recommend chrome for this process. Firefox somehow messes with
       the quality of the PDF :(
     </div>
-</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 class="NotoSans cv-config cv-container-container include-in-print">
+    <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 />
@@ -97,7 +111,7 @@
           </div>
         </div>
         <div id="leftSectionSeperator"></div>
-    <div id="right-section" class="text-[var(--right-text-color)]">
+        <div id="right-section" class="text-[var(--right-text-color)] bg-white">
           <AlexWatermark Style="pointer-events: none;" />
           <div id="TopRightSkillsText">
             <RepeatedSkills
@@ -115,6 +129,8 @@
           </div>
         </div>
       </div>
+    </div>
+  </div>
 </div>
 
 <style lang="scss">

src/routes/cv/comps/RepeatedSkills.svelte

@@ -2,13 +2,14 @@
   // 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 textOverride: string[] | undefined = undefined;
 
   // Assign default value if textOverride is undefined
-    let repeatingText : string[] = textOverride ?? [
+  let repeatingText: string[] = textOverride ?? [
     "C++",
     "C#",
     "ARDUINO",
@@ -27,10 +28,7 @@
   function GrabRandomString() {
     let outString: string = "";
     while (outString.length < targetTextWidth) {
-            outString +=
-                repeatingText[
-                    getRandomInt(repeatingText.length)
-                ] + " ";
+      outString += repeatingText[getRandomInt(repeatingText.length)] + " ";
     }
 
     return outString; // At about target size
@@ -39,7 +37,10 @@
 
 <div {...$$restProps}>
   {#each { length: targetTextHeight } as _, i}
-        <span class="{applyRotation ? "rotate45" : ""} SkillsText">
+    <span
+      class="{applyRotation ? 'rotate45' : ''} SkillsText"
+      style="padding: {textRowPadding};"
+    >
       {GrabRandomString()}
     </span>
   {/each}