rev2 almost finished

src/routes/zhen/cv/CompsRev2/Education.svelte

@@ -1,11 +1,11 @@
 <script>
     import placeholder from "$lib/zhen/cv-comps/400x400.png"
+    import DTU_Logo from "$lib/zhen/cv-comps/DTU_Logo.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"
-    import DTU_Logo from "$lib/zhen/cv-comps/DTU_Logo.png"
 
-    import IconAndText from "./IconAndText.svelte"
+    import IconAndText2 from "./IconAndText2.svelte"
 </script>
 
 <div class="container">
@@ -14,35 +14,31 @@
             Education
         </b>
     </div>
-    <div class="table">
+    <div class="imagesContainer flex justify-center p-2 gap-4" id="balls">
-        <div class="table-item">
+        <IconAndText2 logo={DTU_Logo}>
-            <IconAndText logo={DTU_Logo}>
+            <b>DTU</b><br/>
-                <b>University - Bacholor</b><br>
+            <p style="font-size: 0.6rem;">
-                Technical University of Denmark<br>
+                Artificial intelligence
-                <i>Sep 2024 - Now</i>
+            </p>
-            </IconAndText>
+        </IconAndText2>
-        </div>
+        <IconAndText2 logo={NextLogo}>
-        <div class="table-item">
+            <b>Next</b><br/>
-            <IconAndText logo={NextLogo}>
+            <p style="font-size: 0.6rem;">
-                <b>Gymnasium/Collage - HTX</b><br>
+                Computer science
-                NEXT-Mediegymnasiet: Computer science<br>
+            </p>
-                <i>May 2021 - Now</i>
+        </IconAndText2>
-            </IconAndText>
+        <IconAndText2 logo={SasLogo}>
-        </div>
+            <b>Master class</b><br/>
-        <div class="table-item">
+            <p style="font-size: 0.6rem;">
-            <IconAndText logo={SasLogo}>
+                SAS Programming
-                <b>SAS Master class</b><br>
+            </p>
-                4-week project about SAS: OnDemand and SAS: Viya <br>
+        </IconAndText2>
-                <i>Dec 2023 - Dec 2023</i>
+        <IconAndText2 logo={EmphasysLogo}>
-            </IconAndText>
+            <b>Emphasys center</b><br/>
-        </div>
+            <p style="font-size: 0.6rem;">
-        <div class="table-item">
+                VR development
-            <IconAndText logo={EmphasysLogo}>
+            </p>
-                <b>Emphasys Centre - Erasmus+</b><br>
+        </IconAndText2>
-                    2 weeks of Unity VR <br>
-                    <i>Oct 2023 - Oct 2023</i>
-            </IconAndText>
-        </div>
     </div>
 </div>
 
@@ -52,30 +48,16 @@
         place-items: center;
         width: 90%;
 
-        overflow: hidden;
+        > div:first-child {
-
+            border-bottom: black 1mm solid;
-        & > div:first-child {
             width: 100%;
-
-            /* Bottom border stripe*/
-            border-bottom: 1mm solid black;
-
-            &:first-child {
-                font-size: x-large;
-            }
         }
     }
 
