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

Compare commits

base: keyemail:afc1cc571c4e071497da79bdc9b6cd2d912e11bb
Branches Tags
keyemail:master
keyemail:dev
keyemail:pfp-pr1
..
compare: keyemail:fafe1e67dff42428b4dae6a78f19d34abfc5c905
Branches Tags
keyemail:master
keyemail:dev
keyemail:pfp-pr1

No commits in common. "afc1cc571c4e071497da79bdc9b6cd2d912e11bb" and "fafe1e67dff42428b4dae6a78f19d34abfc5c905" have entirely different histories.
afc1cc571c ... fafe1e67df

9 changed files with 113 additions and 206 deletions
Show stats Expand all files Collapse all files

15
src/App.vue
View file

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

BIN
src/assets/videos/JP-Installing-Windows-Project.mp4
View file

Binary file not shown.

202
src/components/NavBar.vue
View file

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

8
src/data/projects.js Normal file
View file

@ -0,0 +1,8 @@
export default [
{
"name": "Weather App",
"description": "A cool weather app I decided to build for computer science class! This was coded by me, all images and data belong to code.org.",
"photo": "project_thumbnails/weather.png",
"id": "1"
}
]

7
src/data/videos.js
View file

@ -1,7 +0,0 @@
export default [
{
"videoName": "JP Installing Windows Project",
"videoID": "1",
"path": "videos/JP-Installing-Windows-Project.mp4"
}
]

10
src/router/index.js
View file

@ -4,8 +4,6 @@ import homeView from '../views/HomePage.vue'
import galleryView from '../views/GalleryPage.vue' import galleryView from '../views/GalleryPage.vue'
import socialView from '../views/SocialsPage.vue' import socialView from '../views/SocialsPage.vue'
import notFoundPage from '../views/404Page.vue' import notFoundPage from '../views/404Page.vue'
import videoView from '../views/VideoPage.vue'
import videosView from '../views/VideosPage.vue'
const routes = [ const routes = [
{ {
@ -26,14 +24,6 @@ const routes = [
{ {
path: '/:pathMatch(.*)', path: '/:pathMatch(.*)',
component: notFoundPage component: notFoundPage
},
{
path: '/videos',
component: videoView
},
{
path: '/videos/:id',
component: videosView
} }
] ]

23
src/views/HomePage.vue
View file

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

16
src/views/VideoPage.vue
View file

@ -1,16 +0,0 @@
<template>
<h1>This page is under construction</h1>
</template>
<style scoped>
h1 {
color: white;
font-family: 'Rubik', sans-serif;
font-weight: 500;
font-size: 4rem;
margin: 60px auto;
text-align: center;
}
</style>

38
src/views/VideosPage.vue
View file

@ -1,38 +0,0 @@
<template>
<h1>{{ video.videoName }}</h1>
<video controls>
<source :src="require('@/assets/' + video.path)" type="video/mp4">
</video>
</template>
<script>
import videoData from '../data/videos.js'
export default {
data () {
return {
video: null,
}
},
created() {
let videoID = this.$route.params.id;
this.video = videoData.find(v => v.videoID === videoID);
}
}
</script>
<style scoped>
h1 {
color: white;
font-family: 'Rubik', sans-serif;
margin-top: 60px;
font-weight: 500;
font-size: 2rem;
}
video {
max-height: calc(100vh - 40px);
max-width: calc(100vh - 40px);
aspect-ratio: 16 / 9;
}
</style>