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>
@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>

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

Binary file not shown.

112
src/components/NavBar.vue
View file

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

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>