- refactoring code
This commit is contained in:
parent
8054be6846
commit
40432da0f2
GPG Key ID:
04D4E2012F969213
228
package-lock.json
generated
228
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
17
package.json
17
package.json
@ -5,7 +5,9 @@
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
"preview": "vite preview",
|
||||
"lint": "./node_modules/.bin/eslint src --ext .js,.vue",
|
||||
"lintf": "./node_modules/.bin/eslint src --ext .js,.vue --fix"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.4.0",
|
||||
@ -14,6 +16,11 @@
|
||||
"@fortawesome/free-solid-svg-icons": "^6.2.1",
|
||||
"@fortawesome/vue-fontawesome": "^3.0.3",
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"markdown-it": "^13.0.1",
|
||||
"postcss": "^8.4.27",
|
||||
"sass-loader": "^13.3.2",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"vite": "^4.4.7",
|
||||
"vue": "^3.3.4",
|
||||
"vue-meta": "^2.4.0",
|
||||
@ -21,14 +28,8 @@
|
||||
"vuex": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.13",
|
||||
"eslint": "^8.29.0",
|
||||
"eslint-plugin-vue": "^9.8.0",
|
||||
"markdown-it": "^13.0.1",
|
||||
"postcss": "^8.4.20",
|
||||
"sass": "^1.56.2",
|
||||
"sass-loader": "^13.2.0",
|
||||
"tailwindcss": "^3.2.4"
|
||||
"eslint-plugin-vue": "^9.8.0"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
|
||||
10
src/App.vue
10
src/App.vue
@ -1,3 +1,8 @@
|
||||
<script setup>
|
||||
import SiteHeader from '@/components/SiteHeader.vue';
|
||||
import FooterComponent from '@/components/FooterComponent.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SiteHeader />
|
||||
<main
|
||||
@ -8,11 +13,6 @@
|
||||
<FooterComponent />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SiteHeader from '@/components/SiteHeader.vue'
|
||||
import FooterComponent from '@/components/FooterComponent.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
font-family: var(--font-family);
|
||||
|
||||
33
src/HeaderReference/index.js
Normal file
33
src/HeaderReference/index.js
Normal file
@ -0,0 +1,33 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
const head = ref(null);
|
||||
const description = ref(null);
|
||||
|
||||
export function defineHeader(headString = null, descriptionArray = null) {
|
||||
head.value = headString;
|
||||
description.value = descriptionArray;
|
||||
}
|
||||
|
||||
export function setHeaderTitle(value) {
|
||||
head.value = value;
|
||||
}
|
||||
|
||||
export function setHeaderDescription(value) {
|
||||
description.value = value;
|
||||
}
|
||||
|
||||
export function getHeaderTitle() {
|
||||
return head;
|
||||
}
|
||||
|
||||
export function getHeaderDescription() {
|
||||
return description;
|
||||
}
|
||||
|
||||
export function clearHeaderTitle() {
|
||||
head.value = null;
|
||||
}
|
||||
|
||||
export function clearHeaderDescription() {
|
||||
description.value = null;
|
||||
}
|
||||
@ -1,3 +1,26 @@
|
||||
<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'
|
||||
},
|
||||
{
|
||||
link: 'https://github.com/kamilniemczycki/kamilcraft.com',
|
||||
icon: 'github',
|
||||
title: 'Kod na GitHub',
|
||||
shortcut: 'GitHub'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="bg-neutral-800 py-8">
|
||||
<div class="flex items-center justify-between max-w-screen-xl mx-auto">
|
||||
@ -28,26 +51,3 @@
|
||||
</div>
|
||||
</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'
|
||||
},
|
||||
{
|
||||
link: 'https://github.com/kamilniemczycki/kamilcraft.com',
|
||||
icon: 'github',
|
||||
title: 'Kod na GitHub',
|
||||
shortcut: 'GitHub'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
@ -1,3 +1,54 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
defineProps({
|
||||
isHomePage: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
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>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex relative items-center justify-between md:justify-start max-w-screen-xl mx-auto gap-5"
|
||||
@ -57,57 +108,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, ref, computed } from 'vue'
|
||||
|
||||
defineProps({
|
||||
isHomePage: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
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">
|
||||
.clicked-menu {
|
||||
animation: bg-menu-animation 500ms forwards ease-in-out;
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
<script setup>
|
||||
import { defineProps, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
import { useRouter } from 'vue-router';
|
||||
import BaseButton from '@/components/buttons/BaseButton.vue';
|
||||
import Markdown from "@/components/markdowns/MarkdownShort.vue";
|
||||
|
||||
@ -12,19 +10,7 @@ defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
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)
|
||||
})
|
||||
const router = useRouter();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -1,3 +1,21 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import Navigation from '@/components/NavigationHeader.vue';
|
||||
|
||||
import { getHeaderTitle, getHeaderDescription } from '@/HeaderReference';
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const isHome = computed(() => route.path === '/');
|
||||
const thisClass = computed(() => [isHome.value ? 'home-page' : 'sub-page']);
|
||||
const title = getHeaderTitle();
|
||||
const isTitle = computed(() => title.value !== null);
|
||||
const description = getHeaderDescription();
|
||||
const isDescription = computed(() => description.value !== null);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header :class="thisClass">
|
||||
<Navigation :is-home-page="isHome" />
|
||||
@ -7,43 +25,20 @@
|
||||
:class="{ 'text-white': isHome }"
|
||||
>
|
||||
<h1 class="mb-6 relative font-light text-[2.5rem] leading-[3.5rem] after:block after:absolute after:w-24 after:h-0.5 after:bg-kamilcraft-green after:left-1/2 after:-ml-12">
|
||||
{{ getTitle }}
|
||||
{{ title }}
|
||||
</h1>
|
||||
<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>
|
||||
<template v-if="isDescription">
|
||||
<p
|
||||
v-for="(descriptionLine, key) in description"
|
||||
:key="key"
|
||||
>
|
||||
{{ descriptionLine }}
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import { useRoute } from 'vue-router'
|
||||
import Navigation from '@/components/NavigationHeader.vue'
|
||||
|
||||
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 scoped>
|
||||
.home-page {
|
||||
background: linear-gradient(237.74deg, #1199A5 0%, #436DA7 83%);
|
||||
|
||||
@ -1,3 +1,20 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
hasIcon: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
isReverse: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
class="btn"
|
||||
@ -13,25 +30,6 @@
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<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">
|
||||
@import 'scss/btn';
|
||||
|
||||
|
||||
@ -1,3 +1,16 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
hasIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button class="btn">
|
||||
<font-awesome-icon
|
||||
@ -9,21 +22,6 @@
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
defineProps({
|
||||
hasIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'scss/btn';
|
||||
|
||||
|
||||
@ -6,8 +6,8 @@ const router = useRouter();
|
||||
|
||||
function scrollTo(id) {
|
||||
document.querySelector(id).scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
})
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,3 +1,27 @@
|
||||
<script setup>
|
||||
import { onMounted, reactive } from 'vue';
|
||||
|
||||
let list = reactive([]);
|
||||
|
||||
onMounted(() => {
|
||||
const importedList = () => import('@/resource/data/Technologies');
|
||||
importedList().then(data => {
|
||||
data.default.forEach(obj => {
|
||||
obj.showMore = false;
|
||||
list.push(obj);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function parseText(text) {
|
||||
return text.substr(0, 200).trim();
|
||||
}
|
||||
|
||||
function showMore(skill) {
|
||||
skill.showMore = !skill.showMore;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
|
||||
@ -30,20 +54,12 @@
|
||||
{{ skill.header }}
|
||||
</h3>
|
||||
</header>
|
||||
<p
|
||||
v-if="skill.showMore.value || skill.description.length < 200"
|
||||
class="text-sm"
|
||||
>
|
||||
{{ skill.description }}
|
||||
</p>
|
||||
<p
|
||||
v-else
|
||||
class="text-sm"
|
||||
>
|
||||
{{ parseText(skill.description) }}...
|
||||
<p class="text-sm">
|
||||
{{ skill.showMore || skill.description.length < 200 ? skill.description : parseText(skill.description) }}...
|
||||
<a
|
||||
v-if="!skill.showMore"
|
||||
class="text-neutral-500 hover:text-neutral-700 hover:underline cursor-pointer"
|
||||
@click="changeMoreStatus(skill)"
|
||||
@click="showMore(skill)"
|
||||
>Więcej</a>
|
||||
</p>
|
||||
</div>
|
||||
@ -52,128 +68,6 @@
|
||||
</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 scoped>
|
||||
.icon-js {
|
||||
color: #F1DE4F;
|
||||
|
||||
@ -1,3 +1,27 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import Projects from '@/components/SelectedProjects.vue';
|
||||
import GhostButton from '@/components/buttons/GhostButton.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const apiURL = import.meta.env.VITE_APP_API_URL;
|
||||
|
||||
let select_projects = ref([]);
|
||||
|
||||
onMounted(() => {
|
||||
loadProjectList();
|
||||
});
|
||||
|
||||
function loadProjectList() {
|
||||
fetch(apiURL + '/projects?category=selected')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
select_projects.value = data
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="bg-neutral-50">
|
||||
<projects :projects="select_projects">
|
||||
@ -21,30 +45,6 @@
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import Projects from '@/components/SelectedProjects.vue'
|
||||
import GhostButton from '@/components/buttons/GhostButton.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const apiURL = import.meta.env.VITE_APP_API_URL
|
||||
|
||||
let select_projects = ref([])
|
||||
|
||||
onMounted(() => {
|
||||
loadProjectList()
|
||||
})
|
||||
|
||||
function loadProjectList() {
|
||||
fetch(apiURL + '/projects?category=selected')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
select_projects.value = data
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "scss/default";
|
||||
|
||||
|
||||
@ -1,3 +1,118 @@
|
||||
<script setup>
|
||||
import { ref, reactive, watch, computed } from 'vue';
|
||||
import BaseButton from '@/components/buttons/BaseButton.vue';
|
||||
|
||||
function emailValidate (mailObj) {
|
||||
const mailFormat = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/;
|
||||
return mailObj.match(mailFormat);
|
||||
}
|
||||
|
||||
async function postData (url = '', data = {}) {
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
cache: 'no-cache',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
})
|
||||
return response.json();
|
||||
}
|
||||
|
||||
const buttonDisabled = ref(false)
|
||||
const statusError = ref(0)
|
||||
const emailValue = ref('')
|
||||
const messageValue = ref('')
|
||||
const senderValue = ref('')
|
||||
|
||||
const messageError = ref('')
|
||||
const messageOk = ref('')
|
||||
|
||||
const errors = reactive({
|
||||
email: false,
|
||||
message: false,
|
||||
sender: false,
|
||||
});
|
||||
|
||||
const isButtonDisabled = computed(() => buttonDisabled.value || errors.email || errors.message || errors.sender);
|
||||
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);
|
||||
|
||||
watch([statusError, emailValue], ([errorCount, value]) => {
|
||||
errors.email = errorCount > 0 && !emailValidate(value);
|
||||
})
|
||||
|
||||
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) {
|
||||
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;
|
||||
});
|
||||
}
|
||||
|
||||
scrollTo('#contact-form');
|
||||
}
|
||||
|
||||
function scrollTo(id) {
|
||||
document.querySelector(id).scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
id="contact-form"
|
||||
@ -102,123 +217,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import BaseButton from '@/components/buttons/BaseButton.vue'
|
||||
import { ref, reactive, watch, computed } from 'vue'
|
||||
|
||||
function emailValidate (mailObj) {
|
||||
const mailFormat = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/
|
||||
return mailObj.match(mailFormat)
|
||||
}
|
||||
|
||||
async function postData (url = '', data = {}) {
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
cache: 'no-cache',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
return response.json()
|
||||
}
|
||||
|
||||
const buttonDisabled = ref(false)
|
||||
const statusError = ref(0)
|
||||
const emailValue = ref('')
|
||||
const messageValue = ref('')
|
||||
const senderValue = ref('')
|
||||
|
||||
const messageError = ref('')
|
||||
const messageOk = ref('')
|
||||
|
||||
const errors = reactive({
|
||||
email: false,
|
||||
message: false,
|
||||
sender: false
|
||||
})
|
||||
|
||||
const isButtonDisabled = computed(() => buttonDisabled.value || errors.email || errors.message || errors.sender)
|
||||
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)
|
||||
|
||||
watch([statusError, emailValue], ([errorCount, value]) => {
|
||||
errors.email = errorCount > 0 && !emailValidate(value)
|
||||
})
|
||||
|
||||
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
|
||||
})
|
||||
}
|
||||
|
||||
scrollTo('#contact-form')
|
||||
}
|
||||
|
||||
function scrollTo(id) {
|
||||
document.querySelector(id).scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
@screen md {
|
||||
.contact_container {
|
||||
flex-basis: 500px;
|
||||
|
||||
@ -91,7 +91,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
@import "scss/media";
|
||||
|
||||
@screen md {
|
||||
|
||||
@ -9,6 +9,7 @@ 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, fab, far);
|
||||
|
||||
99
src/resource/data/Technologies.js
Normal file
99
src/resource/data/Technologies.js
Normal file
@ -0,0 +1,99 @@
|
||||
export default [
|
||||
{
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
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.`
|
||||
}
|
||||
];
|
||||
@ -1,62 +1,76 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import { setHeaderTitle, setHeaderDescription, clearHeaderDescription } from '@/HeaderReference';
|
||||
|
||||
const Home = () => import('@/views/HomeView.vue');
|
||||
const About = () => import('@/views/AboutView.vue');
|
||||
const Projects = () => import('@/views/ProjectsView.vue');
|
||||
const Project = () => import('@/views/ProjectView.vue');
|
||||
const Contact = () => import('@/views/ContactView.vue');
|
||||
const NotFound = () => import('@/views/NotFound.vue');
|
||||
const NotFound = () => import('@/views/NotFoundView.vue');
|
||||
|
||||
const mainTitle = 'kamilcraft.com'
|
||||
const mainTitle = 'kamilcraft.com';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
meta: {
|
||||
title: 'Dzień dobry! 😊'
|
||||
title: 'Dzień dobry! 😊',
|
||||
description: [
|
||||
'Chciałbym Państwa powitać na mojej stronie!',
|
||||
'Przedstawiam tutaj część swojego życia związaną z programowaniem i projektowaniem aplikacji internetowych.',
|
||||
],
|
||||
},
|
||||
component: Home
|
||||
component: Home,
|
||||
},
|
||||
{
|
||||
path: '/projects',
|
||||
name: 'Projects',
|
||||
meta: {
|
||||
title: 'Moje projekty'
|
||||
title: 'Moje projekty',
|
||||
description: [
|
||||
'Witam Państwa na podstronie z moimi projektami!',
|
||||
],
|
||||
},
|
||||
component: Projects
|
||||
component: Projects,
|
||||
},
|
||||
{
|
||||
path: '/projects/:id',
|
||||
name: 'Project',
|
||||
meta: {
|
||||
title: 'Projekt'
|
||||
title: 'Projekt',
|
||||
},
|
||||
component: Project
|
||||
component: Project,
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'About',
|
||||
meta: {
|
||||
title: 'O mnie'
|
||||
title: 'O mnie',
|
||||
description: [
|
||||
'Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.',
|
||||
],
|
||||
},
|
||||
component: About
|
||||
component: About,
|
||||
},
|
||||
{
|
||||
path: '/contact',
|
||||
name: 'Kontakt',
|
||||
meta: {
|
||||
title: 'Kontakt'
|
||||
title: 'Kontakt',
|
||||
description: [
|
||||
'Chcesz o coś zapytać? Chciałbyś współpracować? Napisz!',
|
||||
],
|
||||
},
|
||||
component: Contact
|
||||
component: Contact,
|
||||
},
|
||||
{
|
||||
path: '/:catchAll(.*)',
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: '404',
|
||||
meta: {
|
||||
title: 'Błąd 404'
|
||||
title: 'Błąd 404',
|
||||
},
|
||||
component: NotFound
|
||||
component: NotFound,
|
||||
}
|
||||
]
|
||||
|
||||
@ -65,26 +79,34 @@ const router = createRouter({
|
||||
routes,
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
if (savedPosition) {
|
||||
return savedPosition
|
||||
return savedPosition;
|
||||
} else if (to.hash) {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
selector: to.hash
|
||||
}, 1000)
|
||||
})
|
||||
})
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
return { left: 0, top: 0 }
|
||||
return { left: 0, top: 0 };
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const title = ' :: ' + mainTitle
|
||||
const title = ' :: ' + mainTitle;
|
||||
router.beforeEach((to, form, next) => {
|
||||
const documentTitle = to.meta.title + title || mainTitle
|
||||
document.title = documentTitle === to.meta.title ? title : documentTitle
|
||||
next()
|
||||
})
|
||||
const documentTitle = to.meta.title + title || mainTitle;
|
||||
document.title = documentTitle === to.meta.title ? title : documentTitle;
|
||||
if (to.meta.title) {
|
||||
setHeaderTitle(to.meta.title);
|
||||
}
|
||||
if (to.meta.description && to.meta.description !== []) {
|
||||
setHeaderDescription(to.meta.description);
|
||||
} else {
|
||||
clearHeaderDescription();
|
||||
}
|
||||
next();
|
||||
});
|
||||
|
||||
export default router
|
||||
export default router;
|
||||
|
||||
@ -4,22 +4,15 @@ const apiURL = import.meta.env.VITE_APP_API_URL;
|
||||
|
||||
export const store = createStore({
|
||||
state: {
|
||||
header: {
|
||||
title: null,
|
||||
description: null
|
||||
},
|
||||
categories: [],
|
||||
projects: []
|
||||
},
|
||||
getters: {
|
||||
getHeader (state) {
|
||||
return state.header
|
||||
},
|
||||
getCategories (state) {
|
||||
return state.categories
|
||||
return state.categories;
|
||||
},
|
||||
getProjects (state) {
|
||||
return state.projects
|
||||
return state.projects;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
@ -29,7 +22,7 @@ export const store = createStore({
|
||||
.then(data => {
|
||||
store.commit('setProjects', data)
|
||||
return store.getters.getProjects
|
||||
})
|
||||
});
|
||||
},
|
||||
fetchCategories (store) {
|
||||
return fetch(apiURL + '/categories')
|
||||
@ -37,7 +30,7 @@ export const store = createStore({
|
||||
.then(data => {
|
||||
store.commit('setCategories', data)
|
||||
return store.getters.getCategories
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
@ -47,20 +40,5 @@ export const store = createStore({
|
||||
setProjects: (state, array = []) => {
|
||||
state.projects = array
|
||||
},
|
||||
setHeader: (state, text) => {
|
||||
state.header = {
|
||||
title: text.title ?? null,
|
||||
description: text.description ?? null
|
||||
}
|
||||
},
|
||||
resetHeaderTitle (state) {
|
||||
state.header.title = null
|
||||
},
|
||||
setHeaderDescription: (state, payload) => {
|
||||
state.header.description = payload.title
|
||||
},
|
||||
resetHeaderDescription (state) {
|
||||
state.header.description = null
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,25 +1,3 @@
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
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>
|
||||
|
||||
<template>
|
||||
<section class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
|
||||
<p class="font-bold">
|
||||
|
||||
@ -1,25 +1,11 @@
|
||||
<script setup>
|
||||
import MailContact from '@/components/sections/contacts/MailContact.vue';
|
||||
import OtherContact from '@/components/sections/contacts/OtherContact.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="flex flex-col px-3 py-6 md:flex-row items-start justify-center mx-auto gap-5">
|
||||
<MailContact />
|
||||
<OtherContact />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useStore } from 'vuex'
|
||||
import MailContact from '@/components/sections/contacts/MailContact.vue'
|
||||
import OtherContact from '@/components/sections/contacts/OtherContact.vue'
|
||||
|
||||
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>
|
||||
|
||||
@ -1,35 +1,13 @@
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { useRoute } from 'vue-router';
|
||||
import About from '@/components/sections/AboutSection.vue';
|
||||
import ExperiencesSection from '@/components/sections/ExperiencesSection.vue';
|
||||
import FavoriteProjects from '@/components/sections/FavoriteProjects.vue';
|
||||
|
||||
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');
|
||||
})
|
||||
import About from'@/components/sections/AboutSection.vue';
|
||||
import Experiences from'@/components/sections/ExperiencesSection.vue';
|
||||
import FavoriteProjects from'@/components/sections/FavoriteProjects.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="home">
|
||||
<About />
|
||||
<ExperiencesSection />
|
||||
<Experiences />
|
||||
<FavoriteProjects />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@ -1,3 +1,56 @@
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
import { clearHeaderTitle, clearHeaderDescription } from '@/HeaderReference';
|
||||
import Markdown from '@/components/markdowns/MarkdownDescription.vue';
|
||||
|
||||
const apiURL = import.meta.env.VITE_APP_API_URL;
|
||||
const route = useRoute();
|
||||
const store = useStore();
|
||||
|
||||
const isLoaded = ref(false);
|
||||
let project = reactive({});
|
||||
|
||||
const getCategories = computed(() => store.getters.getCategories);
|
||||
|
||||
onMounted(() => {
|
||||
clearHeaderTitle();
|
||||
clearHeaderDescription();
|
||||
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(apiURL + '/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>
|
||||
|
||||
<template>
|
||||
<section
|
||||
v-if="isLoaded"
|
||||
@ -78,56 +131,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
import Markdown from '@/components/markdowns/MarkdownDescription.vue';
|
||||
|
||||
const apiURL = import.meta.env.VITE_APP_API_URL;
|
||||
const route = useRoute();
|
||||
const store = useStore();
|
||||
|
||||
const isLoaded = ref(false);
|
||||
let project = reactive({});
|
||||
|
||||
const getCategories = computed(() => store.getters.getCategories);
|
||||
|
||||
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(apiURL + '/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";
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue';
|
||||
import { ref, reactive, computed, onMounted } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import SelectedProjects from '@/components/SelectedProjects.vue';
|
||||
|
||||
@ -14,11 +14,6 @@ onMounted(() => {
|
||||
loadAllData();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
store.commit('resetHeaderTitle');
|
||||
store.commit('resetHeaderDescription');
|
||||
});
|
||||
|
||||
function loadAllData () {
|
||||
store.dispatch('fetchCategories');
|
||||
store.dispatch('fetchProjects').then(loadedProjects => {
|
||||
|
||||
@ -1,13 +1,10 @@
|
||||
import { fileURLToPath, URL } from 'node:url';
|
||||
import { defineConfig, loadEnv } from 'vite';
|
||||
import { defineConfig, loadEnv, splitVendorChunkPlugin } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig((mode) => {
|
||||
const env = loadEnv(mode, process.cwd(), "");
|
||||
return {
|
||||
publicPath: '/',
|
||||
transpileDependencies: true,
|
||||
server: {
|
||||
host: 'localhost',
|
||||
port: parseInt(env.VITE_PORT ?? 5173),
|
||||
@ -15,7 +12,10 @@ export default defineConfig((mode) => {
|
||||
host: 'localhost',
|
||||
},
|
||||
},
|
||||
plugins: [ vue() ],
|
||||
plugins: [
|
||||
vue(),
|
||||
splitVendorChunkPlugin(),
|
||||
],
|
||||
resolve: {
|
||||
vue: 'vue/dist/vue.esm-bundler.js',
|
||||
alias: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user