upgrade to vue 3
This commit is contained in:
parent
69f53954bb
commit
af0e5c519b
GPG Key ID:
04D4E2012F969213
65
package-lock.json
generated
65
package-lock.json
generated
@ -14,6 +14,7 @@
|
||||
"@fortawesome/free-solid-svg-icons": "^6.1.1",
|
||||
"@fortawesome/vue-fontawesome": "^3.0.1",
|
||||
"core-js": "^3.8.3",
|
||||
"marked": "^4.0.18",
|
||||
"vue": "^3.2.37",
|
||||
"vue-meta": "^2.4.0",
|
||||
"vue-router": "^4.1.2",
|
||||
@ -7414,6 +7415,17 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/marked": {
|
||||
"version": "4.0.18",
|
||||
"resolved": "https://registry.npmjs.org/marked/-/marked-4.0.18.tgz",
|
||||
"integrity": "sha512-wbLDJ7Zh0sqA0Vdg6aqlbT+yPxqLblpAZh1mK2+AO2twQkPywvvqQNfEPVwSSRjZ7dZcdeVBIAgiO7MMp3Dszw==",
|
||||
"bin": {
|
||||
"marked": "bin/marked.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 12"
|
||||
}
|
||||
},
|
||||
"node_modules/mdn-data": {
|
||||
"version": "2.0.14",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
|
||||
@ -12800,7 +12812,8 @@
|
||||
"@fortawesome/vue-fontawesome": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.1.tgz",
|
||||
"integrity": "sha512-CdXZJoCS+aEPec26ZP7hWWU3SaJlQPZSCGdgpQ2qGl2HUmtUUNrI3zC4XWdn1JUmh3t5OuDeRG1qB4eGRNSD4A=="
|
||||
"integrity": "sha512-CdXZJoCS+aEPec26ZP7hWWU3SaJlQPZSCGdgpQ2qGl2HUmtUUNrI3zC4XWdn1JUmh3t5OuDeRG1qB4eGRNSD4A==",
|
||||
"requires": {}
|
||||
},
|
||||
"@hapi/hoek": {
|
||||
"version": "9.3.0",
|
||||
@ -13462,7 +13475,8 @@
|
||||
"version": "5.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.8.tgz",
|
||||
"integrity": "sha512-HSYWPqrunRE5ZZs8kVwiY6oWcn95qf/OQabwLfprhdpFWAGtLStShjsGED2aDpSSeGAskQETrtR/5h7VqgIlBA==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"@vue/cli-service": {
|
||||
"version": "5.0.8",
|
||||
@ -13973,13 +13987,15 @@
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
|
||||
"integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"acorn-jsx": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
|
||||
"integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"acorn-walk": {
|
||||
"version": "8.2.0",
|
||||
@ -14038,7 +14054,8 @@
|
||||
"version": "3.5.2",
|
||||
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
|
||||
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"ansi-colors": {
|
||||
"version": "4.1.3",
|
||||
@ -14839,7 +14856,8 @@
|
||||
"version": "6.3.0",
|
||||
"resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz",
|
||||
"integrity": "sha512-OGT677UGHJTAVMRhPO+HJ4oKln3wkBTwtDFH0ojbqm+MJm6xuDMHp2nkhh/ThaBqq20IbraBQSWKfSLNHQO9Og==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"css-loader": {
|
||||
"version": "6.7.1",
|
||||
@ -15010,7 +15028,8 @@
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
|
||||
"integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"csso": {
|
||||
"version": "4.2.0",
|
||||
@ -16436,7 +16455,8 @@
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
|
||||
"integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"ieee754": {
|
||||
"version": "1.2.1",
|
||||
@ -17072,6 +17092,11 @@
|
||||
"semver": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"marked": {
|
||||
"version": "4.0.18",
|
||||
"resolved": "https://registry.npmjs.org/marked/-/marked-4.0.18.tgz",
|
||||
"integrity": "sha512-wbLDJ7Zh0sqA0Vdg6aqlbT+yPxqLblpAZh1mK2+AO2twQkPywvvqQNfEPVwSSRjZ7dZcdeVBIAgiO7MMp3Dszw=="
|
||||
},
|
||||
"mdn-data": {
|
||||
"version": "2.0.14",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
|
||||
@ -17817,25 +17842,29 @@
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
|
||||
"integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"postcss-discard-duplicates": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
|
||||
"integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"postcss-discard-empty": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
|
||||
"integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"postcss-discard-overridden": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
|
||||
"integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"postcss-loader": {
|
||||
"version": "6.2.1",
|
||||
@ -17925,7 +17954,8 @@
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
|
||||
"integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"postcss-modules-local-by-default": {
|
||||
"version": "4.0.0",
|
||||
@ -17960,7 +17990,8 @@
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
|
||||
"integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"postcss-normalize-display-values": {
|
||||
"version": "5.1.0",
|
||||
@ -19834,7 +19865,8 @@
|
||||
"version": "8.8.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.8.0.tgz",
|
||||
"integrity": "sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -19961,7 +19993,8 @@
|
||||
"version": "7.5.8",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.8.tgz",
|
||||
"integrity": "sha512-ri1Id1WinAX5Jqn9HejiGb8crfRio0Qgu8+MtL36rlTA6RLsMdWt1Az/19A2Qij6uSHUMphEFaTKa4WG+UNHNw==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"y18n": {
|
||||
"version": "5.0.8",
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"@fortawesome/free-solid-svg-icons": "^6.1.1",
|
||||
"@fortawesome/vue-fontawesome": "^3.0.1",
|
||||
"core-js": "^3.8.3",
|
||||
"marked": "^4.0.18",
|
||||
"vue": "^3.2.37",
|
||||
"vue-meta": "^2.4.0",
|
||||
"vue-router": "^4.1.2",
|
||||
|
||||
27
src/App.vue
27
src/App.vue
@ -1,11 +1,19 @@
|
||||
<template>
|
||||
<main rel="main" id="app">
|
||||
<main
|
||||
id="app"
|
||||
rel="main"
|
||||
>
|
||||
<SiteHeader />
|
||||
<router-view />
|
||||
<Footer />
|
||||
<RouterView />
|
||||
<FooterComponent />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SiteHeader from './components/SiteHeader'
|
||||
import FooterComponent from './components/FooterComponent'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
font-family: var(--font-family);
|
||||
@ -14,16 +22,3 @@
|
||||
color: var(--text-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import SiteHeader from './components/SiteHeader'
|
||||
import Footer from './components/Footer'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
SiteHeader,
|
||||
Footer
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,19 +1,34 @@
|
||||
<template>
|
||||
<button class="btn" :class="{ 'btn-reverse': isReverse }">
|
||||
<font-awesome-icon class="icon" v-if="hasIcon" :icon="icon"/>
|
||||
<span><slot></slot></span>
|
||||
<button
|
||||
class="btn"
|
||||
:class="{ 'btn-reverse': isReverse }"
|
||||
>
|
||||
<font-awesome-icon
|
||||
v-if="hasIcon && icon"
|
||||
class="icon"
|
||||
:icon="icon"
|
||||
/>
|
||||
<span><slot /></span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BaseButton',
|
||||
props: {
|
||||
hasIcon: Boolean,
|
||||
icon: String,
|
||||
isReverse: Boolean
|
||||
<script setup>
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
defineProps({
|
||||
hasIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isReverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,27 +1,43 @@
|
||||
<template>
|
||||
<footer class="footer">
|
||||
<div class="footer_container">
|
||||
<div class="container_logo">Kamil<span class="logo_element">Craft</span></div>
|
||||
<div class="container_logo">
|
||||
Kamil<span class="logo_element">Craft</span>
|
||||
</div>
|
||||
<ul class="socials">
|
||||
<li class="social_link"
|
||||
v-for="link in socialLinks"
|
||||
:key="link.title.slug">
|
||||
<a class="link"
|
||||
:href="link.link"
|
||||
:title="link.title"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer">
|
||||
<font-awesome-icon class="icon" :icon="['fab', link.icon]" />
|
||||
<li
|
||||
v-for="link in socialLinks"
|
||||
:key="link.title.slug"
|
||||
class="social_link"
|
||||
>
|
||||
<a
|
||||
class="link"
|
||||
:href="link.link"
|
||||
:title="link.title"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer"
|
||||
>
|
||||
<font-awesome-icon
|
||||
class="icon"
|
||||
:icon="['fab', link.icon]"
|
||||
/>
|
||||
<span class="social_title">{{ link.title }}</span>
|
||||
<span class="social_shortcut">{{ link.shortcut }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="container"></div>
|
||||
<div class="container" />
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const socialLinks = [
|
||||
{ link: 'https://www.youtube.com/user/kamilniemczycki', icon: 'youtube', title: 'Oglądaj mnie na YouTube', shortcut: 'YouTube' },
|
||||
{ link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku', shortcut: 'Facebook' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/default";
|
||||
|
||||
@ -104,17 +120,3 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Footer',
|
||||
data () {
|
||||
return {
|
||||
socialLinks: [
|
||||
{ link: 'https://www.youtube.com/user/kamilniemczycki', icon: 'youtube', title: 'Oglądaj mnie na YouTube', shortcut: 'YouTube' },
|
||||
{ link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku', shortcut: 'Facebook' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,21 +1,27 @@
|
||||
<template>
|
||||
<button class="btn">
|
||||
<font-awesome-icon class="icon" v-if="hasIcon" :icon="icon"/>
|
||||
<span><slot></slot></span>
|
||||
<font-awesome-icon
|
||||
v-if="hasIcon && icon"
|
||||
class="icon"
|
||||
:icon="icon"
|
||||
/>
|
||||
<span><slot /></span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GhostButton',
|
||||
props: {
|
||||
hasIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
icon: String
|
||||
<script setup>
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
defineProps({
|
||||
hasIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,10 +1,16 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ $route.meta.title }}</h1>
|
||||
<h1>{{ route.meta.title }}</h1>
|
||||
<p>Witam na mojej stronie głównej. Wszystkich zainteresowanych oczywiście 😁</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const route = useRoute()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
h1 {
|
||||
margin: 30px 0 20px;
|
||||
|
||||
@ -1,28 +1,110 @@
|
||||
<template>
|
||||
<div class="container" :class="{'container-menu-active': clickedStatus}">
|
||||
<div
|
||||
class="container"
|
||||
:class="{ 'container-menu-active': isClicked }"
|
||||
>
|
||||
<router-link to="/">
|
||||
<div class="logo" @click="linkClicked">Kamil<span class="logo-element">Craft</span></div>
|
||||
<div
|
||||
class="logo"
|
||||
@click="linkClicked"
|
||||
>
|
||||
Kamil<span class="logo-element">Craft</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<nav class="nav">
|
||||
<button class="nav-btn" @click="clickMenu">
|
||||
<font-awesome-icon v-if="!clicked" icon="bars"></font-awesome-icon>
|
||||
<font-awesome-icon v-else icon="times"></font-awesome-icon>
|
||||
<button
|
||||
class="nav-btn"
|
||||
@click="clickMenu"
|
||||
>
|
||||
<font-awesome-icon
|
||||
v-if="!isClicked"
|
||||
icon="bars"
|
||||
/>
|
||||
<font-awesome-icon
|
||||
v-else
|
||||
icon="times"
|
||||
/>
|
||||
</button>
|
||||
<ul class="site-menu" :class="{'menu-clicked': clicked}">
|
||||
<li v-for="menuItem in menuItems" :key="menuItem.slug" class="menu-element" @click="linkClicked">
|
||||
<router-link :to="menuItem.uri">{{ menuItem.title }}</router-link>
|
||||
<ul
|
||||
class="site-menu"
|
||||
:class="{ 'menu-clicked': isClicked }"
|
||||
>
|
||||
<li
|
||||
v-for="menuItem in menuItems"
|
||||
:key="menuItem.slug"
|
||||
class="menu-element"
|
||||
@click="linkClicked"
|
||||
>
|
||||
<RouterLink :to="menuItem.uri">
|
||||
{{ menuItem.title }}
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
slug: 'start',
|
||||
title: 'Start',
|
||||
uri: '/'
|
||||
},
|
||||
{
|
||||
slug: 'projects',
|
||||
title: 'Projekty',
|
||||
uri: '/projects'
|
||||
},
|
||||
{
|
||||
slug: 'about',
|
||||
title: 'O mnie',
|
||||
uri: '/about'
|
||||
},
|
||||
{
|
||||
slug: 'contact',
|
||||
title: 'Kontakt',
|
||||
uri: '/contact'
|
||||
}
|
||||
]
|
||||
|
||||
const clicked = ref(false)
|
||||
const isClicked = computed(() => clicked.value)
|
||||
|
||||
function changeClickedStatus() {
|
||||
clicked.value = !clicked.value
|
||||
}
|
||||
|
||||
function clickMenu() {
|
||||
changeClickedStatus()
|
||||
}
|
||||
|
||||
function linkClicked() {
|
||||
if (isClicked.value) {
|
||||
changeClickedStatus()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/media";
|
||||
|
||||
.sub-page > .container .nav-btn,
|
||||
.sub-page > .container .nav .site-menu .menu-element a:not([class|=router-link-exact]) {
|
||||
color: #8D8D8D;
|
||||
.sub-page > .container {
|
||||
.nav-btn {
|
||||
color: #8D8D8D;
|
||||
}
|
||||
|
||||
.nav .site-menu .menu-element {
|
||||
a:not([class|=router-link]) {
|
||||
color: #8D8D8D;
|
||||
|
||||
&:hover {
|
||||
color: #A2CF00;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
@ -143,55 +225,3 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SiteHeader',
|
||||
data () {
|
||||
return {
|
||||
menuItems: [
|
||||
{
|
||||
slug: 'start',
|
||||
title: 'Start',
|
||||
uri: '/'
|
||||
},
|
||||
{
|
||||
slug: 'projects',
|
||||
title: 'Projekty',
|
||||
uri: '/projects'
|
||||
},
|
||||
{
|
||||
slug: 'about',
|
||||
title: 'O mnie',
|
||||
uri: '/about'
|
||||
},
|
||||
{
|
||||
slug: 'contact',
|
||||
title: 'Kontakt',
|
||||
uri: '/contact'
|
||||
}
|
||||
],
|
||||
clicked: false,
|
||||
publicPath: process.env.VUE_APP_BASE_URL + '/'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
clickedStatus () {
|
||||
return this.clicked
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeClickedStatus () {
|
||||
this.clicked = !this.clicked
|
||||
},
|
||||
clickMenu () {
|
||||
this.changeClickedStatus()
|
||||
},
|
||||
linkClicked () {
|
||||
if (this.clicked) {
|
||||
this.changeClickedStatus()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,29 +1,88 @@
|
||||
<template>
|
||||
<div class="projects">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
<div class="container">
|
||||
<div class="project"
|
||||
v-for="project in projects"
|
||||
:key="project.title.slug">
|
||||
<img v-if="project.images.small" class="project_image" :src="project.images.small" :alt="project.title" />
|
||||
<img v-else-if="project.images.large" class="project_image" :src="project.images.large" :alt="project.title" />
|
||||
<div
|
||||
v-for="project in projects"
|
||||
:key="project.title.slug"
|
||||
class="project"
|
||||
>
|
||||
<img
|
||||
v-if="project.images.small"
|
||||
class="project_image"
|
||||
:src="project.images.small"
|
||||
:alt="project.title"
|
||||
>
|
||||
<img
|
||||
v-else-if="project.images.large"
|
||||
class="project_image"
|
||||
:src="project.images.large"
|
||||
:alt="project.title"
|
||||
>
|
||||
<div class="project_content">
|
||||
<h3 class="project_title">{{ project.title }}</h3>
|
||||
<div class="project_release">{{ project.version }}</div>
|
||||
<div class="project_description" v-html="markdownToText(project)"></div>
|
||||
<h3 class="project_title">
|
||||
{{ project.title }}
|
||||
</h3>
|
||||
<div class="project_release">
|
||||
{{ project.version }}
|
||||
</div>
|
||||
<div
|
||||
class="project_description"
|
||||
v-html="markdownToText(project)"
|
||||
/>
|
||||
</div>
|
||||
<div class="more-button">
|
||||
<base-btn has-icon
|
||||
icon="eye"
|
||||
is-reverse
|
||||
@click.native="$router.push({ name: 'Project', params: { id: project.id } })"
|
||||
class="btn">O projekcie</base-btn>
|
||||
<BaseButton
|
||||
has-icon
|
||||
icon="eye"
|
||||
is-reverse
|
||||
class="btn"
|
||||
@click="router.push({ name: 'Project', params: { id: project.id } })"
|
||||
>
|
||||
O projekcie
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useStore } from 'vuex'
|
||||
import BaseButton from './BaseButton'
|
||||
import { marked } from 'marked'
|
||||
|
||||
defineProps({
|
||||
projects: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const store = useStore()
|
||||
|
||||
onMounted(() => {
|
||||
const header = {
|
||||
title: route.meta.title,
|
||||
description: [
|
||||
'Witam Państwa na podstronie z moimi projektami!'
|
||||
]
|
||||
}
|
||||
store.commit('setHeader', header)
|
||||
})
|
||||
|
||||
function markdownToText (project) {
|
||||
const projectText = marked.parse(project.description)
|
||||
const nodeElement = document.createElement('div')
|
||||
nodeElement.innerHTML = projectText
|
||||
return nodeElement.querySelector('p').innerText.substr(0, 350)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "scss/media";
|
||||
|
||||
@ -178,40 +237,3 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import BaseButton from './BaseButton'
|
||||
import { marked } from 'marked'
|
||||
|
||||
export default {
|
||||
name: 'SelectedProjects',
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
mounted () {
|
||||
const header = {
|
||||
title: this.$route.meta.title,
|
||||
description: [
|
||||
'Witam Państwa na podstronie z moimi projektami!'
|
||||
]
|
||||
}
|
||||
this.$store.commit('setHeader', header)
|
||||
},
|
||||
methods: {
|
||||
markdownToText (project) {
|
||||
const projectText = marked.parse(project.description)
|
||||
const nodeElement = document.createElement('div')
|
||||
nodeElement.innerHTML = projectText
|
||||
return nodeElement.querySelector('p').innerText.substr(0, 350)
|
||||
}
|
||||
},
|
||||
props: {
|
||||
projects: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'base-btn': BaseButton
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,48 +1,45 @@
|
||||
<template>
|
||||
<header :class="thisClass">
|
||||
<navigation/>
|
||||
<div v-if="isTitle" class="header-info" :class="{ 'header-info-home': isHome }">
|
||||
<navigation />
|
||||
<div
|
||||
v-if="isTitle"
|
||||
class="header-info"
|
||||
:class="{ 'header-info-home': isHome }"
|
||||
>
|
||||
<h1>{{ getTitle }}</h1>
|
||||
<p v-if="isDescription && descriptionType === 'string'">{{ getDescription }}</p>
|
||||
<p v-else-if="isDescription && descriptionType === 'array'"
|
||||
v-for="(desc, key) in getDescription" :key="key">{{ desc }}</p>
|
||||
<p v-if="isDescription && descriptionType === 'string'">
|
||||
{{ getDescription }}
|
||||
</p>
|
||||
<p
|
||||
v-for="(desc, key) in getDescription"
|
||||
v-else-if="isDescription && descriptionType === 'array'"
|
||||
:key="key"
|
||||
>
|
||||
{{ desc }}
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navigation from '@/components/Navigation'
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import { useRoute } from 'vue-router'
|
||||
import Navigation from './NavigationHeader'
|
||||
|
||||
export default {
|
||||
name: 'SiteHeader',
|
||||
computed: {
|
||||
isHome () {
|
||||
return this.$route.path === '/'
|
||||
},
|
||||
thisClass () {
|
||||
return [this.isHome ? 'home-page' : 'sub-page']
|
||||
},
|
||||
getTitle () {
|
||||
return this.$store.getters.getHeader.title
|
||||
},
|
||||
isTitle () {
|
||||
return this.getTitle !== null
|
||||
},
|
||||
getDescription () {
|
||||
return this.$store.getters.getHeader.description
|
||||
},
|
||||
descriptionType () {
|
||||
const isArray = this.getDescription instanceof Array
|
||||
return isArray ? 'array' : typeof this.getDescription
|
||||
},
|
||||
isDescription () {
|
||||
return this.getDescription !== null
|
||||
}
|
||||
},
|
||||
components: {
|
||||
navigation: Navigation
|
||||
}
|
||||
}
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
|
||||
const isHome = computed(() => route.path === '/')
|
||||
const thisClass = computed(() => [isHome.value ? 'home-page' : 'sub-page'])
|
||||
const getTitle = computed(() => store.getters.getHeader.title)
|
||||
const isTitle = computed(() => getTitle.value !== null)
|
||||
const getDescription = computed(() => store.getters.getHeader.description)
|
||||
const isDescription = computed(() => getDescription.value !== null)
|
||||
const descriptionType = computed(() => {
|
||||
const isArray = getDescription.value instanceof Array
|
||||
return isArray ? 'array' : typeof getDescription.value
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@ -3,23 +3,37 @@
|
||||
<div class="container">
|
||||
<div id="grid">
|
||||
<div id="grid-text">
|
||||
<h2 class="name">Kamil Niemczycki</h2>
|
||||
<div class="tagline">Web Developer</div>
|
||||
<p>Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
|
||||
W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.</p>
|
||||
<h2 class="name">
|
||||
Kamil Niemczycki
|
||||
</h2>
|
||||
<div class="tagline">
|
||||
Web Developer
|
||||
</div>
|
||||
<p>
|
||||
Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
|
||||
W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.
|
||||
</p>
|
||||
<div class="buttons">
|
||||
<base-btn has-icon
|
||||
icon="portrait"
|
||||
is-reverse
|
||||
@click.native="scrollTo('.selected-projects')">Wybrane projekty</base-btn>
|
||||
<base-btn has-icon
|
||||
icon="user"
|
||||
@click.native="$router.push('about')">Więcej o mnie</base-btn>
|
||||
<BaseButton
|
||||
has-icon
|
||||
icon="portrait"
|
||||
is-reverse
|
||||
@click="scrollTo('.selected-projects')"
|
||||
>
|
||||
Wybrane projekty
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
has-icon
|
||||
icon="user"
|
||||
@click="router.push('about')"
|
||||
>
|
||||
Więcej o mnie
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
<div id="grid-photo">
|
||||
<figure id="about-photo">
|
||||
<img :src="`${publicPath}assets/me.jpg`" />
|
||||
<img :src="`${publicPath}assets/me.jpg`">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
@ -27,6 +41,20 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import BaseButton from '../BaseButton'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const publicPath = process.env.VUE_APP_BASE_URL + '/'
|
||||
|
||||
function scrollTo(id) {
|
||||
document.querySelector(id).scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "scss/media";
|
||||
|
||||
@ -122,24 +150,3 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import BaseButton from '../BaseButton'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
publicPath: process.env.VUE_APP_BASE_URL + '/'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrollTo (id) {
|
||||
document.querySelector(id).scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'base-btn': BaseButton
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,253 +0,0 @@
|
||||
<template>
|
||||
<div class="experiences">
|
||||
<div class="container">
|
||||
<h2>Wykorzystywane technologie</h2>
|
||||
<p>
|
||||
Programowaniem stron internetowych zajmuję się najmłodszych lat, czyli od 2011 roku. Pierwsze projekty były
|
||||
proste i najczęściej na użytek własny. Jednakże, doświadczenie zebrane przez lata pomogło mi wyselekcjonować
|
||||
technologie, które wspomagają pisanie i rozwijanie oprogramowania.
|
||||
</p>
|
||||
<div class="skills">
|
||||
<div v-for="(skill, key) in list" :key="key" class="skill-group">
|
||||
<header class="skill-header">
|
||||
<div class="tech-icons">
|
||||
<font-awesome-icon
|
||||
v-for="(icon, keyIcon) in skill.icons"
|
||||
:key="keyIcon" :class="icon.class"
|
||||
:icon="['fab', icon.name]"
|
||||
:alt="icon.alt"
|
||||
:title="icon.title" />
|
||||
</div>
|
||||
<h3>{{ skill.header }}</h3>
|
||||
</header>
|
||||
<p v-if="skill.showMore || skill.description.length < 200">{{ skill.description }}</p>
|
||||
<p v-else>{{ parseText(skill.description) }}... <a @click="changeMoreStatus(skill)">Więcej</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Experiences',
|
||||
data () {
|
||||
return {
|
||||
list: []
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.list = [
|
||||
{
|
||||
icons: [
|
||||
{
|
||||
class: 'icon-php',
|
||||
name: 'php',
|
||||
alt: 'Ikona przedstawiająca język PHP',
|
||||
title: 'Ikona PHP'
|
||||
},
|
||||
{
|
||||
class: 'icon-laravel',
|
||||
name: 'laravel',
|
||||
alt: 'Ikona przedstawiająca framework Laravel',
|
||||
title: 'Ikona Laravel'
|
||||
}
|
||||
],
|
||||
header: 'PHP & Laravel',
|
||||
showMore: false,
|
||||
description: `PHP wraz z frameworkiem Laravel wykorzystuję do tworzenia nowych projektów. Laravel znacznie
|
||||
przyspiesza pisanie części backendowej, odciążając programistę od pisania skomplikownych filtrów i monotonnych
|
||||
walidacji przyjmowanych danych od użytkowników. Jednakże, choć dobrze pracuje mi się w środowisku Laravel
|
||||
w miarę możliwości staram się pisać kod w samym PHP z wykorzystaniem bibliotek i paczek autorskich.`
|
||||
},
|
||||
{
|
||||
icons: [
|
||||
{
|
||||
class: 'icon-js',
|
||||
name: 'js-square',
|
||||
alt: 'Ikona przedstawiająca język JavaScript',
|
||||
title: 'Ikona JavaScript'
|
||||
}
|
||||
],
|
||||
header: 'JavaScript Vanilla',
|
||||
showMore: false,
|
||||
description: `JavaScript wykorzystuję głównie do logiki frontendowej jak i pisania kodu wykonywalnego po stronie
|
||||
przeglądarki internetowej. Wykorzystując możliwości reaktywnych frameworków mogę przyspieszyć pisanie UI.`
|
||||
},
|
||||
{
|
||||
icons: [
|
||||
{
|
||||
class: 'icon-vue',
|
||||
name: 'vuejs',
|
||||
alt: 'Ikona przedstawiająca framework Vue.js',
|
||||
title: 'Ikona Vue.js'
|
||||
}
|
||||
],
|
||||
header: 'Vue',
|
||||
showMore: false,
|
||||
description: `Framework ten wspomaga mnie w pisaniu aplikacji frontendowej. Przyspiesza tworzenie warstwy
|
||||
wizualnej, obsługę interakcji z użytkownikiem i bindowanie zdefiniowanych pól, które są odpowiednio renderowane
|
||||
przez przeglądarkę. To wszystko, umożliwia łatwe łączenie CSS i HTML z logiką i otrzymanymi danymi z API.`
|
||||
},
|
||||
{
|
||||
icons: [
|
||||
{
|
||||
class: 'icon-html5',
|
||||
name: 'html5',
|
||||
alt: 'Ikona przedstawiająca HTML5',
|
||||
title: 'Ikona HTML5'
|
||||
},
|
||||
{
|
||||
class: 'icon-css3',
|
||||
name: 'css3-alt',
|
||||
alt: 'Ikona przedstawiająca CSS3',
|
||||
title: 'Ikona CSS3'
|
||||
}
|
||||
],
|
||||
header: 'HTML & CSS',
|
||||
showMore: false,
|
||||
description: `HTML i CSS to już nieodłączne technologie, które w łatwy sposób umożliwiają nadanie wizualnej
|
||||
spójności dla treści, obrazów lub ułożenia elementów. Nie raz, odpowednie zaprojektowanie interfejsu użytkownika
|
||||
przyspiesza integrację z naszą stroną/sklepem. Ma to przełożenie na zyski dla obu stron - firmy (finanse)
|
||||
i klienta (czas).`
|
||||
},
|
||||
{
|
||||
icons: [
|
||||
{
|
||||
class: 'icon-node',
|
||||
name: 'node',
|
||||
alt: 'Ikona przedstawiająca Node.js',
|
||||
title: 'Ikona Node.js'
|
||||
}
|
||||
],
|
||||
header: 'Node.js',
|
||||
showMore: false,
|
||||
description: `Node jest wieloplatformowym środowiskiem uruchomieniowym, umożliwiającym uruchomienie kodu
|
||||
JavaScript po stronie backendowej. Jest to bardzo przyjemny język, który ułatwia projektowanie logiki biznesowej
|
||||
aplikacji, dla mniej wymagających serwisów pod względem analizy i przetwarzania danych.`
|
||||
},
|
||||
{
|
||||
icons: [
|
||||
{
|
||||
class: 'icon-sass',
|
||||
name: 'sass',
|
||||
alt: 'Ikona przedstawiająca Sass',
|
||||
title: 'Ikona Sass'
|
||||
}
|
||||
],
|
||||
header: 'Sass',
|
||||
showMore: false,
|
||||
description: `Sass zwiększa czytelność kodu dla programisty. Zawiera abstrakcje znane z języków obiektowych,
|
||||
przy czym ogranicza powtarzalność i umożliwia optymalizację kodu. Kompilacja napisanego stylu w Sass jest
|
||||
przekształcana do formy czytelnej dla silnika graficznego przeglądarki, co przyspiesza proces generowania strony.`
|
||||
}
|
||||
]
|
||||
},
|
||||
methods: {
|
||||
parseText (text) {
|
||||
let shortText = text.substr(0, 200)
|
||||
if (shortText.slice(-1) === ' ') {
|
||||
shortText = text.substr(0, 199)
|
||||
}
|
||||
return shortText
|
||||
},
|
||||
changeMoreStatus (skill) {
|
||||
skill.showMore = !skill.showMore
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "scss/media";
|
||||
|
||||
.experiences {
|
||||
.container {
|
||||
padding-top: 45px;
|
||||
padding-bottom: 45px;
|
||||
|
||||
.skills {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
column-gap: 20px;
|
||||
row-gap: 20px;
|
||||
margin-top: 15px;
|
||||
|
||||
.skill-group {
|
||||
background-color: #fafafa;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
|
||||
.tech-icons {
|
||||
font-size: 1.8em;
|
||||
margin-bottom: 3px;
|
||||
|
||||
& > svg[class*='icon'] {
|
||||
margin-right: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.6em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.skill-list {
|
||||
margin-block: auto;
|
||||
padding-inline: inherit;
|
||||
margin-left: 5px;
|
||||
list-style-type: initial;
|
||||
}
|
||||
p {
|
||||
font-size: .9em;
|
||||
|
||||
a {
|
||||
color: #8D8D8D;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, .03);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-small {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
@include media-tablet {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
@include media-mobile {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-js {
|
||||
color: #F1DE4F;
|
||||
}
|
||||
.icon-php {
|
||||
color: #777bb3;
|
||||
}
|
||||
.icon-laravel {
|
||||
color: #FF2D20;
|
||||
}
|
||||
.icon-vue {
|
||||
color: #64B687;
|
||||
}
|
||||
.icon-html5 {
|
||||
color: #DE6E3C;
|
||||
}
|
||||
.icon-node {
|
||||
color: #64B687;
|
||||
}
|
||||
.icon-css3 {
|
||||
color: #53A7DC;
|
||||
}
|
||||
.icon-sass {
|
||||
color: #BF6B97;
|
||||
}
|
||||
</style>
|
||||
255
src/components/sections/ExperiencesSection.vue
Normal file
255
src/components/sections/ExperiencesSection.vue
Normal file
@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<div class="experiences">
|
||||
<div class="container">
|
||||
<h2>Wykorzystywane technologie</h2>
|
||||
<p>
|
||||
Programowaniem stron internetowych zajmuję się najmłodszych lat, czyli od 2011 roku. Pierwsze projekty były
|
||||
proste i najczęściej na użytek własny. Jednakże, doświadczenie zebrane przez lata pomogło mi wyselekcjonować
|
||||
technologie, które wspomagają pisanie i rozwijanie oprogramowania.
|
||||
</p>
|
||||
<div class="skills">
|
||||
<div
|
||||
v-for="(skill, skillKey) in list"
|
||||
:key="skillKey"
|
||||
class="skill-group"
|
||||
>
|
||||
<header class="skill-header">
|
||||
<div class="tech-icons">
|
||||
<font-awesome-icon
|
||||
v-for="(icon, iconKey) in skill.icons"
|
||||
:key="iconKey"
|
||||
:class="icon.class"
|
||||
:icon="['fab', icon.name]"
|
||||
:alt="icon.alt"
|
||||
:title="icon.title"
|
||||
/>
|
||||
</div>
|
||||
<h3>{{ skill.header }}</h3>
|
||||
</header>
|
||||
<p v-if="skill.showMore.value || skill.description.length < 200">
|
||||
{{ skill.description }}
|
||||
</p>
|
||||
<p v-else>
|
||||
{{ parseText(skill.description) }}... <a @click="changeMoreStatus(skill)">Więcej</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
let list = [
|
||||
{
|
||||
icons: [
|
||||
{
|
||||
class: 'icon-php',
|
||||
name: 'php',
|
||||
alt: 'Ikona przedstawiająca język PHP',
|
||||
title: 'Ikona PHP'
|
||||
},
|
||||
{
|
||||
class: 'icon-laravel',
|
||||
name: 'laravel',
|
||||
alt: 'Ikona przedstawiająca framework Laravel',
|
||||
title: 'Ikona Laravel'
|
||||
}
|
||||
],
|
||||
header: 'PHP & Laravel',
|
||||
showMore: ref(false),
|
||||
description: `PHP wraz z frameworkiem Laravel wykorzystuję do tworzenia nowych projektów. Laravel znacznie
|
||||
przyspiesza pisanie części backendowej, odciążając programistę od pisania skomplikownych filtrów i monotonnych
|
||||
walidacji przyjmowanych danych od użytkowników. Jednakże, choć dobrze pracuje mi się w środowisku Laravel
|
||||
w miarę możliwości staram się pisać kod w samym PHP z wykorzystaniem bibliotek i paczek autorskich.`
|
||||
},
|
||||
{
|
||||
icons: [
|
||||
{
|
||||
class: 'icon-js',
|
||||
name: 'js-square',
|
||||
alt: 'Ikona przedstawiająca język JavaScript',
|
||||
title: 'Ikona JavaScript'
|
||||
}
|
||||
],
|
||||
header: 'JavaScript Vanilla',
|
||||
showMore: ref(false),
|
||||
description: `JavaScript wykorzystuję głównie do logiki frontendowej jak i pisania kodu wykonywalnego po stronie
|
||||
przeglądarki internetowej. Wykorzystując możliwości reaktywnych frameworków mogę przyspieszyć pisanie UI.`
|
||||
},
|
||||
{
|
||||
icons: [
|
||||
{
|
||||
class: 'icon-vue',
|
||||
name: 'vuejs',
|
||||
alt: 'Ikona przedstawiająca framework Vue.js',
|
||||
title: 'Ikona Vue.js'
|
||||
}
|
||||
],
|
||||
header: 'Vue',
|
||||
showMore: ref(false),
|
||||
description: `Framework ten wspomaga mnie w pisaniu aplikacji frontendowej. Przyspiesza tworzenie warstwy
|
||||
wizualnej, obsługę interakcji z użytkownikiem i bindowanie zdefiniowanych pól, które są odpowiednio renderowane
|
||||
przez przeglądarkę. To wszystko, umożliwia łatwe łączenie CSS i HTML z logiką i otrzymanymi danymi z API.`
|
||||
},
|
||||
{
|
||||
icons: [
|
||||
{
|
||||
class: 'icon-html5',
|
||||
name: 'html5',
|
||||
alt: 'Ikona przedstawiająca HTML5',
|
||||
title: 'Ikona HTML5'
|
||||
},
|
||||
{
|
||||
class: 'icon-css3',
|
||||
name: 'css3-alt',
|
||||
alt: 'Ikona przedstawiająca CSS3',
|
||||
title: 'Ikona CSS3'
|
||||
}
|
||||
],
|
||||
header: 'HTML & CSS',
|
||||
showMore: ref(false),
|
||||
description: `HTML i CSS to już nieodłączne technologie, które w łatwy sposób umożliwiają nadanie wizualnej
|
||||
spójności dla treści, obrazów lub ułożenia elementów. Nie raz, odpowednie zaprojektowanie interfejsu użytkownika
|
||||
przyspiesza integrację z naszą stroną/sklepem. Ma to przełożenie na zyski dla obu stron - firmy (finanse)
|
||||
i klienta (czas).`
|
||||
},
|
||||
{
|
||||
icons: [
|
||||
{
|
||||
class: 'icon-node',
|
||||
name: 'node',
|
||||
alt: 'Ikona przedstawiająca Node.js',
|
||||
title: 'Ikona Node.js'
|
||||
}
|
||||
],
|
||||
header: 'Node.js',
|
||||
showMore: ref(false),
|
||||
description: `Node jest wieloplatformowym środowiskiem uruchomieniowym, umożliwiającym uruchomienie kodu
|
||||
JavaScript po stronie backendowej. Jest to bardzo przyjemny język, który ułatwia projektowanie logiki biznesowej
|
||||
aplikacji, dla mniej wymagających serwisów pod względem analizy i przetwarzania danych.`
|
||||
},
|
||||
{
|
||||
icons: [
|
||||
{
|
||||
class: 'icon-sass',
|
||||
name: 'sass',
|
||||
alt: 'Ikona przedstawiająca Sass',
|
||||
title: 'Ikona Sass'
|
||||
}
|
||||
],
|
||||
header: 'Sass',
|
||||
showMore: ref(false),
|
||||
description: `Sass zwiększa czytelność kodu dla programisty. Zawiera abstrakcje znane z języków obiektowych,
|
||||
przy czym ogranicza powtarzalność i umożliwia optymalizację kodu. Kompilacja napisanego stylu w Sass jest
|
||||
przekształcana do formy czytelnej dla silnika graficznego przeglądarki, co przyspiesza proces generowania strony.`
|
||||
}
|
||||
]
|
||||
|
||||
function parseText(text) {
|
||||
let shortText = text.substr(0, 200)
|
||||
if (shortText.slice(-1) === ' ') {
|
||||
shortText = text.substr(0, 199)
|
||||
}
|
||||
return shortText
|
||||
}
|
||||
|
||||
function changeMoreStatus(skill) {
|
||||
skill.showMore.value = !skill.showMore.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "scss/media";
|
||||
|
||||
.experiences {
|
||||
.container {
|
||||
padding-top: 45px;
|
||||
padding-bottom: 45px;
|
||||
|
||||
.skills {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
column-gap: 20px;
|
||||
row-gap: 20px;
|
||||
margin-top: 15px;
|
||||
|
||||
.skill-group {
|
||||
background-color: #fafafa;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
|
||||
.tech-icons {
|
||||
font-size: 1.8em;
|
||||
margin-bottom: 3px;
|
||||
|
||||
& > svg[class*='icon'] {
|
||||
margin-right: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.6em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.skill-list {
|
||||
margin-block: auto;
|
||||
padding-inline: inherit;
|
||||
margin-left: 5px;
|
||||
list-style-type: initial;
|
||||
}
|
||||
p {
|
||||
font-size: .9em;
|
||||
|
||||
a {
|
||||
color: #8D8D8D;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, .03);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-small {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
@include media-tablet {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
@include media-mobile {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-js {
|
||||
color: #F1DE4F;
|
||||
}
|
||||
.icon-php {
|
||||
color: #777bb3;
|
||||
}
|
||||
.icon-laravel {
|
||||
color: #FF2D20;
|
||||
}
|
||||
.icon-vue {
|
||||
color: #64B687;
|
||||
}
|
||||
.icon-html5 {
|
||||
color: #DE6E3C;
|
||||
}
|
||||
.icon-node {
|
||||
color: #64B687;
|
||||
}
|
||||
.icon-css3 {
|
||||
color: #53A7DC;
|
||||
}
|
||||
.icon-sass {
|
||||
color: #BF6B97;
|
||||
}
|
||||
</style>
|
||||
@ -7,41 +7,33 @@
|
||||
</div>
|
||||
</projects>
|
||||
<div class="more-button">
|
||||
<GhostButton @click.native="$router.push('projects')">
|
||||
<GhostButton @click="router.push('projects')">
|
||||
ZOBACZ WIĘCEJ
|
||||
</GhostButton>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import Projects from '../SelectedProjects'
|
||||
import GhostButton from '../GhostButton'
|
||||
|
||||
export default {
|
||||
name: 'FavoriteProjects',
|
||||
data () {
|
||||
return {
|
||||
publicPath: process.env.VUE_APP_BASE_URL + '/',
|
||||
select_projects: []
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.loadProjectList()
|
||||
},
|
||||
methods: {
|
||||
loadProjectList () {
|
||||
fetch(process.env.VUE_APP_API_URL + '/projects?category=selected')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.select_projects = data
|
||||
})
|
||||
}
|
||||
},
|
||||
components: {
|
||||
GhostButton,
|
||||
Projects
|
||||
}
|
||||
const router = useRouter()
|
||||
|
||||
let select_projects = ref([])
|
||||
|
||||
onMounted(() => {
|
||||
loadProjectList()
|
||||
})
|
||||
|
||||
function loadProjectList() {
|
||||
fetch(process.env.VUE_APP_API_URL + '/projects?category=selected')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
select_projects.value = data
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,22 +1,64 @@
|
||||
<template>
|
||||
<div class="contact_container">
|
||||
<div class="message"></div>
|
||||
<header class="container_head">Formularz kontaktowy:</header>
|
||||
<form id="form-point" @submit="formSubmit">
|
||||
<input v-model="emailValue" class="contact_input" type="text" name="email" placeholder="Twój adres e-mail." />
|
||||
<textarea v-model="messageValue" class="contact_input" name="message" placeholder="Twoja wiadomość."></textarea>
|
||||
<input v-model="senderValue" class="contact_input" type="text" name="sender" placeholder="Twój podpis." />
|
||||
<base-btn is-reverse :disabled="buttonDisabled">Wyślij</base-btn>
|
||||
<div
|
||||
v-if="hasMessageError"
|
||||
class="message message_error"
|
||||
>
|
||||
{{ messageError }}
|
||||
</div>
|
||||
<div
|
||||
v-if="hasMessageOkStatus"
|
||||
class="message message_ok"
|
||||
>
|
||||
{{ messageOk }}
|
||||
</div>
|
||||
<header class="container_head">
|
||||
Formularz kontaktowy:
|
||||
</header>
|
||||
<form
|
||||
id="form-point"
|
||||
@submit="formSubmit"
|
||||
>
|
||||
<input
|
||||
v-model="emailValue"
|
||||
class="contact_input"
|
||||
:class="{ 'contact_input-error': isEmailError }"
|
||||
type="text"
|
||||
name="email"
|
||||
placeholder="Twój adres e-mail."
|
||||
>
|
||||
<textarea
|
||||
v-model="messageValue"
|
||||
class="contact_input"
|
||||
:class="{ 'contact_input-error': isMessageError }"
|
||||
name="message"
|
||||
placeholder="Twoja wiadomość."
|
||||
/>
|
||||
<input
|
||||
v-model="senderValue"
|
||||
class="contact_input"
|
||||
:class="{ 'contact_input-error': isSenderError }"
|
||||
type="text"
|
||||
name="sender"
|
||||
placeholder="Twój podpis."
|
||||
>
|
||||
<BaseButton
|
||||
is-reverse
|
||||
:disabled="buttonDisabled"
|
||||
>
|
||||
Wyślij
|
||||
</BaseButton>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import BaseButton from '../../BaseButton'
|
||||
import {ref, reactive, watch, computed} from 'vue'
|
||||
|
||||
function emailValidate (mailObj) {
|
||||
const mailFormat = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/
|
||||
return !!mailObj.value.match(mailFormat)
|
||||
return mailObj.match(mailFormat)
|
||||
}
|
||||
|
||||
async function postData (url = '', data = {}) {
|
||||
@ -31,99 +73,88 @@ async function postData (url = '', data = {}) {
|
||||
return response.json()
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'MailContact',
|
||||
data () {
|
||||
return {
|
||||
buttonDisabled: false,
|
||||
statusError: 0,
|
||||
email: {},
|
||||
emailValue: '',
|
||||
message: {},
|
||||
messageValue: '',
|
||||
sender: {},
|
||||
senderValue: ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'base-btn': BaseButton
|
||||
},
|
||||
watch: {
|
||||
emailValue (value) {
|
||||
if (this.statusError > 0 && emailValidate(this.email)) {
|
||||
this.email.classList.remove('contact_input-error')
|
||||
}
|
||||
},
|
||||
messageValue (value) {
|
||||
if (this.statusError > 0 && value !== '') {
|
||||
this.message.classList.remove('contact_input-error')
|
||||
}
|
||||
},
|
||||
senderValue (value) {
|
||||
if (this.statusError > 0 && value !== '') {
|
||||
this.sender.classList.remove('contact_input-error')
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearErrors () {
|
||||
this.statusError = 0
|
||||
this.email.classList.remove('contact_input-error')
|
||||
this.message.classList.remove('contact_input-error')
|
||||
this.sender.classList.remove('contact_input-error')
|
||||
},
|
||||
checkForm () {
|
||||
if (!emailValidate(this.email)) {
|
||||
this.email.classList.add('contact_input-error')
|
||||
this.statusError++
|
||||
}
|
||||
if (this.message.value === '') {
|
||||
this.message.classList.add('contact_input-error')
|
||||
this.statusError++
|
||||
}
|
||||
if (this.sender.value === '') {
|
||||
this.sender.classList.add('contact_input-error')
|
||||
this.statusError++
|
||||
}
|
||||
},
|
||||
formSubmit (event) {
|
||||
event.preventDefault()
|
||||
const buttonDisabled = ref(false)
|
||||
const statusError = ref(0)
|
||||
const emailValue = ref('')
|
||||
const messageValue = ref('')
|
||||
const senderValue = ref('')
|
||||
|
||||
this.email = event.target[0]
|
||||
this.message = event.target[1]
|
||||
this.sender = event.target[2]
|
||||
const messageError = ref('')
|
||||
const messageOk = ref('')
|
||||
|
||||
this.clearErrors()
|
||||
this.checkForm()
|
||||
const errors = reactive({
|
||||
email: false,
|
||||
message: false,
|
||||
sender: false
|
||||
})
|
||||
|
||||
const messageElement = document.querySelector('.message')
|
||||
messageElement.classList.remove('message_ok', 'message_error')
|
||||
const isEmailError = computed(() => errors.email)
|
||||
const isMessageError = computed(() => errors.message)
|
||||
const isSenderError = computed(() => errors.sender)
|
||||
const hasMessageError = computed(() => messageError.value)
|
||||
const hasMessageOkStatus = computed(() => messageOk.value && !hasMessageError.value)
|
||||
|
||||
if (this.statusError === 0) {
|
||||
this.buttonDisabled = true
|
||||
postData('/send', {
|
||||
email: this.emailValue,
|
||||
message: this.messageValue,
|
||||
sender: this.senderValue
|
||||
}).then(result => {
|
||||
messageElement.classList.add(
|
||||
result.error ? 'message_error' : 'message_ok'
|
||||
)
|
||||
watch([statusError, emailValue], ([errorCount, value]) => {
|
||||
errors.email = errorCount > 0 && !emailValidate(value)
|
||||
})
|
||||
|
||||
messageElement.textContent = result.message
|
||||
if (!result.error) {
|
||||
this.messageValue = ''
|
||||
this.emailValue = ''
|
||||
this.senderValue = ''
|
||||
}
|
||||
this.buttonDisabled = false
|
||||
}).catch(() => {
|
||||
messageElement.classList.add('message_error')
|
||||
messageElement.textContent = 'Wystąpił błąd podczas wysyłania wiadomości. Proszę spróbować później.'
|
||||
this.buttonDisabled = false
|
||||
})
|
||||
watch([statusError, messageValue], ([errorCount, value]) => {
|
||||
errors.message = errorCount > 0 && (value === '' || value.length < 3)
|
||||
})
|
||||
|
||||
watch([statusError, senderValue], ([errorCount, value]) => {
|
||||
errors.sender = errorCount > 0 && (value === '' || value.length < 3)
|
||||
})
|
||||
|
||||
function clearErrors() {
|
||||
statusError.value = 0
|
||||
errors.email = false
|
||||
errors.message = false
|
||||
errors.sender = false
|
||||
}
|
||||
|
||||
function checkForm() {
|
||||
clearErrors()
|
||||
if (!emailValidate(emailValue.value)) {
|
||||
errors.email = true
|
||||
statusError.value++
|
||||
}
|
||||
if (messageValue.value === '') {
|
||||
errors.message = true
|
||||
statusError.value++
|
||||
}
|
||||
if (senderValue.value === '') {
|
||||
errors.sender = true
|
||||
statusError.value++
|
||||
}
|
||||
}
|
||||
|
||||
function formSubmit(event) {
|
||||
event.preventDefault()
|
||||
|
||||
checkForm()
|
||||
|
||||
if (statusError.value === 0) {
|
||||
console.log('Send!')
|
||||
buttonDisabled.value = true
|
||||
postData('https://kamilcraft.com/send', {
|
||||
email: emailValue.value,
|
||||
message: messageValue.value,
|
||||
sender: senderValue.value
|
||||
}).then(result => {
|
||||
if (result.error) {
|
||||
messageError.value = result.message
|
||||
} else {
|
||||
messageOk.value = result.message
|
||||
messageValue.value = ''
|
||||
emailValue.value = ''
|
||||
senderValue.value = ''
|
||||
}
|
||||
}
|
||||
buttonDisabled.value = false
|
||||
}).catch(() => {
|
||||
messageError.value = 'Wystąpił błąd podczas wysyłania wiadomości. Proszę spróbować później.'
|
||||
buttonDisabled.value = false
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,53 +1,81 @@
|
||||
<template>
|
||||
<div class="contact_info">
|
||||
<header class="info_head">Inne formy kontaktu:</header>
|
||||
<header class="info_head">
|
||||
Inne formy kontaktu:
|
||||
</header>
|
||||
<div class="contact_element">
|
||||
<img class="contact_element_icon"
|
||||
src="/assets/img/instagram.jpg" />
|
||||
<span id="instagram" class="contact_element_text">
|
||||
<a href="https://www.instagram.com/nikcamii/"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer">Instagram: @NiKCamii</a>
|
||||
<img
|
||||
class="contact_element_icon"
|
||||
src="/assets/img/instagram.jpg"
|
||||
>
|
||||
<span
|
||||
id="instagram"
|
||||
class="contact_element_text"
|
||||
>
|
||||
<a
|
||||
href="https://www.instagram.com/nikcamii/"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer"
|
||||
>Instagram: @NiKCamii</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="contact_element">
|
||||
<img class="contact_element_icon" src="/assets/img/facebook.jpg" />
|
||||
<span id="facebook" class="contact_element_text">
|
||||
<a href="https://www.facebook.com/nikcamii/"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer">Facebook: @NiKCamii</a>
|
||||
<img
|
||||
class="contact_element_icon"
|
||||
src="/assets/img/facebook.jpg"
|
||||
>
|
||||
<span
|
||||
id="facebook"
|
||||
class="contact_element_text"
|
||||
>
|
||||
<a
|
||||
href="https://www.facebook.com/nikcamii/"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer"
|
||||
>Facebook: @NiKCamii</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="contact_element">
|
||||
<img class="contact_element_icon"
|
||||
src="/assets/img/twitter.jpg" />
|
||||
<span id="twitter" class="contact_element_text">
|
||||
<a href="https://twitter.com/nikcamii"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer">Twitter: @NiKCamii</a>
|
||||
<img
|
||||
class="contact_element_icon"
|
||||
src="/assets/img/twitter.jpg"
|
||||
>
|
||||
<span
|
||||
id="twitter"
|
||||
class="contact_element_text"
|
||||
>
|
||||
<a
|
||||
href="https://twitter.com/nikcamii"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer"
|
||||
>Twitter: @NiKCamii</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="contact_element">
|
||||
<img class="contact_element_icon"
|
||||
src="/assets/img/gg.png" />
|
||||
<span id="gg" class="contact_element_text">GG: 38429969</span>
|
||||
<img
|
||||
class="contact_element_icon"
|
||||
src="/assets/img/gg.png"
|
||||
>
|
||||
<span
|
||||
id="gg"
|
||||
class="contact_element_text"
|
||||
>GG: 38429969</span>
|
||||
</div>
|
||||
<div class="contact_element">
|
||||
<img class="contact_element_icon"
|
||||
src="/assets/img/user.jpg" />
|
||||
<span id="email" class="contact_element_text">
|
||||
<img
|
||||
class="contact_element_icon"
|
||||
src="/assets/img/user.jpg"
|
||||
>
|
||||
<span
|
||||
id="email"
|
||||
class="contact_element_text"
|
||||
>
|
||||
<a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'OtherContact'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/media";
|
||||
|
||||
|
||||
27
src/main.js
27
src/main.js
@ -1,8 +1,8 @@
|
||||
import Vue from 'vue'
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import './vue-meta'
|
||||
import { store } from './store'
|
||||
// import VueMeta from 'vue-meta'
|
||||
|
||||
import '../scss/default.scss'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
@ -11,15 +11,16 @@ 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)
|
||||
library.add(fas, fab, far)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
const app = createApp(App)
|
||||
|
||||
new Vue({
|
||||
store,
|
||||
router,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
app.config.productionTip = false
|
||||
|
||||
app.component('FontAwesomeIcon', FontAwesomeIcon)
|
||||
|
||||
app.use(router)
|
||||
app.use(store)
|
||||
// app.use(VueMeta)
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
@ -1,15 +1,11 @@
|
||||
import Vue from 'vue'
|
||||
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 KamilCraftInfo from '../views/KamilCraftInfo'
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import Home from '../views/HomeView'
|
||||
import About from '../views/AboutView'
|
||||
import Projects from '../views/ProjectsView'
|
||||
import Project from '../views/ProjectView'
|
||||
import Contact from '../views/ContactView'
|
||||
import NotFound from '../views/NotFound'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const mainTitle = 'kamilcraft.com'
|
||||
|
||||
const routes = [
|
||||
@ -54,15 +50,7 @@ const routes = [
|
||||
component: Contact
|
||||
},
|
||||
{
|
||||
path: '/info',
|
||||
name: 'KamilCraftProject',
|
||||
meta: {
|
||||
title: 'KamilCraft Project'
|
||||
},
|
||||
component: KamilCraftInfo
|
||||
},
|
||||
{
|
||||
path: '*',
|
||||
path: '/:catchAll(.*)',
|
||||
name: '404',
|
||||
meta: {
|
||||
title: 'Błąd 404'
|
||||
@ -71,22 +59,39 @@ const routes = [
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
base: '/',
|
||||
const router = createRouter({
|
||||
history: createWebHistory('/'),
|
||||
routes,
|
||||
scrollBehavior (to, from, savedPosition) {
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
if (savedPosition) {
|
||||
return savedPosition
|
||||
} else if (to.hash) {
|
||||
return {
|
||||
selector: to.hash,
|
||||
behavior: 'smooth'
|
||||
}
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
selector: to.hash
|
||||
}, 1000)
|
||||
})
|
||||
})
|
||||
} else {
|
||||
return { left: 0, top: 0 }
|
||||
}
|
||||
}
|
||||
/*scrollBehavior (to, from, savedPosition) {
|
||||
if (savedPosition) {
|
||||
return savedPosition
|
||||
} else if (to.hash) {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
selector: to.hash
|
||||
}, 1000)
|
||||
})
|
||||
})
|
||||
} else {
|
||||
return { x: 0, y: 0 }
|
||||
}
|
||||
}
|
||||
}*/
|
||||
})
|
||||
|
||||
const title = ' :: ' + mainTitle
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import { createStore } from 'vuex'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
const moduleSettings = {
|
||||
export const store = createStore({
|
||||
state: {
|
||||
header: {
|
||||
title: null,
|
||||
@ -64,10 +61,4 @@ const moduleSettings = {
|
||||
state.header.description = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default new Vuex.Store({
|
||||
modules: {
|
||||
settings: moduleSettings
|
||||
}
|
||||
})
|
||||
|
||||
@ -14,21 +14,53 @@
|
||||
Zdobyłem także umiejętności pracy w zespole, które owocują tworzeniem merytorycznej dyskusji na temat części lub całości projektu.
|
||||
</p>
|
||||
<h3>Kursy</h3>
|
||||
<p>W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
|
||||
<strong><a :href="publicPath + 'download/certyfikat-laravel.pdf'"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer">
|
||||
Architektura aplikacji internetowych opartych o framework Laravel</a></strong>.</p>
|
||||
<p>Umożliwiło mi to szersze spojrzenie na możliwości jakie daje nam Laravel i wzbogaconie poprzednio zdobytej
|
||||
wiedzy o nowe doświadczenia.</p>
|
||||
<p>
|
||||
W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
|
||||
<strong><a
|
||||
:href="publicPath + 'download/certyfikat-laravel.pdf'"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer"
|
||||
>
|
||||
Architektura aplikacji internetowych opartych o framework Laravel</a></strong>.
|
||||
</p>
|
||||
<p>
|
||||
Umożliwiło mi to szersze spojrzenie na możliwości jakie daje nam Laravel i wzbogaconie poprzednio zdobytej
|
||||
wiedzy o nowe doświadczenia.
|
||||
</p>
|
||||
<h2>Moje zainteresowania</h2>
|
||||
<p>W wolnym czasie przyjmuje małe zlecenia na strony lub serwisy internetowe. Uczę się nowych języków
|
||||
<p>
|
||||
W wolnym czasie przyjmuje małe zlecenia na strony lub serwisy internetowe. Uczę się nowych języków
|
||||
programowania lub frameworków w znanych mi już technologiach. Hobbistycznie, tworzę także rozwiązania do
|
||||
problemów przy prywatnych projektach.</p>
|
||||
problemów przy prywatnych projektach.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const publicPath = process.env.VUE_APP_BASE_URL + '/'
|
||||
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
|
||||
onMounted(() => {
|
||||
const header = {
|
||||
title: route.meta.title,
|
||||
description: 'Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.'
|
||||
}
|
||||
store.commit('setHeader', header)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
store.commit('resetHeaderTitle')
|
||||
store.commit('resetHeaderDescription')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
section#about {
|
||||
padding: 45px 0;
|
||||
@ -57,25 +89,3 @@ section#about {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'About',
|
||||
data () {
|
||||
return {
|
||||
publicPath: process.env.VUE_APP_BASE_URL + '/'
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const header = {
|
||||
title: this.$route.meta.title,
|
||||
description: 'Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.'
|
||||
}
|
||||
this.$store.commit('setHeader', header)
|
||||
},
|
||||
destroyed () {
|
||||
this.$store.commit('resetHeaderTitle')
|
||||
this.$store.commit('resetHeaderDescription')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -7,24 +7,23 @@
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useStore } from 'vuex'
|
||||
import MailContact from '../components/sections/contacts/MailContact'
|
||||
import OtherContact from '../components/sections/contacts/OtherContact'
|
||||
|
||||
export default {
|
||||
name: 'Contact',
|
||||
mounted () {
|
||||
const header = {
|
||||
title: this.$route.meta.title,
|
||||
description: 'Chcesz o coś zapytać? Chciałbyś współpracować? Napisz!'
|
||||
}
|
||||
this.$store.commit('setHeader', header)
|
||||
},
|
||||
components: {
|
||||
MailContact,
|
||||
OtherContact
|
||||
const route = useRoute()
|
||||
const store = useStore()
|
||||
|
||||
onMounted(() => {
|
||||
const header = {
|
||||
title: route.meta.title,
|
||||
description: 'Chcesz o coś zapytać? Chciałbyś współpracować? Napisz!'
|
||||
}
|
||||
}
|
||||
store.commit('setHeader', header)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<section class="home">
|
||||
<About />
|
||||
<Experiences />
|
||||
<FavoriteProjects />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import About from '../components/sections/About'
|
||||
import Experiences from '../components/sections/Experiences'
|
||||
import FavoriteProjects from '../components/sections/FavoriteProjects'
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
data () {
|
||||
return {
|
||||
publicPath: process.env.VUE_APP_BASE_URL + '/',
|
||||
select_projects: []
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const header = {
|
||||
title: this.$route.meta.title,
|
||||
description: [
|
||||
'Chciałbym Państwa powitać na mojej stronie!',
|
||||
'Przedstawiam tutaj część swojego życia związaną z programowaniem i projektowaniem aplikacji internetowych.'
|
||||
]
|
||||
}
|
||||
this.$store.commit('setHeader', header)
|
||||
},
|
||||
destroyed () {
|
||||
this.$store.commit('resetHeaderTitle')
|
||||
this.$store.commit('resetHeaderDescription')
|
||||
},
|
||||
components: {
|
||||
About,
|
||||
Experiences,
|
||||
FavoriteProjects
|
||||
}
|
||||
}
|
||||
</script>
|
||||
35
src/views/HomeView.vue
Normal file
35
src/views/HomeView.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<section class="home">
|
||||
<About />
|
||||
<ExperiencesSection />
|
||||
<FavoriteProjects />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import { useRoute } from 'vue-router'
|
||||
import About from '../components/sections/AboutSection'
|
||||
import ExperiencesSection from '../components/sections/ExperiencesSection'
|
||||
import FavoriteProjects from '../components/sections/FavoriteProjects'
|
||||
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
|
||||
onMounted(() => {
|
||||
const header = {
|
||||
title: route.meta.title,
|
||||
description: [
|
||||
'Chciałbym Państwa powitać na mojej stronie!',
|
||||
'Przedstawiam tutaj część swojego życia związaną z programowaniem i projektowaniem aplikacji internetowych.'
|
||||
]
|
||||
}
|
||||
store.commit('setHeader', header)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
store.commit('resetHeaderTitle')
|
||||
store.commit('resetHeaderDescription')
|
||||
})
|
||||
</script>
|
||||
@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<section class="info">
|
||||
<div class="container">
|
||||
<h2>{{ $route.meta.title }}</h2>
|
||||
<p>Wersja projektu: {{ project.version }}</p>
|
||||
<p>Użyte paczki:</p>
|
||||
<ul class="package-list">
|
||||
<li v-for="(version, name) in project.dependencies" :key="name">{{ name }}: {{ version }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const nodeProject = require('../../package.json')
|
||||
export default {
|
||||
name: 'KamilCraftInfo',
|
||||
data () {
|
||||
return {
|
||||
project: {
|
||||
version: '',
|
||||
dependencies: []
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.project.version = nodeProject.version
|
||||
this.project.dependencies = nodeProject.dependencies
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding-top: 45px;
|
||||
padding-bottom: 45px;
|
||||
|
||||
.package-list {
|
||||
list-style: inside;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -10,12 +10,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NotFound'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.not-found {
|
||||
.container {
|
||||
|
||||
@ -1,94 +1,137 @@
|
||||
<template>
|
||||
<section class="project" v-if="project">
|
||||
<section
|
||||
v-if="isLoaded"
|
||||
class="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']"/>
|
||||
<font-awesome-icon
|
||||
class="icon"
|
||||
:icon="['far', 'clock']"
|
||||
/>
|
||||
<span>{{ project.release_date }}</span>
|
||||
</li>
|
||||
<li class="info_text">
|
||||
<font-awesome-icon class="icon" :icon="['far', 'user']"/>
|
||||
<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.categories)[0] }}</span>
|
||||
<font-awesome-icon
|
||||
class="icon"
|
||||
:icon="['far', 'folder']"
|
||||
/>
|
||||
<span>{{ getCategoryName(project.categories) }}</span>
|
||||
</li>
|
||||
<li class="info_text">
|
||||
<font-awesome-icon class="icon" :icon="['fas', 'code-branch']"/>
|
||||
<font-awesome-icon
|
||||
class="icon"
|
||||
:icon="['fas', 'code-branch']"
|
||||
/>
|
||||
<span>{{ project.project_version }}</span>
|
||||
</li>
|
||||
<li class="info_text" v-if="project.project_url">
|
||||
<font-awesome-icon class="icon" :icon="['fas', 'link']"/>
|
||||
<span><a :href="project.project_url"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer">Link</a></span>
|
||||
<li
|
||||
v-if="project.project_url"
|
||||
class="info_text"
|
||||
>
|
||||
<font-awesome-icon
|
||||
class="icon"
|
||||
:icon="['fas', 'link']"
|
||||
/>
|
||||
<span><a
|
||||
:href="project.project_url"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer"
|
||||
>Link</a></span>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<div class="container">
|
||||
<component :is="`figure`" class="project-photo">
|
||||
<img :src="`${project.images.large}`" :alt="project.title">
|
||||
<component
|
||||
:is="`figure`"
|
||||
class="project-photo"
|
||||
>
|
||||
<img
|
||||
:src="`${project.images.large}`"
|
||||
:alt="project.title"
|
||||
>
|
||||
</component>
|
||||
<div class="content" v-html="markdownToHtml"></div>
|
||||
<div
|
||||
class="content"
|
||||
v-html="markdownToHtml"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<div v-else class="loading">
|
||||
<div class="loading-animation"></div>
|
||||
<div
|
||||
v-else
|
||||
class="loading"
|
||||
>
|
||||
<div class="loading_animation" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useStore } from 'vuex'
|
||||
import { marked } from 'marked'
|
||||
|
||||
export default {
|
||||
name: 'Project',
|
||||
data () {
|
||||
return {
|
||||
publicPath: process.env.BASE_URL,
|
||||
project: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.getCategories.length === 0) {
|
||||
this.$store.dispatch('fetchCategories')
|
||||
}
|
||||
this.loadProject(this.$route.params.id)
|
||||
},
|
||||
computed: {
|
||||
getCategories () {
|
||||
return this.$store.getters.getCategories
|
||||
},
|
||||
markdownToHtml () {
|
||||
return marked.parse(this.project.description)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCategoryName (categories) {
|
||||
const categoriesText = []
|
||||
categories.forEach(categoryElement => {
|
||||
const cat = this.getCategories.find(category => category.slug === categoryElement)
|
||||
if (cat) {
|
||||
categoriesText.push(cat.name)
|
||||
}
|
||||
})
|
||||
return categoriesText
|
||||
},
|
||||
loadProject (id) {
|
||||
fetch(process.env.VUE_APP_API_URL + '/project/' + id)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.project = data
|
||||
})
|
||||
}
|
||||
const route = useRoute()
|
||||
const store = useStore()
|
||||
|
||||
const isLoaded = ref(false)
|
||||
let project = reactive({})
|
||||
|
||||
const getCategories = computed(() => store.getters.getCategories)
|
||||
const markdownToHtml = computed(() => marked.parse(project.description))
|
||||
|
||||
onMounted(() => {
|
||||
if (getCategories.value.length === 0) {
|
||||
store.dispatch('fetchCategories')
|
||||
}
|
||||
loadProject(route.params.id)
|
||||
})
|
||||
|
||||
function getCategoryName(categories = []) {
|
||||
const categoriesText = []
|
||||
categories.forEach(categoryElement => {
|
||||
const category = getCategories.value.find(category => category.slug === categoryElement)
|
||||
if (category) {
|
||||
categoriesText.push(category.name)
|
||||
}
|
||||
})
|
||||
return categoriesText[0] ?? undefined
|
||||
}
|
||||
|
||||
function loadProject(id) {
|
||||
fetch(process.env.VUE_APP_API_URL + '/project/' + id)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
project.title = data.title
|
||||
project.description = data.description
|
||||
project.release_date = data.release_date
|
||||
project.author = data.author
|
||||
project.categories = data.categories
|
||||
project.project_version = data.project_version
|
||||
project.project_url = data.project_url
|
||||
project.images = data.images
|
||||
isLoaded.value = true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "scss/default";
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.project {
|
||||
.project_header {
|
||||
@extend .container;
|
||||
@ -1,153 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="project_categories">
|
||||
<ul class="categories">
|
||||
<li class="categories_element"
|
||||
v-for="category in getCategories"
|
||||
:key="category.slug"
|
||||
:class="{ 'categories_element-active': categories.active === category.slug }"
|
||||
@click="changeCategory(category.slug)">
|
||||
<a :title="`Kategoria ${category.name}`">{{ category.name }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<projects :projects="projects" />
|
||||
<div v-if="projects.length === 0" class="loading">
|
||||
<div class="loading_animation"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "scss/media";
|
||||
|
||||
.project_categories {
|
||||
padding-top: 45px;
|
||||
|
||||
.categories {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
|
||||
.categories_element {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin-right: 25px;
|
||||
|
||||
a {
|
||||
color: var(--text-color);
|
||||
&:hover {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&-active {
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: #A2CF00;
|
||||
transform: translateY(8px);
|
||||
animation: load-underline 300ms forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-mobile {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.projects {
|
||||
padding-top: 25px;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
|
||||
@keyframes loading-animation {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes load-underline {
|
||||
from {
|
||||
width: 0;
|
||||
}
|
||||
to {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import SelectedProjects from '../components/SelectedProjects'
|
||||
|
||||
export default {
|
||||
name: 'Projects',
|
||||
data () {
|
||||
return {
|
||||
categories: {
|
||||
active: 'all'
|
||||
},
|
||||
publicPath: process.env.VUE_APP_BASE_URL + '/',
|
||||
projects: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getCategories () {
|
||||
return this.$store.getters.getCategories
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.loadAllData()
|
||||
},
|
||||
destroyed () {
|
||||
this.$store.commit('resetHeaderTitle')
|
||||
this.$store.commit('resetHeaderDescription')
|
||||
},
|
||||
methods: {
|
||||
async loadAllData () {
|
||||
await this.$store.dispatch('fetchCategories')
|
||||
await this.$store.dispatch('fetchProjects').then(projects => {
|
||||
/* projects.sort((firstProduct, secondProduct) => {
|
||||
return secondProduct.id - firstProduct.id
|
||||
}) */
|
||||
this.projects = projects
|
||||
}).catch(error => {
|
||||
console.log(error)
|
||||
})
|
||||
},
|
||||
loadListWhereCategory (category) {
|
||||
this.projects = []
|
||||
setTimeout(() => {
|
||||
if (category !== 'all') {
|
||||
const projects = this.$store.getters.getProjects.filter(project => project.categories.includes(category))
|
||||
this.projects = projects
|
||||
} else {
|
||||
this.projects = this.$store.getters.getProjects
|
||||
}
|
||||
}, 500)
|
||||
},
|
||||
changeCategory (category) {
|
||||
this.categories.active = category
|
||||
this.loadListWhereCategory(category)
|
||||
}
|
||||
},
|
||||
components: {
|
||||
projects: SelectedProjects
|
||||
}
|
||||
}
|
||||
</script>
|
||||
152
src/views/ProjectsView.vue
Normal file
152
src/views/ProjectsView.vue
Normal file
@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="project_categories">
|
||||
<ul class="categories">
|
||||
<li
|
||||
v-for="category in getCategories"
|
||||
:key="category.slug"
|
||||
class="categories_element"
|
||||
:class="{ 'categories_element-active': categories.active === category.slug }"
|
||||
@click="changeCategory(category.slug)"
|
||||
>
|
||||
<a :title="`Kategoria ${category.name}`">{{ category.name }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<SelectedProjects :projects="projects" />
|
||||
<div
|
||||
v-if="projects.length === 0"
|
||||
class="loading"
|
||||
>
|
||||
<div class="loading_animation" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import SelectedProjects from '../components/SelectedProjects'
|
||||
|
||||
const store = useStore()
|
||||
|
||||
const categories = reactive({
|
||||
active: 'all'
|
||||
})
|
||||
const projects = reactive([])
|
||||
|
||||
const getCategories = computed(() => store.getters.getCategories)
|
||||
|
||||
onMounted(() => {
|
||||
loadAllData()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
store.commit('resetHeaderTitle')
|
||||
store.commit('resetHeaderDescription')
|
||||
})
|
||||
|
||||
function loadAllData () {
|
||||
store.dispatch('fetchCategories')
|
||||
store.dispatch('fetchProjects').then(loadedProjects => {
|
||||
loadedProjects.forEach(project => {
|
||||
projects.push(project)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function loadListWhereCategory(category) {
|
||||
projects.splice(0)
|
||||
setTimeout(() => {
|
||||
if (category !== 'all') {
|
||||
const storedProjects = store.getters.getProjects.filter(project => project.categories.includes(category))
|
||||
storedProjects.forEach(project => {
|
||||
projects.push(project)
|
||||
})
|
||||
} else {
|
||||
store.getters.getProjects.forEach(project => {
|
||||
projects.push(project)
|
||||
})
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
|
||||
function changeCategory(category) {
|
||||
categories.active = category
|
||||
loadListWhereCategory(category)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "scss/media";
|
||||
|
||||
.project_categories {
|
||||
padding-top: 45px;
|
||||
|
||||
.categories {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
|
||||
.categories_element {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin-right: 25px;
|
||||
|
||||
a {
|
||||
color: var(--text-color);
|
||||
&:hover {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&-active {
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: #A2CF00;
|
||||
transform: translateY(8px);
|
||||
animation: load-underline 300ms forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-mobile {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.projects {
|
||||
padding-top: 25px;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
|
||||
@keyframes loading-animation {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes load-underline {
|
||||
from {
|
||||
width: 0;
|
||||
}
|
||||
to {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,4 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import VueMeta from 'vue-meta'
|
||||
|
||||
Vue.use(VueMeta)
|
||||
@ -1,6 +1,6 @@
|
||||
module.exports = {
|
||||
const { defineConfig } = require('@vue/cli-service')
|
||||
|
||||
module.exports = defineConfig({
|
||||
publicPath: '/',
|
||||
devServer: {
|
||||
disableHostCheck: true
|
||||
}
|
||||
}
|
||||
transpileDependencies: true
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user