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

Compare commits

base: kamilniemczycki:vue-v3
Branches Tags
kamilniemczycki:main kamilniemczycki:vite kamilniemczycki:test2 kamilniemczycki:github-footer kamilniemczycki:up-depends kamilniemczycki:tailwind kamilniemczycki:vue-v3
kamilniemczycki:v1.0.0
...
compare: kamilniemczycki:c3bc19d2988125a7e0cfb4a0cd6725ad7e3e6580
Branches Tags
kamilniemczycki:vite kamilniemczycki:test2 kamilniemczycki:main kamilniemczycki:github-footer kamilniemczycki:up-depends kamilniemczycki:tailwind kamilniemczycki:vue-v3
kamilniemczycki:v1.0.0

16 Commits
vue-v3 ... c3bc19d298

Author SHA1 Message Date
Kamil Niemczycki
c3bc19d298 - version 1.2.0 & fix sass 2023-08-06 00:30:14 +02:00
Kamil Niemczycki
da04a355ac - update readme 2023-08-06 00:26:28 +02:00
Kamil Niemczycki
70f63c8e9f - add eslint to vite 2023-08-06 00:15:25 +02:00
Kamil Niemczycki
62f05232d8 - change error message for sender 2023-08-05 01:21:03 +02:00
Kamil Niemczycki
b5dd052dbd - add information about max chars for inputs 2023-08-05 01:11:36 +02:00
Kamil Niemczycki
92f8ae8fba - remove console logs 2023-08-04 16:20:50 +02:00
Kamil Niemczycki
961cb956b6 - add reset value for sended message 2023-08-04 12:42:30 +02:00
Kamil Niemczycki
7111222e19 - edit contact section 2023-08-03 18:32:59 +02:00
Kamil Niemczycki
a67389ff29 - add manifest.json file 2023-08-02 12:25:09 +02:00
Kamil Niemczycki
40432da0f2 - refactoring code 2023-07-31 20:03:00 +02:00
Kamil Niemczycki
8054be6846 - vite + markdown-it 2023-07-30 19:18:22 +02:00
Kamil Niemczycki
cbaca47fb2 - Update dependencies 2022-12-14 13:09:14 +01:00
Kamil Niemczycki
cbdc5c8676 Add GitHub link to footer (#4) 
* added link to github

* update of dependencies
 2022-09-13 15:02:44 +02:00
Kamil Niemczycki
cd0a5d613f updated version (#3) 2022-08-02 17:07:11 +02:00
Kamil Niemczycki
7bee728518 Conversion of scss into tailwind (#2) 
* installed tailwind

* updated menu - tailwind

* removed old style

* updated container size for navigation

* updated footer style - tailwind

* updated header style - tailwind

* updated colors

* updated about section - tailwind

* updated experiences style - tailwind

* WIP

* improved responsiveness

* updated favorite projects

* updated buttons

* updated projects view

* updated footer style

* updated about view

* updated project view

* updated style for contact form

* updated mail contact

* final style update

* fixed buttons

* fix scroll button

* added autoscroll for contact form

* updated paths in project

* empty line added

* unnecessary comment removed
 2022-08-02 17:01:32 +02:00
Kamil Niemczycki
7475bb5671 Upgrade to vue 3 (#1) 
* updated dependencies

* updated readme

* upgrade to vue 3

* updated buttons

* duplicate id removed

* updated contact
 2022-07-13 09:48:44 +02:00
55 changed files with 4471 additions and 31764 deletions
Expand all files Collapse all files

1
.browserslistrc
View File

@@ -1,3 +1,4 @@
> 1% > 1%
last 2 versions last 2 versions
not dead not dead
not ie 11

4
.env.development Normal file
View 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

6
.env.example
View File

@@ -1,3 +1,5 @@
NODE_MODE=local
VUE_APP_TITLE=kamilcraft.com VUE_APP_TITLE=kamilcraft.com
VUE_APP_BASE_URL=http://127.0.0.1 VUE_APP_BASE_URL=http://localhost:5173
VUE_APP_API_URL=https://api.kamilcraft.com VUE_APP_API_URL=https://api.kamilcraft.com/v1
VITE_PORT=5173

4
.env.production Normal file
View 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

7
.eslintrc.js
View File

@@ -4,12 +4,9 @@ module.exports = {
node: true node: true
}, },
extends: [ extends: [
'plugin:vue/essential', 'eslint:recommended',
'@vue/standard' 'plugin:vue/vue3-recommended'
], ],
parserOptions: {
parser: 'babel-eslint'
},
rules: { rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'

17
README.md
View File

@@ -1,25 +1,32 @@
# kamilcraft.com # kamilcraft.com
Project of my website - portfolio
The project uses a closed 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 ## Dependency installation
``` ```
npm install npm install --legacy-peer-deps
``` ```
### Development ### 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 ### Compilation
``` ```
npm run build npm run build
``` ```
The executable files should be in the `dist` folder. The executable files should be in the `dist` folder.
### Code formatting ### Code formatting
``` ```
npm run lint npm run lint
``` ```

5
babel.config.js
View File

@@ -1,5 +0,0 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

9
css/index.css Normal file
View File

@@ -0,0 +1,9 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-kamilcraft-green: 162 207 0;
}
}

7
public/index.html → index.html
View File

@@ -6,16 +6,13 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <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.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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=Roboto:wght@100;400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Thasadith&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Thasadith&display=swap" rel="stylesheet">
<title>KamilCraft.com</title> <title>KamilCraft.com</title>
</head> </head>
<body> <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> <div id="app"></div>
<!-- built files will be auto injected --> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

32283
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

71
package.json
View File

@@ -1,43 +1,50 @@
{ {
"name": "kamilcraft.com", "name": "kamilcraft.com",
"version": "1.0.0", "version": "1.2.0",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "dev": "vite",
"build": "vue-cli-service build", "build": "vite build",
"lint": "vue-cli-service lint" "preview": "vite preview",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore",
"lintf": "eslint --ext .js,.vue --ignore-path .gitignore--fix"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-brands-svg-icons": "^6.4.0",
"@fortawesome/free-regular-svg-icons": "^5.15.4", "@fortawesome/free-regular-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^6.2.1",
"@fortawesome/vue-fontawesome": "^2.0.2", "@fortawesome/vue-fontawesome": "^3.0.3",
"bootstrap": "^5.0.2", "@vitejs/plugin-vue": "^4.2.3",
"core-js": "^3.15.2", "autoprefixer": "^10.4.14",
"jquery": "^3.6.0", "markdown-it": "^13.0.1",
"marked": "^4.0.12", "postcss": "^8.4.27",
"popper.js": "^1.16.1", "sass": "^1.64.2",
"vue": "^2.6.14", "sass-loader": "^13.3.2",
"tailwindcss": "^3.3.3",
"vite": "^4.4.7",
"vue": "^3.3.4",
"vue-meta": "^2.4.0", "vue-meta": "^2.4.0",
"vue-router": "^3.5.2", "vue-router": "^4.2.4",
"vuex": "^3.6.2" "vuex": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0", "eslint": "^8.29.0",
"@vue/cli-plugin-eslint": "^3.1.1", "eslint-plugin-vue": "^9.8.0",
"@vue/cli-plugin-router": "~4.5.0", "vite-plugin-eslint": "^1.8.1"
"@vue/cli-service": "^4.5.13", },
"@vue/eslint-config-standard": "^5.1.2", "eslintConfig": {
"babel-eslint": "^10.1.0", "root": true,
"eslint": "^6.7.2", "env": {
"eslint-plugin-import": "^2.20.2", "node": true
"eslint-plugin-node": "^11.1.0", },
"eslint-plugin-promise": "^4.2.1", "extends": [
"eslint-plugin-standard": "^4.0.0", "plugin:vue/vue3-essential",
"eslint-plugin-vue": "^6.2.2", "eslint:recommended"
"sass": "^1.26.5", ],
"sass-loader": "^8.0.2", "parserOptions": {
"vue-template-compiler": "^2.6.11" "parser": "@babel/eslint-parser"
},
"rules": {}
} }
} }

6
postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

11
scss/_btn.scss
View File