-    .table-item {
+    .imagesContainer {
-        padding: 2mm;
+        > img {
-
+            border-radius: 5mm;
-        display: flex;
+            filter: drop-shadow(1mm 1mm 1mm #0000009d);
-        justify-items: start;
-
-        width: 100%;
-
-        &:not(:last-child) {
-            border-bottom: 0.25mm solid #000000;
         }
     }
 </style>

src/routes/zhen/cv/CompsRev2/IconAndText.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <div class="container">
-    <img src={logo} alt="{imageCaption}" width="{logoWidths}"/>
+    <img src={logo} class="" alt="{imageCaption}" width="{logoWidths}"/>
     <div style="line-height: {lineHeight};">
         <span style="font-size: {fontSize};">
             <slot/>

src/routes/zhen/cv/CompsRev2/IconAndText2.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    export let logo:string;
+    export let logoWidths: string = "35%";
+    
+    export let fontSize: string = "3mm";
+    export let lineHeight: string = "3.1mm";
+
+    import { onMount } from "svelte";
+    onMount(() => {
+        imageCaption = logo.split(/(\\|\/)/g).pop();
+    });
+
+    let imageCaption: undefined | string; // Not a high piority, you get the file name and thats it
+</script>
+
+<div class="container">
+    <img src={logo} alt="{imageCaption}" width="{logoWidths}"/>
+    <div style="line-height: {lineHeight};">
+        <span style="font-size: {fontSize};">
+            <slot/>
+        </span>
+    </div>
+</div>
+
+<style lang="scss">
+    .container {
+        width: 100%;
+
+        & > div {
+            margin-top: 2mm;
+            padding-left: 2mm;
+            padding-bottom: 1mm;
+
+            text-align: start;
+
+            border-left: 0.5mm solid black;
+        }
+
+        & > img {
+            border-radius: 2.5mm;
+            filter: drop-shadow(1mm 1mm 1mm #0000009d);
+        }
+    }
+</style>

src/routes/zhen/cv/CompsRev2/NameAndImage.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import NamePlate from "./NamePlate.svelte";
-    import selfie from "$lib/zhen/cv-comps/zhenSelfie.jpg"
+    import selfie from "$lib/zhen/cv-comps/MoreProfesionalMe.jpg"
 </script>
 
 <div class="nameAndImageContainer">

src/routes/zhen/cv/CompsRev2/TableOfProjects.svelte

@@ -0,0 +1,88 @@
+<div class="container">
+    <div>
+        <b style="text-align:left;">
+            List of big projects
+        </b>
+    </div>
+    <div class="table-display">
+        <div class="table-item">
+            <div>Computer vision</div>
+            <div>Implimented YoloV1 from scratch. (object detection)</div>
+        </div>
+        <div class="table-item">
+            <div>Arduino</div>
+            <div>Built my own claw machine with 2 dimentions of movement</div>
+        </div>
+        <div class="table-item">
+            <div>App dev</div>
+            <div>Made an Doulingo'ish app for learning chinese in 9 days</div>
+        </div>
+        <div class="table-item">
+            <div>Open-source help</div>
+            <div>Have contributed in multiple Open-source project on github</div>
+        </div>
+        <div class="table-item">
+            <div>PCB designing</div>
+            <div>I am currently designing my own circuit board</div>
+        </div>
+    </div>
+    <div class="flex" style="font-size: 0.75rem; color: sgray; align-content: start; width: 100%;">
+        <p>
+            If you want proof or want to know about other projects. Contact me!
+        </p>
+    </div>
+</div>
+
+<style lang="scss">
+    .container{
+        display: grid;
+        place-items: center;
+        width: 90%;
+    }
+
+    .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;
+
+        > a {
+            text-decoration: underline;
+        }
+
+        > div, > a {
+            color: #000000;
+
+            &:first-child {
+                width: 30%;
+                font-size: 4mm;
+
+                display: grid;
+                place-content: center start;
+
+                border-right: rgba(128, 128, 128, 0.4) dashed 0.1mm;
+            }
+
+            &:nth-child(2) {
+                width: 70%;
+
+                font-size: 3.25mm;
+                display: grid;
+
+                padding-left: 1mm;
+            }
+        }
+    }
+</style>

src/routes/zhen/cv/rev2/+page.svelte

@@ -10,6 +10,7 @@
     import Education from "../CompsRev2/Education.svelte";
     import Experience from "../CompsRev2/Experience.svelte";
     import BiggestFlex from "../CompsRev2/BiggestFlex.svelte";
+    import TableOfProjects from "../CompsRev2/TableOfProjects.svelte";
 
     // Decorations
     import LeftTopDecor from "../CompsRev2/LeftTopDecor.svelte";
@@ -87,6 +88,7 @@
             <div>
                 <Profile/>
                 <BiggestFlex/>
+                <TableOfProjects/>
                 <Experience/>
                 <Education/>
             </div>