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 +206 -113
9 changed files with 206 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/App.vue
View file

@ -16,9 +16,19 @@ 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 {
@ -26,11 +36,12 @@ html, body, #app {
flex-direction: column; flex-direction: column;
max-width: 1920px; max-width: 1920px;
margin: auto; margin: auto;
padding: 0px 20px; padding: var(--padding);
} }
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box;
} }
</style> </style>

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

Binary file not shown.

202
src/components/NavBar.vue
View file

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

8
src/data/projects.js
View file

@ -1,8 +0,0 @@
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 Normal file
View file

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

10
src/router/index.js
View file

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

16
src/views/VideoPage.vue Normal file
View file

@ -0,0 +1,16 @@
<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 Normal file
View file

@ -0,0 +1,38 @@
<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>