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

added other pages

Browse source
This commit is contained in:
Keyemail 2023-12-28 00:36:00 -08:00
parent 4cf67f9ef0
commit e763964c99
6 changed files with 104 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/App.vue
View file

@ -1,8 +1,21 @@
<template> <template>
<navbar></navbar>
<RouterView></RouterView> <RouterView></RouterView>
</template> </template>
<script>
import navbar from './components/NavBar.vue'
export default {
components: {
navbar,
},
}
</script>
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap');
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;

48
src/components/NavBar.vue Normal file
View file

@ -0,0 +1,48 @@
<template>
<div class="navbar">
<h1>Keyemail</h1>
<ul class="navContents">
<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>
</ul>
</div>
</template>
<style>
.navbar{
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
color: white;
font-family: 'Rubik', sans-serif;
font-weight: 500;
}
.navbar h1{
width: fit-content;
}
.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;
}
</style>

13
src/router/index.js
View file

@ -1,5 +1,8 @@
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import homeView from '../views/HomePage.vue' import homeView from '../views/HomePage.vue'
import galleryView from '../views/GalleryPage.vue'
import socialView from '../views/SocialsPage.vue'
const routes = [ const routes = [
{ {
@ -11,6 +14,16 @@ const routes = [
name: 'home', name: 'home',
component: homeView component: homeView
}, },
{
path: '/gallery',
name: 'gallery',
component: galleryView
},
{
path: '/socials',
name: 'socials',
component: socialView
}
] ]
const router = createRouter({ const router = createRouter({

15
src/views/GalleryPage.vue Normal file
View file

@ -0,0 +1,15 @@
<template>
<div class="workinprogress">
<h1>Work In Progress</h1>
</div>
</template>
<style>
.workinprogress {
color: white;
font-family: 'Rubik', sans-serif;
display: flex;
align-items: center;
justify-content: center;
}
</style>

41
src/views/HomePage.vue
View file

@ -1,12 +1,4 @@
<template> <template>
<div class="navbar">
<h1>Keyemail</h1>
<ul class="navContents">
<li><a>Home</a></li>
<li><a>Gallery</a></li>
<li><a>Socials</a></li>
</ul>
</div>
<div class="header"> <div class="header">
<div class="headContents"> <div class="headContents">
<h1>Hello, I'm Keyemail or Patrick.</h1> <h1>Hello, I'm Keyemail or Patrick.</h1>
@ -23,39 +15,6 @@
</template> </template>
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap');
.navbar{
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
color: white;
font-family: 'Rubik', sans-serif;
font-weight: 500;
}
.navbar h1{
width: fit-content;
}
.navContents {
list-style: none;
float: right;
}
.navContents li{
display: inline;
cursor: pointer;
margin-left: 10px;
font-weight: 400;
transition: color 0.3s;
}
.navContents li:hover{
color: #8ee8fc;
}
.header { .header {
position: relative; position: relative;
color: white; color: white;

15
src/views/SocialsPage.vue Normal file
View file

@ -0,0 +1,15 @@
<template>
<div class="workinprogress">
<h1>Work In Progress</h1>
</div>
</template>
<style>
.workinprogress {
color: white;
font-family: 'Rubik', sans-serif;
display: flex;
align-items: center;
justify-content: center;
}
</style>