From 0d573e212f1bc1502d8d2ef3daa55a00a2ae1b41 Mon Sep 17 00:00:00 2001
From: Keyemail <hatsunepatrick@gmail.com>
Date: Mon, 3 Jun 2024 16:45:50 -0700
Subject: [PATCH] Fixed popup

---
 src/components/NavBar.vue |  3 ++-
 src/views/HomePage.vue    | 20 +++++++++++++-------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index a84afd4..66f5f70 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -20,8 +20,9 @@
         <li><router-link to="/socials" @click="mobileUI()">Socials</router-link></li>
         <li><a href="https://git.keyemail.dev/explore/">Projects</a></li>
       </ul>
-    </div>
+    </div> 
   </div>
+  <template v-else/>
 </template>
 
 <script>
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index d7ed9b0..eacb187 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -9,22 +9,27 @@
         <li @mouseover="showActiveBadge = true" @mouseleave="showActiveBadge = false">
          <img src="@/assets/badges/code.svg" aria-label="CODE" width="25px" height="25px"/>
          <div v-if="showActiveBadge">Active Developer</div>
+         <template v-else/>
         </li>
         <li @mouseover="showHTMLBadge = true" @mouseleave="showHTMLBadge = false">
           <img src="@/assets/badges/html.svg" aria-label="HTML5" width="25px" height="25px"/>
           <div v-if="showHTMLBadge">HTML</div>
+          <template v-else/>
         </li>
         <li @mouseover="showCSSBadge = true" @mouseleave="showCSSBadge = false">
          <img src="@/assets/badges/css.svg" aria-label="CSS3" width="25px" height="25px"/>
          <div v-if="showCSSBadge">CSS</div>
+         <template v-else/>
         </li>
         <li @mouseover="showJavascriptBadge = true" @mouseleave="showJavascriptBadge = false">
           <img src="@/assets/badges/js.svg" aria-label="JS" width="25px" height="25px"/>
           <div v-if="showJavascriptBadge">Javascript</div>
+          <template v-else/>
         </li>
         <li @mouseover="showVue3Badge = true" @mouseleave="showVue3Badge = false">
           <img src="@/assets/badges/vue.svg" aria-label="VUE3" width="25px" height="25px"/>
           <div v-if="showVue3Badge">Vue 3</div>
+          <template v-else/>
         </li>
       </ul> 
     </div>
@@ -88,10 +93,13 @@ header {
 }
 
 #name div {
+  top: calc(100% + 5px);
+  left: 50%;
+  pointer-events: none;
   position: absolute;
-  top: 230px;
-  transform: translate(0%, -50%);
-  width: fit-content;
+  translate: -50%;
+  z-index: 1;
+  white-space: nowrap;
   padding: 5px;
   height: 20px;
   background-color: #151d2f;
@@ -108,11 +116,11 @@ header h1 {
 header ul {
   display: flex;
   flex-direction: row;
-  margin-bottom: 10px;
   width: fit-content;
 }
 
 header li {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -241,9 +249,7 @@ article input {
     align-items: center;
     margin-left: 0;
   }
-  #name div {
-    top: 325px
-  }
+
   header h1 {
     margin-left: 0px;
   }