From 7134f79809aea85d6dfca68eeed3c15824f774d3 Mon Sep 17 00:00:00 2001
From: BOTAlex <zhentao2004@gmail.com>
Date: Sun, 31 Mar 2024 06:41:56 +0200
Subject: [PATCH] Added a name plate for me

---
 .../zhen/Comps/TopAnimatedBackground.svelte   | 10 +++-
 src/routes/zhen/Comps/TopNameTextPlate.svelte | 57 +++++++++++++++++++
 2 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/zhen/Comps/TopNameTextPlate.svelte

diff --git a/src/routes/zhen/Comps/TopAnimatedBackground.svelte b/src/routes/zhen/Comps/TopAnimatedBackground.svelte
index 4ad396d..21b9a3d 100644
--- a/src/routes/zhen/Comps/TopAnimatedBackground.svelte
+++ b/src/routes/zhen/Comps/TopAnimatedBackground.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import { Vector2 } from "./../Utils/Vector2";
+    import TopNameTextPlate from "./TopNameTextPlate.svelte";
     //import { throttle } from "./../Utils/Throttle";
 
     // Params
@@ -85,7 +86,9 @@
 <svelte:window on:mousemove={onMouseMoved} />
 
 <div class="StartPageContainer">
-    <div class="TopOverlay"/>
+    <div class="TopOverlay">
+        <TopNameTextPlate/>
+    </div>
 
     <div
         class="StartPageAnimated"
@@ -136,6 +139,9 @@
     }
 
     .SkillsText{
+        font-family: 'CozetteVector';
+
+        text-align: start;
         font-size: x-large;
         display: flex; 
         justify-content: center; 
@@ -152,6 +158,8 @@
         z-index: 1;
         width: 100%;
         height: 100%;
+
+        padding: 0;
     }
 
     .rotate45 {
diff --git a/src/routes/zhen/Comps/TopNameTextPlate.svelte b/src/routes/zhen/Comps/TopNameTextPlate.svelte
new file mode 100644
index 0000000..fb4efbe
--- /dev/null
+++ b/src/routes/zhen/Comps/TopNameTextPlate.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+    import HorizonalStack from './../../../comps/Utils/HorizonalStack.svelte'
+</script>
+
+<div class="container">
+    <div style="flex-grow: 1;" />
+    <div class="TextContainer">
+        <span class="NamePlateText"  >
+            Zhentao Wei
+            <br/>
+            <p class="NickNameText">Alex</p>
+        </span>
+    </div>
+    <div style="flex-grow: 2;" />
+</div>
+
+<style>
+    .container{
+        width: 100%;
+        height: 100%;
+
+        align-items: center;
+        vertical-align: middle;
+        display: flex;
+    }
+
+    .TextContainer{
+        align-items: center;
+        vertical-align: middle;
+        display: flex;
+
+        /* background-color: aliceblue; */
+        background-color: rgba(45, 45, 45, 0.645);
+        padding: 0.75rem 1rem;
+        border-radius: 20px;
+
+        backdrop-filter: blur(1px);
+    }
+
+    .NamePlateText{
+        /* font-family: 'CozetteVector'; */
+        text-align: left;
+        font-size: 5rem;
+        color: rgb(225, 225, 225);
+
+        border-left: 0.5rem solid rgb(88, 198, 82);
+        padding-left: 1rem;
+    }
+
+    .NickNameText{
+        font-size: 2rem;
+        margin: 0;
+        margin-top: -1rem;
+        
+        color: rgb(99, 99, 99);
+    }
+</style>
\ No newline at end of file