@@ -20,8 +20,7 @@ $btn-colors: (
min-width: 270px; min-width: 270px;
padding: 8px 10px; padding: 8px 10px;
border-radius: 3px; @apply border-4 rounded-md;
border-width: 3px;
border-style: solid; border-style: solid;
border-color: $default-color; border-color: $default-color;
@@ -35,7 +34,11 @@ $btn-colors: (
font-size: 1.05em; font-size: 1.05em;
color: map-get($colors, font); color: map-get($colors, font);
&:hover { &[disabled] {
opacity: .7;
}
&:hover:not([disabled]) {
$hovers: map-get($colors, hover); $hovers: map-get($colors, hover);
background-color: map-get($hovers, bg); background-color: map-get($hovers, bg);
color: map-get($hovers, font); color: map-get($hovers, font);
@@ -83,7 +86,7 @@ $btn-colors: (
font-size: 1.2em; font-size: 1.2em;
border: unset; border: unset;
&:hover { &:hover:not([disabled]) {
background-color: $default-color; background-color: $default-color;
color: $dark-gray; color: $dark-gray;

28
src/App.vue
View File

@@ -1,9 +1,16 @@
<script setup>
import SiteHeader from '@/components/SiteHeader.vue';
import FooterComponent from '@/components/FooterComponent.vue';
</script>
<template> <template>
<main rel="main" id="app"> <SiteHeader />
<SiteHeader /> <main
<router-view /> rel="main"
<Footer /> >
<RouterView />
</main> </main>
<FooterComponent />
</template> </template>
<style lang="scss"> <style lang="scss">
@@ -14,16 +21,3 @@
color: var(--text-color); color: var(--text-color);
} }
</style> </style>
<script>
import SiteHeader from './components/SiteHeader'
import Footer from './components/Footer'
export default {
name: 'App',
components: {
SiteHeader,
Footer
}
}
</script>

33
src/HeaderReference/index.js Normal file
View 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;
}

29
src/components/BaseButton.vue
View File

@@ -1,29 +0,0 @@
<template>
<button class="btn" :class="{ 'btn-reverse': isReverse }">
<font-awesome-icon class="icon" v-if="hasIcon" :icon="icon"/>
<span><slot></slot></span>
</button>
</template>
<script>
export default {
name: 'BaseButton',
props: {
hasIcon: Boolean,
icon: String,
isReverse: Boolean
}
}
</script>
<style lang="scss" scoped>
@import "scss/_btn";
.btn {
@include button($has-icon: true);
}
.btn-reverse {
@include button(true, true);
}
</style>

120
src/components/Footer.vue
View File

@@ -1,120 +0,0 @@
<template>
<footer class="footer">
<div class="footer_container">
<div class="container_logo">Kamil<span class="logo_element">Craft</span></div>
<ul class="socials">
<li class="social_link"
v-for="link in socialLinks"
:key="link.title.slug">
<a class="link"
:href="link.link"
:title="link.title"
target="_blank"
rel="noopener nofollow noreferrer">
<font-awesome-icon class="icon" :icon="['fab', link.icon]" />
<span class="social_title">{{ link.title }}</span>
<span class="social_shortcut">{{ link.shortcut }}</span>
</a>
</li>
</ul>
</div>
<div class="container"></div>
</footer>
</template>
<style lang="scss" scoped>
@import "scss/default";
.footer {
background-color: #323232;
padding: 35px 0;
&_container {
@extend .container;
display: flex;
align-items: center;
justify-content: space-between;
.container_logo {
padding: 14px 20px 14px 40px;
font-family: 'Thasadith', sans-serif;
font-size: 2.5em;
color: #D4D4D4;
background-color: #5B5B5B;
.logo_element {
color: #A2CF00;
}
}
.socials {
display: flex;
list-style: none;
.social_link {
margin-right: 25px;
padding-right: 15px;
font-size: 1.1em;
a {
color: #A3A3A3;
.icon {
margin-right: 5px;
}
.social_shortcut {
display: none;
}
@include media-tablet {
.social_title {
display: none;
}
.social_shortcut {
display: inline-block;
}
}
@include media-mobile {
.social_shortcut {
display: none;
}
}
}
@include media-mobile {
padding-right: 0;
}
&:last-child {
margin-right: 0;
}
}
}
@include media-tablet {
padding: 0;
}
}
@include media-mobile {
padding: 15px 0;
}
}
</style>
<script>
export default {
name: 'Footer',
data () {
return {
socialLinks: [
{ link: 'https://www.youtube.com/user/kamilniemczycki', icon: 'youtube', title: 'Oglądaj mnie na YouTube', shortcut: 'YouTube' },
{ link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku', shortcut: 'Facebook' }
]
}
}
}
</script>

53
src/components/FooterComponent.vue Normal file
View File

@@ -0,0 +1,53 @@
<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">
<div class="bg-neutral-600 text-white pl-10 pr-5 py-2.5 text-logo-size leading-normal font-thasadith">
Kamil<span class="text-kamilcraft-green">Craft</span>
</div>
<ul class="flex gap-5 pr-3 text-lg">
<li
v-for="link in socialLinks"
:key="link.title.slug"
>
<a
class="text-neutral-400 hover:text-neutral-500"
:href="link.link"
:title="link.title"
target="_blank"
rel="noopener nofollow noreferrer"
>
<FontAwesomeIcon
class="mr-1"
:icon="['fab', link.icon]"
/>
<span class="hidden lg:inline-block">{{ link.title }}</span>
<span class="hidden sm:inline-block lg:hidden">{{ link.shortcut }}</span>
</a>
</li>
</ul>
</div>
</footer>
</template>

27
src/components/GhostButton.vue
View File

@@ -1,27 +0,0 @@
<template>
<button class="btn">
<font-awesome-icon class="icon" v-if="hasIcon" :icon="icon"/>
<span><slot></slot></span>
</button>
</template>
<script>
export default {
name: 'GhostButton',
props: {
hasIcon: {
type: Boolean,
default: false
},
icon: String
}
}
</script>
<style lang="scss" scoped>
@import "scss/btn";
.btn {
@include ghost-button();
}
</style>

23
src/components/HomePageElement.vue
View File

@@ -1,23 +0,0 @@
<template>
<div class="hello">
<h1>{{ $route.meta.title }}</h1>
<p>Witam na mojej stronie głównej. Wszystkich zainteresowanych oczywiście 😁</p>
</div>
</template>
<style scoped lang="scss">
h1 {
margin: 30px 0 20px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

197
src/components/Navigation.vue
View File

@@ -1,197 +0,0 @@
<template>
<div class="container" :class="{'container-menu-active': clickedStatus}">
<router-link to="/">
<div class="logo" @click="linkClicked">Kamil<span class="logo-element">Craft</span></div>
</router-link>
<nav class="nav">
<button class="nav-btn" @click="clickMenu">
<font-awesome-icon v-if="!clicked" icon="bars"></font-awesome-icon>
<font-awesome-icon v-else icon="times"></font-awesome-icon>
</button>
<ul class="site-menu" :class="{'menu-clicked': clicked}">
<li v-for="menuItem in menuItems" :key="menuItem.slug" class="menu-element" @click="linkClicked">
<router-link :to="menuItem.uri">{{ menuItem.title }}</router-link>
</li>
</ul>
</nav>
</div>
</template>
<style lang="scss" scoped>
@import "scss/media";
.sub-page > .container .nav-btn,
.sub-page > .container .nav .site-menu .menu-element a:not([class|=router-link-exact]) {
color: #8D8D8D;
}
.container {
display: flex;
height: 80px;
align-items: center;
justify-content: flex-start;
padding: 0;
div.logo {
padding: 14px 20px 14px 40px;
font-family: 'Thasadith', sans-serif;
font-size: 2.5em;
color: #5C5C5C;
background-color: white;
.logo-element {
color: #A2CF00;
}
}
&-menu-active {
color: #8D8D8D;
animation: container-active-menu 500ms forwards ease-in-out;
div.logo {
animation: logo-active-menu 500ms forwards ease-in-out;
}
.nav {
.nav-btn {
color: #8D8D8D;
}
.site-menu .menu-element a {
color: #8D8D8D;
}
}
}
}
.nav {
margin-left: 20px;
z-index: 10;
.nav-btn {
display: none;
margin: 10px 25px;
font-size: 2em;
color: white;
background: transparent !important;
border: none;
}
.site-menu {
display: flex;
list-style: none;
.menu-element {
margin-right: 30px;
a {
color: #EBEBEB;
&.router-link-exact-active, &:hover {
color: #A2CF00;
}
}
&:last-child {
margin-right: unset;
}
}
}
@include media-tablet {
margin-left: 0;
.nav-btn {
display: block;
}
.site-menu {
display: none;
width: 100%;
position: absolute;
top: 80px;
left: 0;
background-color: white;
box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
.menu-element {
width: 100%;
padding: 5px 20px;
text-align: right;
font-size: 1.8em;
line-height: 2em;
}
}
.menu-clicked {
display: block;
}
}
}
@include media-tablet {
.container {
justify-content: space-between;
}
}
@keyframes container-active-menu {
0% {
background-color: transparent;
}
100% {
background-color: #EFEFEF;
}
}
@keyframes logo-active-menu {
0% {
background-color: white;
}
100% {
background-color: #F6F6F6;
}
}
</style>
<script>
export default {
name: 'SiteHeader',
data () {
return {
menuItems: [
{
slug: 'start',
title: 'Start',
uri: '/'
},
{
slug: 'projects',
title: 'Projekty',
uri: '/projects'
},
{
slug: 'about',
title: 'O mnie',
uri: '/about'
},
{
slug: 'contact',
title: 'Kontakt',
uri: '/contact'
}
],
clicked: false,
publicPath: process.env.VUE_APP_BASE_URL + '/'
}
},
computed: {
clickedStatus () {
return this.clicked
}
},
methods: {
changeClickedStatus () {
this.clicked = !this.clicked
},
clickMenu () {
this.changeClickedStatus()
},
linkClicked () {
if (this.clicked) {
this.changeClickedStatus()
}
}
}
}
</script>

136
src/components/NavigationHeader.vue Normal file
View File

@@ -0,0 +1,136 @@
<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"
:class="{ 'clicked-menu': isClicked }"
>
<RouterLink to="/">
<div
class="bg-white text-gray-800 pl-10 pr-5 py-2.5 text-logo-size leading-normal font-thasadith"
:class="{ 'clicked-logo': isClicked }"
@click="linkClicked"
>
Kamil<span class="text-kamilcraft-green">Craft</span>
</div>
</RouterLink>
<nav>
<button
class="md:hidden text-3xl mx-5"
:class="[ (isHomePage && !isClicked) ? 'text-white' : 'text-gray-600' ]"
title="Menu"
@click="clickMenu"
>
<font-awesome-icon
v-if="!isClicked"
icon="bars"
/>
<font-awesome-icon
v-else
icon="times"
/>
</button>
<ul
:class="[ isClicked ? 'absolute top-20 left-0 w-full z-10 text-3xl text-right bg-white shadow-lg' : 'hidden md:flex md:flex-row md:gap-9' ]"
>
<li
v-for="menuItem in menuItems"
:key="menuItem.slug"
:class="{ 'py-5 px-3 leading-6': isClicked }"
@click="linkClicked"
>
<RouterLink
v-slot="{ href, navigate, isActive }"
:to="menuItem.uri"
custom
>
<a
:href="href"
class="hover:text-kamilcraft-green"
:class="[ (!isActive && isHomePage && !isClicked) ? 'text-white' : (isActive ? 'text-kamilcraft-green' : 'text-gray-500') ]"
@click="navigate"
>
{{ menuItem.title }}
</a>
</RouterLink>
</li>
</ul>
</nav>
</div>
</template>
<style lang="scss">
.clicked-menu {
animation: bg-menu-animation 500ms forwards ease-in-out;
}
.clicked-logo {
animation: bg-logo-animation 500ms forwards ease-in-out;
}
@keyframes bg-menu-animation {
0% {
background-color: transparent;
}
100% {
background-color: #EFEFEF;
}
}
@keyframes bg-logo-animation {
0% {
background-color: white;
}
100% {
background-color: #F6F6F6;
}
}
</style>

273
src/components/SelectedProjects.vue
View File

@@ -1,156 +1,113 @@
<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> <template>
<div class="projects"> <section
<slot></slot> id="projects"
<div class="container"> class="max-w-screen-xl mx-auto px-6 xl:px-2 py-10"
<div class="project" >
v-for="project in projects" <slot />
:key="project.title.slug"> <div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-5">
<img v-if="project.images.small" class="project_image" :src="project.images.small" :alt="project.title" /> <div
<img v-else-if="project.images.large" class="project_image" :src="project.images.large" :alt="project.title" /> v-for="project in projects"
<div class="project_content"> :key="project.title.slug"
<h3 class="project_title">{{ project.title }}</h3> class="flex flex-col lg:grid grid-project relative bg-neutral-100 border border-gray-200 rounded-md"
<div class="project_release">{{ project.version }}</div> >
<div class="project_description" v-html="markdownToText(project)"></div> <img
v-if="project.images.small"
class="project-image w-full h-[16rem] lg:w-[12.5rem] lg:h-[12.5rem] object-cover object-top rounded-t-md lg:rounded-bl-md lg:rounded-tr-none"
:src="project.images.small"
:alt="project.title"
>
<img
v-else-if="project.images.large"
class="project-image w-[12.5rem] h-[12.5rem] object-cover"
:src="project.images.large"
:alt="project.title"
>
<div class="project-content relative p-3 h-[12.5rem] overflow-y-hidden after:absolute after:left-0 after:top-0 after:w-full after:h-full">
<header class="pb-2">
<h3 class="text-lg font-bold">
{{ project.title }}
</h3>
<p class="text-sm">
{{ project.project_version }}
</p>
</header>
<Markdown :source="project.description" />
</div> </div>
<div class="more-button"> <div
<base-btn has-icon 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"
icon="eye" >
is-reverse <BaseButton
@click.native="$router.push({ name: 'Project', params: { id: project.id } })" has-icon
class="btn">O projekcie</base-btn> icon="eye"
is-reverse
class="w-full lg:w-80 rounded-t-none lg:rounded-t-md"
title="Pokaż więcej"
@click="router.push({ name: 'Project', params: { id: project.id } })"
>
O projekcie
</BaseButton>
</div> </div>
</div> </div>
</div> </div>
</div> </section>
</template> </template>
<style lang="scss"> <style lang="scss">
@import "scss/media"; @import 'scss/media';
.projects { .grid-project {
padding-top: 45px; animation: load-project 2s forwards;
padding-bottom: 45px;
.container { .project-image, .project-content {
display: grid; object-position: top center;
align-items: flex-start; }
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(80px, auto);
column-gap: 25px;
row-gap: 20px;
.project { .project-image {
display: grid; grid-area: image;
position: relative; }
grid-template-areas: 'image content';
grid-template-columns: 200px 1fr;
background-color: #fafafa;
border: 1px solid rgba(0, 0, 0, .025);
border-radius: 5px;
animation: load-project 2s forwards;
.project_image { .project-content {
grid-area: image; grid-area: content;
width: 200px;
height: 200px;
object-fit: cover;
object-position: top center;
}
.project_content { &::after {
grid-area: content; background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 60%, #fafafa);
padding: 10px 15px;
height: 200px;
overflow-y: hidden;
position: relative;
.project_title {
font-size: 1.3em;
font-weight: normal;
line-height: 1.5em;
}
.project_release {
font-size: .9em;
font-weight: bold;
padding: 5px 0;
}
&::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #fafafa 100%);
}
}
p {
font-size: .9em;
}
} }
}
}
@include media-tablet(true) { @screen lg {
.project { .grid-project {
.more-button { grid-template-areas: 'image content';
grid-template-columns: 200px 1fr;
.project-button {
.btn {
display: none;
}
&:hover {
background: rgba(0, 0, 0, .3);
border-radius: 5px;
.btn {
display: flex; display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
.btn {
display: none;
}
&:hover { &:hover {
background: rgba(0, 0, 0, .3); background-color: rgba(255, 255, 255, .9);
border-radius: 5px;
.btn {
display: flex;
color: white;
border-style: none;
&:hover {
background-color: #385c8a;
}
}
}
}
}
}
@include media-small {
.project {
display: block;
.project_image {
width: 100%;
height: 250px;
}
.project_content {
height: 125px;
}
.more-button {
display: block;
position: unset;
margin-top: 8px;
height: auto;
left: unset;
top: unset;
.btn {
display: flex;
width: 100%;
border-radius: 0;
border-style: solid;
} }
} }
} }
@@ -168,50 +125,4 @@
opacity: 1; opacity: 1;
} }
} }
@include media-tablet {
.projects .container {
grid-template-columns: 1fr;
padding: 25px;
column-gap: 0;
row-gap: 20px;
}
}
</style> </style>
<script>
import BaseButton from './BaseButton'
import { marked } from 'marked'
export default {
name: 'SelectedProjects',
data () {
return {}
},
mounted () {
const header = {
title: this.$route.meta.title,
description: [
'Witam Państwa na podstronie z moimi projektami!'
]
}
this.$store.commit('setHeader', header)
},
methods: {
markdownToText (project) {
const projectText = marked.parse(project.description)
const nodeElement = document.createElement('div')
nodeElement.innerHTML = projectText
return nodeElement.querySelector('p').innerText.substr(0, 350)
}
},
props: {
projects: {
type: Array
}
},
components: {
'base-btn': BaseButton
}
}
</script>

105
src/components/SiteHeader.vue
View File

@@ -1,82 +1,49 @@
<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> <template>
<header :class="thisClass"> <header :class="thisClass">
<navigation/> <Navigation :is-home-page="isHome" />
<div v-if="isTitle" class="header-info" :class="{ 'header-info-home': isHome }"> <div
<h1>{{ getTitle }}</h1> v-if="isTitle"
<p v-if="isDescription && descriptionType === 'string'">{{ getDescription }}</p> class="max-w-screen-header-content mx-auto text-center px-2.5 py-10"
<p v-else-if="isDescription && descriptionType === 'array'" :class="{ 'text-white': isHome }"
v-for="(desc, key) in getDescription" :key="key">{{ desc }}</p> >
<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">
{{ title }}
</h1>
<template v-if="isDescription">
<p
v-for="(descriptionLine, key) in description"
:key="key"
>
{{ descriptionLine }}
</p>
</template>
</div> </div>
</header> </header>
</template> </template>
<script> <style scoped>
import Navigation from '@/components/Navigation'
export default {
name: 'SiteHeader',
computed: {
isHome () {
return this.$route.path === '/'
},
thisClass () {
return [this.isHome ? 'home-page' : 'sub-page']
},
getTitle () {
return this.$store.getters.getHeader.title
},
isTitle () {
return this.getTitle !== null
},
getDescription () {
return this.$store.getters.getHeader.description
},
descriptionType () {
const isArray = this.getDescription instanceof Array
return isArray ? 'array' : typeof this.getDescription
},
isDescription () {
return this.getDescription !== null
}
},
components: {
navigation: Navigation
}
}
</script>
<style lang="scss">
.home-page { .home-page {
background: linear-gradient(237.74deg, #1199A5 0%, #436DA7 83%); background: linear-gradient(237.74deg, #1199A5 0%, #436DA7 83%);
} }
.sub-page { .sub-page {
background-color: #EFEFEF; background-color: #EFEFEF;
} }
.header-info {
text-align: center;
max-width: 900px;
margin: 0 auto;
padding: 40px 10px;
h1 {
position: relative;
font-weight: lighter;
font-size: 2.5em;
line-height: 1.5em;
margin-bottom: 25px;
&:after {
content: '';
display: block;
position: absolute;
width: 100px;
height: 2px;
background-color: #A2CF00;
left: 50%;
margin-left: -50px;
}
}
&-home {
color: white;
}
}
</style> </style>

43
src/components/buttons/BaseButton.vue Normal file
View File

@@ -0,0 +1,43 @@
<script setup>
defineProps({
hasIcon: {
type: Boolean,
default: false,
},
icon: {
type: String,
default: '',
},
isReverse: {
type: Boolean,
default: false,
},
});
</script>
<template>
<button
class="btn"
:class="{ 'btn-reverse': isReverse }"
title="Wyślij wiadomość"
>
<font-awesome-icon
v-if="hasIcon && icon"
class="icon"
:icon="icon"
/>
<slot />
</button>
</template>
<style lang="scss">
@import 'scss/btn';
.btn {
@include button($has-icon: true);
}
.btn-reverse {
@include button(true, true);
}
</style>

31
src/components/buttons/GhostButton.vue Normal file
View File

@@ -0,0 +1,31 @@
<script setup>
defineProps({
hasIcon: {
type: Boolean,
default: false
},
icon: {
type: String,
default: '',
},
});
</script>
<template>
<button class="btn">
<font-awesome-icon
v-if="hasIcon && icon"
class="icon"
:icon="icon"
/>
<slot />
</button>
</template>
<style lang="scss" scoped>
@import 'scss/btn';
.btn {
@include ghost-button();
}
</style>

20
src/components/markdowns/MarkdownDescription.vue Normal file
View 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
View 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>

145
src/components/sections/About.vue
View File

@@ -1,145 +0,0 @@
<template>
<div class="about">
<div class="container">
<div id="grid">
<div id="grid-text">
<h2 class="name">Kamil Niemczycki</h2>
<div class="tagline">Web Developer</div>
<p>Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.</p>
<div class="buttons">
<base-btn has-icon
icon="portrait"
is-reverse
@click.native="scrollTo('.selected-projects')">Wybrane projekty</base-btn>
<base-btn has-icon
icon="user"
@click.native="$router.push('about')">Więcej o mnie</base-btn>
</div>
</div>
<div id="grid-photo">
<figure id="about-photo">
<img :src="`${publicPath}assets/me.jpg`" />
</figure>
</div>
</div>
</div>
</div>
</template>
<style lang="scss">
@import "scss/media";
.about {
background-color: var(--gray-color) !important;
.container {
padding-top: 45px;
padding-bottom: 45px;
}
h2.name {
font-size: 2.1em;
margin-bottom: 5px;
}
div.tagline {
font-size: 1.6em;
margin-bottom: .7em;
}
#grid {
display: grid;
grid-template-columns: 1fr 1fr .8fr;
grid-template-areas:
'text text photo';
align-items: center;
#grid-text {
grid-area: text;
text-align: left;
.buttons {
display: flex;
justify-content: flex-start;
padding: 25px 0;
.btn {
margin-right: 20px;
&:last-child {
margin-right: 0;
}
@include media-tablet {
margin: 0 auto 15px;
&:last-child {
margin: 0 auto;
}
}
}
@include media-small {
justify-content: center;
margin-bottom: 25px;
}
@include media-tablet {
display: block;
margin-bottom: 25px;
}
}
@include media-mobile() {
.buttons .btn,
.buttons a {
min-width: unset;
width: 100%;
}
}
}
#grid-photo {
grid-area: photo;
#about-photo img {
border-radius: 50%;
}
}
figure {
text-align: center;
img {
object-fit: cover;
width: 200px;
height: 200px;
}
}
}
@include media-small {
#grid {
grid-template-columns: 1fr 1fr;
grid-template-areas:
'text text'
'photo photo';
}
}
}
</style>
<script>
import BaseButton from '../BaseButton'
export default {
data () {
return {
publicPath: process.env.VUE_APP_BASE_URL + '/'
}
},
methods: {
scrollTo (id) {
document.querySelector(id).scrollIntoView({
behavior: 'smooth'
})
}
},
components: {
'base-btn': BaseButton
}
}
</script>

78
src/components/sections/AboutSection.vue Normal file
View File

@@ -0,0 +1,78 @@
<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">
<div
id="grid-columns"
class="flex flex-col md:grid items-center"
>
<div id="grid-content">
<h2 class="text-[2rem]">
Kamil Niemczycki
</h2>
<div class="mb-2 text-[1.5rem]">
Web Developer
</div>
<p>
Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.
</p>
<div class="flex flex-col sm:flex-row justify-center md:justify-start py-6 gap-5">
<BaseButton
has-icon
icon="portrait"
is-reverse
@click="scrollTo('#projects')"
>
Wybrane projekty
</BaseButton>
<BaseButton
has-icon
icon="user"
@click="router.push('about')"
>
Więcej o mnie
</BaseButton>
</div>
</div>
<div id="grid-photo">
<figure>
<img
src="/assets/me.jpg"
class="mx-auto rounded-full object-cover w-[12.5rem] h-[12.5rem]"
alt="Moje zdjęcie"
>
</figure>
</div>
</div>
</div>
</div>
</template>
<style lang="scss">
#grid-columns {
grid-template-columns: 1fr 1fr .8fr;
grid-template-areas:
'text text photo';
}
#grid-content {
grid-area: text;
}
#grid-photo {
grid-area: photo;
}
</style>

