Started on profile. Not done

package.json

@@ -15,12 +15,14 @@
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@zerodevx/svelte-img": "^2.1.0",
+		"sass": "^1.77.4",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
 		"svelte-highlight": "^7.6.0",
 		"svelte-parallax": "^0.6.0",
 		"typescript": "^5.0.0",
-		"vite": "^5.0.3"
+		"vite": "^5.0.3",
+		"vite-plugin-svgr": "^4.2.0"
 	},
 	"type": "module",
 	"dependencies": {

src/routes/zhen/CVs/Comps/CombinedContacts.svelte

@@ -0,0 +1,7 @@
+<script>
+    import Contact from "./Contact.svelte";
+    import OtherContact from "./OtherContact.svelte";
+</script>
+
+<Contact/>
+<OtherContact/>

src/routes/zhen/CVs/Comps/Contact.svelte

@@ -0,0 +1,64 @@
+<div class="container">
+    <div>
+        <b style="text-align:left;">
+            Contact
+        </b>
+    </div>
+    <div class="table-display">
+        <div class="table-item">
+            <div>Email</div>
+            <div>Zhen@deprived.dev</div>
+        </div>
+        <div class="table-item">
+            <div>Phone</div>
+            <div>+45 42535723</div>
+        </div>
+        <div class="table-item">
+            <div>LinkedIn</div>
+            <div>Zhentao-Wei</div>
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    .container{
+        display: grid;
+        place-items: center;
+        width: 70%;
+    }
+
+    .container > div:first-child {
+        width: 100%;
+
+        /* Bottom border stripe*/
+        border-bottom: 1mm solid black;
+    }
+
+    .table-display {
+        width: 100%;
+    }
+
+    .table-item {
+        display: flex;
+        justify-items: start;
+
+        width: 100%;
+        border-bottom: 0.25mm solid #000000;
+
+        > div {
+            &:first-child {
+                width: 35%;
+                text-align: center;
+                font-size: 4mm;
+            }
+
+            &:nth-child(2) {
+                width: 65%;
+
+                font-size: 3.75mm;
+                display: flex;
+                align-self: flex-end;
+            }
+        }
+    }
+</style>

src/routes/zhen/CVs/Comps/Education.svelte

@@ -0,0 +1,88 @@
+<script>
+    import placeholder from "$lib/zhen/cv-comps/400x400.png"
+    import NextLogo from "$lib/zhen/cv-comps/nextKbhLogo.png"
+    import SasLogo from "$lib/zhen/cv-comps/SASLogo.png"
+    import EmphasysLogo from "$lib/zhen/cv-comps/EmphasysLogo.png"
+</script>
+
+<div class="container">
+    <div>
+        <b style="text-align:left;">
+            Education
+        </b>
+    </div>
+    <div class="table">
+        <div class="table-item">
+            <img src={NextLogo} alt="NextKBH logo" width="15%"/>
+            <div>
+                <span>
+                    <b>Gymnasium/Collage - HTX</b><br>
+                    NEXT-Mediegymnasiet: Computer science<br>
+                    <i>May 2021 - Now</i>
+                </span>
+            </div>
+        </div>
+        <div class="table-item">
+            <img src={SasLogo} alt="SAS logo" width="15%"/>
+            <div>
+                <span>
+                    <b>SAS Master class</b><br>
+                    4-week project about SAS: OnDemand and SAS: Viya <br>
+                    <i>Dec 2023 - Dec 2023</i>
+                </span>
+            </div>
+        </div>
+        <div class="table-item">
+            <img src={EmphasysLogo} alt="Emphasys center logo" width="15%"/>
+            <div>
+                <span>
+                    <b>Emphasys Centre - Erasmus+</b><br>
+                    2 weeks of Unity VR <br>
+                    <i>Oct 2023 - Oct 2023</i>
+                </span>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    .container{
+        display: grid;
+        place-items: center;
+        width: 90%;
+
+        overflow: hidden;
+
+        & > div:first-child {
+            width: 100%;
+
+            /* Bottom border stripe*/
+            border-bottom: 1mm solid black;
+
+            &:first-child {
+                font-size: x-large;
+            }
+        }
+    }
+
+    .table-item {
+        padding: 2mm;
+
+        display: flex;
+        justify-items: start;
+
+        width: 100%;
+        border-bottom: 0.25mm solid #000000;
+
+        & > div {
+            padding-left: 3mm;
+
+            text-align: start;
+            font-size: 4mm;
+        }
+
+        & > img {
+            border-radius: 2.5mm;
+        }
+    }
+</style>

src/routes/zhen/CVs/Comps/LinkedInQR.svelte

@@ -0,0 +1,24 @@
+<script>
+    import QRCode from "$lib/zhen/cv-comps/LinkedInQrCode.svg?raw"
+</script>
+
+<div class="container">
+    <div>LinkedIn</div>
+    <span class="qrcode">{@html QRCode}</span>
+</div>
+
+<style lang="scss">
+
+    .qrcode {
+        transform: scale(0.9);
+    }
+
+    .container {
+        display: grid;
+        place-items: center;
+
+        & * {
+            font-size: 7.5mm;
+        }
+    }
+</style>

src/routes/zhen/CVs/Comps/OtherContact.svelte

@@ -0,0 +1,60 @@
+<div class="container">
+    <div>
+        <b style="text-align:left;">
+            Other
+        </b>
+    </div>
+    <div class="table-display">
+        <div class="table-item">
+            <div>Itch.io</div>
+            <div>botalex.itch.io</div>
+        </div>
+        <div class="table-item">
+            <div>Github</div>
+            <div>@MagicBOTAlex</div>
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    .container{
+        display: grid;
+        place-items: center;
+        width: 70%;
+    }
+
+    .container > div:first-child {
+        width: 100%;
+
+        /* Bottom border stripe*/
+        border-bottom: 1mm solid black;
+    }
+
+    .table-display {
+        width: 100%;
+    }
+
+    .table-item {
+        display: flex;
+        justify-items: start;
+
+        width: 100%;
+        border-bottom: 0.25mm solid #000000;
+
+        > div {
+            &:first-child {
+                width: 35%;
+                text-align: center;
+                font-size: 4mm;
+            }
+
+            &:nth-child(2) {
+                width: 65%;
+
+                font-size: 3.75mm;
+                display: flex;
+                align-self: flex-end;
+            }
+        }
+    }
+</style>

src/routes/zhen/CVs/Comps/Profile.svelte

@@ -0,0 +1,31 @@
+<div class="short-profile-container">
+    <div>
+        <b style="text-align:left;">
+            About me
+        </b>
+    </div>
+    <div>
+        As a 19-year-old with a deep passion for programming and
+        technology, I am highly dedicated to everything within this field.
+        Most of my knowledge is self-taught from many places on the
+        internet. I encourage you to browse my LinkedIn, since I
+        periodically post my hobby projects on there, and my skills are
+        described further in depth.
+    </div>
+
+</div>
+
+<style>
+    .short-profile-container{
+        display: grid;
+        place-items: center;
+        width: 90%;
+    }
+
+    .short-profile-container > div:first-child {
+        width: 100%;
+
+        /* Bottom border stripe*/
+        border-bottom: 1mm solid black;
+    }
+</style>

src/routes/zhen/CVs/Comps/ShortProfile.svelte

@@ -0,0 +1,29 @@
+<div class="short-profile-container">
+    <div>
+        <b style="text-align:left;">
+            Short profile
+        </b>
+    </div>
+    <div>
+        Student at NEXT-Copenhagen
+        Mediagymnasium and
+        volunteer at Kildevæld
+        Makerspace.
+    </div>
+
+</div>
+
+<style>
+    .short-profile-container{
+        display: grid;
+        place-items: center;
+        width: 70%;
+    }
+
+    .short-profile-container > div:first-child {
+        width: 100%;
+
+        /* Bottom border stripe*/
+        border-bottom: 1mm solid black;
+    }
+</style>

src/routes/zhen/CVs/epos/+page.svelte

@@ -1,14 +1,25 @@
-<script lang="ts">
+<script>
     import NameAndImage from "../Comps/NameAndImage.svelte";
+    import ShortProfile from "../Comps/ShortProfile.svelte"
+    import CombinedContacts from "../Comps/CombinedContacts.svelte"
+    import LinkedInQR from "../Comps/LinkedInQR.svelte";
+    import Education from "../Comps/Education.svelte";
 
+    import Profile from "../Comps/Profile.svelte";
 </script>
 
 <div class="cv-container-container include-in-print">
     <div class="cv-container">
         <div id="left-section">
             <NameAndImage/>
+            <ShortProfile/>
+            <CombinedContacts/>
+            <LinkedInQR/>
+        </div>
+        <div id="right-section">
+            <Profile/>
+            <Education/>
         </div>
-        <div id="right-section"></div>
     </div>
 </div> 
 
@@ -53,5 +64,8 @@
 
     #right-section{
         width: calc(100% / 3 * 2);
+
+        display: grid;
+        place-items: center;
     }
 </style>

src/routes/zhen/Comps/AboutMe.svelte

@@ -13,6 +13,6 @@
     }
 
     .bottom-dotted-line {
-        border-bottom: 4px dotted rgb(178, 178, 178);;
+        border-bottom: 4px dotted rgb(178, 178, 178);
     }
 </style>