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

dev #1

Merged
keyemail merged 3 commits from dev into master 2024-06-06 17:54:27 +00:00
Conversation 0 Commits 3 Files changed 9 +72 -49
3 changed files with 72 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 6e747fba07 - Show all commits

15
src/App.vue
View file

@ -16,9 +16,19 @@ export default {
<style>
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap');
:root {
--bg-color: #192236;
--bg-alt-color: #151d2f;
--fg-color: #fff;
--padding: 20px;
}
body {
background-color: var(--bg-color)
}
html, body, #app {
scroll-behavior: smooth;
background-color: #192236;
}
#app {
@ -26,11 +36,12 @@ html, body, #app {
flex-direction: column;
max-width: 1920px;
margin: auto;
padding: 0px 20px;
padding: var(--padding);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>

83
src/components/NavBar.vue
View file

@ -1,24 +1,39 @@
<template>
<div class="navbar">
<nav>
<h1>Keyemail</h1>
<ul class="navContents" v-if="!(isMobile() || smallScreen)">
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/gallery">Gallery</router-link></li>
<li><router-link to="/socials">Socials</router-link></li>
<li><a href="https://git.keyemail.dev/explore/">Projects</a></li>
<ul v-if="!(isMobile() || smallScreen)">
<li>
<router-link to="/">Home</router-link>
</li>
<li>
<router-link to="/gallery">Gallery</router-link>
</li>
<li>
<router-link to="/socials">Socials</router-link>
</li>
<li>
<a href="https://git.keyemail.dev/explore/">Git</a>
</li>
</ul>
<div class="mobileNavButton" v-else>
<i class="fa-solid fa-x" @click="mobileUI(); handleResize();" v-if="turnOnMobileUI"></i>
<i class="fas fa-bars" @click="mobileUI();" v-else></i>
</div>
</div>
<div class="mobileNav" v-if="turnOnMobileUI">
<div class="mobileNavContents">
<i class="fa-solid fa-x" @click="mobileUI(); handleResize();" v-else-if="turnOnMobileUI"></i>
<i class="fas fa-bars" @click="mobileUI();" v-else></i>
</nav>
<div id="mobileNav" v-if="turnOnMobileUI">
<div>
<ul>
<li><router-link to="/" @click="mobileUI()">Home</router-link></li>
<li><router-link to="/gallery" @click="mobileUI()">Gallery</router-link></li>
<li><router-link to="/socials" @click="mobileUI()">Socials</router-link></li>
<li><a href="https://git.keyemail.dev/explore/">Projects</a></li>
<li>
<router-link to="/" @click="mobileUI()">Home</router-link>
</li>
<li>
<router-link to="/gallery" @click="mobileUI()">Gallery</router-link>
</li>
<li>
<router-link to="/socials" @click="mobileUI()">Socials</router-link>
</li>
<li>
<a href="https://git.keyemail.dev/explore/">Git</a>
</li>
</ul>
</div>
</div>
@ -66,7 +81,7 @@ export default {
</script>
<style scoped>
.navbar{
nav {
position: relative;
display: flex;
align-items: center;
@ -74,20 +89,19 @@ export default {
color: white;
font-family: 'Rubik', sans-serif;
font-weight: 500;
margin-top: 20px;
}
.navbar h1{
nav h1{
width: fit-content;
z-index: 10;
}
.navContents {
nav ul {
list-style: none;
float: right;
}
.navContents li{
nav ul li{
display: inline;
cursor: pointer;
margin-left: 10px;
@ -95,31 +109,28 @@ export default {
transition: color 0.3s;
}
.navContents a {
nav ul a {
text-decoration: none;
color: inherit;
}
.navContents li:hover{
nav ul li:hover{
color: #8ee8fc;
}
.mobileNavButton {
z-index: 10;
}
.mobileNavButton i {
nav i {
float: right;
font-size: 35px;
cursor: pointer;
transition: 0.3s color;
z-index: 10;
}
.mobileNavButton i:hover {
nav i:hover {
color: #74d2f1;
}
.mobileNav {
#mobileNav {
position: absolute;
width: 100%;
height: 100%;
@ -129,21 +140,21 @@ export default {
z-index: 9;
}
.mobileNav i {
#mobileNav i {
float: right;
font-size: 35px;
cursor: pointer;
transition: 0.3s color;
}
.mobileNavContents {
#mobileNav div {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.mobileNavContents li {
#mobileNav div li {
cursor: pointer;
margin-left: 10px;
font-weight: 400;
@ -154,13 +165,13 @@ export default {
margin: 10px;
}
.mobileNavContents a {
#mobileNav div a {
color: white;
text-decoration: none;
transition: 0.3s color;
}
.mobileNavContents a:hover {
#mobileNav div a:hover {
color: #74d2f1;
}
</style>

23
src/views/HomePage.vue
View file

@ -7,27 +7,27 @@
<h1>Keyemail</h1>
<ul>
<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"/>
<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"/>
<img src="@/assets/badges/html.svg" aria-label="HTML5"/>
<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"/>
<img src="@/assets/badges/css.svg" aria-label="CSS3"/>
<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"/>
<img src="@/assets/badges/js.svg" aria-label="JS"/>
<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"/>
<img src="@/assets/badges/vue.svg" aria-label="VUE3"/>
<div v-if="showVue3Badge">Vue 3</div>
<template v-else/>
</li>
@ -127,11 +127,14 @@ header {
background-color: #151d2f;
color: white;
font-family: 'Rubik', sans-serif;
box-sizing: content-box;
border-radius: 5px;
}
img {
pointer-events: none;
width: 100%;
height: 100%;
}
ul {
@ -144,14 +147,12 @@ header {
li {
position: relative;
display: flex;
align-items: center;
justify-content: center;
display: inherit;
text-decoration: none;
background-color: #151d2f;
background-color: var(--bg-alt-color);
height: 30px;
width: 30px;
box-sizing: border-box;
padding: 3px;
border-radius: 5px;
cursor: pointer;
}
@ -165,7 +166,7 @@ header {
width: 100%;
color: white;
font-family: 'Rubik', sans-serif;
background-color: #151d2f;
background-color: var(--bg-alt-color);
border-radius: 10px;
padding: 20px;
text-align: center;