src/routes/cv/+page.svelte

@@ -46,72 +46,88 @@
   }
 </script>
 
-<title>{$re?.name ?? "Alex"}'s CV {getFormattedDate()}</title>
+<div>
-<meta content="{$re?.name ?? 'Alex'}'s CV" property="og:title" />
+  <title>{$re?.name ?? "Alex"}'s CV {getFormattedDate()}</title>
-<meta
+  <meta content="{$re?.name ?? 'Alex'}'s CV" property="og:title" />
-  content="This CV is made completely with svelte + html + css + js"
+  <meta
-  property="og:description"
+    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>
+    <div>
-    Under here is my CV rev1 for an application made entirely in HTML and CSS.
+      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
+      The page is designed to be saved as PDF. This can be done by pressing <div
-      class="keyboard-key"
+        class="keyboard-key"
-    >
+      >
-      P
+        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="w-full h-full flex flex-col justify-center overflow-hidden">
-
+    <div class=" w-full flex h-[1131.25px] justify-center">
-<div class="NotoSans cv-config cv-container-container include-in-print">
+      <RepeatedSkills
-  <div class="cv-container sections decorations">
+        class="cozette-force text-5xl text-base-300 {$re?.name ? 'hidden' : ''}"
-    <div id="left-section" class="bg-grid-cv flex justify-center">
+        style="transform: translateY(-90rem)"
-      <LeftTopDecor />
+        textOverride={["REDACTED VERSION"]}
-      <BottomRightDecor Style="pointer-events: none;" />
+        targetTextHeight={90}
-      <div
+        targetTextWidth={150}
-        class="absolute rotate-12 width-[10cm] h-full right-[15cm]"
+        textRowPadding={"1rem"}
-        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)]">
+    <div
-      <AlexWatermark Style="pointer-events: none;" />
+      class="NotoSans cv-config cv-container-container include-in-print absolute"
-      <div id="TopRightSkillsText">
+    >
-        <RepeatedSkills
+      <div class="cv-container sections decorations">
-          class="cozette-force"
+        <div id="left-section" class="bg-grid-cv flex justify-center">
-          targetTextHeight={30}
+          <LeftTopDecor />
-          targetTextWidth={75}
+          <BottomRightDecor Style="pointer-events: none;" />
-        />
+          <div
-      </div>
+            class="absolute rotate-12 width-[10cm] h-full right-[15cm]"
-      <div>
+            style="background-color: #bdd6ee"
-        <Profile />
+          ></div>
-        <BiggestFlex />
+          <div class="text-[var(--left-text-color)] pointer-events-none">
-        <TableOfProjects />
+            <div
-        <Experience />
+              class="pointer-events-auto flex flex-col justify-center w-full items-center"
-        <Education />
+            >
+              <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>

src/routes/cv/comps/Education.svelte

@@ -19,11 +19,11 @@
     <IconAndText2
       logo={$re?.education[0].imageId.replace("[PB]", env.POCKETBASE_URL) ?? ""}
     >
-      <b>{$re?.education[0].name ?? ""}</b><br />
+      <b>{$re?.education[0].name ?? "University 🤮"}</b><br />
       <p style="font-size: 0.5rem;">AI and data</p>
     </IconAndText2>
     <IconAndText2 logo={$re?.education[1].imageId ?? ""}>
-      <b>{$re?.education[0].name ?? ""}</b><br />
+      <b>{$re?.education[0].name ?? "High School 🤮"}</b><br />
       <p style="font-size: 0.5rem;">Computer science</p>
     </IconAndText2>
     <IconAndText2 logo={SasLogo}>
@@ -31,7 +31,9 @@
       <p style="font-size: 0.5rem;">SAS Programming</p>
     </IconAndText2>
     <IconAndText2 logo={$re?.education[2].imageId ?? ""}>
-      <span class="font-semibold">{$re?.education[2].name ?? ""}</span><br />
+      <span class="font-semibold"
+        >{$re?.education[2].name ?? "Paid vecation/certificate"}</span
+      ><br />
       <p style="font-size: 0.5rem;">VR development</p>
     </IconAndText2>
   </div>

src/routes/cv/comps/Experience.svelte

@@ -11,35 +11,36 @@
     <div class="table-item">
       <IconAndText logo={$re?.experience[0].imageId ?? ""}>
         <b>Full-stack</b><br />