253
src/components/sections/Experiences.vue
View File

@@ -1,253 +0,0 @@
<template>
<div class="experiences">
<div class="container">
<h2>Wykorzystywane technologie</h2>
<p>
Programowaniem stron internetowych zajmuję się najmłodszych lat, czyli od 2011 roku. Pierwsze projekty były
proste i najczęściej na użytek własny. Jednakże, doświadczenie zebrane przez lata pomogło mi wyselekcjonować
technologie, które wspomagają pisanie i rozwijanie oprogramowania.
</p>
<div class="skills">
<div v-for="(skill, key) in list" :key="key" class="skill-group">
<header class="skill-header">
<div class="tech-icons">
<font-awesome-icon
v-for="(icon, keyIcon) in skill.icons"
:key="keyIcon" :class="icon.class"
:icon="['fab', icon.name]"
:alt="icon.alt"
:title="icon.title" />
</div>
<h3>{{ skill.header }}</h3>
</header>
<p v-if="skill.showMore || skill.description.length < 200">{{ skill.description }}</p>
<p v-else>{{ parseText(skill.description) }}... <a @click="changeMoreStatus(skill)">Więcej</a></p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Experiences',
data () {
return {
list: []
}
},
mounted () {
this.list = [
{
icons: [
{
class: 'icon-php',
name: 'php',
alt: 'Ikona przedstawiająca język PHP',
title: 'Ikona PHP'
},
{
class: 'icon-laravel',
name: 'laravel',
alt: 'Ikona przedstawiająca framework Laravel',
title: 'Ikona Laravel'
}
],
header: 'PHP & Laravel',
showMore: false,
description: `PHP wraz z frameworkiem Laravel wykorzystuję do tworzenia nowych projektów. Laravel znacznie
przyspiesza pisanie części backendowej, odciążając programistę od pisania skomplikownych filtrów i monotonnych
walidacji przyjmowanych danych od użytkowników. Jednakże, choć dobrze pracuje mi się w środowisku Laravel
w miarę możliwości staram się pisać kod w samym PHP z wykorzystaniem bibliotek i paczek autorskich.`
},
{
icons: [
{
class: 'icon-js',
name: 'js-square',
alt: 'Ikona przedstawiająca język JavaScript',
title: 'Ikona JavaScript'
}
],
header: 'JavaScript Vanilla',
showMore: false,
description: `JavaScript wykorzystuję głównie do logiki frontendowej jak i pisania kodu wykonywalnego po stronie
przeglądarki internetowej. Wykorzystując możliwości reaktywnych frameworków mogę przyspieszyć pisanie UI.`
},
{
icons: [
{
class: 'icon-vue',
name: 'vuejs',
alt: 'Ikona przedstawiająca framework Vue.js',
title: 'Ikona Vue.js'
}
],
header: 'Vue',
showMore: false,
description: `Framework ten wspomaga mnie w pisaniu aplikacji frontendowej. Przyspiesza tworzenie warstwy
wizualnej, obsługę interakcji z użytkownikiem i bindowanie zdefiniowanych pól, które są odpowiednio renderowane
przez przeglądarkę. To wszystko, umożliwia łatwe łączenie CSS i HTML z logiką i otrzymanymi danymi z API.`
},
{
icons: [
{
class: 'icon-html5',
name: 'html5',
alt: 'Ikona przedstawiająca HTML5',
title: 'Ikona HTML5'
},
{
class: 'icon-css3',
name: 'css3-alt',
alt: 'Ikona przedstawiająca CSS3',
title: 'Ikona CSS3'
}
],
header: 'HTML & CSS',
showMore: false,
description: `HTML i CSS to już nieodłączne technologie, które w łatwy sposób umożliwiają nadanie wizualnej
spójności dla treści, obrazów lub ułożenia elementów. Nie raz, odpowednie zaprojektowanie interfejsu użytkownika
przyspiesza integrację z naszą stroną/sklepem. Ma to przełożenie na zyski dla obu stron - firmy (finanse)
i klienta (czas).`
},
{
icons: [
{
class: 'icon-node',
name: 'node',
alt: 'Ikona przedstawiająca Node.js',
title: 'Ikona Node.js'
}
],
header: 'Node.js',
showMore: false,
description: `Node jest wieloplatformowym środowiskiem uruchomieniowym, umożliwiającym uruchomienie kodu
JavaScript po stronie backendowej. Jest to bardzo przyjemny język, który ułatwia projektowanie logiki biznesowej
aplikacji, dla mniej wymagających serwisów pod względem analizy i przetwarzania danych.`
},
{
icons: [
{
class: 'icon-sass',
name: 'sass',
alt: 'Ikona przedstawiająca Sass',
title: 'Ikona Sass'
}
],
header: 'Sass',
showMore: false,
description: `Sass zwiększa czytelność kodu dla programisty. Zawiera abstrakcje znane z języków obiektowych,
przy czym ogranicza powtarzalność i umożliwia optymalizację kodu. Kompilacja napisanego stylu w Sass jest
przekształcana do formy czytelnej dla silnika graficznego przeglądarki, co przyspiesza proces generowania strony.`
}
]
},
methods: {
parseText (text) {
let shortText = text.substr(0, 200)
if (shortText.slice(-1) === ' ') {
shortText = text.substr(0, 199)
}
return shortText
},
changeMoreStatus (skill) {
skill.showMore = !skill.showMore
}
}
}
</script>
<style lang="scss">
@import "scss/media";
.experiences {
.container {
padding-top: 45px;
padding-bottom: 45px;
.skills {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 20px;
row-gap: 20px;
margin-top: 15px;
.skill-group {
background-color: #fafafa;
padding: 15px;
border-radius: 5px;
.tech-icons {
font-size: 1.8em;
margin-bottom: 3px;
& > svg[class*='icon'] {
margin-right: 10px;
&:last-child {
margin-right: 0;
}
}
}
h3 {
font-size: 1.2em;
line-height: 1.6em;
font-weight: bold;
}
.skill-list {
margin-block: auto;
padding-inline: inherit;
margin-left: 5px;
list-style-type: initial;
}
p {
font-size: .9em;
a {
color: #8D8D8D;
cursor: pointer;
}
}
&:hover {
background-color: rgba(0, 0, 0, .03);
}
}
@include media-small {
grid-template-columns: repeat(3, 1fr);
}
@include media-tablet {
grid-template-columns: repeat(2, 1fr);
}
@include media-mobile {
grid-template-columns: repeat(1, 1fr);
}
}
}
}
.icon-js {
color: #F1DE4F;
}
.icon-php {
color: #777bb3;
}
.icon-laravel {
color: #FF2D20;
}
.icon-vue {
color: #64B687;
}
.icon-html5 {
color: #DE6E3C;
}
.icon-node {
color: #64B687;
}
.icon-css3 {
color: #53A7DC;
}
.icon-sass {
color: #BF6B97;
}
</style>

