updated menu - tailwind

installed tailwind
Upgrade to vue 3 (#1 )
2022-07-13 13:42:27 +02:00 · 2022-07-13 09:58:17 +02:00 · 2022-07-13 09:48:44 +02:00
40 changed files with 10430 additions and 19915 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -1,3 +1,4 @@
 > 1%
 last 2 versions
 not dead
 not ie 11
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -4,12 +4,9 @@ module.exports = {
    node: true
  },
  extends: [
-    'plugin:vue/essential',
+    'eslint:recommended',
-    '@vue/standard'
+    'plugin:vue/vue3-recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
--- a/README.md
+++ b/README.md
@@ -1,10 +1,10 @@
 # kamilcraft.com
 Project of my website - portfolio
-The project uses a closed API at https://api.kamilcraft.com
+The project uses the [API](https://github.com/kamilniemczycki/kamilcraft-api) at https://api.kamilcraft.com
 ## Dependency installation
 ```
-npm install
+npm install --legacy-peer-deps
 ```
 ### Development
--- a/css/index.css
+++ b/css/index.css
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -8,36 +8,44 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
-    "@fortawesome/free-regular-svg-icons": "^5.15.4",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@fortawesome/vue-fontawesome": "^2.0.2",
+    "@fortawesome/vue-fontawesome": "^3.0.1",
-    "bootstrap": "^5.0.2",
+    "core-js": "^3.8.3",
-    "core-js": "^3.15.2",
+    "marked": "^4.0.18",
-    "jquery": "^3.6.0",
+    "vue": "^3.2.37",
    "marked": "^4.0.12",
    "popper.js": "^1.16.1",
    "vue": "^2.6.14",
    "vue-meta": "^2.4.0",
-    "vue-router": "^3.5.2",
+    "vue-router": "^4.1.2",
-    "vuex": "^3.6.2"
+    "vuex": "^4.0.2"
  },
  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
+    "@babel/core": "^7.12.16",
-    "@vue/cli-plugin-eslint": "^3.1.1",
+    "@babel/eslint-parser": "^7.12.16",
-    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-service": "^4.5.13",
+    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/eslint-config-standard": "^5.1.2",
+    "@vue/cli-service": "~5.0.0",
-    "babel-eslint": "^10.1.0",
+    "autoprefixer": "^10.4.7",
-    "eslint": "^6.7.2",
+    "eslint": "^7.32.0",
-    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-vue": "^8.0.3",
-    "eslint-plugin-node": "^11.1.0",
+    "postcss": "^8.4.14",
-    "eslint-plugin-promise": "^4.2.1",
+    "sass": "^1.53.0",
-    "eslint-plugin-standard": "^4.0.0",
+    "sass-loader": "^13.0.2",
-    "eslint-plugin-vue": "^6.2.2",
+    "tailwindcss": "^3.1.6"
-    "sass": "^1.26.5",
+  },
-    "sass-loader": "^8.0.2",
+  "eslintConfig": {
-    "vue-template-compiler": "^2.6.11"
+    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
 module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
 }
--- a/scss/_btn.scss
+++ b/scss/_btn.scss
@@ -35,7 +35,11 @@ $btn-colors: (
  font-size: 1.05em;
  color: map-get($colors, font);
-  &:hover {
+  &[disabled] {
    opacity: .7;
  }
  &:hover:not([disabled]) {
    $hovers: map-get($colors, hover);
    background-color: map-get($hovers, bg);
    color: map-get($hovers, font);
@@ -83,7 +87,7 @@ $btn-colors: (
  font-size: 1.2em;
  border: unset;
-  &:hover {
+  &:hover:not([disabled]) {
    background-color: $default-color;
    color: $dark-gray;
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,18 @@
 <template>
-  <main rel="main" id="app">
+  <main
    rel="main"
  >
    <SiteHeader />
-    <router-view />
+    <RouterView />
-    <Footer />
+    <FooterComponent />
  </main>
 </template>
 <script setup>
 import SiteHeader from './components/SiteHeader'
 import FooterComponent from './components/FooterComponent'
 </script>
 <style lang="scss">
 #app {
  font-family: var(--font-family);
@@ -14,16 +21,3 @@
  color: var(--text-color);
 }
 </style>
 <script>
 import SiteHeader from './components/SiteHeader'
 import Footer from './components/Footer'
 export default {
  name: 'App',
  components: {
    SiteHeader,
    Footer
  }
 }
 </script>
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -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>
--- a/src/components/FooterComponent.vue
+++ b/src/components/FooterComponent.vue
@@ -1,27 +1,43 @@
 <template>
  <footer class="footer">
    <div class="footer_container">
-      <div class="container_logo">Kamil<span class="logo_element">Craft</span></div>
+      <div class="container_logo">
        Kamil<span class="logo_element">Craft</span>
      </div>
      <ul class="socials">
-        <li class="social_link"
+        <li
          v-for="link in socialLinks"
-            :key="link.title.slug">
+          :key="link.title.slug"
-          <a class="link"
+          class="social_link"
        >
          <a
            class="link"
            :href="link.link"
            :title="link.title"
            target="_blank"
-             rel="noopener nofollow noreferrer">
+            rel="noopener nofollow noreferrer"
-            <font-awesome-icon class="icon" :icon="['fab', link.icon]" />
+          >
            <font-awesome-icon
              class="icon"
              :icon="['fab', link.icon]"
            />
            <span class="social_title">{{ link.title }}</span>
            <span class="social_shortcut">{{ link.shortcut }}</span>
          </a>
        </li>
      </ul>
    </div>
-    <div class="container"></div>
+    <div class="container" />
  </footer>
 </template>
 <script setup>
 const socialLinks = [
  { link: 'https://www.youtube.com/user/kamilniemczycki', icon: 'youtube', title: 'Oglądaj mnie na YouTube', shortcut: 'YouTube' },
  { link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku', shortcut: 'Facebook' }
 ]
 </script>
 <style lang="scss" scoped>
@import "scss/default";
@@ -104,17 +120,3 @@
  }
 }
 </style>
 <script>
 export default {
  name: 'Footer',
  data () {
    return {
      socialLinks: [
        { link: 'https://www.youtube.com/user/kamilniemczycki', icon: 'youtube', title: 'Oglądaj mnie na YouTube', shortcut: 'YouTube' },
        { link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku', shortcut: 'Facebook' }
      ]
    }
  }
 }
 </script>
--- a/src/components/GhostButton.vue
+++ b/src/components/GhostButton.vue
@@ -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>
--- a/src/components/HomePageElement.vue
+++ b/src/components/HomePageElement.vue
@@ -1,10 +1,16 @@
 <template>
  <div class="hello">
-    <h1>{{ $route.meta.title }}</h1>
+    <h1>{{ route.meta.title }}</h1>
    <p>Witam na mojej stronie głównej. Wszystkich zainteresowanych oczywiście 😁</p>
  </div>
 </template>
 <script setup>
 import { useRoute } from 'vue-router'
 const route = useRoute()
 </script>
 <style scoped lang="scss">
  h1 {
    margin: 30px 0 20px;
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -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>
--- a/src/components/NavigationHeader.vue
+++ b/src/components/NavigationHeader.vue
@@ -0,0 +1,274 @@
 <template>
  <div
    class="flex relative items-center justify-between md:justify-start max-w-screen-lg 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-lime-500">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-lime-500"
              :class="[ (!isActive && isHomePage && !isClicked) ? 'text-white' : (isActive ? 'text-lime-500' : 'text-gray-500') ]"
              @click="navigate"
            >
              {{ menuItem.title }}
            </a>
          </RouterLink>
        </li>
      </ul>
    </nav>
  </div>
 </template>
 <script setup>
 import { defineProps, ref, computed } from 'vue'
 defineProps({
  isHomePage: {
    type: Boolean,
    default: false
  }
 })
 const menuItems = [
  {
    slug: 'start',
    title: 'Start',
    uri: '/'
  },
  {
    slug: 'projects',
    title: 'Projekty',
    uri: '/projects'
  },
  {
    slug: 'about',
    title: 'O mnie',
    uri: '/about'
  },
  {
    slug: 'contact',
    title: 'Kontakt',
    uri: '/contact'
  }
 ]
 const clicked = ref(false)
 const isClicked = computed(() => clicked.value)
 function changeClickedStatus() {
  clicked.value = !clicked.value
 }
 function clickMenu() {
  changeClickedStatus()
 }
 function linkClicked() {
  if (isClicked.value) {
    changeClickedStatus()
  }
 }
 </script>
 <style lang="scss">
 .clicked-menu {
  animation: bg-menu-animation 500ms forwards ease-in-out;
 }
 .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>
 <!--<style lang="scss" scoped>
 //@import "scss/media";
 //
 //.sub-page > .container {
 //  .nav-btn {
 //    color: #8D8D8D;
 //  }
 //
 //  .nav .site-menu .menu-element {
 //    a:not([class|=router-link]) {
 //      color: #8D8D8D;
 //
 //      &:hover {
 //        color: #A2CF00;
 //      }
 //    }
 //  }
 //}
 //.container {
 //  display: flex;
 //  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>-->
--- a/src/components/SelectedProjects.vue
+++ b/src/components/SelectedProjects.vue
@@ -1,29 +1,88 @@
 <template>
  <div class="projects">
-    <slot></slot>
+    <slot />
    <div class="container">
-      <div class="project"
+      <div
        v-for="project in projects"
-           :key="project.title.slug">
+        :key="project.title.slug"
-        <img v-if="project.images.small" class="project_image" :src="project.images.small" :alt="project.title" />
+        class="project"
-        <img v-else-if="project.images.large" class="project_image" :src="project.images.large" :alt="project.title" />
+      >
        <img
          v-if="project.images.small"
          class="project_image"
          :src="project.images.small"
          :alt="project.title"
        >
        <img
          v-else-if="project.images.large"
          class="project_image"
          :src="project.images.large"
          :alt="project.title"
        >
        <div class="project_content">
-          <h3 class="project_title">{{ project.title }}</h3>
+          <h3 class="project_title">
-          <div class="project_release">{{ project.version }}</div>
+            {{ project.title }}
-          <div class="project_description" v-html="markdownToText(project)"></div>
+          </h3>
          <div class="project_release">
            {{ project.version }}
          </div>
          <div
            class="project_description"
            v-html="markdownToText(project)"
          />
        </div>
        <div class="more-button">
-          <base-btn has-icon
+          <BaseButton
            has-icon
            icon="eye"
            is-reverse
-                    @click.native="$router.push({ name: 'Project', params: { id: project.id } })"
+            class="btn"
-                    class="btn">O projekcie</base-btn>
+            @click="router.push({ name: 'Project', params: { id: project.id } })"
          >
            O projekcie
          </BaseButton>
        </div>
      </div>
    </div>
  </div>
 </template>
 <script setup>
 import { defineProps, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 import BaseButton from './buttons/BaseButton'
 import { marked } from 'marked'
 defineProps({
  projects: {
    type: Array,
    default: () => []
  }
 })
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
 onMounted(() => {
  const header = {
    title: route.meta.title,
    description: [
      'Witam Państwa na podstronie z moimi projektami!'
    ]
  }
  store.commit('setHeader', header)
 })
 function markdownToText (project) {
  const projectText = marked.parse(project.description)
  const nodeElement = document.createElement('div')
  nodeElement.innerHTML = projectText
  return nodeElement.querySelector('p').innerText.substr(0, 350)
 }
 </script>
 <style lang="scss">
@import "scss/media";
@@ -178,40 +237,3 @@
  }
 }
 </style>
 <script>
 import BaseButton from './BaseButton'
 import { marked } from 'marked'
 export default {
  name: 'SelectedProjects',
  data () {
    return {}
  },
  mounted () {
    const header = {
      title: this.$route.meta.title,
      description: [
        'Witam Państwa na podstronie z moimi projektami!'
      ]
    }
    this.$store.commit('setHeader', header)
  },
  methods: {
    markdownToText (project) {
      const projectText = marked.parse(project.description)
      const nodeElement = document.createElement('div')
      nodeElement.innerHTML = projectText
      return nodeElement.querySelector('p').innerText.substr(0, 350)
    }
  },
  props: {
    projects: {
      type: Array
    }
  },
  components: {
    'base-btn': BaseButton
  }
 }
 </script>
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -1,48 +1,45 @@
 <template>
  <header :class="thisClass">
-    <navigation/>
+    <Navigation :is-home-page="isHome" />
-    <div v-if="isTitle" class="header-info" :class="{ 'header-info-home': isHome }">
+    <div
      v-if="isTitle"
      class="header-info"
      :class="{ 'header-info-home': isHome }"
    >
      <h1>{{ getTitle }}</h1>
-      <p v-if="isDescription && descriptionType === 'string'">{{ getDescription }}</p>
+      <p v-if="isDescription && descriptionType === 'string'">
-      <p v-else-if="isDescription && descriptionType === 'array'"
+        {{ getDescription }}
-         v-for="(desc, key) in getDescription" :key="key">{{ desc }}</p>
+      </p>
      <p
        v-for="(desc, key) in getDescription"
        v-else-if="isDescription && descriptionType === 'array'"
        :key="key"
      >
        {{ desc }}
      </p>
    </div>
  </header>
 </template>
-<script>
+<script setup>
-import Navigation from '@/components/Navigation'
+import { computed } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
 import Navigation from './NavigationHeader'
-export default {
+const store = useStore()
-  name: 'SiteHeader',
+const route = useRoute()
-  computed: {
+
-    isHome () {
+const isHome = computed(() => route.path === '/')
-      return this.$route.path === '/'
+const thisClass = computed(() => [isHome.value ? 'home-page' : 'sub-page'])
-    },
+const getTitle = computed(() => store.getters.getHeader.title)
-    thisClass () {
+const isTitle = computed(() => getTitle.value !== null)
-      return [this.isHome ? 'home-page' : 'sub-page']
+const getDescription = computed(() => store.getters.getHeader.description)
-    },
+const isDescription = computed(() => getDescription.value !== null)
-    getTitle () {
+const descriptionType = computed(() => {
-      return this.$store.getters.getHeader.title
+  const isArray = getDescription.value instanceof Array
-    },
+  return isArray ? 'array' : typeof getDescription.value
-    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">
--- a/src/components/buttons/BaseButton.vue
+++ b/src/components/buttons/BaseButton.vue
@@ -0,0 +1,45 @@
 <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>
 <script setup>
 import { defineProps } from 'vue'
 defineProps({
  hasIcon: {
    type: Boolean,
    default: false
  },
  icon: {
    type: String,
    default: ''
  },
  isReverse: {
    type: Boolean,
    default: false
  }
 })
 </script>
 <style lang="scss" scoped>
@import "../../../scss/btn";
 .btn {
  @include button($has-icon: true);
 }
 .btn-reverse {
  @include button(true, true);
 }
 </style>
--- a/src/components/buttons/GhostButton.vue
+++ b/src/components/buttons/GhostButton.vue
@@ -0,0 +1,33 @@
 <template>
  <button class="btn">
    <font-awesome-icon
      v-if="hasIcon && icon"
      class="icon"
      :icon="icon"
    />
    <slot />
  </button>
 </template>
 <script setup>
 import { defineProps } from 'vue'
 defineProps({
  hasIcon: {
    type: Boolean,
    default: false
  },
  icon: {
    type: String,
    default: ''
  }
 })
 </script>
 <style lang="scss" scoped>
@import "../../../scss/btn";
 .btn {
  @include ghost-button();
 }
 </style>
--- a/src/components/sections/AboutSection.vue
+++ b/src/components/sections/AboutSection.vue
@@ -3,23 +3,40 @@
    <div class="container">
      <div id="grid">
        <div id="grid-text">
-          <h2 class="name">Kamil Niemczycki</h2>
+          <h2 class="name">
-          <div class="tagline">Web Developer</div>
+            Kamil Niemczycki
-          <p>Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
+          </h2>
-            W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.</p>
+          <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
+            <BaseButton
              has-icon
              icon="portrait"
              is-reverse
-                      @click.native="scrollTo('.selected-projects')">Wybrane projekty</base-btn>
+              @click="scrollTo('.selected-projects')"
-            <base-btn has-icon
+            >
              Wybrane projekty
            </BaseButton>
            <BaseButton
              has-icon
              icon="user"
-                      @click.native="$router.push('about')">Więcej o mnie</base-btn>
+              @click="router.push('about')"
            >
              Więcej o mnie
            </BaseButton>
          </div>
        </div>
        <div id="grid-photo">
          <figure id="about-photo">
-            <img :src="`${publicPath}assets/me.jpg`" />
+            <img
              :src="`${publicPath}assets/me.jpg`"
              alt="Moje zdjęcie"
            >
          </figure>
        </div>
      </div>
@@ -27,6 +44,20 @@
  </div>
 </template>
 <script setup>
 import BaseButton from '../buttons/BaseButton'
 import { useRouter } from 'vue-router'
 const router = useRouter()
 const publicPath = process.env.VUE_APP_BASE_URL + '/'
 function scrollTo(id) {
  document.querySelector(id).scrollIntoView({
    behavior: 'smooth'
  })
 }
 </script>
 <style lang="scss">
@import "scss/media";
@@ -122,24 +153,3 @@
  }
 }
 </style>
 <script>
 import BaseButton from '../BaseButton'
 export default {
  data () {
    return {
      publicPath: process.env.VUE_APP_BASE_URL + '/'
    }
  },
  methods: {
    scrollTo (id) {
      document.querySelector(id).scrollIntoView({
        behavior: 'smooth'
      })
    }
  },
  components: {
    'base-btn': BaseButton
  }
 }
 </script>
--- a/src/components/sections/Experiences.vue
+++ b/src/components/sections/Experiences.vue
@@ -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>
--- a/src/components/sections/ExperiencesSection.vue
+++ b/src/components/sections/ExperiencesSection.vue
@@ -0,0 +1,255 @@
 <template>
  <div class="experiences">
    <div class="container">
      <h2>Wykorzystywane technologie</h2>
      <p>
        Programowaniem stron internetowych zajmuję się najmłodszych lat, czyli od 2011 roku. Pierwsze projekty były
        proste i najczęściej na użytek własny. Jednakże, doświadczenie zebrane przez lata pomogło mi wyselekcjonować
        technologie, które wspomagają pisanie i rozwijanie oprogramowania.
      </p>
      <div class="skills">
        <div
          v-for="(skill, skillKey) in list"
          :key="skillKey"
          class="skill-group"
        >
          <header class="skill-header">
            <div class="tech-icons">
              <font-awesome-icon
                v-for="(icon, iconKey) in skill.icons"
                :key="iconKey"
                :class="icon.class"
                :icon="['fab', icon.name]"
                :alt="icon.alt"
                :title="icon.title"
              />
            </div>
            <h3>{{ skill.header }}</h3>
          </header>
          <p v-if="skill.showMore.value || skill.description.length < 200">
            {{ skill.description }}
          </p>
          <p v-else>
            {{ parseText(skill.description) }}... <a @click="changeMoreStatus(skill)">Więcej</a>
          </p>
        </div>
      </div>
    </div>
  </div>
 </template>
 <script setup>
 import { ref } from 'vue'
 let list = [
  {
    icons: [
      {
        class: 'icon-php',
        name: 'php',
        alt: 'Ikona przedstawiająca język PHP',
        title: 'Ikona PHP'
      },
      {
        class: 'icon-laravel',
        name: 'laravel',
        alt: 'Ikona przedstawiająca framework Laravel',
        title: 'Ikona Laravel'
      }
    ],
    header: 'PHP & Laravel',
    showMore: ref(false),
    description: `PHP wraz z frameworkiem Laravel wykorzystuję do tworzenia nowych projektów. Laravel znacznie
      przyspiesza pisanie części backendowej, odciążając programistę od pisania skomplikownych filtrów i monotonnych
      walidacji przyjmowanych danych od użytkowników. Jednakże, choć dobrze pracuje mi się w środowisku Laravel
      w miarę możliwości staram się pisać kod w samym PHP z wykorzystaniem bibliotek i paczek autorskich.`
  },
  {
    icons: [
      {
        class: 'icon-js',
        name: 'js-square',
        alt: 'Ikona przedstawiająca język JavaScript',
        title: 'Ikona JavaScript'
      }
    ],
    header: 'JavaScript Vanilla',
    showMore: ref(false),
    description: `JavaScript wykorzystuję głównie do logiki frontendowej jak i pisania kodu wykonywalnego po stronie
      przeglądarki internetowej. Wykorzystując możliwości reaktywnych frameworków mogę przyspieszyć pisanie UI.`
  },
  {
    icons: [
      {
        class: 'icon-vue',
        name: 'vuejs',
        alt: 'Ikona przedstawiająca framework Vue.js',
        title: 'Ikona Vue.js'
      }
    ],
    header: 'Vue',
    showMore: ref(false),
    description: `Framework ten wspomaga mnie w pisaniu aplikacji frontendowej. Przyspiesza tworzenie warstwy
      wizualnej, obsługę interakcji z użytkownikiem i bindowanie zdefiniowanych pól, które są odpowiednio renderowane
      przez przeglądarkę. To wszystko, umożliwia łatwe łączenie CSS i HTML z logiką i otrzymanymi danymi z API.`
  },
  {
    icons: [
      {
        class: 'icon-html5',
        name: 'html5',
        alt: 'Ikona przedstawiająca HTML5',
        title: 'Ikona HTML5'
      },
      {
        class: 'icon-css3',
        name: 'css3-alt',
        alt: 'Ikona przedstawiająca CSS3',
        title: 'Ikona CSS3'
      }
    ],
    header: 'HTML & CSS',
    showMore: ref(false),
    description: `HTML i CSS to już nieodłączne technologie, które w łatwy sposób umożliwiają nadanie wizualnej
      spójności dla treści, obrazów lub ułożenia elementów. Nie raz, odpowednie zaprojektowanie interfejsu użytkownika
      przyspiesza integrację z naszą stroną/sklepem. Ma to przełożenie na zyski dla obu stron - firmy (finanse)
      i klienta (czas).`
  },
  {
    icons: [
      {
        class: 'icon-node',
        name: 'node',
        alt: 'Ikona przedstawiająca Node.js',
        title: 'Ikona Node.js'
      }
    ],
    header: 'Node.js',
    showMore: ref(false),
    description: `Node jest wieloplatformowym środowiskiem uruchomieniowym, umożliwiającym uruchomienie kodu
      JavaScript po stronie backendowej. Jest to bardzo przyjemny język, który ułatwia projektowanie logiki biznesowej
      aplikacji, dla mniej wymagających serwisów pod względem analizy i przetwarzania danych.`
  },
  {
    icons: [
      {
        class: 'icon-sass',
        name: 'sass',
        alt: 'Ikona przedstawiająca Sass',
        title: 'Ikona Sass'
      }
    ],
    header: 'Sass',
    showMore: ref(false),
    description: `Sass zwiększa czytelność kodu dla programisty. Zawiera abstrakcje znane z języków obiektowych,
      przy czym ogranicza powtarzalność i umożliwia optymalizację kodu. Kompilacja napisanego stylu w Sass jest
      przekształcana do formy czytelnej dla silnika graficznego przeglądarki, co przyspiesza proces generowania strony.`
  }
 ]
 function parseText(text) {
  let shortText = text.substr(0, 200)
  if (shortText.slice(-1) === ' ') {
    shortText = text.substr(0, 199)
  }
  return shortText
 }
 function changeMoreStatus(skill) {
  skill.showMore.value = !skill.showMore.value
 }
 </script>
 <style lang="scss">
@import "scss/media";
 .experiences {
  .container {
    padding-top: 45px;
    padding-bottom: 45px;
    .skills {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      column-gap: 20px;
      row-gap: 20px;
      margin-top: 15px;
      .skill-group {
        background-color: #fafafa;
        padding: 15px;
        border-radius: 5px;
        .tech-icons {
          font-size: 1.8em;
          margin-bottom: 3px;
          & > svg[class*='icon'] {
            margin-right: 10px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
        h3 {
          font-size: 1.2em;
          line-height: 1.6em;
          font-weight: bold;
        }
        .skill-list {
          margin-block: auto;
          padding-inline: inherit;
          margin-left: 5px;
          list-style-type: initial;
        }
        p {
          font-size: .9em;
          a {
            color: #8D8D8D;
            cursor: pointer;
          }
        }
        &:hover {
          background-color: rgba(0, 0, 0, .03);
        }
      }
      @include media-small {
        grid-template-columns: repeat(3, 1fr);
      }
      @include media-tablet {
        grid-template-columns: repeat(2, 1fr);
      }
      @include media-mobile {
        grid-template-columns: repeat(1, 1fr);
      }
    }
  }
 }
 .icon-js {
  color: #F1DE4F;
 }
 .icon-php {
  color: #777bb3;
 }
 .icon-laravel {
  color: #FF2D20;
 }
 .icon-vue {
  color: #64B687;
 }
 .icon-html5 {
  color: #DE6E3C;
 }
 .icon-node {
  color: #64B687;
 }
 .icon-css3 {
  color: #53A7DC;
 }
 .icon-sass {
  color: #BF6B97;
 }
 </style>
--- a/src/components/sections/FavoriteProjects.vue
+++ b/src/components/sections/FavoriteProjects.vue
@@ -7,42 +7,34 @@
      </div>
    </projects>
    <div class="more-button">
-      <GhostButton @click.native="$router.push('projects')">
+      <GhostButton @click="router.push('projects')">
        ZOBACZ WIĘCEJ
      </GhostButton>
    </div>
  </section>
 </template>
-<script>
+<script setup>
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import Projects from '../SelectedProjects'
-import GhostButton from '../GhostButton'
+import GhostButton from '../buttons/GhostButton'
-export default {
+const router = useRouter()
-  name: 'FavoriteProjects',
+
-  data () {
+let select_projects = ref([])
-    return {
+
-      publicPath: process.env.VUE_APP_BASE_URL + '/',
+onMounted(() => {
-      select_projects: []
+  loadProjectList()
-    }
+})
-  },
+
-  mounted () {
+function loadProjectList() {
    this.loadProjectList()
  },
  methods: {
    loadProjectList () {
  fetch(process.env.VUE_APP_API_URL + '/projects?category=selected')
    .then(response => response.json())
    .then(data => {
-          this.select_projects = data
+      select_projects.value = data
    })
 }
  },
  components: {
    GhostButton,
    Projects
  }
 }
 </script>
 <style lang="scss" scoped>
--- a/src/components/sections/contacts/MailContact.vue
+++ b/src/components/sections/contacts/MailContact.vue
@@ -1,22 +1,106 @@
 <template>
  <div class="contact_container">
-    <div class="message"></div>
+    <div
-    <header class="container_head">Formularz kontaktowy:</header>
+      v-if="hasMessageError"
-    <form id="form-point" @submit="formSubmit">
+      class="message message_error"
-      <input v-model="emailValue" class="contact_input" type="text" name="email" placeholder="Twój adres e-mail." />
+    >
-      <textarea v-model="messageValue" class="contact_input" name="message" placeholder="Twoja wiadomość."></textarea>
+      {{ messageError }}
-      <input v-model="senderValue" class="contact_input" type="text" name="sender" placeholder="Twój podpis." />
+    </div>
-      <base-btn is-reverse :disabled="buttonDisabled">Wyślij</base-btn>
+    <div
      v-if="hasMessageOkStatus"
      class="message message_ok"
    >
      {{ messageOk }}
    </div>
    <header class="container_head">
      Formularz kontaktowy:
    </header>
    <form
      id="form-point"
      @submit="formSubmit"
    >
      <label
        class="label-info"
        :class="{ 'label-error': isEmailError }"
        for="email"
      >
        E-mail:
      </label>
      <input
        id="email"
        v-model="emailValue"
        class="contact_input"
        :class="{ 'contact_input-error': isEmailError }"
        type="text"
        name="email"
        placeholder="przemek.kowalski@gmail.com"
      >
      <span
        v-if="isEmailError"
        class="error-message"
      >
        E-mail musi być poprawny, np. przemek.kowalski@gmail.com
      </span>
      <label
        class="label-info"
        :class="{ 'label-error': isMessageError }"
        for="message"
      >
        Wiadomość:
      </label>
      <textarea
        id="message"
        v-model="messageValue"
        class="contact_input"
        :class="{ 'contact_input-error': isMessageError }"
        name="message"
        placeholder="Chciałbym zlecić wykonanie strony..."
      />
      <span
        v-if="isMessageError"
        class="error-message"
      >
        Wiadomość musi zawierać przynajmniej 3 znaki!
      </span>
      <label
        class="label-info"
        :class="{ 'label-error': isSenderError }"
        for="sender"
      >
        Podpis nadawcy:
      </label>
      <input
        id="sender"
        v-model="senderValue"
        class="contact_input"
        :class="{ 'contact_input-error': isSenderError }"
        type="text"
        name="sender"
        placeholder="np. Przemek Kowalski"
      >
      <span
        v-if="isSenderError"
        class="error-message"
      >
        Podpis musi zawierać przynajmniej 3 znaki!
      </span>
      <BaseButton
        is-reverse
        :disabled="isButtonDisabled"
      >
        Wyślij
      </BaseButton>
    </form>
  </div>
 </template>
-<script>
+<script setup>
-import BaseButton from '../../BaseButton'
+import BaseButton from '../../buttons/BaseButton'
 import { ref, reactive, watch, computed } from 'vue'
 function emailValidate (mailObj) {
  const mailFormat = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/
-  return !!mailObj.value.match(mailFormat)
+  return mailObj.match(mailFormat)
 }
 async function postData (url = '', data = {}) {
@@ -31,101 +115,91 @@ async function postData (url = '', data = {}) {
  return response.json()
 }
-export default {
+const buttonDisabled = ref(false)
-  name: 'MailContact',
+const statusError = ref(0)
-  data () {
+const emailValue = ref('')
-    return {
+const messageValue = ref('')
-      buttonDisabled: false,
+const senderValue = ref('')
-      statusError: 0,
+
-      email: {},
+const messageError = ref('')
-      emailValue: '',
+const messageOk = ref('')
-      message: {},
+
-      messageValue: '',
+const errors = reactive({
-      sender: {},
+  email: false,
-      senderValue: ''
+  message: false,
  sender: false
 })
 const isButtonDisabled = computed(() => buttonDisabled.value || errors.email || errors.message || errors.sender)
 const isEmailError = computed(() => errors.email)
 const isMessageError = computed(() => errors.message)
 const isSenderError = computed(() => errors.sender)
 const hasMessageError = computed(() => messageError.value)
 const hasMessageOkStatus = computed(() => messageOk.value && !hasMessageError.value)
 watch([statusError, emailValue], ([errorCount, value]) => {
  errors.email = errorCount > 0 && !emailValidate(value)
 })
 watch([statusError, messageValue], ([errorCount, value]) => {
  errors.message = errorCount > 0 && (value === '' || value.length < 3)
 })
 watch([statusError, senderValue], ([errorCount, value]) => {
  errors.sender = errorCount > 0 && (value === '' || value.length < 3)
 })
 function clearErrors() {
  statusError.value = 0
  errors.email = false
  errors.message = false
  errors.sender = false
 }
-  },
+
-  components: {
+function checkForm() {
-    'base-btn': BaseButton
+  clearErrors()
-  },
+  if (!emailValidate(emailValue.value)) {
-  watch: {
+    errors.email = true
-    emailValue (value) {
+    statusError.value++
      if (this.statusError > 0 && emailValidate(this.email)) {
        this.email.classList.remove('contact_input-error')
  }
-    },
+  if (messageValue.value === '') {
-    messageValue (value) {
+    errors.message = true
-      if (this.statusError > 0 && value !== '') {
+    statusError.value++
        this.message.classList.remove('contact_input-error')
  }
-    },
+  if (senderValue.value === '') {
-    senderValue (value) {
+    errors.sender = true
-      if (this.statusError > 0 && value !== '') {
+    statusError.value++
        this.sender.classList.remove('contact_input-error')
  }
 }
-  },
+
-  methods: {
+function formSubmit(event) {
    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]
+  checkForm()
      this.message = event.target[1]
      this.sender = event.target[2]
-      this.clearErrors()
+  if (statusError.value === 0) {
-      this.checkForm()
+    console.log('Send!')
-
+    buttonDisabled.value = true
-      const messageElement = document.querySelector('.message')
+    postData('https://kamilcraft.com/send', {
-      messageElement.classList.remove('message_ok', 'message_error')
+      email: emailValue.value,
-
+      message: messageValue.value,
-      if (this.statusError === 0) {
+      sender: senderValue.value
        this.buttonDisabled = true
        postData('/send', {
          email: this.emailValue,
          message: this.messageValue,
          sender: this.senderValue
    }).then(result => {
-          messageElement.classList.add(
+      if (result.error) {
-            result.error ? 'message_error' : 'message_ok'
+        messageError.value = result.message
-          )
+      } else {
-
+        messageOk.value = result.message
-          messageElement.textContent = result.message
+        messageValue.value = ''
-          if (!result.error) {
+        emailValue.value = ''
-            this.messageValue = ''
+        senderValue.value = ''
            this.emailValue = ''
            this.senderValue = ''
      }
-          this.buttonDisabled = false
+      buttonDisabled.value = false
    }).catch(() => {
-          messageElement.classList.add('message_error')
+      messageError.value = 'Wystąpił błąd podczas wysyłania wiadomości. Proszę spróbować później.'
-          messageElement.textContent = 'Wystąpił błąd podczas wysyłania wiadomości. Proszę spróbować później.'
+      buttonDisabled.value = false
          this.buttonDisabled = false
    })
  }
 }
  }
 }
 </script>
 <style lang="scss" scoped>
@@ -153,7 +227,20 @@ export default {
  font-weight: bold;
 }
-.contact_container input, .contact_container textarea {
+.contact_container {
  .label-info {
    width: 97%;
    padding-bottom: 5px;
    color: #7a7a7a;
  }
  .error-message {
    width: 97%;
    padding: 5px 0 10px;
    color: #d44950;
  }
  input, textarea {
    width: 97%;
    max-width: 97%;
    border: 0;
@@ -162,9 +249,14 @@ export default {
    font-size: 1em;
    font-family: var(--font-family);
    line-height: 1.3em;
-  margin-bottom: 10px;
+    margin-bottom: 15px;
    border-radius: 5px;
  }
 }
 .contact_input::placeholder {
  color: #bdbdbd;
 }
 .contact_input:focus, .contact_input:focus {
  outline: none;
@@ -177,14 +269,14 @@ textarea.contact_input {
  min-height: 150px;
 }
-.contact_input-error, .contact_input-error {
+input.contact_input-error, textarea.contact_input-error {
-  background-color: #ffc3b0;
+  border-color: #d44950;
-  border-color: #ff865f;
+  color: #d44950;
-  color: #c90000;
+  margin-bottom: 0;
 }
 .contact_input-error::placeholder, .contact_input-error::placeholder {
-  color: #c9000094;
+  color: #d7626a;
 }
 input[disabled].contact_input {
@@ -211,8 +303,8 @@ input[disabled].contact_input {
 }
 .message_error {
-  background-color: #ffc3b0;
+  background-color: #f8d7da;
-  border: 1px solid #ff865f;
+  border: 1px solid #f5c6cb;
-  color: #c90000;
+  color: #721c24;
 }
 </style>
--- a/src/components/sections/contacts/OtherContact.vue
+++ b/src/components/sections/contacts/OtherContact.vue
@@ -1,53 +1,86 @@
 <template>
  <div class="contact_info">
-    <header class="info_head">Inne formy kontaktu:</header>
+    <header class="info_head">
      Inne formy kontaktu:
    </header>
    <div class="contact_element">
-      <img class="contact_element_icon"
+      <img
-           src="/assets/img/instagram.jpg" />
+        class="contact_element_icon"
-      <span id="instagram" class="contact_element_text">
+        src="/assets/img/instagram.jpg"
-        <a href="https://www.instagram.com/nikcamii/"
+        alt="Instagram"
      >
      <span
        id="instagram"
        class="contact_element_text"
      >
        <a
          href="https://www.instagram.com/nikcamii/"
          target="_blank"
-           rel="noopener nofollow noreferrer">Instagram: @NiKCamii</a>
+          rel="noopener nofollow noreferrer"
        >Instagram: @NiKCamii</a>
      </span>
    </div>
    <div class="contact_element">
-      <img class="contact_element_icon" src="/assets/img/facebook.jpg" />
+      <img
-      <span id="facebook" class="contact_element_text">
+        class="contact_element_icon"
-        <a href="https://www.facebook.com/nikcamii/"
+        src="/assets/img/facebook.jpg"
        alt="Facebook"
      >
      <span
        id="facebook"
        class="contact_element_text"
      >
        <a
          href="https://www.facebook.com/nikcamii/"
          target="_blank"
-           rel="noopener nofollow noreferrer">Facebook: @NiKCamii</a>
+          rel="noopener nofollow noreferrer"
        >Facebook: @NiKCamii</a>
      </span>
    </div>
    <div class="contact_element">
-      <img class="contact_element_icon"
+      <img
-           src="/assets/img/twitter.jpg" />
+        class="contact_element_icon"
-      <span id="twitter" class="contact_element_text">
+        src="/assets/img/twitter.jpg"
-        <a href="https://twitter.com/nikcamii"
+        alt="Twitter"
      >
      <span
        id="twitter"
        class="contact_element_text"
      >
        <a
          href="https://twitter.com/nikcamii"
          target="_blank"
-           rel="noopener nofollow noreferrer">Twitter: @NiKCamii</a>
+          rel="noopener nofollow noreferrer"
        >Twitter: @NiKCamii</a>
      </span>
    </div>
    <div class="contact_element">
-      <img class="contact_element_icon"
+      <img
-           src="/assets/img/gg.png" />
+        class="contact_element_icon"
-      <span id="gg" class="contact_element_text">GG: 38429969</span>
+        src="/assets/img/gg.png"
        alt="Gadu-Gadu"
      >
      <span
        id="gg"
        class="contact_element_text"
      >GG: 38429969</span>
    </div>
    <div class="contact_element">
-      <img class="contact_element_icon"
+      <img
-           src="/assets/img/user.jpg" />
+        class="contact_element_icon"
-      <span id="email" class="contact_element_text">
+        src="/assets/img/user.jpg"
        alt="E-mail"
      >
      <span
        id="mailto"
        class="contact_element_text"
      >
        <a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a>
      </span>
    </div>
  </div>
 </template>
 <script>
 export default {
  name: 'OtherContact'
 }
 </script>
 <style lang="scss" scoped>
@import "scss/media";
@@ -113,7 +146,7 @@ export default {
  color: #5eaade;
 }
-#email {
+#mailto {
  color: #696969;
 }
@@ -122,7 +155,7 @@ export default {
 }
@include media-tablet {
-  #instagram, #facebook, #twitter, #email, #gg {
+  #instagram, #facebook, #twitter, #mailto, #gg {
    font-size: 1em;
    line-height: 1.2em;
  }
--- a/src/main.js
+++ b/src/main.js
@@ -1,25 +1,27 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store'
+import { store } from './store'
-import './vue-meta'
+// import VueMeta from 'vue-meta'
 import '../scss/default.scss'
 import '../css/index.css'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
 import { fab } from '@fortawesome/free-brands-svg-icons'
 import { far } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-library.add(fas)
+library.add(fas, fab, far)
 library.add(fab)
 library.add(far)
 Vue.component('font-awesome-icon', FontAwesomeIcon)
-Vue.config.productionTip = false
+const app = createApp(App)
-new Vue({
+app.config.productionTip = false
-  store,
+
-  router,
+app.component('FontAwesomeIcon', FontAwesomeIcon)
-  render: h => h(App)
+
-}).$mount('#app')
+app.use(router)
 app.use(store)
 // app.use(VueMeta)
 app.mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,15 +1,11 @@
-import Vue from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
-import VueRouter from 'vue-router'
+import Home from '../views/HomeView'
-import Home from '../views/Home'
+import About from '../views/AboutView'
-import About from '../views/About'
+import Projects from '../views/ProjectsView'
-import Projects from '../views/Projects'
+import Project from '../views/ProjectView'
-import Project from '../views/Project'
+import Contact from '../views/ContactView'
 import Contact from '../views/Contact'
 import KamilCraftInfo from '../views/KamilCraftInfo'
 import NotFound from '../views/NotFound'
 Vue.use(VueRouter)
 const mainTitle = 'kamilcraft.com'
 const routes = [
@@ -54,15 +50,7 @@ const routes = [
    component: Contact
  },
  {
-    path: '/info',
+    path: '/:catchAll(.*)',
    name: 'KamilCraftProject',
    meta: {
      title: 'KamilCraft Project'
    },
    component: KamilCraftInfo
  },
  {
    path: '*',
    name: '404',
    meta: {
      title: 'Błąd 404'
@@ -71,22 +59,39 @@ const routes = [
  }
 ]
-const router = new VueRouter({
+const router = createRouter({
-  mode: 'history',
+  history: createWebHistory('/'),
  base: '/',
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else if (to.hash) {
-      return {
+      return new Promise(resolve => {
-        selector: to.hash,
+        setTimeout(() => {
-        behavior: 'smooth'
+          resolve({
            selector: to.hash
          }, 1000)
        })
      })
    } else {
      return { left: 0, top: 0 }
    }
  }
  /*scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else if (to.hash) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve({
            selector: to.hash
          }, 1000)
        })
      })
    } else {
      return { x: 0, y: 0 }
    }
-  }
+  }*/
 })
 const title = ' :: ' + mainTitle
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,9 +1,6 @@
-import Vue from 'vue'
+import { createStore } from 'vuex'
 import Vuex from 'vuex'
-Vue.use(Vuex)
+export const store = createStore({
 const moduleSettings = {
  state: {
    header: {
      title: null,
@@ -64,10 +61,4 @@ const moduleSettings = {
      state.header.description = null
    }
  }
 }
 export default new Vuex.Store({
  modules: {
    settings: moduleSettings
  }
 })
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -14,21 +14,53 @@
        Zdobyłem także umiejętności pracy w zespole, które owocują tworzeniem merytorycznej dyskusji na temat części lub całości projektu.
      </p>
      <h3>Kursy</h3>
-      <p>W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
+      <p>
-        <strong><a :href="publicPath + 'download/certyfikat-laravel.pdf'"
+        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">
+          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
+          Architektura aplikacji internetowych opartych o framework Laravel</a></strong>.
-        wiedzy o nowe doświadczenia.</p>
+      </p>
      <p>
        Umożliwiło mi to szersze spojrzenie na możliwości jakie daje nam Laravel i wzbogaconie poprzednio zdobytej
        wiedzy o nowe doświadczenia.
      </p>
      <h2>Moje zainteresowania</h2>
-      <p>W wolnym czasie przyjmuje małe zlecenia na strony lub serwisy internetowe. Uczę się nowych języków
+      <p>
        W wolnym czasie przyjmuje małe zlecenia na strony lub serwisy internetowe. Uczę się nowych języków
        programowania lub frameworków w znanych mi już technologiach. Hobbistycznie, tworzę także rozwiązania do
-        problemów przy prywatnych projektach.</p>
+        problemów przy prywatnych projektach.
      </p>
    </div>
  </section>
 </template>
 <script setup>
 import { onMounted, onUnmounted } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
 const publicPath = process.env.VUE_APP_BASE_URL + '/'
 const store = useStore()
 const route = useRoute()
 onMounted(() => {
  const header = {
    title: route.meta.title,
    description: 'Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.'
  }
  store.commit('setHeader', header)
 })
 onUnmounted(() => {
  store.commit('resetHeaderTitle')
  store.commit('resetHeaderDescription')
 })
 </script>
 <style lang="scss">
 section#about {
  padding: 45px 0;
@@ -57,25 +89,3 @@ section#about {
  }
 }
 </style>
 <script>
 export default {
  name: 'About',
  data () {
    return {
      publicPath: process.env.VUE_APP_BASE_URL + '/'
    }
  },
  mounted () {
    const header = {
      title: this.$route.meta.title,
      description: 'Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.'
    }
    this.$store.commit('setHeader', header)
  },
  destroyed () {
    this.$store.commit('resetHeaderTitle')
    this.$store.commit('resetHeaderDescription')
  }
 }
 </script>
--- a/src/views/ContactView.vue
+++ b/src/views/ContactView.vue
@@ -7,24 +7,23 @@
  </section>
 </template>
-<script>
+<script setup>
 import { onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
 import MailContact from '../components/sections/contacts/MailContact'
 import OtherContact from '../components/sections/contacts/OtherContact'
-export default {
+const route = useRoute()
-  name: 'Contact',
+const store = useStore()
-  mounted () {
+
 onMounted(() => {
  const header = {
-      title: this.$route.meta.title,
+    title: route.meta.title,
    description: 'Chcesz o coś zapytać? Chciałbyś współpracować? Napisz!'
  }
-    this.$store.commit('setHeader', header)
+  store.commit('setHeader', header)
-  },
+})
  components: {
    MailContact,
    OtherContact
  }
 }
 </script>
 <style lang="scss">
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -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>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -0,0 +1,35 @@
 <template>
  <section class="home">
    <About />
    <ExperiencesSection />
    <FavoriteProjects />
  </section>
 </template>
 <script setup>
 import { onMounted, onUnmounted } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
 import About from '../components/sections/AboutSection'
 import ExperiencesSection from '../components/sections/ExperiencesSection'
 import FavoriteProjects from '../components/sections/FavoriteProjects'
 const store = useStore()
 const route = useRoute()
 onMounted(() => {
  const header = {
    title: route.meta.title,
    description: [
      'Chciałbym Państwa powitać na mojej stronie!',
      'Przedstawiam tutaj część swojego życia związaną z programowaniem i projektowaniem aplikacji internetowych.'
    ]
  }
  store.commit('setHeader', header)
 })
 onUnmounted(() => {
  store.commit('resetHeaderTitle')
  store.commit('resetHeaderDescription')
 })
 </script>
--- a/src/views/KamilCraftInfo.vue
+++ b/src/views/KamilCraftInfo.vue
@@ -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>
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@@ -10,12 +10,6 @@
  </div>
 </template>
 <script>
 export default {
  name: 'NotFound'
 }
 </script>
 <style lang="scss" scoped>
 .not-found {
  .container {
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -1,94 +1,137 @@
 <template>
-  <section class="project" v-if="project">
+  <section
    v-if="isLoaded"
    class="project"
  >
    <header class="project_header">
      <h1>{{ project.title }}</h1>
      <ul class="project_info">
        <li class="info_text">
-          <font-awesome-icon class="icon" :icon="['far', 'clock']"/>
+          <font-awesome-icon
            class="icon"
            :icon="['far', 'clock']"
          />
          <span>{{ project.release_date }}</span>
        </li>
        <li class="info_text">
-          <font-awesome-icon class="icon" :icon="['far', 'user']"/>
+          <font-awesome-icon
            class="icon"
            :icon="['far', 'user']"
          />
          <span>{{ project.author }}</span>
        </li>
        <li class="info_text">
-          <font-awesome-icon class="icon" :icon="['far', 'folder']"/>
+          <font-awesome-icon
-          <span>{{ getCategoryName(project.categories)[0] }}</span>
+            class="icon"
            :icon="['far', 'folder']"
          />
          <span>{{ getCategoryName(project.categories) }}</span>
        </li>
        <li class="info_text">
-          <font-awesome-icon class="icon" :icon="['fas', 'code-branch']"/>
+          <font-awesome-icon
            class="icon"
            :icon="['fas', 'code-branch']"
          />
          <span>{{ project.project_version }}</span>
        </li>
-        <li class="info_text" v-if="project.project_url">
+        <li
-          <font-awesome-icon class="icon" :icon="['fas', 'link']"/>
+          v-if="project.project_url"
-          <span><a :href="project.project_url"
+          class="info_text"
        >
          <font-awesome-icon
            class="icon"
            :icon="['fas', 'link']"
          />
          <span><a
            :href="project.project_url"
            target="_blank"
-                  rel="noopener nofollow noreferrer">Link</a></span>
+            rel="noopener nofollow noreferrer"
          >Link</a></span>
        </li>
      </ul>
    </header>
    <div class="container">
-      <component :is="`figure`" class="project-photo">
+      <component
-        <img :src="`${project.images.large}`" :alt="project.title">
+        :is="`figure`"
        class="project-photo"
      >
        <img
          :src="`${project.images.large}`"
          :alt="project.title"
        >
      </component>
-      <div class="content" v-html="markdownToHtml"></div>
+      <div
        class="content"
        v-html="markdownToHtml"
      />
    </div>
  </section>
-  <div v-else class="loading">
+  <div
-    <div class="loading-animation"></div>
+    v-else
    class="loading"
  >
    <div class="loading_animation" />
  </div>
 </template>
-<script>
+<script setup>
 import { ref, reactive, computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
 import { marked } from 'marked'
-export default {
+const route = useRoute()
-  name: 'Project',
+const store = useStore()
-  data () {
+
-    return {
+const isLoaded = ref(false)
-      publicPath: process.env.BASE_URL,
+let project = reactive({})
-      project: null
+
 const getCategories = computed(() => store.getters.getCategories)
 const markdownToHtml = computed(() => marked.parse(project.description))
 onMounted(() => {
  if (getCategories.value.length === 0) {
    store.dispatch('fetchCategories')
  }
-  },
+  loadProject(route.params.id)
-  mounted () {
+})
-    if (this.getCategories.length === 0) {
+
-      this.$store.dispatch('fetchCategories')
+function getCategoryName(categories = []) {
    }
    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)
+    const category = getCategories.value.find(category => category.slug === categoryElement)
-        if (cat) {
+    if (category) {
-          categoriesText.push(cat.name)
+      categoriesText.push(category.name)
    }
  })
-      return categoriesText
+  return categoriesText[0] ?? undefined
-    },
+}
-    loadProject (id) {
+
 function loadProject(id) {
  fetch(process.env.VUE_APP_API_URL + '/project/' + id)
    .then(response => response.json())
    .then(data => {
-          this.project = data
+      project.title = data.title
      project.description = data.description
      project.release_date = data.release_date
      project.author = data.author
      project.categories = data.categories
      project.project_version = data.project_version
      project.project_url = data.project_url
      project.images = data.images
      isLoaded.value = true
    })
 }
  }
 }
 </script>
 <style lang="scss">
@import "scss/default";
 .loading {
  display: flex;
  align-items: center;
 }
 .project {
  .project_header {
    @extend .container;
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -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>
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -0,0 +1,152 @@
 <template>
  <div>
    <div class="project_categories">
      <ul class="categories">
        <li
          v-for="category in getCategories"
          :key="category.slug"
          class="categories_element"
          :class="{ 'categories_element-active': categories.active === category.slug }"
          @click="changeCategory(category.slug)"
        >
          <a :title="`Kategoria ${category.name}`">{{ category.name }}</a>
        </li>
      </ul>
    </div>
    <SelectedProjects :projects="projects" />
    <div
      v-if="projects.length === 0"
      class="loading"
    >
      <div class="loading_animation" />
    </div>
  </div>
 </template>
 <script setup>
 import { reactive, computed, onMounted, onUnmounted } from 'vue'
 import { useStore } from 'vuex'
 import SelectedProjects from '../components/SelectedProjects'
 const store = useStore()
 const categories = reactive({
  active: 'all'
 })
 const projects = reactive([])
 const getCategories = computed(() => store.getters.getCategories)
 onMounted(() => {
  loadAllData()
 })
 onUnmounted(() => {
  store.commit('resetHeaderTitle')
  store.commit('resetHeaderDescription')
 })
 function loadAllData () {
  store.dispatch('fetchCategories')
  store.dispatch('fetchProjects').then(loadedProjects => {
    loadedProjects.forEach(project => {
      projects.push(project)
    })
  })
 }
 function loadListWhereCategory(category) {
  projects.splice(0)
  setTimeout(() => {
    if (category !== 'all') {
      const storedProjects = store.getters.getProjects.filter(project => project.categories.includes(category))
      storedProjects.forEach(project => {
        projects.push(project)
      })
    } else {
      store.getters.getProjects.forEach(project => {
        projects.push(project)
      })
    }
  }, 500)
 }
 function changeCategory(category) {
  categories.active = category
  loadListWhereCategory(category)
 }
 </script>
 <style lang="scss">
@import "scss/media";
 .project_categories {
  padding-top: 45px;
  .categories {
    display: flex;
    justify-content: center;
    list-style: none;
    .categories_element {
      position: relative;
      cursor: pointer;
      margin-right: 25px;
      a {
        color: var(--text-color);
        &:hover {
          color: black;
        }
      }
      &:last-child {
        margin-right: 0;
      }
      &-active {
        &::after {
          content: '';
          position: absolute;
          margin: 0 auto;
          left: 0;
          right: 0;
          bottom: 0;
          width: 0;
          height: 2px;
          background-color: #A2CF00;
          transform: translateY(8px);
          animation: load-underline 300ms forwards;
        }
      }
      @include media-mobile {
        margin-right: 15px;
      }
    }
  }
 }
 .projects {
  padding-top: 25px;
  padding-bottom: 25px;
 }
@keyframes loading-animation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
 }
@keyframes load-underline {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
 }
 </style>
--- a/src/vue-meta/index.js
+++ b/src/vue-meta/index.js
@@ -1,4 +0,0 @@
 import Vue from 'vue'
 import VueMeta from 'vue-meta'
 Vue.use(VueMeta)
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,30 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
  content: [
    "./src/**/*.{vue,js}",
  ],
  darkMode: true,
  theme: {
    fontFamily: {
      'arial': ['Arial', 'sans-serif'],
      'roboto': ['Roboto', 'sans-serif'],
      'thasadith': ['Thasadith', 'sans-serif']
    },
    fontSize: {
      'logo-size': '2.5rem',
      'xs': '.75rem',
      'sm': '.875rem',
      'tiny': '.875rem',
      'base': '1rem',
      'lg': '1.125rem',
      'xl': '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
      '7xl': '5rem'
    }
  },
  plugins: [],
 }
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,6 +1,6 @@
-module.exports = {
+const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
  publicPath: '/',
-  devServer: {
+  transpileDependencies: true
-    disableHostCheck: true
+})
  }
 }
Author	SHA1	Message	Date
Kamil Niemczycki	d726af2639	updated menu - tailwind	2022-07-13 13:42:27 +02:00
Kamil Niemczycki	087a638589	installed tailwind	2022-07-13 09:58:17 +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