-        {$re?.experience[0].name}<br />
+        {$re?.experience[0].name ?? "[REDACTED] Deprived devs"}<br />
         <i>Feb 2025 - Now</i>
       </IconAndText>
     </div>
     <div class="table-item">
       <IconAndText logo={$re?.experience[1].imageId ?? ""}>
         <b>Data annotator</b><br />
-        {$re?.experience[1].name}<br />
+        {$re?.experience[1].name ?? "Some AI company"}<br />
         <i>Jul 2024 - Now</i>
       </IconAndText>
     </div>
     <div class="table-item">
       <IconAndText logo={$re?.experience[2].imageId ?? ""}>
         <b>3D printer manager</b> - Volunteer<br />
-        {$re?.experience[2].name}<br />
+        {$re?.experience[2].name ?? "Actually Volunteering"}<br />
         <i>Nov 2023 - Now</i>
       </IconAndText>
     </div>
     <div class="table-item">
       <IconAndText logo={$re?.experience[3].imageId ?? ""}>
         <b>Machine Learning Engineer</b> - Short term intern<br />
-        {$re?.experience[3].name}<br />
+        {$re?.experience[3].name ?? "YKYK"}<br />
         <i>Apr 2024 - Apr 2024</i>
       </IconAndText>
     </div>
     <div class="table-item">
       <IconAndText logo={$re?.experience[4].imageId ?? ""}>
         <b>Assistant</b> - Short term intern<br />
-        {$re?.experience[4].name}<br />
+        {$re?.experience[4].name ??
+          "Awesome VR place, but got rejected 2 times after"}<br />
         <i>Oct 2020 - Oct 2020</i>
       </IconAndText>
     </div>

src/routes/cv/comps/RepeatedSkills.svelte

@@ -1,62 +1,63 @@
 <script lang="ts">
-    // Width of num chars and height nom of chars
+  // Width of num chars and height nom of chars
-    export let targetTextWidth: number;
+  export let targetTextWidth: number;
-    export let targetTextHeight: 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
+  // Assign default value if textOverride is undefined
-    let repeatingText : string[] = textOverride ?? [
+  let repeatingText: string[] = textOverride ?? [
-        "C++",
+    "C++",
-        "C#",
+    "C#",
-        "ARDUINO",
+    "ARDUINO",
-        "PYTHON",
+    "PYTHON",
-        "JAVA",
+    "JAVA",
-        "JAVASCRIPT",
+    "JAVASCRIPT",
-        "TYPESCRIPT",
+    "TYPESCRIPT",
-        "HTML",
+    "HTML",
-        "CSS",
+    "CSS",
-    ];
+  ];
 
-    function getRandomInt(max: number) {
+  function getRandomInt(max: number) {
-        return Math.floor(Math.random() * max);
+    return Math.floor(Math.random() * max);
+  }
+
+  function GrabRandomString() {
+    let outString: string = "";
+    while (outString.length < targetTextWidth) {
+      outString += repeatingText[getRandomInt(repeatingText.length)] + " ";
     }
 
-    function GrabRandomString() {
+    return outString; // At about target size
-        let outString: string = "";
+  }
-        while (outString.length < targetTextWidth) {
-            outString +=
-                repeatingText[
-                    getRandomInt(repeatingText.length)
-                ] + " ";
-        }
-
-        return outString; // At about target size
-    }
 </script>
 
 <div {...$$restProps}>
-    {#each { length: targetTextHeight } as _, i}
+  {#each { length: targetTextHeight } as _, i}
-        <span class="{applyRotation ? "rotate45" : ""} SkillsText">
+    <span
-            {GrabRandomString()}
+      class="{applyRotation ? 'rotate45' : ''} SkillsText"
-        </span>
+      style="padding: {textRowPadding};"
-    {/each}
+    >
+      {GrabRandomString()}
+    </span>
+  {/each}
 </div>
 
 <style>
-    .SkillsText {
+  .SkillsText {
-        text-align: start;
+    text-align: start;
-        display: flex;
+    display: flex;
-        justify-content: center;
+    justify-content: center;
-        align-items: center;
+    align-items: center;
-        white-space: nowrap;
+    white-space: nowrap;
 
-        width: 2rem;
+    width: 2rem;
-    }
+  }
 
-    .rotate45 {
+  .rotate45 {
-        transform: rotate(-45deg);
+    transform: rotate(-45deg);
-    }
+  }
 </style>