96
src/components/sections/ExperiencesSection.vue Normal file
View File

@@ -0,0 +1,96 @@
<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">
<h2 class="text-[2rem] mb-2">
Wykorzystywane technologie
</h2>
<p class="mb-5">
Programowaniem stron internetowych zajmuję się najmłodszych lat, czyli od 2011 roku. Pierwsze projekty były
proste i najczęściej na użytek własny. Jednakże, doświadczenie zebrane przez lata pomogło mi wyselekcjonować
technologie, które wspomagają pisanie i rozwijanie oprogramowania.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
<div
v-for="(skill, skillKey) in list"
:key="skillKey"
class="p-4 bg-neutral-50 rounded-lg"
>
<header>
<div class="flex gap-2 text-3xl mb-2">
<font-awesome-icon
v-for="(icon, iconKey) in skill.icons"
:key="iconKey"
:class="icon.class"
:icon="['fab', icon.name]"
:alt="icon.alt"
:title="icon.title"
/>
</div>
<h3 class="text-lg font-bold">
{{ skill.header }}
</h3>
</header>
<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="showMore(skill)"
>Więcej</a>
</p>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.icon-js {
color: #F1DE4F;
}
.icon-php {
color: #777bb3;
}
.icon-laravel {
color: #FF2D20;
}
.icon-vue {
color: #64B687;
}
.icon-html5 {
color: #DE6E3C;
}
.icon-node {
color: #64B687;
}
.icon-css3 {
color: #53A7DC;
}
.icon-sass {
color: #BF6B97;
}
</style>

