Compare commits
No commits in common. "225ba506fb0bb3d784c5173860356cef7abb9f4b" and "283d649bea42bc652acf5d563184f5fffd218ba6" have entirely different histories.
225ba506fb
...
283d649bea
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 127 KiB |
|
|
@ -17,8 +17,8 @@ export default {
|
|||
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap');
|
||||
|
||||
html, body, #app {
|
||||
height: 100%;
|
||||
scroll-behavior: smooth;
|
||||
background-color: #192236;
|
||||
}
|
||||
|
||||
#app {
|
||||
|
|
@ -33,4 +33,8 @@ html, body, #app {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #192236;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
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 |
BIN
src/assets/roller_profile.png
Executable file
BIN
src/assets/roller_profile.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
BIN
src/assets/roller_profile_circle.png
Normal file
BIN
src/assets/roller_profile_circle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
|
@ -5,7 +5,6 @@
|
|||
<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="/projects">Projects</router-link></li>
|
||||
</ul>
|
||||
<div class="mobileNavButton" v-else>
|
||||
<i class="fa-solid fa-x" @click="mobileUI(); handleResize();" v-if="turnOnMobileUI"></i>
|
||||
|
|
@ -18,7 +17,6 @@
|
|||
<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="/projects" @click="mobileUI()">Projects</router-link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
|
|
@ -4,7 +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 projectsView from '../views/ProjectsPage.vue'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
|
|
@ -25,11 +24,6 @@ const routes = [
|
|||
{
|
||||
path: '/:pathMatch(.*)',
|
||||
component: notFoundPage
|
||||
},
|
||||
{
|
||||
path: '/projects',
|
||||
name: 'Projects',
|
||||
component: projectsView
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -1,210 +1,114 @@
|
|||
<template>
|
||||
<header>
|
||||
<a class="pfp" href="https://www.pixiv.net/en/artworks/118037520">
|
||||
<img src="@/assets/profile.jpg"/>
|
||||
</a>
|
||||
<h1>Keyemail</h1>
|
||||
</header>
|
||||
<div class="section-row">
|
||||
<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 class="header">
|
||||
<div class="headContents">
|
||||
<h1>Hello, 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>
|
||||
<article>
|
||||
<h1>Comments!</h1>
|
||||
<div>
|
||||
<span>Developer: Sorry this function is in the workings! Come back later to use this function.</span>
|
||||
</div>
|
||||
<input type="text" placeholder="Start Typing.." required minlength="1"/>
|
||||
</article>
|
||||
<img alt="Profile Picture" src="../assets/roller_profile_circle.png">
|
||||
</div>
|
||||
<i class="fa-solid fa-arrow-down morearrow" @click="downArrow()" title="Nothing.."></i>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
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-image: url(@/assets/banner_website.avif);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center 20%;
|
||||
height: 180px;
|
||||
width: 100%;
|
||||
background-color: #0df;
|
||||
border-radius: 10px;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
.header {
|
||||
position: relative;
|
||||
color: white;
|
||||
margin-left: 20px;
|
||||
font-size: 3rem;
|
||||
-webkit-text-stroke: 1px black;
|
||||
}
|
||||
|
||||
.pfp {
|
||||
height: 130px !important;
|
||||
width: 130px !important;
|
||||
border: solid;
|
||||
border-width: 4px;
|
||||
border-radius: 50%;
|
||||
border-color: white;
|
||||
overflow: hidden;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.pfp img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit: cover;
|
||||
background-color: #afb5c8
|
||||
}
|
||||
|
||||
.section-row {
|
||||
height: 100%;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 90px;
|
||||
width: 700px;
|
||||
color: white;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
background-color: #151d2f;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
.headContents {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.intro h1 {
|
||||
font-size: 3.5rem;
|
||||
.headContents h1{
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
font-size: 50px
|
||||
}
|
||||
|
||||
.intro p {
|
||||
margin-top: 15px;
|
||||
font-size: 1.8rem;
|
||||
.headContents p {
|
||||
margin-top: 40px;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
max-width: 1200px;
|
||||
font-size: 30px;
|
||||
width: 900px;
|
||||
}
|
||||
|
||||
article {
|
||||
background-color: #151d2f;
|
||||
height: 350px;
|
||||
width: 700px;
|
||||
margin-top: 90px;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
.header img {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
article h1 {
|
||||
font-size: 1.5rem;
|
||||
color: white;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
article div {
|
||||
color: white;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
font-weight: 300;
|
||||
margin-top: 10px;
|
||||
.workinprogress {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
overflow: auto;
|
||||
height: 240px;
|
||||
background-color: #111826;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
article span {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
article input {
|
||||
all: unset;
|
||||
margin-top: 10px;
|
||||
background-color: #111826;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
margin-top: 200px;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
font-weight: 300;
|
||||
font-weight: 500;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.morearrow {
|
||||
cursor: pointer;
|
||||
font-size: 40px;
|
||||
color: white;
|
||||
margin: 40px auto;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1519px){
|
||||
.section-row > * {
|
||||
width: 100%;
|
||||
}
|
||||
.intro h1 {
|
||||
text-align: center;
|
||||
}
|
||||
.intro p {
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
article{
|
||||
margin-top: 20px;
|
||||
@media only screen and (max-width: 1376px){
|
||||
.workinprogress{
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px){
|
||||
header {
|
||||
flex-direction: column;
|
||||
height: 240px;
|
||||
@media only screen and (max-width: 1360px) {
|
||||
.header {
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-top: 80px;
|
||||
}
|
||||
header h1 {
|
||||
margin-left: 0px;
|
||||
|
||||
.headContents{
|
||||
text-align: center;
|
||||
}
|
||||
.intro h1 {
|
||||
font-size: 3rem;
|
||||
|
||||
.header img{
|
||||
margin-top: 60px;
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
.intro p {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 990px){
|
||||
.headContents p {
|
||||
width: auto;
|
||||
}
|
||||
.pfp{
|
||||
margin-left: 0px;
|
||||
.workinprogress {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
.workinprogress {
|
||||
font-size: 10px;
|
||||
}
|
||||
.header {
|
||||
height: auto;
|
||||
margin-top: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 720px) {
|
||||
.header {
|
||||
height: auto;
|
||||
margin-top: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 380px) {
|
||||
.header img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,153 +0,0 @@
|
|||
<template>
|
||||
<div class="projects center">
|
||||
<div class="projectTitle">
|
||||
<h1>Projects</h1>
|
||||
<p>Some cool projects I will post here!</p>
|
||||
</div>
|
||||
<div class="projectsGrid">
|
||||
<ul class="projectsList">
|
||||
<li v-for="project in projects" :key="project.id" @click="workinprogress()">
|
||||
<div>
|
||||
<h1>{{ project.name }}</h1>
|
||||
<p>{{ project.description }}</p>
|
||||
</div>
|
||||
<img :src="require('@/assets/' + project.photo)"/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import projectData from '../data/projects.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
projects: projectData
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
workinprogress(){
|
||||
alert("Work in progress! Check back soon.");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.center {
|
||||
display: grid;
|
||||
grid-template-columns: [breakout-start] 50px 50px [content-start] 1fr [content-end] 50px 50px [breakout-end];
|
||||
}
|
||||
|
||||
.center > * {
|
||||
grid-column: content;
|
||||
}
|
||||
|
||||
.projects {
|
||||
color: white;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.projectTitle {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.projectTitle h1 {
|
||||
font-weight: 500;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.projectTitle p {
|
||||
margin-top: 5px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.projectsGrid {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.projectsList li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 9px;
|
||||
width: 100%;
|
||||
min-height: 210px;
|
||||
background-color: #141926;
|
||||
border-radius: 15px;
|
||||
transition: 0.3s background-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.projectsList li:hover {
|
||||
background-color:#11151f;
|
||||
}
|
||||
|
||||
.projectsList div {
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.projectsList h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.projectsList p {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.projectsList img {
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
border-radius: 5px;
|
||||
justify-self: center;
|
||||
margin: 15px;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1060px) {
|
||||
.center > * {
|
||||
grid-column: breakout;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 660px) {
|
||||
.projectsList li {
|
||||
min-height: 160px;
|
||||
}
|
||||
.projectsList h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.projectsList p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.projectsList img {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 430px) {
|
||||
.projectsList h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.projectsList p {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 380px){
|
||||
.projectsList img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -148,12 +148,4 @@
|
|||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 720px){
|
||||
.socials {
|
||||
display: flex;
|
||||
justify-content: unset;
|
||||
margin-top: 80px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue