project & profile update

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

@@ -7,7 +7,9 @@
         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">
+    <a href="https://www.pixiv.net/en/artworks/115330417" target="_blank">
+      <img alt="Profile Picture" src="../assets/profile_circle.png"/>
+    </a>
   </div>
 </template>
 

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>