78
src/components/sections/FavoriteProjects.vue
View File

@@ -1,51 +1,51 @@
<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> <template>
<section class="selected-projects"> <section class="bg-neutral-50">
<projects :projects="select_projects"> <projects :projects="select_projects">
<div class="header-container"> <header>
<h2>Wybrane projekty</h2> <h2 class="text-[2rem] mb-2">
<p>Poniżej przedstawiam Państwu, wybraną przeze mnie, listę projektów.</p> Wybrane projekty
</div> </h2>
<p class="mb-5">
Poniżej przedstawiam Państwu, wybraną przeze mnie, listę projektów.
</p>
</header>
</projects> </projects>
<div class="more-button"> <div class="w-full -translate-y-5 pb-5 more-button">
<GhostButton @click.native="$router.push('projects')"> <GhostButton
class="mx-auto"
@click="router.push('projects')"
>
ZOBACZ WIĘCEJ ZOBACZ WIĘCEJ
</GhostButton> </GhostButton>
</div> </div>
</section> </section>
</template> </template>
<script> <style lang="scss">
import Projects from '../SelectedProjects'
import GhostButton from '../GhostButton'
export default {
name: 'FavoriteProjects',
data () {
return {
publicPath: process.env.VUE_APP_BASE_URL + '/',
select_projects: []
}
},
mounted () {
this.loadProjectList()
},
methods: {
loadProjectList () {
fetch(process.env.VUE_APP_API_URL + '/projects?category=selected')
.then(response => response.json())
.then(data => {
this.select_projects = data
})
}
},
components: {
GhostButton,
Projects
}
}
</script>
<style lang="scss" scoped>
@import "scss/default"; @import "scss/default";
.selected-projects { .selected-projects {

457
src/components/sections/contacts/MailContact.vue
View File

@@ -1,218 +1,255 @@
<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> <template>
<div class="contact_container"> <div
<div class="message"></div> id="contact-form"
<header class="container_head">Formularz kontaktowy:</header> class="contact_container w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[500px] p-2 shadow"
<form id="form-point" @submit="formSubmit"> >
<input v-model="emailValue" class="contact_input" type="text" name="email" placeholder="Twój adres e-mail." /> <header class="mb-1.5">
<textarea v-model="messageValue" class="contact_input" name="message" placeholder="Twoja wiadomość."></textarea> <h3 class="text-xl">
<input v-model="senderValue" class="contact_input" type="text" name="sender" placeholder="Twój podpis." /> Formularz kontaktowy
<base-btn is-reverse :disabled="buttonDisabled">Wyślij</base-btn> </h3>
</header>
<form
class="flex flex-col gap-3 justify-start items-start"
@submit="formSubmit"
>
<div
v-if="responseMessage.type === 'err'"
class="w-full px-2 py-2.5 bg-red-100 text-red-700 text-sm rounded-md"
>
{{ responseMessage.data }}
</div>
<div
v-else-if="responseMessage.type === 'ok'"
class="w-full p-2 bg-green-100 text-green-700 text-sm rounded-md shadow"
>
{{ responseMessage.data }}
</div>
<div class="flex flex-col gap-1 w-full">
<label
class="text-gray-500"
for="message"
>
W czym mogę pomóc?
</label>
<textarea
id="message"
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="[ 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
:class="{ 'text-red-400': errors.message }"
>
{{ messageLength + (errors.message ? `. ${errors.message}` : '') }}
</span>
</div>
<div class="flex flex-col gap-1 w-full">
<label
class="text-gray-500"
for="email"
>
Gdzie mam odesłać odpowiedź?
</label>
<input
id="email"
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="[ 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="errors.email"
class="text-red-400"
>
{{ errors.email }}
</span>
</div>
<div class="flex flex-col gap-1 w-full">
<label
class="text-gray-500"
for="sender"
>
Podpis
</label>
<input
id="sender"
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="[ errors.sender ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
type="text"
name="sender"
>
<span
:class="{ 'text-red-400': errors.sender }"
>
{{ senderLength + (errors.sender ? `. ${errors.sender}` : '') }}
</span>
</div>
<BaseButton
is-reverse
class="py-1 w-full"
:disabled="isButtonDisabled"
>
Wyślij
</BaseButton>
</form> </form>
</div> </div>
</template> </template>
<script> <style lang="scss">
import BaseButton from '../../BaseButton' @screen md {
.contact_container {
function emailValidate (mailObj) { flex-basis: 500px;
const mailFormat = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/
return !!mailObj.value.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()
}
export default {
name: 'MailContact',
data () {
return {
buttonDisabled: false,
statusError: 0,
email: {},
emailValue: '',
message: {},
messageValue: '',
sender: {},
senderValue: ''
}
},
components: {
'base-btn': BaseButton
},
watch: {
emailValue (value) {
if (this.statusError > 0 && emailValidate(this.email)) {
this.email.classList.remove('contact_input-error')
}
},
messageValue (value) {
if (this.statusError > 0 && value !== '') {
this.message.classList.remove('contact_input-error')
}
},
senderValue (value) {
if (this.statusError > 0 && value !== '') {
this.sender.classList.remove('contact_input-error')
}
}
},
methods: {
clearErrors () {
this.statusError = 0
this.email.classList.remove('contact_input-error')
this.message.classList.remove('contact_input-error')
this.sender.classList.remove('contact_input-error')
},
checkForm () {
if (!emailValidate(this.email)) {
this.email.classList.add('contact_input-error')
this.statusError++
}
if (this.message.value === '') {
this.message.classList.add('contact_input-error')
this.statusError++
}
if (this.sender.value === '') {
this.sender.classList.add('contact_input-error')
this.statusError++
}
},
formSubmit (event) {
event.preventDefault()
this.email = event.target[0]
this.message = event.target[1]
this.sender = event.target[2]
this.clearErrors()
this.checkForm()
const messageElement = document.querySelector('.message')
messageElement.classList.remove('message_ok', 'message_error')
if (this.statusError === 0) {
this.buttonDisabled = true
postData('/send', {
email: this.emailValue,
message: this.messageValue,
sender: this.senderValue
}).then(result => {
messageElement.classList.add(
result.error ? 'message_error' : 'message_ok'
)
messageElement.textContent = result.message
if (!result.error) {
this.messageValue = ''
this.emailValue = ''
this.senderValue = ''
}
this.buttonDisabled = false
}).catch(() => {
messageElement.classList.add('message_error')
messageElement.textContent = 'Wystąpił błąd podczas wysyłania wiadomości. Proszę spróbować później.'
this.buttonDisabled = false
})
}
}
} }
} }
</script>
<style lang="scss" scoped>
@import "scss/media";
.contact_container {
flex-basis: 500px;
#form-point {
display: flex;
flex-direction: column;
align-items: center;
}
.btn {
width: 97%;
margin: 0 20px 5px;
}
}
.container_head {
padding: 10px;
line-height: 1.6em;
font-size: 1.3em;
font-weight: bold;
}
.contact_container input, .contact_container textarea {
width: 97%;
max-width: 97%;
border: 0;
border-bottom: 2px solid #c9c9c9;
padding: 10px 10px 8px;
font-size: 1em;
font-family: var(--font-family);
line-height: 1.3em;
margin-bottom: 10px;
border-radius: 5px;
}
.contact_input:focus, .contact_input:focus {
outline: none;
border-color: black;
}
textarea.contact_input {
max-width: 97%;
min-width: 97%;
min-height: 150px;
}
.contact_input-error, .contact_input-error {
background-color: #ffc3b0;
border-color: #ff865f;
color: #c90000;
}
.contact_input-error::placeholder, .contact_input-error::placeholder {
color: #c9000094;
}
input[disabled].contact_input {
background-color: #cdcdcd;
border-color: gray;
color: black;
}
.message {
display: none;
margin: 5px;
padding: 8px;
border-radius: 5px;
}
.message_ok, .message_error {
display: block;
}
.message_ok {
background-color: #4CAF50;
border: 1px solid #387d3b;
color: white;
}
.message_error {
background-color: #ffc3b0;
border: 1px solid #ff865f;
color: #c90000;
}
</style> </style>

195
src/components/sections/contacts/OtherContact.vue
View File

@@ -1,101 +1,111 @@
<template> <template>
<div class="contact_info"> <div class="contact_info w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[410px] p-2 shadow">
<header class="info_head">Inne formy kontaktu:</header> <header class="mb-1.5">
<div class="contact_element"> <h3 class="text-xl">
<img class="contact_element_icon" Inne formy kontaktu:
src="/assets/img/instagram.jpg" /> </h3>
<span id="instagram" class="contact_element_text"> </header>
<a href="https://www.instagram.com/nikcamii/" <div class="flex flex-col gap-2.5 justify-start items-start">
target="_blank" <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
rel="noopener nofollow noreferrer">Instagram: @NiKCamii</a> <img
</span> class="rounded-full w-12 h-12 object-contain border border-neutral-200"
</div> src="/assets/img/instagram.jpg"
<div class="contact_element"> alt="Instagram"
<img class="contact_element_icon" src="/assets/img/facebook.jpg" /> >
<span id="facebook" class="contact_element_text"> <span
<a href="https://www.facebook.com/nikcamii/" id="instagram"
target="_blank" class="font-bold"
rel="noopener nofollow noreferrer">Facebook: @NiKCamii</a> >
</span> <a
</div> href="https://www.instagram.com/nikcamii/"
<div class="contact_element"> target="_blank"
<img class="contact_element_icon" rel="noopener nofollow noreferrer"
src="/assets/img/twitter.jpg" /> class="hover:underline"
<span id="twitter" class="contact_element_text"> >Instagram: @NiKCamii</a>
<a href="https://twitter.com/nikcamii" </span>
target="_blank" </div>
rel="noopener nofollow noreferrer">Twitter: @NiKCamii</a> <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
</span> <img
</div> class="rounded-full w-12 h-12 object-contain border border-neutral-200"
<div class="contact_element"> src="/assets/img/facebook.jpg"
<img class="contact_element_icon" alt="Facebook"
src="/assets/img/gg.png" /> >
<span id="gg" class="contact_element_text">GG: 38429969</span> <span
</div> id="facebook"
<div class="contact_element"> class="font-bold"
<img class="contact_element_icon" >
src="/assets/img/user.jpg" /> <a
<span id="email" class="contact_element_text"> href="https://www.facebook.com/nikcamii/"
<a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a> target="_blank"
</span> rel="noopener nofollow noreferrer"
class="hover:text-gray-700 hover:underline"
>Facebook: @NiKCamii</a>
</span>
</div>
<div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
<img
class="rounded-full w-12 h-12 object-contain border border-neutral-200"
src="/assets/img/twitter.jpg"
alt="Twitter"
>
<span
id="twitter"
class="font-bold"
>
<a
href="https://twitter.com/nikcamii"
target="_blank"
rel="noopener nofollow noreferrer"
class="hover:text-gray-700 hover:underline"
>Twitter: @NiKCamii</a>
</span>
</div>
<div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
<img
class="rounded-full w-12 h-12 object-contain border border-neutral-200"
src="/assets/img/gg.png"
alt="Gadu-Gadu"
>
<span
id="gg"
class="font-bold"
>GG: 38429969</span>
</div>
<div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
<img
class="rounded-full w-12 h-12 object-contain border border-neutral-200"
src="/assets/img/user.jpg"
alt="E-mail"
>
<span
id="mailto"
class="font-bold"
>
<a
href="mailto:contact@kamilcraft.com"
class="hover:text-gray-700 hover:underline"
>Email: contact@kamilcraft.com</a>
</span>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <style lang="scss">
export default {
name: 'OtherContact'
}
</script>
<style lang="scss" scoped>
@import "scss/media"; @import "scss/media";
.contact_info { @screen md {
flex-basis: 410px; .contact_info {
flex-basis: 410px;
}
} }
.info_head { a {
padding: 10px; color: inherit;
line-height: 1.6em;
font-size: 1.3em;
font-weight: bold;
}
.contact_element { &:hover {
display: flex; -webkit-text-fill-color: #374151;
align-items: center; color: #374151;
padding: 5px;
background-color: #fff;
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
margin-bottom: 5px;
a {
color: inherit;
text-decoration: none;
&:hover {
-webkit-text-fill-color: #444444;
color: #444444;
text-decoration: underline;
}
}
&_icon {
border-radius: 50%;
border: 1px solid #e2e2e2;
width: 50px;
height: 50px;
margin-right: 10px;
object-fit: contain;
}
&_text{
padding-top: 2px;
line-height: 1.6em;
font-size: 1.1em;
font-weight: bold;
} }
} }
@@ -113,18 +123,11 @@ export default {
color: #5eaade; color: #5eaade;
} }
#email { #mailto {
color: #696969; color: #696969;
} }
#gg { #gg {
color: #ffa214; color: #ffa214;
} }
@include media-tablet {
#instagram, #facebook, #twitter, #email, #gg {
font-size: 1em;
line-height: 1.2em;
}
}
</style> </style>

