kamilniemczycki/kamilcraft.com
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Update projects

Browse Source
This commit is contained in:
Kamil Niemczycki
2021-09-02 21:29:46 +02:00
parent 1ccbc2c391
commit d9e097073b
10 changed files with 284 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/SelectedProjects.vue
View File

@@ -17,6 +17,7 @@
<base-btn has-icon
icon="eye"
is-reverse
@click.native="$router.push({ name: 'Project', params: { id: project.id } })"
class="btn">O projekcie</base-btn>
</div>
</div>
@@ -31,6 +32,7 @@
.container {
display: grid;
align-items: flex-start;
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(80px, auto);
column-gap: 25px;
@@ -40,6 +42,7 @@
display: grid;
position: relative;
grid-template-areas: 'image content';
grid-template-columns: 200px 1fr;
background-color: #fafafa;
border: 1px solid rgba(0, 0, 0, .025);
border-radius: 5px;
@@ -121,7 +124,7 @@
@media screen and (max-width: 900px) {
.project {
grid-template-areas: 'image' 'content';
display: block;
.project-image {
width: 100%;

2
src/main.js
View File

@@ -7,10 +7,12 @@ import '../scss/default.scss'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(fas)
library.add(fab)
library.add(far)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false

9
src/router/index.js
View File

@@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
import Home from '../views/Home'
import About from '../views/About'
import Projects from '../views/Projects'
import Project from '../views/Project'
import Contact from '../views/Contact'
import NotFound from '../views/NotFound'
@@ -27,6 +28,14 @@ const routes = [
},
component: Projects
},
{
path: '/projects/:id',
name: 'Project',
meta: {
title: 'Projekt'
},
component: Project
},
{
path: '/about',
name: 'About',

32
src/store/index.js
View File

@@ -8,18 +8,42 @@ const moduleSettings = {
header: {
title: null,
description: null
}
},
categories: [],
projects: []
},
getters: {
getHeader (state) {
return state.header
},
getCategories (state) {
return state.categories
},
getProjects (state) {
return state.projects
}
},
actions: {
fetchProjects (store) {
return fetch('/api/projects.json')
.then(response => response.json())
.then(data => {
store.commit('setProjects', data)
return store.getters.getProjects
})
}
},
mutations: {
setHeader: (state, payload) => {
setCategories: (state, array = []) => {
state.categories = array
},
setProjects: (state, array = []) => {
state.projects = array
},
setHeader: (state, text) => {
state.header = {
title: payload.title ?? null,
description: payload.description ?? null
title: text.title ?? null,
description: text.description ?? null
}
},
resetHeaderTitle (state) {

138
src/views/Project.vue Normal file
View File

@@ -0,0 +1,138 @@
<template>
<section class="project" v-if="project">
<header class="project-header">
<h1>{{ project.title }}</h1>
<ul class="project-info">
<li class="info-text">
<font-awesome-icon class="icon" :icon="['far', 'clock']"/>
<span>{{ project.release_data }}</span>
</li>
<li class="info-text">
<font-awesome-icon class="icon" :icon="['far', 'user']"/>
<span>{{ project.author }}</span>
</li>
<li class="info-text">
<font-awesome-icon class="icon" :icon="['far', 'folder']"/>
<span>{{ getCategoryName(project.category) }}</span>
</li>
<li class="info-text">
<font-awesome-icon class="icon" :icon="['fas', 'code-branch']"/>
<span>{{ project.version }}</span>
</li>
</ul>
</header>
<div class="container">
<component :is="`figure`" class="project-photo">
<img :src="`${publicPath}${project.image}`" :alt="project.title">
</component>
<div class="content">
<p v-for="(description, key) in project.short_description.split('\n')" :key="key">
{{ description }}
</p>
</div>
</div>
</section>
</template>
<script>
export default {
name: 'Project',
data () {
return {
publicPath: process.env.BASE_URL,
project: null
}
},
mounted () {
const project = this.getProjects.find(project => project.id === this.$route.params.id)
this.project = project
},
computed: {
getCategories () {
return this.$store.getters.getCategories
},
getProjects () {
return this.$store.getters.getProjects
}
},
methods: {
getCategoryName (slug) {
const category = this.getCategories.find(category => category.slug === slug)
return category.name
}
}
}
</script>
<style lang="scss" scoped>
@import "scss/default";
.project {
.project-header {
@extend .container;
text-align: center;
margin-bottom: 25px;
h1 {
font-size: 2.2em;
font-weight: lighter;
line-height: 2.4em;
}
.project-info {
display: flex;
list-style: none;
justify-content: center;
.info-text {
display: flex;
align-items: center;
.icon {
width: 2em;
}
span {
font-weight: lighter;
}
&:not(&:last-child) {
margin-right: 15px;
}
}
@media screen and (max-width: 560px) {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 15px;
.info-text {
&:not(&:last-child) {
margin-right: 0;
}
}
}
}
}
.container {
.project-photo {
box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
}
.project-photo, .project-photo img {
width: 100%;
}
.project-photo img {
display: block;
object-fit: cover;
max-height: 500px;
}
.content {
margin: 25px 0;
font-weight: lighter;
font-size: .9em;
}
p::first-line {
text-indent: 5px;
}
}
}
</style>

132
src/views/Projects.vue
View File

@@ -3,7 +3,7 @@
<div class="category-menu">
<ul class="categories">
<li class="category"
v-for="category in categories.list"
v-for="category in $store.getters.getCategories"
:key="category.slug"
:class="{ 'category-active': categories.active === category.slug }"
@click="changeCategory(category.slug)">
@@ -11,8 +11,8 @@
</li>
</ul>
</div>
<projects :projects="projects.active" />
<div v-if="projects.active.length === 0" class="loading">
<projects :projects="projects" />
<div v-if="projects.length === 0" class="loading">
<div class="loading-animation"></div>
</div>
</div>
@@ -21,6 +21,7 @@
<style lang="scss">
.category-menu {
padding-top: 45px;
.categories {
display: flex;
justify-content: center;
@@ -103,122 +104,55 @@ export default {
data () {
return {
categories: {
list: [],
active: 'wszystkie'
},
publicPath: process.env.BASE_URL,
projects: {
all: [],
active: []
}
projects: []
}
},
mounted () {
this.categories.list = [
{ name: 'Wszystkie', slug: 'wszystkie' },
{ name: 'Wordpress', slug: 'wordpress' },
{ name: 'Prywatne', slug: 'prywatne' },
{ name: 'Zlecenia', slug: 'zlecenia' }
]
this.projects.all = [
async mounted () {
this.$store.commit('setCategories', [
{
title: 'KamilCraft.com',
category: 'private',
image: `${this.publicPath}assets/me.jpg`,
release_data: '29.08.2021',
version: 'v1.0.1',
short_description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
name: 'Wszystkie',
slug: 'wszystkie'
},
{
title: 'Youtube.com',
category: 'prywatne',
image: `${this.publicPath}assets/me.jpg`,
release_data: '29.08.2021',
version: 'v1.0.1',
short_description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
name: 'Wordpress',
slug: 'wordpress'
},
{
title: 'Projekt 2',
category: 'wordpress',
image: `${this.publicPath}assets/me.jpg`,
release_data: '29.08.2021',
version: 'v1.0.0',
short_description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
name: 'Prywatne',
slug: 'prywatne'
},
{
title: 'Projekt 14',
category: 'wordpress',
image: `${this.publicPath}assets/me.jpg`,
release_data: '29.08.2021',
version: 'v1.0.0',
short_description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
},
{
title: 'Projekt 3',
category: 'prywatne',
image: `${this.publicPath}assets/me.jpg`,
release_data: '29.08.2021',
version: 'v1.0.0',
short_description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
},
{
title: 'Projekt 4',
category: 'prywatne',
image: `${this.publicPath}assets/me.jpg`,
release_data: '29.08.2021',
version: 'v1.0.0',
short_description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
},
{
title: 'Projekt 20',
category: 'zlecenia',
image: `${this.publicPath}assets/me.jpg`,
release_data: '29.08.2021',
version: 'v1.0.0',
short_description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
name: 'Zlecenia',
slug: 'zlecenia'
}
]
this.projects.active = this.projects.all
])
await this.$store.dispatch('fetchProjects').then(projects => {
projects.sort((firstProduct, secondProduct) => {
return secondProduct.id - firstProduct.id
})
this.projects = projects
}).catch(error => {
console.log(error)
})
},
destroyed () {
this.$store.commit('resetHeaderTitle')
this.$store.commit('resetHeaderDescription')
},
methods: {
loadListWhereCategory (category) {
this.projects.active = []
this.projects = []
setTimeout(() => {
if (category !== 'wszystkie') {
const projects = this.projects.all.filter(project => project.category === category)
this.projects.active = projects
const projects = this.$store.getters.getProjects.filter(project => project.category === category)
this.projects = projects
} else {
this.projects.active = this.projects.all
this.projects = this.$store.getters.getProjects
}
}, 1000)
}, 500)
},
changeCategory (category) {
this.categories.active = category