keyemail/keyemail-dev
1
2
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Added popups!

Browse source
This commit is contained in:
Patrick Hatsune 2024-06-03 12:21:25 -07:00
parent c1f8d94992
commit 46be945e1a
Signed by: keyemail
GPG key ID: 487C4334CE04CE66
1 changed files with 38 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/views/HomePage.vue
View file

@ -6,20 +6,25 @@
<div id="name"> <div id="name">
<h1>Keyemail</h1> <h1>Keyemail</h1>
<ul> <ul>
<li> <li @mouseover="showActiveBadge = true" @mouseleave="showActiveBadge = false">
<img src="@/assets/badges/code.svg" aria-label="CODE" width="25px" height="25px"/> <img src="@/assets/badges/code.svg" aria-label="CODE" width="25px" height="25px"/>
<div v-if="showActiveBadge">Active Developer</div>
</li> </li>
<li> <li @mouseover="showHTMLBadge = true" @mouseleave="showHTMLBadge = false">
<img src="@/assets/badges/html.svg" aria-label="HTML5" width="25px" height="25px"/> <img src="@/assets/badges/html.svg" aria-label="HTML5" width="25px" height="25px"/>
<div v-if="showHTMLBadge">HTML</div>
</li> </li>
<li> <li @mouseover="showCSSBadge = true" @mouseleave="showCSSBadge = false">
<img src="@/assets/badges/css.svg" aria-label="CSS3" width="25px" height="25px"/> <img src="@/assets/badges/css.svg" aria-label="CSS3" width="25px" height="25px"/>
<div v-if="showCSSBadge">CSS</div>
</li> </li>
<li> <li @mouseover="showJavascriptBadge = true" @mouseleave="showJavascriptBadge = false">
<img src="@/assets/badges/js.svg" aria-label="JS" width="25px" height="25px"/> <img src="@/assets/badges/js.svg" aria-label="JS" width="25px" height="25px"/>
<div v-if="showJavascriptBadge">Javascript</div>
</li> </li>
<li> <li @mouseover="showVue3Badge = true" @mouseleave="showVue3Badge = false">
<img src="@/assets/badges/vue.svg" aria-label="VUE3" width="25px" height="25px"/> <img src="@/assets/badges/vue.svg" aria-label="VUE3" width="25px" height="25px"/>
<div v-if="showVue3Badge">Vue 3</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -33,6 +38,15 @@
<script> <script>
export default { export default {
data () {
return {
showActiveBadge: false,
showHTMLBadge: false,
showCSSBadge: false,
showJavascriptBadge: false,
showVue3Badge: false
}
},
methods: { methods: {
downArrow(){ downArrow(){
if(counter >= 4){ if(counter >= 4){
@ -47,6 +61,7 @@ export default {
} }
} }
} }
var counter = 0; var counter = 0;
</script> </script>
@ -72,6 +87,19 @@ header {
margin-left: 20px; 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 { header h1 {
color: white; color: white;
font-size: 3rem; font-size: 3rem;
@ -206,13 +234,16 @@ article input {
height: 240px; height: 240px;
justify-content: center; justify-content: center;
} }
header #name { #name {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left: 0; margin-left: 0;
} }
#name div {
top: 325px
}
header h1 { header h1 {
margin-left: 0px; margin-left: 0px;
} }