38
src/main.js
View File

@@ -1,25 +1,21 @@
import Vue from 'vue' import { createApp } from 'vue';
import App from './App.vue' import App from './App.vue';
import router from './router' import router from './router';
import store from './store' import { store } from './store';
import './vue-meta'
import '../scss/default.scss' import '../scss/default.scss';
import { library } from '@fortawesome/fontawesome-svg-core' import '../css/index.css';
import { fas } from '@fortawesome/free-solid-svg-icons' import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons' import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons' import { fab } from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { far } from '@fortawesome/free-regular-svg-icons';
library.add(fas) import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
library.add(fab)
library.add(far)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false library.add(fas, fab, far);
new Vue({ createApp(App)
store, .component('FontAwesomeIcon', FontAwesomeIcon)
router, .use(router)
render: h => h(App) .use(store)
}).$mount('#app') .mount('#app');

99
src/resource/data/Technologies.js Normal file
View 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.`
}
];

111
src/router/index.js
View File

@@ -1,99 +1,112 @@
import Vue from 'vue' import { createRouter, createWebHistory } from 'vue-router';
import VueRouter from 'vue-router' import { setHeaderTitle, setHeaderDescription, clearHeaderDescription } from '@/HeaderReference';
import Home from '../views/Home'
import About from '../views/About'
import Projects from '../views/Projects'
import Project from '../views/Project'
import Contact from '../views/Contact'
import KamilCraftInfo from '../views/KamilCraftInfo'
import NotFound from '../views/NotFound'
Vue.use(VueRouter) 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 mainTitle = 'kamilcraft.com';
const routes = [ const routes = [
{ {
path: '/', path: '/',
name: 'Home', name: 'Home',
meta: { 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', path: '/projects',
name: 'Projects', name: 'Projects',
meta: { meta: {
title: 'Moje projekty' title: 'Moje projekty',
description: [
'Witam Państwa na podstronie z moimi projektami!',
],
}, },
component: Projects component: Projects,
}, },
{ {
path: '/projects/:id', path: '/projects/:id',
name: 'Project', name: 'Project',
meta: { meta: {
title: 'Projekt' title: 'Projekt',
}, },
component: Project component: Project,
}, },
{ {
path: '/about', path: '/about',
name: 'About', name: 'About',
meta: { 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', path: '/contact',
name: 'Kontakt', name: 'Kontakt',
meta: { meta: {
title: 'Kontakt' title: 'Kontakt',
description: [
'Chcesz o coś zapytać? Chciałbyś współpracować? Napisz!',
],
}, },
component: Contact component: Contact,
}, },
{ {
path: '/info', path: '/:pathMatch(.*)*',
name: 'KamilCraftProject',
meta: {
title: 'KamilCraft Project'
},
component: KamilCraftInfo
},
{
path: '*',
name: '404', name: '404',
meta: { meta: {
title: 'Błąd 404' title: 'Błąd 404',
}, },
component: NotFound component: NotFound,
} }
] ]
const router = new VueRouter({ const router = createRouter({
mode: 'history', history: createWebHistory('/'),
base: '/',
routes, routes,
scrollBehavior (to, from, savedPosition) { scrollBehavior(to, from, savedPosition) {
if (savedPosition) { if (savedPosition) {
return savedPosition return savedPosition;
} else if (to.hash) { } else if (to.hash) {
return { return new Promise(resolve => {
selector: to.hash, setTimeout(() => {
behavior: 'smooth' resolve({
} selector: to.hash
}, 1000);
});
});
} else { } else {
return { x: 0, y: 0 } return { left: 0, top: 0 };
} }
} }
}) });
const title = ' :: ' + mainTitle const title = ' :: ' + mainTitle;
router.beforeEach((to, form, next) => { router.beforeEach((to, form, next) => {
const documentTitle = to.meta.title + title || mainTitle const documentTitle = to.meta.title + title || mainTitle;
document.title = documentTitle === to.meta.title ? title : documentTitle document.title = documentTitle === to.meta.title ? title : documentTitle;
next() 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;

47
src/store/index.js
View File

@@ -1,44 +1,36 @@
import Vue from 'vue' import { createStore } from 'vuex';
import Vuex from 'vuex'
Vue.use(Vuex) const apiURL = import.meta.env.VITE_APP_API_URL;
const moduleSettings = { export const store = createStore({
state: { state: {
header: {
title: null,
description: null
},
categories: [], categories: [],
projects: [] projects: []
}, },
getters: { getters: {
getHeader (state) {
return state.header
},
getCategories (state) { getCategories (state) {
return state.categories return state.categories;
}, },
getProjects (state) { getProjects (state) {
return state.projects return state.projects;
} }
}, },
actions: { actions: {
fetchProjects (store) { fetchProjects (store) {
return fetch(process.env.VUE_APP_API_URL + '/projects') return fetch(apiURL + '/projects')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
store.commit('setProjects', data) store.commit('setProjects', data)
return store.getters.getProjects return store.getters.getProjects
}) });
}, },
fetchCategories (store) { fetchCategories (store) {
return fetch(process.env.VUE_APP_API_URL + '/categories') return fetch(apiURL + '/categories')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
store.commit('setCategories', data) store.commit('setCategories', data)
return store.getters.getCategories return store.getters.getCategories
}) });
} }
}, },
mutations: { mutations: {
@@ -48,26 +40,5 @@ const moduleSettings = {
setProjects: (state, array = []) => { setProjects: (state, array = []) => {
state.projects = 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
}
}
}
export default new Vuex.Store({
modules: {
settings: moduleSettings
} }
}) })

81
src/views/About.vue
View File

@@ -1,81 +0,0 @@
<template>
<section id="about">
<div class="container">
<p>
<strong>Nazywam się Kamil Niemczycki. Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.</strong>
</p>
<h2>Studia</h2>
<p>
Jestem absolwentem Państwowej Wyższej Szkoły Zawodowej im. Witelona w Legnicy. Studiowałem na kierunku <em>Informatyka</em> o specjalności <em>Programowanie Aplikacji Mobilnych i Internetowych.</em>
</p>
<p>
Podczas studiów zdobyłem niezbędną wiedzę z zakresu projektowania, wdrażania i rozwoju aplikacji internetowych, mobilnych i desktopowych.
Zdobyłem także umiejętności pracy w zespole, które owocują tworzeniem merytorycznej dyskusji na temat części lub całości projektu.
</p>
<h3>Kursy</h3>
<p>W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
<strong><a :href="publicPath + 'download/certyfikat-laravel.pdf'"
target="_blank"
rel="noopener nofollow noreferrer">
Architektura aplikacji internetowych opartych o framework Laravel</a></strong>.</p>
<p>Umożliwiło mi to szersze spojrzenie na możliwości jakie daje nam Laravel i wzbogaconie poprzednio zdobytej
wiedzy o nowe doświadczenia.</p>
<h2>Moje zainteresowania</h2>
<p>W wolnym czasie przyjmuje małe zlecenia na strony lub serwisy internetowe. Uczę się nowych języków
programowania lub frameworków w znanych mi już technologiach. Hobbistycznie, tworzę także rozwiązania do
problemów przy prywatnych projektach.</p>
</div>
</section>
</template>
<style lang="scss">
section#about {
padding: 45px 0;
background-color: #fafafa !important;
h2 {
margin-top: 25px;
&:first-of-type {
margin-top: 10px;
}
}
h3 {
font-size: 1.3em;
margin-top: 8px;
margin-bottom: 10px;
}
a {
color: #8D8D8D;
&:hover {
color: #A2CF00;
}
}
}
</style>
<script>
export default {
name: 'About',
data () {
return {
publicPath: process.env.VUE_APP_BASE_URL + '/'
}
},
mounted () {
const header = {
title: this.$route.meta.title,
description: 'Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.'
}
this.$store.commit('setHeader', header)
},
destroyed () {
this.$store.commit('resetHeaderTitle')
this.$store.commit('resetHeaderDescription')
}
}
</script>

44
src/views/AboutView.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<section class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
<p class="font-bold">
Nazywam się Kamil Niemczycki. Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.
</p>
<h2 class="text-[2rem]">
Studia
</h2>
<p>
Jestem absolwentem Państwowej Wyższej Szkoły Zawodowej im. Witelona w Legnicy. Studiowałem na kierunku <em>Informatyka</em> o specjalności <em>Programowanie Aplikacji Mobilnych i Internetowych.</em>
</p>
<p>
Podczas studiów zdobyłem niezbędną wiedzę z zakresu projektowania, wdrażania i rozwoju aplikacji internetowych, mobilnych i desktopowych.
Zdobyłem także umiejętności pracy w zespole, które owocują tworzeniem merytorycznej dyskusji na temat części lub całości projektu.
</p>
<h3 class="text-[1.5rem]">
Kursy
</h3>
<p>
W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
<a
href="/download/certyfikat-laravel.pdf"
class="text-gray-500 underline hover:text-kamilcraft-green hover:no-underline"
target="_blank"
rel="noopener nofollow noreferrer"
>
Architektura aplikacji internetowych opartych o framework Laravel
</a>.
</p>
<p>
Umożliwiło mi to szersze spojrzenie na możliwości jakie daje nam Laravel i wzbogaconie poprzednio zdobytej
wiedzy o nowe doświadczenia.
</p>
<h2 class="text-[2rem]">
Moje zainteresowania
</h2>
<p>
W wolnym czasie przyjmuje małe zlecenia na strony lub serwisy internetowe. Uczę się nowych języków
programowania lub frameworków w znanych mi już technologiach. Hobbistycznie, tworzę także rozwiązania do
problemów przy prywatnych projektach.
</p>
</section>
</template>

74
src/views/Contact.vue
View File

@@ -1,74 +0,0 @@
<template>
<section class="contact">
<div class="container">
<MailContact />
<OtherContact />
</div>
</section>
</template>
<script>
import MailContact from '../components/sections/contacts/MailContact'
import OtherContact from '../components/sections/contacts/OtherContact'
export default {
name: 'Contact',
mounted () {
const header = {
title: this.$route.meta.title,
description: 'Chcesz o coś zapytać? Chciałbyś współpracować? Napisz!'
}
this.$store.commit('setHeader', header)
},
components: {
MailContact,
OtherContact
}
}
</script>
<style lang="scss">
@import "scss/media";
.contact {
padding: 25px 0;
.container {
display: flex;
align-items: flex-start;
justify-content: center;
}
.contact_container, .contact_info {
margin: 10px;
max-width: 500px;
background-color: #eaeaea;
border: 2px solid #dadada;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}
@include media-tablet {
.container {
display: block;
margin: 0 auto;
.contact_container, .contact_info {
margin: 0 auto 25px;
&:last-child {
margin-bottom: 0;
}
}
}
}
@include media-mobile {
.container {
padding: 0 10px;
.contact_container {
max-width: unset;
}
}
}
}
</style>

11
src/views/ContactView.vue Normal file
View File

@@ -0,0 +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>

42
src/views/Home.vue
View File

@@ -1,42 +0,0 @@
<template>
<section class="home">
<About />
<Experiences />
<FavoriteProjects />
</section>
</template>
<script>
import About from '../components/sections/About'
import Experiences from '../components/sections/Experiences'
import FavoriteProjects from '../components/sections/FavoriteProjects'
export default {
name: 'Home',
data () {
return {
publicPath: process.env.VUE_APP_BASE_URL + '/',
select_projects: []
}
},
mounted () {
const header = {
title: this.$route.meta.title,
description: [
'Chciałbym Państwa powitać na mojej stronie!',
'Przedstawiam tutaj część swojego życia związaną z programowaniem i projektowaniem aplikacji internetowych.'
]
}
this.$store.commit('setHeader', header)
},
destroyed () {
this.$store.commit('resetHeaderTitle')
this.$store.commit('resetHeaderDescription')
},
components: {
About,
Experiences,
FavoriteProjects
}
}
</script>

13
src/views/HomeView.vue Normal file
View File

@@ -0,0 +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 />
<Experiences />
<FavoriteProjects />
</section>
</template>

42
src/views/KamilCraftInfo.vue
View File

@@ -1,42 +0,0 @@
<template>
<section class="info">
<div class="container">
<h2>{{ $route.meta.title }}</h2>
<p>Wersja projektu: {{ project.version }}</p>
<p>Użyte paczki:</p>
<ul class="package-list">
<li v-for="(version, name) in project.dependencies" :key="name">{{ name }}: {{ version }}</li>
</ul>
</div>
</section>
</template>
<script>
const nodeProject = require('../../package.json')
export default {
name: 'KamilCraftInfo',
data () {
return {
project: {
version: '',
dependencies: []
}
}
},
mounted () {
this.project.version = nodeProject.version
this.project.dependencies = nodeProject.dependencies
}
}
</script>
<style lang="scss" scoped>
.container {
padding-top: 45px;
padding-bottom: 45px;
.package-list {
list-style: inside;
}
}
</style>

6
src/views/NotFound.vue → src/views/NotFoundView.vue
View File

@@ -10,12 +10,6 @@
</div> </div>
</template> </template>
<script>
export default {
name: 'NotFound'
}
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
.not-found { .not-found {
.container { .container {

227
src/views/Project.vue
View File

@@ -1,227 +0,0 @@
<template>
<section class="project" v-if="project">
<header class="project_header">
<h1>{{ project.title }}</h1>
<ul class="project_info">
<li class="info_text">
<font-awesome-icon class="icon" :icon="['far', 'clock']"/>
<span>{{ project.release_date }}</span>
</li>
<li class="info_text">
<font-awesome-icon class="icon" :icon="['far', 'user']"/>
<span>{{ project.author }}</span>
</li>
<li class="info_text">
<font-awesome-icon class="icon" :icon="['far', 'folder']"/>
<span>{{ getCategoryName(project.categories)[0] }}</span>
</li>
<li class="info_text">
<font-awesome-icon class="icon" :icon="['fas', 'code-branch']"/>
<span>{{ project.project_version }}</span>
</li>
<li class="info_text" v-if="project.project_url">
<font-awesome-icon class="icon" :icon="['fas', 'link']"/>
<span><a :href="project.project_url"
target="_blank"
rel="noopener nofollow noreferrer">Link</a></span>
</li>
</ul>
</header>
<div class="container">
<component :is="`figure`" class="project-photo">
<img :src="`${project.images.large}`" :alt="project.title">
</component>
<div class="content" v-html="markdownToHtml"></div>
</div>
</section>
<div v-else class="loading">
<div class="loading-animation"></div>
</div>
</template>
<script>
import { marked } from 'marked'
export default {
name: 'Project',
data () {
return {
publicPath: process.env.BASE_URL,
project: null
}
},
mounted () {
if (this.getCategories.length === 0) {
this.$store.dispatch('fetchCategories')
}
this.loadProject(this.$route.params.id)
},
computed: {
getCategories () {
return this.$store.getters.getCategories
},
markdownToHtml () {
return marked.parse(this.project.description)
}
},
methods: {
getCategoryName (categories) {
const categoriesText = []
categories.forEach(categoryElement => {
const cat = this.getCategories.find(category => category.slug === categoryElement)
if (cat) {
categoriesText.push(cat.name)
}
})
return categoriesText
},
loadProject (id) {
fetch(process.env.VUE_APP_API_URL + '/project/' + id)
.then(response => response.json())
.then(data => {
this.project = data
})
}
}
}
</script>
<style lang="scss">
@import "scss/default";
.project {
.project_header {
@extend .container;
text-align: center;
margin-bottom: 25px;
h1 {
font-size: 2.2em;
font-weight: lighter;
line-height: 2.4em;
}
.project_info {
display: flex;
list-style: none;
justify-content: center;
.info_text {
display: flex;
align-items: center;
.icon {
width: 2em;
}
span {
font-weight: lighter;
white-space: nowrap;
}
&:not(&:last-child) {
margin-right: 15px;
}
}
@include media-tablet {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 15px;
.info-text {
&:not(&:last-child) {
margin-right: 0;
}
}
}
}
}
.container {
.project-photo {
box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
}
.project-photo, .project-photo img {
width: 100%;
}
.project-photo img {
display: block;
object-fit: cover;
max-height: 500px;
}
.content {
margin: 35px 0;
a {
color: #8D8D8D;
&:hover {
color: #A2CF00;
}
}
h2, h3 {
margin-top: 15px;
margin-bottom: 5px;
}
h2:first-of-type {
margin-top: 0;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.4em;
}
p, ol li, ul li {
line-height: 1.8em;
font-size: 1.1em;
@include media-tablet {
font-size: 1.2em;
line-height: 1.5em;
}
}
p + ol, p + ul, p + blockquote {
margin-top: -10px;
}
ol, ul {
margin-bottom: 10px;
padding-inline-start: 2.1em;
li img {
display: block;
width: 100%;
padding: 0 5px 5px;
margin-top: .9em;
}
}
p {
margin-bottom: 10px;
text-align: justify;
/* text-indent: 1.5em; */
}
blockquote {
padding-left: 25px;
margin-left: 1.3em;
border-left: 1px solid rgb(116, 116, 116);
p {
text-indent: unset;
}
}
}
}
}
</style>

191
src/views/ProjectView.vue Normal file
View File

@@ -0,0 +1,191 @@
<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"
class="max-w-screen-xl mx-auto px-6 xl:px-2 py-8"
>
<header class="text-neutral-800 font-roboto">
<h1 class="text-center text-4xl font-light pb-5">
{{ project.title }}
</h1>
<ul class="grid grid-cols-2 gap-3 md:flex md:gap-5 justify-center list-none">
<li class="flex items-center gap-2">
<FontAwesomeIcon
class="w-4"
:icon="['far', 'clock']"
/>
<span>{{ project.release_date }}</span>
</li>
<li class="flex items-center gap-2">
<FontAwesomeIcon
class="w-4"
:icon="['far', 'user']"
/>
<span>{{ project.author }}</span>
</li>
<li class="flex items-center gap-2">
<FontAwesomeIcon
class="w-4"
:icon="['far', 'folder']"
/>
<span>{{ getCategoryName(project.categories) }}</span>
</li>
<li class="flex items-center gap-2">
<FontAwesomeIcon
class="w-4"
:icon="['fas', 'code-branch']"
/>
<span>{{ project.project_version }}</span>
</li>
<li
v-if="project.project_url"
class="flex items-center gap-2"
>
<FontAwesomeIcon
class="w-4"
:icon="['fas', 'link']"
/>
<span>
<a
:href="project.project_url"
target="_blank"
rel="noopener nofollow noreferrer"
>
Link
</a>
</span>
</li>
</ul>
</header>
<div class="pt-5">
<figure class="w-full shadow-xl">
<img
class="block max-h-[31.25rem] object-cover"
:src="project.images.large"
:alt="project.title"
>
</figure>
<Markdown
class="markdown mt-9"
:source="project.description"
/>
</div>
</section>
<div
v-else
class="flex items-center"
>
<div class="loading_animation" />
</div>
</template>
<style lang="scss">
@import "scss/default";
a {
@apply text-neutral-800 hover:text-kamilcraft-green;
}
.markdown {
h1 {
@apply text-4xl;
}
h2 {
@apply text-[2rem];
}
h3 {
@apply text-[1.5rem];
}
p, ol li, ul li {
@apply text-lg;
}
p + ol, p + ul, p + blockquote {
@apply -mb-2;
}
ol {
@apply list-decimal;
}
ul {
@apply list-disc;
}
ol, ul {
@apply mb-2.5;
padding-inline-start: 1.75rem;
li img {
@apply block w-full pr-1 pb-1 mt-3.5;
}
}
p {
@apply mb-2 text-justify;
}
blockquote {
@apply pl-6 ml-5 border-neutral-400;
p {
text-indent: unset;
}
}
}
</style>

153
src/views/Projects.vue
View File

@@ -1,153 +0,0 @@
<template>
<div>
<div class="project_categories">
<ul class="categories">
<li class="categories_element"
v-for="category in getCategories"
:key="category.slug"
:class="{ 'categories_element-active': categories.active === category.slug }"
@click="changeCategory(category.slug)">
<a :title="`Kategoria ${category.name}`">{{ category.name }}</a>
</li>
</ul>
</div>
<projects :projects="projects" />
<div v-if="projects.length === 0" class="loading">
<div class="loading_animation"></div>
</div>
</div>
</template>
<style lang="scss">
@import "scss/media";
.project_categories {
padding-top: 45px;
.categories {
display: flex;
justify-content: center;
list-style: none;
.categories_element {
position: relative;
cursor: pointer;
margin-right: 25px;
a {
color: var(--text-color);
&:hover {
color: black;
}
}
&:last-child {
margin-right: 0;
}
&-active {
&::after {
content: '';
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
bottom: 0;
width: 0;
height: 2px;
background-color: #A2CF00;
transform: translateY(8px);
animation: load-underline 300ms forwards;
}
}
@include media-mobile {
margin-right: 15px;
}
}
}
}
.projects {
padding-top: 25px;
padding-bottom: 25px;
}
@keyframes loading-animation {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes load-underline {
from {
width: 0;
}
to {
width: 100%;
}
}
</style>
<script>
import SelectedProjects from '../components/SelectedProjects'
export default {
name: 'Projects',
data () {
return {
categories: {
active: 'all'
},
publicPath: process.env.VUE_APP_BASE_URL + '/',
projects: []
}
},
computed: {
getCategories () {
return this.$store.getters.getCategories
}
},
mounted () {
this.loadAllData()
},
destroyed () {
this.$store.commit('resetHeaderTitle')
this.$store.commit('resetHeaderDescription')
},
methods: {
async loadAllData () {
await this.$store.dispatch('fetchCategories')
await this.$store.dispatch('fetchProjects').then(projects => {
/* projects.sort((firstProduct, secondProduct) => {
return secondProduct.id - firstProduct.id
}) */
this.projects = projects
}).catch(error => {
console.log(error)
})
},
loadListWhereCategory (category) {
this.projects = []
setTimeout(() => {
if (category !== 'all') {
const projects = this.$store.getters.getProjects.filter(project => project.categories.includes(category))
this.projects = projects
} else {
this.projects = this.$store.getters.getProjects
}
}, 500)
},
changeCategory (category) {
this.categories.active = category
this.loadListWhereCategory(category)
}
},
components: {
projects: SelectedProjects
}
}
</script>

105
src/views/ProjectsView.vue Normal file
View File

@@ -0,0 +1,105 @@
<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">
<ul class="flex justify-center list-none">
<li
v-for="category in getCategories"
:key="category.slug"
class="relative cursor-pointer mr-3 md:mr-5 last:mr-0 after:translate-y-2"
:class="{ 'category-active': selectedCategory(category.slug) }"
@click="changeCategory(category.slug)"
>
<a
class="text-gray-500 hover:text-black"
:title="`Kategoria ${category.name}`"
>{{ category.name }}</a>
</li>
</ul>
</div>
</SelectedProjects>
<div
v-if="projects.length === 0"
class="loading"
>
<div class="loading_animation" />
</div>
</template>
<style lang="scss">
@import "scss/media";
.category-active::after {
@apply absolute mx-auto left-0 right-0 bottom-0 h-0.5;
background-color: #A2CF00;
animation: load-underline 300ms forwards;
}
@keyframes loading-animation {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes load-underline {
from {
width: 0;
}
to {
width: 100%;
}
}
</style>

4
src/vue-meta/index.js
View File

@@ -1,4 +0,0 @@
import Vue from 'vue'
import VueMeta from 'vue-meta'
Vue.use(VueMeta)

26
tailwind.config.js Normal file
View File

@@ -0,0 +1,26 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{vue,js}",
],
darkMode: true,
theme: {
extend: {
fontFamily: {
'arial': ['Arial', 'sans-serif'],
'roboto': ['Roboto', 'sans-serif'],
'thasadith': ['Thasadith', 'sans-serif']
},
fontSize: {
'logo-size': '2.5rem',
},
screens: {
'header-content': '900px'
},
colors: {
'kamilcraft-green': 'rgb(var(--color-kamilcraft-green) / <alpha-value>)'
}
},
},
plugins: [],
}

31
vite.config.js Normal file
View 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,
},
};
});

6
vue.config.js
View File

@@ -1,6 +0,0 @@
module.exports = {
publicPath: '/',
devServer: {
disableHostCheck: true
}
}