dev #3
|
|
@ -1,4 +0,0 @@
|
|||
> 1%
|
||||
last 2 versions
|
||||
not dead
|
||||
not ie 11
|
||||
17
.eslintrc.js
17
.eslintrc.js
|
|
@ -1,17 +0,0 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
'extends': [
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint:recommended'
|
||||
],
|
||||
parserOptions: {
|
||||
parser: '@babel/eslint-parser'
|
||||
},
|
||||
rules: {
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
|
||||
}
|
||||
}
|
||||
11
.gitignore
vendored
11
.gitignore
vendored
|
|
@ -1,18 +1,7 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
|
|
|
|||
12
README.md
12
README.md
|
|
@ -1,12 +0,0 @@
|
|||
# keyemail-dev by Keyemail
|
||||
|
||||
keyemail-dev is a project site to display about the user Keyemail using Vue v3.0 framework. This project was made by the user `Keyemail` and absolutely no one else.
|
||||
|
||||
## To Build:
|
||||
Use this command to build:
|
||||
`yarn build`
|
||||
|
||||
and use the folder `dist` for production.
|
||||
|
||||
## Contact:
|
||||
Contact `Keyemail` if you have any questions or concerns. ABSOLUTELY NO WARRANTY ON THIS PRODUCT.
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
}
|
||||
}
|
||||
45
main.go
Normal file
45
main.go
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
package main
|
||||
|
||||
import (
|
||||
"net/http"
|
||||
"os"
|
||||
"log"
|
||||
"html/template"
|
||||
)
|
||||
|
||||
type Index struct {
|
||||
WebpageTitle string
|
||||
}
|
||||
|
||||
func indexHandler(w http.ResponseWriter, req *http.Request) {
|
||||
tmpl, err := template.ParseFiles("src/index.tmpl")
|
||||
if err != nil {
|
||||
http.Error(w, "Error loading template", http.StatusInternalServerError)
|
||||
log.Println("Error parsing template:", err)
|
||||
return
|
||||
}
|
||||
|
||||
data := &Index{
|
||||
WebpageTitle: "Keyemail",
|
||||
}
|
||||
|
||||
err = tmpl.Execute(w, data)
|
||||
|
||||
if err != nil {
|
||||
http.Error(w, "Error loading template", http.StatusInternalServerError)
|
||||
log.Println("Error executing template:", err)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
func main() {
|
||||
if _, err := os.Stat("src/index.tmpl"); os.IsNotExist(err) {
|
||||
log.Fatal("Template file does not exist:\n", err)
|
||||
}
|
||||
|
||||
port := ":3939"
|
||||
|
||||
http.HandleFunc("/", indexHandler)
|
||||
log.Println("Server running at http://localhost" + port)
|
||||
http.ListenAndServe(port, nil)
|
||||
}
|
||||
11515
package-lock.json
generated
11515
package-lock.json
generated
File diff suppressed because it is too large
Load diff
25
package.json
25
package.json
|
|
@ -1,25 +0,0 @@
|
|||
{
|
||||
"name": "keyemail-dev",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.8.3",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
"@babel/eslint-parser": "^7.12.16",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-plugin-router": "~5.0.0",
|
||||
"@vue/cli-service": "^5.0.8",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
|
|
@ -1,17 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.png">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<script src="https://kit.fontawesome.com/d18ce6e9fb.js" crossorigin="anonymous"></script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
48
src/App.vue
48
src/App.vue
|
|
@ -1,48 +0,0 @@
|
|||
<template>
|
||||
<navbar></navbar>
|
||||
<RouterView></RouterView>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navbar from './components/NavBar.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
navbar,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap');
|
||||
|
||||
:root {
|
||||
--bg-color: #192236;
|
||||
--bg-alt-color: #151d2f;
|
||||
--bg-alt-hover-color: #111726;
|
||||
--fg-color: #fff;
|
||||
--padding: 20px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color)
|
||||
}
|
||||
|
||||
html, body, #app {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 1920px;
|
||||
margin: auto;
|
||||
padding: var(--padding);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="none" stroke="#06d3d3" stroke-width="64" stroke-linecap="round" stroke-linejoin="round" d="M144 144 32 256 144 368M256 480 384 32M496 144 608 256 496 368"/></svg>
|
||||
|
Before Width: | Height: | Size: 236 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="#264de4" d="M34.9 427.8 192 480l157.1-52.2L384 32H0m313.1 80-4.8 47.3-115.6 49.4h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6h-166.3l-3.6-46.3 118.6-49.4H76.7L70.9 112"/></svg>
|
||||
|
Before Width: | Height: | Size: 295 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="#e34c26" d="M35 428l156.5 52L349 428 384 32H0M308.2 159.9H124.4l4.1 49.4h175.6l-13.6 148.4-99 27.3-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1"/></svg>
|
||||
|
Before Width: | Height: | Size: 260 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#f0db4f" d="M0 480H448V32H0M243.8 381.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6s22.6-5.4 22.6-26.5V237.7h42.1m99.6 207.2c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18s-20.1 7.8-20.1 18c0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6"/></svg>
|
||||
|
Before Width: | Height: | Size: 602 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#3fb27f" d="M0 64H176l48 89 56-89h168L224 448m0-63L392 96H338L224 295 109 96H55"/></svg>
|
||||
|
Before Width: | Height: | Size: 162 B |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
|
@ -1,184 +0,0 @@
|
|||
<template>
|
||||
<nav>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<template v-else/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
turnOnMobileUI: false,
|
||||
smallScreen: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
this.handleResize();
|
||||
},
|
||||
methods: {
|
||||
mobileUI() {
|
||||
if(this.turnOnMobileUI == false) {
|
||||
this.turnOnMobileUI = true;
|
||||
document.body.style.overflow = 'hidden';
|
||||
document.body.scrollTop = 0;
|
||||
document.documentElement.scrollTop = 0;
|
||||
} else {
|
||||
this.turnOnMobileUI = false;
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
},
|
||||
isMobile(){
|
||||
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
|
||||
},
|
||||
handleResize() {
|
||||
if(window.innerWidth < 450) {
|
||||
this.smallScreen = true;
|
||||
} else if(this.turnOnMobileUI === true) {
|
||||
return;
|
||||
} else {
|
||||
this.smallScreen = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
nav {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
#mobileNav {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
|
||||
i {
|
||||
float: right;
|
||||
font-size: 35px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s color;
|
||||
}
|
||||
|
||||
div {
|
||||
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;
|
||||
}
|
||||
|
||||
div a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
transition: 0.3s color;
|
||||
}
|
||||
|
||||
|
||||
div a:hover {
|
||||
color: #74d2f1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
export default [
|
||||
{
|
||||
name: "2 cats",
|
||||
id: "1",
|
||||
path: "gallery/2_cats.jpg"
|
||||
},
|
||||
{
|
||||
name: "Friends Cat",
|
||||
id: "2",
|
||||
path: "gallery/friend_cat.jpg"
|
||||
},
|
||||
{
|
||||
name: "Miku Poster",
|
||||
id: "3",
|
||||
path: "gallery/miku_poster.jpg"
|
||||
},
|
||||
{
|
||||
name: "Networking",
|
||||
id: "4",
|
||||
path: "gallery/networking.jpg"
|
||||
},
|
||||
{
|
||||
name: "Another Friends Cat",
|
||||
id: "5",
|
||||
path: "gallery/another_friend_cat.jpg"
|
||||
},
|
||||
{
|
||||
name: "PC Stickers",
|
||||
id: "6",
|
||||
path: "gallery/pc_case_stickers.jpg"
|
||||
},
|
||||
{
|
||||
name: "Movie Theater Picture 1",
|
||||
id: "7",
|
||||
path: "gallery/movie_picture_1.jpg"
|
||||
},
|
||||
{
|
||||
name: "Movie Theater Picture 2",
|
||||
id: "8",
|
||||
path: "gallery/movie_picture_2.jpg"
|
||||
}
|
||||
]
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
export default [
|
||||
{
|
||||
"videoName": "JP Installing Windows Project",
|
||||
"videoDescription": "This is a guide in japanese where I teach you how to install windows completely. This was made because of a JP Project I had to do.",
|
||||
"videoID": "1",
|
||||
"path": "videos/JP-Installing-Windows-Project.mp4",
|
||||
"thumbnail": "video_thumbnails/JP-Installing-Windows-Project.png"
|
||||
}
|
||||
]
|
||||
9
src/index.tmpl
Normal file
9
src/index.tmpl
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
{{ template "head" . }}
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
createApp(App).use(router).mount('#app')
|
||||
0
src/pages/home.tmpl
Normal file
0
src/pages/home.tmpl
Normal file
|
|
@ -1,48 +0,0 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
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 = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: homeView
|
||||
},
|
||||
{
|
||||
path: '/gallery',
|
||||
name: 'gallery',
|
||||
component: galleryView
|
||||
},
|
||||
{
|
||||
path: '/socials',
|
||||
name: 'socials',
|
||||
component: socialView
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)',
|
||||
name: '404',
|
||||
component: notFoundPage
|
||||
},
|
||||
{
|
||||
path: '/videos',
|
||||
name: 'video',
|
||||
component: videoView
|
||||
},
|
||||
{
|
||||
path: '/videos/:id',
|
||||
name: 'videos',
|
||||
component: videosView
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(process.env.BASE_URL),
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<template>
|
||||
<div class="notFound">
|
||||
<h1>404 Page</h1>
|
||||
<p>This page has not been found, <router-link to="/">click here</router-link> to return back home.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.notFound {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
align-items: center;
|
||||
margin-top: 100px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.notFound h1 {
|
||||
font-size: 70px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.notFound p {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.notFound a {
|
||||
text-decoration: none;
|
||||
color: #ADD8E6;
|
||||
transition: 0.3s color;
|
||||
}
|
||||
|
||||
.notFound a:hover {
|
||||
color: #74d2f1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
<template>
|
||||
<div class="gallery">
|
||||
<h1>Gallery</h1>
|
||||
<div class="galleryGrid">
|
||||
<a v-for="gallery in gallerys" :key="gallery.id" :href="require('@/assets/' + gallery.path)" target="_blank">
|
||||
<img :src="require('@/assets/' + gallery.path)" :title="gallery.name"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import galleryData from '../data/gallery.js'
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
gallerys: galleryData
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gallery {
|
||||
color: white;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.gallery h1 {
|
||||
font-weight: 500;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.galleryGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
row-gap: 32px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.galleryGrid a {
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.galleryGrid img {
|
||||
width: 320px;
|
||||
height: 480px;
|
||||
border-radius: 16px;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
cursor: pointer;
|
||||
border: 4px solid transparent;
|
||||
transition: 0.4s border;
|
||||
}
|
||||
|
||||
.galleryGrid img:hover{
|
||||
border: 4px;
|
||||
border-style: solid;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 739px) {
|
||||
.gallery {
|
||||
margin: auto;
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.galleryGrid {
|
||||
width: 330px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,223 +0,0 @@
|
|||
<template>
|
||||
<header>
|
||||
<a class="pfp" href="https://www.pixiv.net/en/artworks/118037520">
|
||||
<img src="@/assets/profile.jpg"/>
|
||||
</a>
|
||||
<div id="name">
|
||||
<h1>Keyemail</h1>
|
||||
<ul>
|
||||
<li @mouseover="showActiveBadge = true" @mouseleave="showActiveBadge = false">
|
||||
<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"/>
|
||||
<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"/>
|
||||
<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"/>
|
||||
<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"/>
|
||||
<div v-if="showVue3Badge">Vue 3</div>
|
||||
<template v-else/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="intro">
|
||||
<h1>Hi, I'm Keyemail or Patrick.</h1>
|
||||
<p>I specialize in IT and web development-related stuff, but I also love doing a variety of different hobbies such as Flight Simulator, or learning Japanese. I daily run an Arch Linux machine as my main system and support Linux in every way. I'm glad to meet you! </p>
|
||||
</div>
|
||||
<i class="fa-solid fa-arrow-down morearrow" @click="downArrow()" title="Nothing.."></i>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
showActiveBadge: false,
|
||||
showHTMLBadge: false,
|
||||
showCSSBadge: false,
|
||||
showJavascriptBadge: false,
|
||||
showVue3Badge: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
downArrow(){
|
||||
if(counter >= 4){
|
||||
var quack = new Audio(require('@/assets/sounds/duck-quack.mp3'));
|
||||
quack.play();
|
||||
alert('You just got quacked!');
|
||||
counter = 0;
|
||||
} else {
|
||||
alert('Nothing to scroll down to, may come useful later though..');
|
||||
counter++;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var counter = 0;
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
#200080,
|
||||
#200080 20px,
|
||||
#090069 20px,
|
||||
#090069 40px
|
||||
);
|
||||
height: 180px;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pfp {
|
||||
height: 130px !important;
|
||||
width: 130px !important;
|
||||
border: solid;
|
||||
border-width: 4px;
|
||||
border-radius: 50%;
|
||||
border-color: white;
|
||||
overflow: hidden;
|
||||
margin-left: 20px;
|
||||
user-select: none;
|
||||
|
||||
img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit: cover;
|
||||
background-color: #afb5c8;
|
||||
}
|
||||
}
|
||||
|
||||
#name {
|
||||
margin-left: 20px;
|
||||
div {
|
||||
top: calc(100% + 5px);
|
||||
left: 50%;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
translate: -50%;
|
||||
z-index: 1;
|
||||
white-space: nowrap;
|
||||
padding: 5px;
|
||||
height: 20px;
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: fit-content;
|
||||
gap: 5px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: inherit;
|
||||
text-decoration: none;
|
||||
background-color: var(--bg-alt-color);
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
padding: 3px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 40px;
|
||||
width: 100%;
|
||||
color: white;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
background-color: var(--bg-alt-color);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
h1 {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 15px;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 400;
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
.morearrow {
|
||||
cursor: pointer;
|
||||
font-size: 40px;
|
||||
color: white;
|
||||
margin: 40px auto;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px){
|
||||
header {
|
||||
flex-direction: column;
|
||||
height: 240px;
|
||||
justify-content: center;
|
||||
}
|
||||
#name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.intro h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
.intro p {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.pfp{
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,159 +0,0 @@
|
|||
<template>
|
||||
<div class="socials">
|
||||
<h1>My Socials!</h1>
|
||||
<div class="socialsgrid">
|
||||
<div class="discord">
|
||||
<h2>Discord</h2>
|
||||
<p>keyemail</p>
|
||||
<i class="fa-brands fa-discord"></i>
|
||||
</div>
|
||||
<a href="https://github.com/Keyemail" target="_blank">
|
||||
<div class="github">
|
||||
<h2>GitHub</h2>
|
||||
<p>Keyemail</p>
|
||||
<i class="fa-brands fa-github"></i>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://steamcommunity.com/id/keyemail/" target="_blank">
|
||||
<div class="steam">
|
||||
<h2>Steam</h2>
|
||||
<p>Keyemail</p>
|
||||
<i class="fa-brands fa-steam"></i>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://open.spotify.com/user/316yuurxrw3zcprxsnrvgamxktp4" target="_blank">
|
||||
<div class="spotify">
|
||||
<h2>Spotify</h2>
|
||||
<p>Keyemail</p>
|
||||
<i class="fa-brands fa-spotify"></i>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/channel/UCCNkKG8XoZCh52vLCbXYy7g" target="_blank">
|
||||
<div class="youtube">
|
||||
<h2>YouTube</h2>
|
||||
<p>Keyemail</p>
|
||||
<i class="fa-brands fa-youtube"></i>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://www.instagram.com/keyemail1?igsh=OGQ5ZDc2ODk2ZA%3D%3D&utm_source=qr" target="_blank">
|
||||
<div class="instagram">
|
||||
<h2>Instagram</h2>
|
||||
<p>keyemail1</p>
|
||||
<i class="fa-brands fa-instagram"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.socials {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 100px;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.socials h1 {
|
||||
margin-bottom: 20px;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.socialsgrid {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
align-content: start;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.socialsgrid a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.socialsgrid div{
|
||||
margin: 5px;
|
||||
width: 275px;
|
||||
height: 170px;
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
border-color: white;
|
||||
box-sizing: border-box;
|
||||
border: 4px solid transparent;
|
||||
transition: 0.4s border;
|
||||
}
|
||||
|
||||
.socialsgrid div:hover {
|
||||
cursor: pointer;
|
||||
border: 4px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.socialsgrid i {
|
||||
font-size: 35px;
|
||||
margin-top: auto;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.socialsgrid h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
.discord {
|
||||
background-color: #5865F2;
|
||||
}
|
||||
|
||||
.github {
|
||||
background-color: #171515;
|
||||
}
|
||||
|
||||
.steam {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.spotify {
|
||||
background-color: #1DB954;
|
||||
}
|
||||
|
||||
.youtube {
|
||||
background-color: #CD201F;
|
||||
}
|
||||
|
||||
.instagram {
|
||||
background-color: #C13584;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 905px){
|
||||
.socialsgrid{
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 615px){
|
||||
.socialsgrid{
|
||||
grid-template-columns: auto;
|
||||
width: 80%
|
||||
}
|
||||
.socials {
|
||||
margin-top: 80px;
|
||||
justify-content: unset;
|
||||
}
|
||||
.socialsgrid div {
|
||||
width: 100%;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 720px){
|
||||
.socials {
|
||||
display: flex;
|
||||
justify-content: unset;
|
||||
margin-top: 80px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
<template>
|
||||
<h1>Videos</h1>
|
||||
<ul>
|
||||
<router-link v-for="video in videos" :key="video.videoID" :to="'/videos/' + video.videoID">
|
||||
<li>
|
||||
<img :src="require('@/assets/' + video.thumbnail)" alt="Video Thumbnail"/>
|
||||
<div id="content">
|
||||
<h2>{{ video.videoName }}</h2>
|
||||
</div>
|
||||
</li>
|
||||
</router-link>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import videoData from '../data/videos.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
videos: videoData
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 3rem;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
|
||||
row-gap: 32px;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background-color: var(--bg-alt-color);
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
width: 370px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s background-color;
|
||||
|
||||
h2 {
|
||||
color: white;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: var(--bg-alt-hover-color);
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 350px;
|
||||
aspect-ratio: 16 / 9;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 779px) {
|
||||
a {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
<template>
|
||||
<notfound v-if="!(video)"></notfound>
|
||||
|
||||
<template v-else>
|
||||
<video controls>
|
||||
<source :src="require('@/assets/' + video.path)" type="video/mp4">
|
||||
</video>
|
||||
<div id="info">
|
||||
<h1>{{ video.videoName }}</h1>
|
||||
<p>{{ video.videoDescription }}</p>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import videoData from '../data/videos.js'
|
||||
import notfound from '../views/404Page.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
notfound
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
video: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let videoID = this.$route.params.id;
|
||||
this.video = videoData.find(v => v.videoID === videoID);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
video {
|
||||
max-height: calc(100vh - 420px);
|
||||
max-width: calc(100vw - 40px);
|
||||
width: max-content;
|
||||
aspect-ratio: 16 / 9;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--bg-alt-color);
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
#info h1 {
|
||||
color: white;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#info p {
|
||||
font-family: 'Rubik', sans-serif;
|
||||
font-weight: 200;
|
||||
font-size: 1.3rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
const { defineConfig } = require('@vue/cli-service')
|
||||
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true
|
||||
})
|
||||
|
||||
module.exports = {
|
||||
chainWebpack: config => {
|
||||
config
|
||||
.plugin('html')
|
||||
.tap(args => {
|
||||
args[0].title = "Keyemail's Profile"
|
||||
return args;
|
||||
})
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue