From 46be945e1a3cbc0bb0410a238c278671eb14ba49 Mon Sep 17 00:00:00 2001
From: Keyemail <hatsunepatrick@gmail.com>
Date: Mon, 3 Jun 2024 12:21:25 -0700
Subject: [PATCH] Added popups!

---
 src/views/HomePage.vue | 45 +++++++++++++++++++++++++++++++++++-------
 1 file changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 579f3cb..d7ed9b0 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -6,20 +6,25 @@
     <div id="name">
       <h1>Keyemail</h1>
       <ul>
-        <li>
+        <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>
         </li>
-        <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>
         </li>
-        <li>
-         <img src="@/assets/badges/css.svg" aria-label="CSS3" width="25px" height="25px"/> 
+        <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>
         </li>
-        <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>
         </li>
-        <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>
         </li>
       </ul> 
     </div>
@@ -33,6 +38,15 @@
 
 <script>
 export default {
+  data () {
+    return {
+      showActiveBadge: false,
+      showHTMLBadge: false,
+      showCSSBadge: false,
+      showJavascriptBadge: false,
+      showVue3Badge: false
+    }
+  },
   methods: {
     downArrow(){
       if(counter >= 4){
@@ -47,6 +61,7 @@ export default {
     }
   }
 }
+
 var counter = 0;
 </script>
 
@@ -72,6 +87,19 @@ header {
   margin-left: 20px;
 }
 
+#name div {
+  position: absolute;
+  top: 230px;
+  transform: translate(0%, -50%);
+  width: fit-content;
+  padding: 5px;
+  height: 20px;
+  background-color: #151d2f;
+  color: white;
+  font-family: 'Rubik', sans-serif;
+  border-radius: 5px;
+}
+
 header h1 {
   color: white;
   font-size: 3rem; 
@@ -206,13 +234,16 @@ article input {
     height: 240px;
     justify-content: center;
   }
-  header #name {
+  #name {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     margin-left: 0;
   }
+  #name div {
+    top: 325px
+  }
   header h1 {
     margin-left: 0px;
   }