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>
@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 {
@ -36,12 +26,11 @@ html, body, #app {
flex-direction: column;
max-width: 1920px;
margin: auto;
padding: var(--padding);
padding: 0px 20px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</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>
<nav>
<div class="navbar">
<h1>Keyemail</h1>
<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>
<router-link to="/videos">Videos</router-link>
</li>
<li>
<a href="https://git.keyemail.dev/explore/">Git</a>
</li>
<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>
<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>
<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">
<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>
<router-link to="/videos" @click="mobileUI()">Videos</router-link>
</li>
<li>
<a href="https://git.keyemail.dev/explore/">Git</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/">Projects</a></li>
</ul>
</div>
</div>
@ -87,7 +66,7 @@ export default {
</script>
<style scoped>
nav {
.navbar{
position: relative;
display: flex;
align-items: center;
@ -95,48 +74,52 @@ nav {
color: white;
font-family: 'Rubik', sans-serif;
font-weight: 500;
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;
}
margin-top: 20px;
}
#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;
width: 100%;
height: 100%;
@ -144,41 +127,40 @@ nav {
left: 0;
top: 0;
z-index: 9;
}
i {
float: right;
font-size: 35px;
cursor: pointer;
transition: 0.3s color;
}
.mobileNav i {
float: right;
font-size: 35px;
cursor: pointer;
transition: 0.3s color;
}
div {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.mobileNavContents {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
div li {
cursor: pointer;
margin-left: 10px;
font-weight: 400;
transition: color 0.3s;
font-size: 40px;
text-align: center;
font-family: 'Rubik', sans-serif;
margin: 10px;
}
.mobileNavContents li {
cursor: pointer;
margin-left: 10px;
font-weight: 400;
transition: color 0.3s;
font-size: 40px;
text-align: center;
font-family: 'Rubik', sans-serif;
margin: 10px;
}
div a {
color: white;
text-decoration: none;
transition: 0.3s color;
}
.mobileNavContents a {
color: white;
text-decoration: none;
transition: 0.3s color;
}
div a:hover {
color: #74d2f1;
}
.mobileNavContents a:hover {
color: #74d2f1;
}
</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 socialView from '../views/SocialsPage.vue'
import notFoundPage from '../views/404Page.vue'
import videoView from '../views/VideoPage.vue'
import videosView from '../views/VideosPage.vue'
const routes = [
{
@ -26,14 +24,6 @@ const routes = [
{
path: '/:pathMatch(.*)',
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>
<ul>
<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>
<template v-else/>
</li>
<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>
<template v-else/>
</li>
<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>
<template v-else/>
</li>
<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>
<template v-else/>
</li>
<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>
<template v-else/>
</li>
@ -127,14 +127,11 @@ 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 {
@ -147,12 +144,14 @@ header {
li {
position: relative;
display: inherit;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
background-color: var(--bg-alt-color);
background-color: #151d2f;
height: 30px;
width: 30px;
padding: 3px;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
}
@ -166,7 +165,7 @@ header {
width: 100%;
color: white;
font-family: 'Rubik', sans-serif;
background-color: var(--bg-alt-color);
background-color: #151d2f;
border-radius: 10px;
padding: 20px;
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>