From 7c01dcef6f443e3bf278c8b11ceef6bb256f8342 Mon Sep 17 00:00:00 2001
From: BOTAlex <zhentao2004@gmail.com>
Date: Sat, 8 Jun 2024 04:04:25 +0200
Subject: [PATCH] all HTML done. Need css polishing though

---
 .../zhen/CVs/Comps/AlexWatermark.svelte       | 19 ++++
 .../zhen/CVs/Comps/BottomRightDecor.svelte    | 33 +++++++
 src/routes/zhen/CVs/Comps/LeftTopDecor.svelte | 33 +++++++
 src/routes/zhen/CVs/epos/+page.svelte         | 90 +++++++++++++------
 4 files changed, 150 insertions(+), 25 deletions(-)
 create mode 100644 src/routes/zhen/CVs/Comps/AlexWatermark.svelte
 create mode 100644 src/routes/zhen/CVs/Comps/BottomRightDecor.svelte
 create mode 100644 src/routes/zhen/CVs/Comps/LeftTopDecor.svelte

diff --git a/src/routes/zhen/CVs/Comps/AlexWatermark.svelte b/src/routes/zhen/CVs/Comps/AlexWatermark.svelte
new file mode 100644
index 0000000..445775b
--- /dev/null
+++ b/src/routes/zhen/CVs/Comps/AlexWatermark.svelte
@@ -0,0 +1,19 @@
+<div class="container">
+    ALEX
+</div>
+
+<style lang="scss">
+    .container {
+        position: absolute;
+        display: grid;
+        justify-self: end;
+        vertical-align: bottom;
+        align-self: flex-end;
+        
+        // font settings
+        font-size: 80mm;
+        color: #e4e4e4;
+
+        transform: translate(32%, -32%) rotate(-90deg);
+    }
+</style>
diff --git a/src/routes/zhen/CVs/Comps/BottomRightDecor.svelte b/src/routes/zhen/CVs/Comps/BottomRightDecor.svelte
new file mode 100644
index 0000000..b1aa6c8
--- /dev/null
+++ b/src/routes/zhen/CVs/Comps/BottomRightDecor.svelte
@@ -0,0 +1,33 @@
+<div class="container">
+    <div/>
+    <div/>
+</div>
+
+<style lang="scss">
+    .container {
+        position: absolute;
+        transform: translate(31mm, 31mm) rotate(-45deg);
+        display: grid;
+        justify-self: end;
+        vertical-align: bottom;
+        align-self: flex-end;
+
+        z-index: 0;
+
+        > div:nth-child(1) {
+            padding-top: 5mm;
+            //border-bottom: #4472c4 dashed 2mm;
+
+            background-image: linear-gradient(to right, #4472c4 70%, rgba(255,255,255,0) 0%);
+            background-position: top;
+            background-size: 6mm 1.5mm;
+            background-repeat: repeat-x;
+        }
+
+        > div:nth-child(2) {
+            background-color: #2f5496;
+            width: 100mm;
+            height: 30mm;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/zhen/CVs/Comps/LeftTopDecor.svelte b/src/routes/zhen/CVs/Comps/LeftTopDecor.svelte
new file mode 100644
index 0000000..4e1195b
--- /dev/null
+++ b/src/routes/zhen/CVs/Comps/LeftTopDecor.svelte
@@ -0,0 +1,33 @@
+<div class="container">
+    <div/>
+    <div/>
+</div>
+
+<style lang="scss">
+    .container {
+        position: absolute;
+        transform: translate(-31.9mm, 0mm) rotate(-45deg);
+        display: grid;
+        justify-self: start;
+        vertical-align: top;
+        align-self: flex-start;
+
+        z-index: 0;
+
+        > div:nth-child(1) {
+            background-color: #2f5496;
+            width: 100mm;
+            height: 15mm;
+        }
+        
+        > div:nth-child(2) {
+            padding-top: 5mm;
+            //border-bottom: #4472c4 dashed 2mm;
+
+            background-image: linear-gradient(to right, #4472c4 70%, rgba(255,255,255,0) 0%);
+            background-position: bottom;
+            background-size: 6mm 1.5mm;
+            background-repeat: repeat-x;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/zhen/CVs/epos/+page.svelte b/src/routes/zhen/CVs/epos/+page.svelte
index 8ae9425..948ebc8 100644
--- a/src/routes/zhen/CVs/epos/+page.svelte
+++ b/src/routes/zhen/CVs/epos/+page.svelte
@@ -1,26 +1,40 @@
 <script>
+    // Left side
     import NameAndImage from "../Comps/NameAndImage.svelte";
     import ShortProfile from "../Comps/ShortProfile.svelte"
     import CombinedContacts from "../Comps/CombinedContacts.svelte"
     import LinkedInQR from "../Comps/LinkedInQR.svelte";
     
+    // Right side
     import Profile from "../Comps/Profile.svelte";
     import Education from "../Comps/Education.svelte";
     import Experience from "../Comps/Experience.svelte";
+
+    // Decorations
+    import LeftTopDecor from "../Comps/LeftTopDecor.svelte";
+    import BottomRightDecor from "../Comps/BottomRightDecor.svelte";
+    import AlexWatermark from "../Comps/AlexWatermark.svelte";
 </script>
 
 <div class="cv-container-container include-in-print">
-    <div class="cv-container">
+    <div class="cv-container sections">
         <div id="left-section">
-            <NameAndImage/>
-            <ShortProfile/>
-            <CombinedContacts/>
-            <LinkedInQR/>
+            <LeftTopDecor/>
+            <BottomRightDecor/>
+            <div>
+                <NameAndImage/>
+                <ShortProfile/>
+                <CombinedContacts/>
+                <LinkedInQR/>
+            </div>
         </div>
         <div id="right-section">
-            <Profile/>
-            <Experience/>
-            <Education/>
+            <AlexWatermark/>
+            <div>
+                <Profile/>
+                <Experience/>
+                <Education/>
+            </div>
         </div>
     </div>
 </div> 
@@ -35,7 +49,7 @@
     }
 
     .cv-container-container * {
-        color: black;
+        color: black; // Set all text black
     }
 
     .cv-container {
@@ -46,7 +60,6 @@
 
         overflow: visible;
         display: flex;
-        justify-content: center;
         padding: auto;
     }
 
@@ -55,25 +68,52 @@
         print-color-adjust:exact !important;
     }}
 
-    #left-section{
-        background-color: #bdd6ee;
-        width: calc(100% / 3 * 1);
-        left: 0;
+    .sections {
+        > div {
+            display: grid;
+            z-index: 0;
 
-        display: grid;
-        place-items: center;
+            // Needed to cuttoff the extra decoration
+            position: relative;
+            overflow: hidden;
+        }
 
-        padding-top: 20mm;
-        padding-bottom: 20mm;
-    }
+        #left-section{
+            background-color: #bdd6ee;
+            width: calc(100% / 3 * 1);
 
-    #right-section{
-        width: calc(100% / 3 * 2);
+            > div {
+                z-index: 1;
+                width: 100%;
+                
+                left: 0;
 
-        display: grid;
-        place-items: center;
+                display: grid;
+                place-items: center;
 
-        padding-top: 30mm;
-        padding-bottom: 20mm;
+                padding-top: 30mm;
+                padding-bottom: 20mm;
+            }
+        }
+
+        #right-section{
+            width: calc(100% / 3 * 2);
+
+            padding-top: 30mm;
+            padding-bottom: 20mm;
+
+            > div {
+                z-index: 1;
+                width: 100%;
+                
+                left: 0;
+
+                display: grid;
+                place-items: center;
+
+                padding-top: 30mm;
+                padding-bottom: 20mm;
+            }
+        }
     }
 </style>
\ No newline at end of file