Moved from github

src/App.vue

@@ -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,8 +33,4 @@ html, body, #app {
   margin: 0;
   padding: 0;
 }
-
-body {
-  background-color: #192236;
-}
 </style>

src/components/NavBar.vue

@@ -5,6 +5,7 @@
       <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>
@@ -17,6 +18,7 @@
         <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>

src/components/WeatherApp.vue

@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<style>
+
+</style>
+
+<script>
+
+</script>

src/data/projects.js

@@ -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"
+  }
+]

src/router/index.js

@@ -4,6 +4,7 @@ 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 = [
   {
@@ -24,6 +25,11 @@ const routes = [
   {
     path: '/:pathMatch(.*)',
     component: notFoundPage
+  },
+  {
+    path: '/projects',
+    name: 'Projects',
+    component: projectsView
   }
 ]
 

src/views/HomePage.vue

@@ -1,114 +1,210 @@
 <template>
-  <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>
+  <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>
-    <img alt="Profile Picture" src="../assets/roller_profile_circle.png">
+    <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>
+  </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 {
-  position: relative;
-  color: white;
-  height: 100%;
-  font-family: 'Rubik', sans-serif;
+header {
   display: flex;
-  justify-content: space-between;
   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;  
 }
 
-.headContents {
-  height: fit-content;
+header h1 {
+  color: white;
+  margin-left: 20px;
+  font-size: 3rem; 
+  -webkit-text-stroke: 1px black;
 }
 
-.headContents h1{
-  font-weight: 500;
-  font-size: 50px
+.pfp {
+  height: 130px !important;
+  width: 130px !important;
+  border: solid;
+  border-width: 4px;
+  border-radius: 50%;
+  border-color: white;
+  overflow: hidden;
+  margin-left: 20px;
 }
 
-.headContents p {
-  margin-top: 40px;
-  font-weight: 400;
-  font-size: 30px;
-  width: 900px;
+.pfp img {
+  width:100%;
+  height:100%;
+  object-fit: cover;
+  background-color: #afb5c8
 }
 
-.header img {
-  width: 400px;
-  height: 400px;
-  justify-self: center;
-}
-
-.workinprogress {
+.section-row {
   display: flex;
-  justify-content: center;
-  margin-top: 200px;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.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;
+}
+
+.intro h1 {
+  font-size: 3.5rem;
   font-weight: 500;
-  font-size: 30px;
+  text-align: left;
 }
 
-@media only screen and (max-width: 1376px){
-  .workinprogress{
-    font-size: 20px;
-  }
+.intro p {
+  margin-top: 15px;
+  font-size: 1.8rem;
+  font-weight: 400;
+  text-align: left;
+  max-width: 1200px;
 }
 
-@media only screen and (max-width: 1360px) {
-  .header {
-    justify-content: center;
-    flex-direction: column;
+article {
+ background-color: #151d2f;
+ height: 350px;
+ width: 700px;
+ margin-top: 90px;
+ border-radius: 10px;
+ padding: 20px;
+}
+
+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;
+  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;
+  color: white;
+  padding: 5px;
+  border-radius: 10px;
+  width: 100%;
+  box-sizing: border-box;
+  font-family: 'Rubik', sans-serif;
+  font-weight: 300;
+}
+
+.morearrow {
+  cursor: pointer;
+  font-size: 40px;
+  color: white;
+  margin: 40px auto;
   margin-top: 80px;
-  }
+}
 
-  .headContents{
+@media screen and (max-width: 1519px){
+  .section-row > * {
+    width: 100%;
+  }
+  .intro h1 {
     text-align: center;
   }
-
-  .header img{
-    margin-top: 60px;
-    width: 350px;
-    height: 350px;
-    padding-bottom: 60px;
+  .intro p {
+    text-align: center;
+    max-width: 100%;
+  }
+  article{
+   margin-top: 20px;
   }
 }
 
-@media only screen and (max-width: 990px){
-  .headContents p {
-    width: auto;
+@media screen and (max-width: 450px){
+  header {
+    flex-direction: column;
+    height: 240px;
+    justify-content: center;
   }
-  .workinprogress {
-    font-size: 15px;
+  header h1 {
+    margin-left: 0px;
   }
-}
-
-@media only screen and (max-width: 720px) {
-  .workinprogress {
-    font-size: 10px;
+  .intro h1 {
+    font-size: 3rem;
   }
-  .header {
-    height: auto;
-    margin-top: 100px;
+  .intro p {
+    font-size: 1.8rem;
   }
-}
-
-@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;
+  .pfp{
+    margin-left: 0px;
   } 
 }
 </style>

src/views/ProjectsPage.vue

@@ -0,0 +1,153 @@
+<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>

src/views/SocialsPage.vue

@@ -148,4 +148,12 @@
     margin-left: 0px;
   }
 }
+
+@media only screen and (max-height: 720px){
+  .socials {
+    display: flex;
+    justify-content: unset;
+    margin-top: 80px;
+  }
+}
 </style>