Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
2d9bda3ef3
|
|||
|
da04a355ac
|
|||
|
70f63c8e9f
|
|||
|
62f05232d8
|
|||
|
b5dd052dbd
|
|||
|
92f8ae8fba
|
|||
|
961cb956b6
|
|||
|
7111222e19
|
|||
|
a67389ff29
|
|||
|
40432da0f2
|
|||
|
8054be6846
|
|||
|
cbaca47fb2
|
4
.env.development
Normal file
4
.env.development
Normal file
@ -0,0 +1,4 @@
|
||||
NODE_MODE=development
|
||||
VITE_APP_TITLE=kamilcraft.com
|
||||
VITE_APP_BASE_URL=https://localhost:5173
|
||||
VITE_APP_API_URL=http://localhost/v1
|
||||
@ -1,3 +1,5 @@
|
||||
NODE_MODE=local
|
||||
VUE_APP_TITLE=kamilcraft.com
|
||||
VUE_APP_BASE_URL=http://127.0.0.1
|
||||
VUE_APP_API_URL=https://api.kamilcraft.com
|
||||
VUE_APP_BASE_URL=http://localhost:5173
|
||||
VUE_APP_API_URL=https://api.kamilcraft.com/v1
|
||||
VITE_PORT=5173
|
||||
|
||||
4
.env.production
Normal file
4
.env.production
Normal file
@ -0,0 +1,4 @@
|
||||
NODE_MODE=production
|
||||
VITE_APP_TITLE=kamilcraft.com
|
||||
VITE_APP_BASE_URL=https://kamilcraft.com
|
||||
VITE_APP_API_URL=https://api.kamilcraft.com/v1
|
||||
15
README.md
15
README.md
@ -1,25 +1,32 @@
|
||||
# kamilcraft.com
|
||||
Project of my website - portfolio
|
||||
The project uses the [API](https://github.com/kamilniemczycki/kamilcraft-api) at https://api.kamilcraft.com
|
||||
|
||||
The project concerns a private website at [https://kamilcraft.com](https://kamilcraft.com). The website contains information about me and my projects.
|
||||
|
||||
I used Vue.js in the project. Some of the content is static. The information about the projects is retrieved from the [API](https://github.com/kamilniemczycki/kamilcraft-api).
|
||||
|
||||
## Dependency installation
|
||||
|
||||
```
|
||||
npm install --legacy-peer-deps
|
||||
```
|
||||
|
||||
### Development
|
||||
|
||||
```
|
||||
npm run serve
|
||||
npm run dev
|
||||
```
|
||||
Application should be available under `127.0.0.1:8080` or `localhost:8080`.
|
||||
Application should be available under `127.0.0.1:5173` or `localhost:5173`.
|
||||
|
||||
### Compilation
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
The executable files should be in the `dist` folder.
|
||||
|
||||
### Code formatting
|
||||
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
@ -6,16 +6,13 @@
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="icon" href="<%= VUE_APP_BASE_URL %>/favicon.ico">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Thasadith&display=swap" rel="stylesheet">
|
||||
<title>KamilCraft.com</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
20016
package-lock.json
generated
20016
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
51
package.json
51
package.json
@ -1,38 +1,37 @@
|
||||
{
|
||||
"name": "kamilcraft.com",
|
||||
"version": "1.1.0",
|
||||
"version": "1.2.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint --ext .js,.vue --ignore-path .gitignore",
|
||||
"lintf": "eslint --ext .js,.vue --ignore-path .gitignore--fix"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.2.0",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.2.0",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.2.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.2.0",
|
||||
"@fortawesome/vue-fontawesome": "^3.0.1",
|
||||
"core-js": "^3.25.0",
|
||||
"marked": "^4.1.0",
|
||||
"vue": "^3.2.38",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.4.0",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.4.0",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.4.0",
|
||||
"@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": "^1.64.2",
|
||||
"sass-loader": "^13.3.2",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"vite": "^4.4.7",
|
||||
"vue": "^3.3.4",
|
||||
"vue-meta": "^2.4.0",
|
||||
"vue-router": "^4.1.5",
|
||||
"vuex": "^4.0.2"
|
||||
"vue-router": "^4.2.4",
|
||||
"vuex": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.18.13",
|
||||
"@babel/eslint-parser": "^7.18.9",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.7.1",
|
||||
"postcss": "^8.4.14",
|
||||
"sass": "^1.53.0",
|
||||
"sass-loader": "^13.0.2",
|
||||
"tailwindcss": "^3.1.6"
|
||||
"eslint": "^8.29.0",
|
||||
"eslint-plugin-vue": "^9.8.0",
|
||||
"vite-plugin-eslint": "^1.8.1"
|
||||
},
|
||||
"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'
|
||||
import FooterComponent from '@/components/FooterComponent'
|
||||
</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,3 +1,18 @@
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
import BaseButton from '@/components/buttons/BaseButton.vue';
|
||||
import Markdown from "@/components/markdowns/MarkdownShort.vue";
|
||||
|
||||
defineProps({
|
||||
projects: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const router = useRouter();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section
|
||||
id="projects"
|
||||
@ -31,10 +46,7 @@
|
||||
{{ project.project_version }}
|
||||
</p>
|
||||
</header>
|
||||
<p
|
||||
class="text-sm"
|
||||
v-html="markdownToText(project)"
|
||||
/>
|
||||
<Markdown :source="project.description" />
|
||||
</div>
|
||||
<div
|
||||
class="project-button lg:flex lg:absolute lg:justify-center lg:items-center lg:left-0 lg:top-0 lg:w-full lg:h-full"
|
||||
@ -55,43 +67,7 @@
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useStore } from 'vuex'
|
||||
import BaseButton from '@/components/buttons/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" scoped>
|
||||
<style lang="scss">
|
||||
@import 'scss/media';
|
||||
|
||||
.grid-project {
|
||||
|
||||
@ -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'
|
||||
|
||||
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';
|
||||
|
||||
|
||||
20
src/components/markdowns/MarkdownDescription.vue
Normal file
20
src/components/markdowns/MarkdownDescription.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<script setup>
|
||||
import MarkdownIt from 'markdown-it';
|
||||
|
||||
const markdown = new MarkdownIt();
|
||||
|
||||
const props = defineProps({
|
||||
source: {
|
||||
type: String,
|
||||
required: true,
|
||||
}
|
||||
});
|
||||
|
||||
function render() {
|
||||
return markdown.render(props.source);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-html="render()" />
|
||||
</template>
|
||||
33
src/components/markdowns/MarkdownShort.vue
Normal file
33
src/components/markdowns/MarkdownShort.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<script setup>
|
||||
import MarkdownIt from 'markdown-it';
|
||||
|
||||
const markdown = new MarkdownIt();
|
||||
|
||||
const props = defineProps({
|
||||
source: {
|
||||
type: String,
|
||||
required: true,
|
||||
}
|
||||
});
|
||||
|
||||
function render() {
|
||||
const nodeChildElement = markdown.render(props.source);
|
||||
const nodeElement = document.createElement('div');
|
||||
nodeElement.innerHTML = nodeChildElement;
|
||||
let length = 0;
|
||||
let returnText = '';
|
||||
nodeElement.querySelectorAll('p').forEach(value => {
|
||||
if (length < 351) {
|
||||
length += value.innerText.length;
|
||||
returnText += value.innerText + ' ';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
});
|
||||
return returnText.substring(0, 350).trim();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p v-text="render()" />
|
||||
</template>
|
||||
@ -1,3 +1,16 @@
|
||||
<script setup>
|
||||
import BaseButton from '@/components/buttons/BaseButton.vue'
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function scrollTo(id) {
|
||||
document.querySelector(id).scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-neutral-50">
|
||||
<div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
|
||||
@ -37,7 +50,7 @@
|
||||
<div id="grid-photo">
|
||||
<figure>
|
||||
<img
|
||||
:src="`${publicPath}assets/me.jpg`"
|
||||
src="/assets/me.jpg"
|
||||
class="mx-auto rounded-full object-cover w-[12.5rem] h-[12.5rem]"
|
||||
alt="Moje zdjęcie"
|
||||
>
|
||||
@ -48,20 +61,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import BaseButton from '@/components/buttons/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">
|
||||
#grid-columns {
|
||||
grid-template-columns: 1fr 1fr .8fr;
|
||||
|
||||
@ -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,7 @@
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import Projects from '@/components/SelectedProjects'
|
||||
import GhostButton from '@/components/buttons/GhostButton'
|
||||
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
@import "scss/default";
|
||||
|
||||
.selected-projects {
|
||||
|
||||
@ -1,3 +1,149 @@
|
||||
<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 = {}) {
|
||||
return await fetch(url, {
|
||||
method: 'POST',
|
||||
cache: 'no-cache',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
}).then(r => r.json().then(response => ({ status: r.status, data: response })) );
|
||||
}
|
||||
|
||||
const buttonDisabled = ref(false);
|
||||
const isError = ref(false);
|
||||
const email = ref(null);
|
||||
const message = ref(null);
|
||||
const sender = ref(null);
|
||||
|
||||
const errors = reactive({
|
||||
email: null,
|
||||
message: null,
|
||||
sender: null,
|
||||
});
|
||||
|
||||
const responseMessage = reactive({
|
||||
type: null,
|
||||
data: null,
|
||||
});
|
||||
|
||||
const isButtonDisabled = computed(() => buttonDisabled.value || errors.email || errors.message || errors.sender);
|
||||
|
||||
const messageLength = computed(() => `${message.value?.length ?? 0}/500`);
|
||||
const senderLength = computed(() => `${sender.value?.length ?? 0}/50`);
|
||||
|
||||
watch([isError, message], async ([errorStatus, messageValue]) => {
|
||||
const errMsg = (len) => {
|
||||
if (len < 3)
|
||||
return 'Wymanage są przynajmniej 3 znaki.';
|
||||
if (len > 500)
|
||||
return 'Wiadomość nie może mieć więcej niż 500 znaków.';
|
||||
};
|
||||
errors.message = (messageValue !== null || errorStatus) &&
|
||||
((messageValue?.length ?? 0) < 3 || (messageValue?.length ?? 0) > 500)
|
||||
? errMsg(messageValue?.length ?? 0)
|
||||
: null;
|
||||
});
|
||||
|
||||
watch([isError, email], async ([errorStatus, emailValue]) => {
|
||||
errors.email = (emailValue !== null || errorStatus) && !emailValidate(emailValue ?? '') ? 'E-mail powinien mieć formę: adam.nowak@gmail.com.' : null;
|
||||
});
|
||||
|
||||
watch([isError, sender], async ([errorStatus, senderValue]) => {
|
||||
const errMsg = (len) => {
|
||||
if (len < 3)
|
||||
return 'Wymanage są przynajmniej 3 znaki.';
|
||||
if (len > 50)
|
||||
return 'Podpis nie może mieć więcej niż 50 znaków.';
|
||||
};
|
||||
errors.sender = (senderValue !== null || errorStatus) &&
|
||||
((senderValue?.length ?? 0) < 3 || (senderValue?.length ?? 0) > 50)
|
||||
? errMsg(senderValue?.length ?? 0)
|
||||
: null;
|
||||
});
|
||||
|
||||
function checkForm() {
|
||||
isError.value = false;
|
||||
responseMessage.type = null;
|
||||
responseMessage.data = null;
|
||||
|
||||
if (email.value === null || !emailValidate(email.value)) {
|
||||
errors.email = '';
|
||||
isError.value = true;
|
||||
}
|
||||
if (message.value === null) {
|
||||
errors.message = '';
|
||||
isError.value = true;
|
||||
}
|
||||
if (sender.value === null) {
|
||||
errors.sender = '';
|
||||
isError.value = true;
|
||||
}
|
||||
|
||||
if (isError.value) {
|
||||
responseMessage.type = 'err';
|
||||
responseMessage.data = 'Podane dane są niepoprawne. Sprawdź komunikaty pod polami.';
|
||||
}
|
||||
}
|
||||
|
||||
function formSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
checkForm();
|
||||
|
||||
if (!isError.value) {
|
||||
buttonDisabled.value = true;
|
||||
const sendUrl = import.meta.env.VITE_APP_API_URL;
|
||||
postData(`${sendUrl}/message`, {
|
||||
email: email.value,
|
||||
message: message.value,
|
||||
sender: sender.value,
|
||||
}).then(({ status, data }) => {
|
||||
console.log(status, data);
|
||||
if (200 == status) {
|
||||
email.value = null;
|
||||
sender.value = null;
|
||||
message.value = null;
|
||||
|
||||
responseMessage.type = 'ok';
|
||||
responseMessage.data = data.message;
|
||||
} else if (422 == status) {
|
||||
responseMessage.type = 'err';
|
||||
responseMessage.data = 'Podane dane są niepoprawne. Sprawdź komunikaty pod polami.';
|
||||
|
||||
if (data.errors.email !== undefined)
|
||||
errors.email = data.errors.email[0];
|
||||
if (data.errors.message !== undefined)
|
||||
errors.message = data.errors.message[0] ?? null;
|
||||
if (data.errors.sender !== undefined)
|
||||
errors.sender = data.errors.sender[0] ?? null;
|
||||
} else {
|
||||
responseMessage.type = 'err';
|
||||
responseMessage.data = '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"
|
||||
@ -13,16 +159,16 @@
|
||||
@submit="formSubmit"
|
||||
>
|
||||
<div
|
||||
v-if="hasMessageError"
|
||||
class="w-full p-2 bg-red-200 text-red-500 text-sm border border-red-300 rounded-md"
|
||||
v-if="responseMessage.type === 'err'"
|
||||
class="w-full px-2 py-2.5 bg-red-100 text-red-700 text-sm rounded-md"
|
||||
>
|
||||
{{ messageError }}
|
||||
{{ responseMessage.data }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="hasMessageOkStatus"
|
||||
class="w-full p-2 bg-[#27ae60] text-white text-sm border border-lime-600 rounded-md shadow"
|
||||
v-else-if="responseMessage.type === 'ok'"
|
||||
class="w-full p-2 bg-green-100 text-green-700 text-sm rounded-md shadow"
|
||||
>
|
||||
{{ messageOk }}
|
||||
{{ responseMessage.data }}
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 w-full">
|
||||
<label
|
||||
@ -33,17 +179,16 @@
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
v-model="messageValue"
|
||||
v-model="message"
|
||||
class="w-full max-w-full min-h-[150px] px-2.5 py-2 border-b-2 border-neutral-300 rounded-md focus:border-neutral-400 hover:border-neutral-500 outline-none"
|
||||
:class="[ isMessageError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
|
||||
:class="[ errors.message ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
|
||||
name="message"
|
||||
placeholder="Chciałbym zlecić wykonanie strony..."
|
||||
/>
|
||||
<span
|
||||
v-if="isMessageError"
|
||||
class="text-red-400"
|
||||
:class="{ 'text-red-400': errors.message }"
|
||||
>
|
||||
Wiadomość musi zawierać przynajmniej 3 znaki!
|
||||
{{ messageLength + (errors.message ? `. ${errors.message}` : '') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 w-full">
|
||||
@ -55,18 +200,18 @@
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="emailValue"
|
||||
v-model="email"
|
||||
class="w-full px-2.5 py-2 border-b-2 border-neutral-300 rounded-md focus:border-neutral-400 hover:border-neutral-500 outline-none"
|
||||
:class="[ isEmailError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
|
||||
:class="[ errors.email ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
|
||||
type="text"
|
||||
name="email"
|
||||
placeholder="Twój adres e-mail"
|
||||
>
|
||||
<span
|
||||
v-if="isEmailError"
|
||||
v-if="errors.email"
|
||||
class="text-red-400"
|
||||
>
|
||||
E-mail musi być poprawny, np. przemek.kowalski@gmail.com
|
||||
{{ errors.email }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 w-full">
|
||||
@ -78,17 +223,16 @@
|
||||
</label>
|
||||
<input
|
||||
id="sender"
|
||||
v-model="senderValue"
|
||||
v-model="sender"
|
||||
class="w-full px-2.5 py-2 border-b-2 border-neutral-300 rounded-md focus:border-neutral-400 hover:border-neutral-500 outline-none"
|
||||
:class="[ isSenderError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
|
||||
:class="[ errors.sender ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
|
||||
type="text"
|
||||
name="sender"
|
||||
>
|
||||
<span
|
||||
v-if="isSenderError"
|
||||
class="text-red-400"
|
||||
:class="{ 'text-red-400': errors.sender }"
|
||||
>
|
||||
Podpis musi zawierać przynajmniej 3 znaki!
|
||||
{{ senderLength + (errors.sender ? `. ${errors.sender}` : '') }}
|
||||
</span>
|
||||
</div>
|
||||
<BaseButton
|
||||
@ -102,123 +246,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import BaseButton from '@/components/buttons/BaseButton'
|
||||
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 {
|
||||
|
||||
40
src/main.js
40
src/main.js
@ -1,27 +1,21 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from '@/App.vue'
|
||||
import router from '@/router'
|
||||
import { store } from '@/store'
|
||||
// import VueMeta from 'vue-meta'
|
||||
import { createApp } from 'vue';
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
import { store } from './store';
|
||||
|
||||
import '../scss/default.scss'
|
||||
import '../css/index.css'
|
||||
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'
|
||||
import '../scss/default.scss';
|
||||
import '../css/index.css';
|
||||
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';
|
||||
|
||||
library.add(fas, fab, far)
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
|
||||
|
||||
const app = createApp(App)
|
||||
library.add(fas, fab, far);
|
||||
|
||||
app.config.productionTip = false
|
||||
|
||||
app.component('FontAwesomeIcon', FontAwesomeIcon)
|
||||
|
||||
app.use(router)
|
||||
app.use(store)
|
||||
// app.use(VueMeta)
|
||||
|
||||
app.mount('#app')
|
||||
createApp(App)
|
||||
.component('FontAwesomeIcon', FontAwesomeIcon)
|
||||
.use(router)
|
||||
.use(store)
|
||||
.mount('#app');
|
||||
|
||||
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,61 +1,76 @@
|
||||
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'
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import { setHeaderTitle, setHeaderDescription, clearHeaderDescription } from '@/HeaderReference';
|
||||
|
||||
const mainTitle = 'kamilcraft.com'
|
||||
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/NotFoundView.vue');
|
||||
|
||||
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,
|
||||
}
|
||||
]
|
||||
|
||||
@ -64,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;
|
||||
|
||||
@ -1,41 +1,36 @@
|
||||
import { createStore } from 'vuex'
|
||||
import { createStore } from 'vuex';
|
||||
|
||||
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: {
|
||||
fetchProjects (store) {
|
||||
return fetch(process.env.VUE_APP_API_URL + '/projects')
|
||||
return fetch(apiURL + '/projects')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
store.commit('setProjects', data)
|
||||
return store.getters.getProjects
|
||||
})
|
||||
});
|
||||
},
|
||||
fetchCategories (store) {
|
||||
return fetch(process.env.VUE_APP_API_URL + '/categories')
|
||||
return fetch(apiURL + '/categories')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
store.commit('setCategories', data)
|
||||
return store.getters.getCategories
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
@ -45,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
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
<p>
|
||||
W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
|
||||
<a
|
||||
:href="publicPath + 'download/certyfikat-laravel.pdf'"
|
||||
href="/download/certyfikat-laravel.pdf"
|
||||
class="text-gray-500 underline hover:text-kamilcraft-green hover:no-underline"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer"
|
||||
@ -42,27 +42,3 @@
|
||||
</p>
|
||||
</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>
|
||||
|
||||
@ -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'
|
||||
import OtherContact from '@/components/sections/contacts/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>
|
||||
|
||||
@ -1,35 +1,13 @@
|
||||
<script setup>
|
||||
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>
|
||||
|
||||
<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,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"
|
||||
@ -64,9 +117,9 @@
|
||||
:alt="project.title"
|
||||
>
|
||||
</figure>
|
||||
<div
|
||||
<Markdown
|
||||
class="markdown mt-9"
|
||||
v-html="markdownToHtml"
|
||||
:source="project.description"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
@ -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 { marked } from 'marked'
|
||||
|
||||
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";
|
||||
|
||||
@ -153,7 +156,7 @@ a {
|
||||
}
|
||||
|
||||
p + ol, p + ul, p + blockquote {
|
||||
@apply -mb-2.5;
|
||||
@apply -mb-2;
|
||||
}
|
||||
|
||||
ol {
|
||||
@ -174,7 +177,7 @@ a {
|
||||
}
|
||||
|
||||
p {
|
||||
@apply mb-2.5 text-justify;
|
||||
@apply mb-2 text-justify;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
|
||||
@ -1,3 +1,54 @@
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import SelectedProjects from '@/components/SelectedProjects.vue';
|
||||
|
||||
const store = useStore();
|
||||
|
||||
const activeCategory = ref('all');
|
||||
const projects = reactive([]);
|
||||
|
||||
const getCategories = computed(() => store.getters.getCategories);
|
||||
|
||||
onMounted(() => {
|
||||
loadAllData();
|
||||
});
|
||||
|
||||
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) {
|
||||
activeCategory.value = category
|
||||
loadListWhereCategory(category)
|
||||
}
|
||||
|
||||
function selectedCategory(categorySlug) {
|
||||
return activeCategory.value === categorySlug;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SelectedProjects :projects="projects">
|
||||
<div class="pb-9">
|
||||
@ -25,62 +76,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import SelectedProjects from '@/components/SelectedProjects'
|
||||
|
||||
const store = useStore()
|
||||
|
||||
const activeCategory = ref('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) {
|
||||
activeCategory.value = category
|
||||
loadListWhereCategory(category)
|
||||
}
|
||||
|
||||
function selectedCategory(categorySlug) {
|
||||
return activeCategory.value === categorySlug
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "scss/media";
|
||||
|
||||
|
||||
31
vite.config.js
Normal file
31
vite.config.js
Normal file
@ -0,0 +1,31 @@
|
||||
import { fileURLToPath, URL } from 'node:url';
|
||||
import { defineConfig, loadEnv, splitVendorChunkPlugin } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import eslint from 'vite-plugin-eslint';
|
||||
|
||||
export default defineConfig((mode) => {
|
||||
const env = loadEnv(mode, process.cwd(), "");
|
||||
return {
|
||||
server: {
|
||||
host: 'localhost',
|
||||
port: parseInt(env.VITE_PORT ?? 5173),
|
||||
hmr: {
|
||||
host: 'localhost',
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
vue(),
|
||||
splitVendorChunkPlugin(),
|
||||
eslint(),
|
||||
],
|
||||
resolve: {
|
||||
vue: 'vue/dist/vue.esm-bundler.js',
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
},
|
||||
},
|
||||
build: {
|
||||
manifest: true,
|
||||
},
|
||||
};
|
||||
});
|
||||
@ -1,14 +0,0 @@
|
||||
const path = require("path")
|
||||
const { defineConfig } = require('@vue/cli-service')
|
||||
|
||||
module.exports = defineConfig({
|
||||
publicPath: '/',
|
||||
transpileDependencies: true,
|
||||
configureWebpack: {
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src/'),
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user