Added git/Fixed Allignment issues
This commit is contained in:
Keyemail
parent
225ba506fb
commit
81084173dc
|
|
@ -5,7 +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>
|
||||
<li><a href="https://git.keyemail.dev/explore/">Projects</a></li>
|
||||
</ul>
|
||||
<div class="mobileNavButton" v-else>
|
||||
<i class="fa-solid fa-x" @click="mobileUI(); handleResize();" v-if="turnOnMobileUI"></i>
|
||||
|
|
@ -162,4 +162,4 @@ export default {
|
|||
.mobileNavContents a:hover {
|
||||
color: #74d2f1;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
color: white;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 100px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -35,4 +35,4 @@
|
|||
.notFound a:hover {
|
||||
color: #74d2f1;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
.socials {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 100px;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
|
|
@ -156,4 +156,4 @@
|
|||
margin-top: 80px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue