updated contact

duplicate id removed
updated buttons
2022-07-12 23:46:12 +02:00 · 2022-07-12 23:46:12 +02:00 · 2022-07-12 23:36:39 +02:00 · 2022-07-12 22:06:48 +02:00 · 2022-07-12 15:20:39 +02:00 · 2022-07-12 15:20:06 +02:00
36 changed files with 19583 additions and 2421 deletions
--- a/.env.development
+++ b/.env.development
@@ -1,4 +0,0 @@
 NODE_MODE=development
 VITE_APP_TITLE=kamilcraft.com
 VITE_APP_BASE_URL=https://localhost:5173
 VITE_APP_API_URL=http://localhost/v1
--- a/.env.example
+++ b/.env.example
@@ -1,5 +1,3 @@
 NODE_MODE=local
 VUE_APP_TITLE=kamilcraft.com
-VUE_APP_BASE_URL=http://localhost:5173
+VUE_APP_BASE_URL=http://127.0.0.1
-VUE_APP_API_URL=https://api.kamilcraft.com/v1
+VUE_APP_API_URL=https://api.kamilcraft.com
 VITE_PORT=5173
--- a/.env.production
+++ b/.env.production
@@ -1,4 +0,0 @@
 NODE_MODE=production
 VITE_APP_TITLE=kamilcraft.com
 VITE_APP_BASE_URL=https://kamilcraft.com
 VITE_APP_API_URL=https://api.kamilcraft.com/v1
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,5 @@
 module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
 }
--- a/css/index.css
+++ b/css/index.css
@@ -1,9 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
    :root {
        --color-kamilcraft-green: 162 207 0;
    }
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,34 +1,35 @@
 {
  "name": "kamilcraft.com",
-  "version": "1.1.0",
+  "version": "1.0.0",
  "private": true,
  "scripts": {
-    "dev": "vite",
+    "serve": "vue-cli-service serve",
-    "build": "vite build",
+    "build": "vue-cli-service build",
-    "preview": "vite preview"
+    "lint": "vue-cli-service lint"
  },
  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-brands-svg-icons": "^6.4.0",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
-    "@fortawesome/free-regular-svg-icons": "^6.4.0",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@fortawesome/vue-fontawesome": "^3.0.1",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "core-js": "^3.8.3",
-    "vite": "^4.4.7",
+    "marked": "^4.0.18",
-    "vue": "^3.3.4",
+    "vue": "^3.2.37",
    "vue-meta": "^2.4.0",
-    "vue-router": "^4.2.4",
+    "vue-router": "^4.1.2",
-    "vuex": "^4.1.0"
+    "vuex": "^4.0.2"
  },
  "devDependencies": {
-    "autoprefixer": "^10.4.13",
+    "@babel/core": "^7.12.16",
-    "eslint": "^8.29.0",
+    "@babel/eslint-parser": "^7.12.16",
-    "eslint-plugin-vue": "^9.8.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
-    "markdown-it": "^13.0.1",
+    "@vue/cli-plugin-eslint": "~5.0.0",
-    "postcss": "^8.4.20",
+    "@vue/cli-service": "~5.0.0",
-    "sass": "^1.56.2",
+    "eslint": "^7.32.0",
-    "sass-loader": "^13.2.0",
+    "eslint-plugin-vue": "^8.0.3",
-    "tailwindcss": "^3.2.4"
+    "sass": "^1.53.0",
    "sass-loader": "^13.0.2"
  },
  "eslintConfig": {
    "root": true,
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +0,0 @@
 module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
 }
--- a/public/index.html
+++ b/public/index.html
@@ -6,13 +6,16 @@
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="icon" href="/favicon.ico">
+    <link rel="icon" href="<%= VUE_APP_BASE_URL %>/favicon.ico">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Thasadith&display=swap" rel="stylesheet">
    <title>KamilCraft.com</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/scss/_btn.scss
+++ b/scss/_btn.scss
@@ -20,7 +20,8 @@ $btn-colors: (
  min-width: 270px;
  padding: 8px 10px;
-  @apply border-4 rounded-md;
+  border-radius: 3px;
  border-width: 3px;
  border-style: solid;
  border-color: $default-color;
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,16 @@
 <template>
  <SiteHeader />
  <main
    rel="main"
  >
    <SiteHeader />
    <RouterView />
    <FooterComponent />
  </main>
  <FooterComponent />
 </template>
 <script setup>
-import SiteHeader from '@/components/SiteHeader.vue'
+import SiteHeader from './components/SiteHeader'
-import FooterComponent from '@/components/FooterComponent.vue'
+import FooterComponent from './components/FooterComponent'
 </script>
 <style lang="scss">
--- a/src/components/FooterComponent.vue
+++ b/src/components/FooterComponent.vue
@@ -1,53 +1,122 @@
 <template>
-  <footer class="bg-neutral-800 py-8">
+  <footer class="footer">
-    <div class="flex items-center justify-between max-w-screen-xl mx-auto">
+    <div class="footer_container">
-      <div class="bg-neutral-600 text-white pl-10 pr-5 py-2.5 text-logo-size leading-normal font-thasadith">
+      <div class="container_logo">
-        Kamil<span class="text-kamilcraft-green">Craft</span>
+        Kamil<span class="logo_element">Craft</span>
      </div>
-      <ul class="flex gap-5 pr-3 text-lg">
+      <ul class="socials">
        <li
          v-for="link in socialLinks"
          :key="link.title.slug"
          class="social_link"
        >
          <a
-            class="text-neutral-400 hover:text-neutral-500"
+            class="link"
            :href="link.link"
            :title="link.title"
            target="_blank"
            rel="noopener nofollow noreferrer"
          >
-            <FontAwesomeIcon
+            <font-awesome-icon
-              class="mr-1"
+              class="icon"
              :icon="['fab', link.icon]"
            />
-            <span class="hidden lg:inline-block">{{ link.title }}</span>
+            <span class="social_title">{{ link.title }}</span>
-            <span class="hidden sm:inline-block lg:hidden">{{ link.shortcut }}</span>
+            <span class="social_shortcut">{{ link.shortcut }}</span>
          </a>
        </li>
      </ul>
    </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.youtube.com/user/kamilniemczycki',
+  { link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku', shortcut: 'Facebook' }
    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>
 <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>
--- a/src/components/HomePageElement.vue
+++ b/src/components/HomePageElement.vue
@@ -0,0 +1,29 @@
 <template>
  <div class="hello">
    <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;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
 </style>
--- a/src/components/NavigationHeader.vue
+++ b/src/components/NavigationHeader.vue
@@ -1,22 +1,19 @@
 <template>
  <div
-    class="flex relative items-center justify-between md:justify-start max-w-screen-xl mx-auto gap-5"
+    class="container"
-    :class="{ 'clicked-menu': isClicked }"
+    :class="{ 'container-menu-active': isClicked }"
  >
-    <RouterLink to="/">
+    <router-link to="/">
      <div
-        class="bg-white text-gray-800 pl-10 pr-5 py-2.5 text-logo-size leading-normal font-thasadith"
+        class="logo"
        :class="{ 'clicked-logo': isClicked }"
        @click="linkClicked"
      >
-        Kamil<span class="text-kamilcraft-green">Craft</span>
+        Kamil<span class="logo-element">Craft</span>
      </div>
-    </RouterLink>
+    </router-link>
-    <nav>
+    <nav class="nav">
      <button
-        class="md:hidden text-3xl mx-5"
+        class="nav-btn"
        :class="[ (isHomePage && !isClicked) ? 'text-white' : 'text-gray-600' ]"
        title="Menu"
        @click="clickMenu"
      >
        <font-awesome-icon
@@ -29,27 +26,17 @@
        />
      </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' ]"
+        class="site-menu"
        :class="{ 'menu-clicked': isClicked }"
      >
        <li
          v-for="menuItem in menuItems"
          :key="menuItem.slug"
-          :class="{ 'py-5 px-3 leading-6': isClicked }"
+          class="menu-element"
          @click="linkClicked"
        >
-          <RouterLink
+          <RouterLink :to="menuItem.uri">
-            v-slot="{ href, navigate, isActive }"
+            {{ menuItem.title }}
            :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>
@@ -58,14 +45,7 @@
 </template>
 <script setup>
-import { defineProps, ref, computed } from 'vue'
+import { ref, computed } from 'vue'
 defineProps({
  isHomePage: {
    type: Boolean,
    default: false
  }
 })
 const menuItems = [
  {
@@ -108,16 +88,127 @@ function linkClicked() {
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
-.clicked-menu {
+@import "scss/media";
  animation: bg-menu-animation 500ms forwards ease-in-out;
 }
-.clicked-logo {
+.sub-page > .container {
-  animation: bg-logo-animation 500ms forwards ease-in-out;
+  .nav-btn {
-}
+    color: #8D8D8D;
  }
-@keyframes bg-menu-animation {
+  .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;
  }
@@ -125,7 +216,7 @@ function linkClicked() {
    background-color: #EFEFEF;
  }
 }
-@keyframes bg-logo-animation {
+@keyframes logo-active-menu {
  0% {
    background-color: white;
  }
--- a/src/components/SelectedProjects.vue
+++ b/src/components/SelectedProjects.vue
@@ -1,9 +1,58 @@
 <template>
  <div class="projects">
    <slot />
    <div class="container">
      <div
        v-for="project in projects"
        :key="project.title.slug"
        class="project"
      >
        <img
          v-if="project.images.small"
          class="project_image"
          :src="project.images.small"
          :alt="project.title"
        >
        <img
          v-else-if="project.images.large"
          class="project_image"
          :src="project.images.large"
          :alt="project.title"
        >
        <div class="project_content">
          <h3 class="project_title">
            {{ project.title }}
          </h3>
          <div class="project_release">
            {{ project.version }}
          </div>
          <div
            class="project_description"
            v-html="markdownToText(project)"
          />
        </div>
        <div class="more-button">
          <BaseButton
            has-icon
            icon="eye"
            is-reverse
            class="btn"
            @click="router.push({ name: 'Project', params: { id: project.id } })"
          >
            O projekcie
          </BaseButton>
        </div>
      </div>
    </div>
  </div>
 </template>
 <script setup>
-import { defineProps, onMounted } from 'vue';
+import { defineProps, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router'
-import { useStore } from 'vuex';
+import { useStore } from 'vuex'
-import BaseButton from '@/components/buttons/BaseButton.vue';
+import BaseButton from './buttons/BaseButton'
-import Markdown from "@/components/markdowns/MarkdownShort.vue";
+import { marked } from 'marked'
 defineProps({
  projects: {
@@ -25,103 +74,142 @@ onMounted(() => {
  }
  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>
 <template>
  <section
    id="projects"
    class="max-w-screen-xl mx-auto px-6 xl:px-2 py-10"
  >
    <slot />
    <div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-5">
      <div
        v-for="project in projects"
        :key="project.title.slug"
        class="flex flex-col lg:grid grid-project relative bg-neutral-100 border border-gray-200 rounded-md"
      >
        <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
          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"
        >
          <BaseButton
            has-icon
            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>
  </section>
 </template>
 <style lang="scss">
-@import 'scss/media';
+@import "scss/media";
-.grid-project {
+.projects {
-  animation: load-project 2s forwards;
+  padding-top: 45px;
  padding-bottom: 45px;
-  .project-image, .project-content {
+  .container {
-    object-position: top center;
+    display: grid;
-  }
+    align-items: flex-start;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(80px, auto);
    column-gap: 25px;
    row-gap: 20px;
-  .project-image {
+    .project {
-    grid-area: image;
+      display: grid;
-  }
+      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-content {
+      .project_image {
-    grid-area: content;
+        grid-area: image;
-
+        width: 200px;
-    &::after {
+        height: 200px;
-      background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 60%, #fafafa);
+        object-fit: cover;
-    }
+        object-position: top center;
  }
 }
@screen lg {
  .grid-project {
    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 {
+      .project_content {
        grid-area: content;
        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) {
      .project {
        .more-button {
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          .btn {
            display: none;
          }
          &:hover {
-            background-color: rgba(255, 255, 255, .9);
+            background: rgba(0, 0, 0, .3);
            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;
          }
        }
      }
@@ -139,4 +227,13 @@ onMounted(() => {
    opacity: 1;
  }
 }
@include media-tablet {
  .projects .container {
    grid-template-columns: 1fr;
    padding: 25px;
    column-gap: 0;
    row-gap: 20px;
  }
 }
 </style>
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -1,14 +1,12 @@
 <template>
  <header :class="thisClass">
-    <Navigation :is-home-page="isHome" />
+    <navigation />
    <div
      v-if="isTitle"
-      class="max-w-screen-header-content mx-auto text-center px-2.5 py-10"
+      class="header-info"
-      :class="{ 'text-white': isHome }"
+      :class="{ 'header-info-home': isHome }"
    >
-      <h1 class="mb-6 relative font-light text-[2.5rem] leading-[3.5rem] after:block after:absolute after:w-24 after:h-0.5 after:bg-kamilcraft-green after:left-1/2 after:-ml-12">
+      <h1>{{ getTitle }}</h1>
        {{ getTitle }}
      </h1>
      <p v-if="isDescription && descriptionType === 'string'">
        {{ getDescription }}
      </p>
@@ -27,7 +25,7 @@
 import { computed } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
-import Navigation from '@/components/NavigationHeader.vue'
+import Navigation from './NavigationHeader'
 const store = useStore()
 const route = useRoute()
@@ -44,11 +42,38 @@ const descriptionType = computed(() => {
 })
 </script>
-<style scoped>
+<style lang="scss">
 .home-page {
  background: linear-gradient(237.74deg, #1199A5 0%, #436DA7 83%);
 }
 .sub-page {
  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>
--- a/src/components/buttons/BaseButton.vue
+++ b/src/components/buttons/BaseButton.vue
@@ -32,8 +32,8 @@ defineProps({
 })
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
-@import 'scss/btn';
+@import "../../../scss/btn";
 .btn {
  @include button($has-icon: true);
--- a/src/components/buttons/GhostButton.vue
+++ b/src/components/buttons/GhostButton.vue
@@ -25,7 +25,7 @@ defineProps({
 </script>
 <style lang="scss" scoped>
-@import 'scss/btn';
+@import "../../../scss/btn";
 .btn {
  @include ghost-button();
--- a/src/components/markdowns/MarkdownDescription.vue
+++ b/src/components/markdowns/MarkdownDescription.vue
@@ -1,20 +0,0 @@
 <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>
--- a/src/components/markdowns/MarkdownShort.vue
+++ b/src/components/markdowns/MarkdownShort.vue
@@ -1,33 +0,0 @@
 <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>
--- a/src/components/sections/AboutSection.vue
+++ b/src/components/sections/AboutSection.vue
@@ -1,40 +1,24 @@
 <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="about">
-    <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
+    <div class="container">
-      <div
+      <div id="grid">
-        id="grid-columns"
+        <div id="grid-text">
-        class="flex flex-col md:grid items-center"
+          <h2 class="name">
      >
        <div id="grid-content">
          <h2 class="text-[2rem]">
            Kamil Niemczycki
          </h2>
-          <div class="mb-2 text-[1.5rem]">
+          <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="flex flex-col sm:flex-row justify-center md:justify-start py-6 gap-5">
+          <div class="buttons">
            <BaseButton
              has-icon
              icon="portrait"
              is-reverse
-              @click="scrollTo('#projects')"
+              @click="scrollTo('.selected-projects')"
            >
              Wybrane projekty
            </BaseButton>
@@ -48,10 +32,9 @@ function scrollTo(id) {
          </div>
        </div>
        <div id="grid-photo">
-          <figure>
+          <figure id="about-photo">
            <img
-              src="/assets/me.jpg"
+              :src="`${publicPath}assets/me.jpg`"
              class="mx-auto rounded-full object-cover w-[12.5rem] h-[12.5rem]"
              alt="Moje zdjęcie"
            >
          </figure>
@@ -61,18 +44,112 @@ function scrollTo(id) {
  </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">
-#grid-columns {
+@import "scss/media";
  grid-template-columns: 1fr 1fr .8fr;
  grid-template-areas:
    'text text photo';
 }
-#grid-content {
+.about {
-  grid-area: text;
+  background-color: var(--gray-color) !important;
 }
-#grid-photo {
+  .container {
-  grid-area: photo;
+    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>
--- a/src/components/sections/ExperiencesSection.vue
+++ b/src/components/sections/ExperiencesSection.vue
@@ -1,22 +1,20 @@
 <template>
-  <div>
+  <div class="experiences">
-    <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
+    <div class="container">
-      <h2 class="text-[2rem] mb-2">
+      <h2>Wykorzystywane technologie</h2>
-        Wykorzystywane technologie
+      <p>
      </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 class="skills">
        <div
          v-for="(skill, skillKey) in list"
          :key="skillKey"
-          class="p-4 bg-neutral-50 rounded-lg"
+          class="skill-group"
        >
-          <header>
+          <header class="skill-header">
-            <div class="flex gap-2 text-3xl mb-2">
+            <div class="tech-icons">
              <font-awesome-icon
                v-for="(icon, iconKey) in skill.icons"
                :key="iconKey"
@@ -26,25 +24,13 @@
                :title="icon.title"
              />
            </div>
-            <h3 class="text-lg font-bold">
+            <h3>{{ skill.header }}</h3>
              {{ skill.header }}
            </h3>
          </header>
-          <p
+          <p v-if="skill.showMore.value || skill.description.length < 200">
            v-if="skill.showMore.value || skill.description.length < 200"
            class="text-sm"
          >
            {{ skill.description }}
          </p>
-          <p
+          <p v-else>
-            v-else
+            {{ parseText(skill.description) }}... <a @click="changeMoreStatus(skill)">Więcej</a>
            class="text-sm"
          >
            {{ parseText(skill.description) }}...
            <a
              class="text-neutral-500 hover:text-neutral-700 hover:underline cursor-pointer"
              @click="changeMoreStatus(skill)"
            >Więcej</a>
          </p>
        </div>
      </div>
@@ -174,7 +160,74 @@ function changeMoreStatus(skill) {
 }
 </script>
-<style scoped>
+<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;
 }
--- a/src/components/sections/FavoriteProjects.vue
+++ b/src/components/sections/FavoriteProjects.vue
@@ -1,20 +1,13 @@
 <template>
-  <section class="bg-neutral-50">
+  <section class="selected-projects">
    <projects :projects="select_projects">
-      <header>
+      <div class="header-container">
-        <h2 class="text-[2rem] mb-2">
+        <h2>Wybrane projekty</h2>
-          Wybrane projekty
+        <p>Poniżej przedstawiam Państwu, wybraną przeze mnie, listę projektów.</p>
-        </h2>
+      </div>
        <p class="mb-5">
          Poniżej przedstawiam Państwu, wybraną przeze mnie, listę projektów.
        </p>
      </header>
    </projects>
-    <div class="w-full -translate-y-5 pb-5 more-button">
+    <div class="more-button">
-      <GhostButton
+      <GhostButton @click="router.push('projects')">
        class="mx-auto"
        @click="router.push('projects')"
      >
        ZOBACZ WIĘCEJ
      </GhostButton>
    </div>
@@ -24,11 +17,10 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import Projects from '@/components/SelectedProjects.vue'
+import Projects from '../SelectedProjects'
-import GhostButton from '@/components/buttons/GhostButton.vue'
+import GhostButton from '../buttons/GhostButton'
 const router = useRouter()
 const apiURL = import.meta.env.VITE_APP_API_URL
 let select_projects = ref([])
@@ -37,7 +29,7 @@ onMounted(() => {
 })
 function loadProjectList() {
-  fetch(apiURL + '/projects?category=selected')
+  fetch(process.env.VUE_APP_API_URL + '/projects?category=selected')
    .then(response => response.json())
    .then(data => {
      select_projects.value = data
@@ -45,7 +37,7 @@ function loadProjectList() {
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
@import "scss/default";
 .selected-projects {
--- a/src/components/sections/contacts/MailContact.vue
+++ b/src/components/sections/contacts/MailContact.vue
@@ -1,99 +1,91 @@
 <template>
-  <div
+  <div class="contact_container">
-    id="contact-form"
+    <div
-    class="contact_container w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[500px] p-2 shadow"
+      v-if="hasMessageError"
-  >
+      class="message message_error"
-    <header class="mb-1.5">
+    >
-      <h3 class="text-xl">
+      {{ messageError }}
-        Formularz kontaktowy
+    </div>
-      </h3>
+    <div
      v-if="hasMessageOkStatus"
      class="message message_ok"
    >
      {{ messageOk }}
    </div>
    <header class="container_head">
      Formularz kontaktowy:
    </header>
    <form
-      class="flex flex-col gap-3 justify-start items-start"
+      id="form-point"
      @submit="formSubmit"
    >
-      <div
+      <label
-        v-if="hasMessageError"
+        class="label-info"
-        class="w-full p-2 bg-red-200 text-red-500 text-sm border border-red-300 rounded-md"
+        :class="{ 'label-error': isEmailError }"
        for="email"
      >
-        {{ messageError }}
+        E-mail:
-      </div>
+      </label>
-      <div
+      <input
-        v-else-if="hasMessageOkStatus"
+        id="email"
-        class="w-full p-2 bg-[#27ae60] text-white text-sm border border-lime-600 rounded-md shadow"
+        v-model="emailValue"
        class="contact_input"
        :class="{ 'contact_input-error': isEmailError }"
        type="text"
        name="email"
        placeholder="przemek.kowalski@gmail.com"
      >
-        {{ messageOk }}
+      <span
-      </div>
+        v-if="isEmailError"
-      <div class="flex flex-col gap-1 w-full">
+        class="error-message"
-        <label
+      >
-          class="text-gray-500"
+        E-mail musi być poprawny, np. przemek.kowalski@gmail.com
-          for="message"
+      </span>
-        >
+      <label
-          W czym mogę pomóc?
+        class="label-info"
-        </label>
+        :class="{ 'label-error': isMessageError }"
-        <textarea
+        for="message"
-          id="message"
+      >
-          v-model="messageValue"
+        Wiadomość:
-          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"
+      </label>
-          :class="[ isMessageError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
+      <textarea
-          name="message"
+        id="message"
-          placeholder="Chciałbym zlecić wykonanie strony..."
+        v-model="messageValue"
-        />
+        class="contact_input"
-        <span
+        :class="{ 'contact_input-error': isMessageError }"
-          v-if="isMessageError"
+        name="message"
-          class="text-red-400"
+        placeholder="Chciałbym zlecić wykonanie strony..."
-        >
+      />
-          Wiadomość musi zawierać przynajmniej 3 znaki!
+      <span
-        </span>
+        v-if="isMessageError"
-      </div>
+        class="error-message"
-      <div class="flex flex-col gap-1 w-full">
+      >
-        <label
+        Wiadomość musi zawierać przynajmniej 3 znaki!
-          class="text-gray-500"
+      </span>
-          for="email"
+      <label
-        >
+        class="label-info"
-          Gdzie mam odesłać odpowiedź?
+        :class="{ 'label-error': isSenderError }"
-        </label>
+        for="sender"
-        <input
+      >
-          id="email"
+        Podpis nadawcy:
-          v-model="emailValue"
+      </label>
-          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"
+      <input
-          :class="[ isEmailError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
+        id="sender"
-          type="text"
+        v-model="senderValue"
-          name="email"
+        class="contact_input"
-          placeholder="Twój adres e-mail"
+        :class="{ 'contact_input-error': isSenderError }"
-        >
+        type="text"
-        <span
+        name="sender"
-          v-if="isEmailError"
+        placeholder="np. Przemek Kowalski"
-          class="text-red-400"
+      >
-        >
+      <span
-          E-mail musi być poprawny, np. przemek.kowalski@gmail.com
+        v-if="isSenderError"
-        </span>
+        class="error-message"
-      </div>
+      >
-      <div class="flex flex-col gap-1 w-full">
+        Podpis musi zawierać przynajmniej 3 znaki!
-        <label
+      </span>
          class="text-gray-500"
          for="sender"
        >
          Podpis
        </label>
        <input
          id="sender"
          v-model="senderValue"
          class="w-full px-2.5 py-2 border-b-2 border-neutral-300 rounded-md focus:border-neutral-400 hover:border-neutral-500 outline-none"
          :class="[ isSenderError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
          type="text"
          name="sender"
        >
        <span
          v-if="isSenderError"
          class="text-red-400"
        >
          Podpis musi zawierać przynajmniej 3 znaki!
        </span>
      </div>
      <BaseButton
        is-reverse
        class="py-1 w-full"
        :disabled="isButtonDisabled"
      >
        Wyślij
@@ -103,7 +95,7 @@
 </template>
 <script setup>
-import BaseButton from '@/components/buttons/BaseButton.vue'
+import BaseButton from '../../buttons/BaseButton'
 import { ref, reactive, watch, computed } from 'vue'
 function emailValidate (mailObj) {
@@ -207,21 +199,112 @@ function formSubmit(event) {
      buttonDisabled.value = false
    })
  }
  scrollTo('#contact-form')
 }
 function scrollTo(id) {
  document.querySelector(id).scrollIntoView({
    behavior: 'smooth'
  })
 }
 </script>
 <style lang="scss" scoped>
-@screen md {
+@import "scss/media";
-  .contact_container {
+
-    flex-basis: 500px;
+.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 {
  .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;
    border-bottom: 2px solid #c9c9c9;
    padding: 10px 10px 8px;
    font-size: 1em;
    font-family: var(--font-family);
    line-height: 1.3em;
    margin-bottom: 15px;
    border-radius: 5px;
  }
 }
 .contact_input::placeholder {
  color: #bdbdbd;
 }
 .contact_input:focus, .contact_input:focus {
  outline: none;
  border-color: black;
 }
 textarea.contact_input {
  max-width: 97%;
  min-width: 97%;
  min-height: 150px;
 }
 input.contact_input-error, textarea.contact_input-error {
  border-color: #d44950;
  color: #d44950;
  margin-bottom: 0;
 }
 .contact_input-error::placeholder, .contact_input-error::placeholder {
  color: #d7626a;
 }
 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: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
 }
 </style>
--- a/src/components/sections/contacts/OtherContact.vue
+++ b/src/components/sections/contacts/OtherContact.vue
@@ -1,92 +1,82 @@
 <template>
-  <div class="contact_info w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[410px] p-2 shadow">
+  <div class="contact_info">
-    <header class="mb-1.5">
+    <header class="info_head">
-      <h3 class="text-xl">
+      Inne formy kontaktu:
        Inne formy kontaktu:
      </h3>
    </header>
-    <div class="flex flex-col gap-2.5 justify-start items-start">
+    <div class="contact_element">
-      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+      <img
-        <img
+        class="contact_element_icon"
-          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+        src="/assets/img/instagram.jpg"
-          src="/assets/img/instagram.jpg"
+        alt="Instagram"
-          alt="Instagram"
+      >
-        >
+      <span
-        <span
+        id="instagram"
-          id="instagram"
+        class="contact_element_text"
-          class="font-bold"
+      >
-        >
+        <a
-          <a
+          href="https://www.instagram.com/nikcamii/"
-            href="https://www.instagram.com/nikcamii/"
+          target="_blank"
-            target="_blank"
+          rel="noopener nofollow noreferrer"
-            rel="noopener nofollow noreferrer"
+        >Instagram: @NiKCamii</a>
-            class="hover:underline"
+      </span>
-          >Instagram: @NiKCamii</a>
+    </div>
-        </span>
+    <div class="contact_element">
-      </div>
+      <img
-      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+        class="contact_element_icon"
-        <img
+        src="/assets/img/facebook.jpg"
-          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+        alt="Facebook"
-          src="/assets/img/facebook.jpg"
+      >
-          alt="Facebook"
+      <span
-        >
+        id="facebook"
-        <span
+        class="contact_element_text"
-          id="facebook"
+      >
-          class="font-bold"
+        <a
-        >
+          href="https://www.facebook.com/nikcamii/"
-          <a
+          target="_blank"
-            href="https://www.facebook.com/nikcamii/"
+          rel="noopener nofollow noreferrer"
-            target="_blank"
+        >Facebook: @NiKCamii</a>
-            rel="noopener nofollow noreferrer"
+      </span>
-            class="hover:text-gray-700 hover:underline"
+    </div>
-          >Facebook: @NiKCamii</a>
+    <div class="contact_element">
-        </span>
+      <img
-      </div>
+        class="contact_element_icon"
-      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+        src="/assets/img/twitter.jpg"
-        <img
+        alt="Twitter"
-          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+      >
-          src="/assets/img/twitter.jpg"
+      <span
-          alt="Twitter"
+        id="twitter"
-        >
+        class="contact_element_text"
-        <span
+      >
-          id="twitter"
+        <a
-          class="font-bold"
+          href="https://twitter.com/nikcamii"
-        >
+          target="_blank"
-          <a
+          rel="noopener nofollow noreferrer"
-            href="https://twitter.com/nikcamii"
+        >Twitter: @NiKCamii</a>
-            target="_blank"
+      </span>
-            rel="noopener nofollow noreferrer"
+    </div>
-            class="hover:text-gray-700 hover:underline"
+    <div class="contact_element">
-          >Twitter: @NiKCamii</a>
+      <img
-        </span>
+        class="contact_element_icon"
-      </div>
+        src="/assets/img/gg.png"
-      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+        alt="Gadu-Gadu"
-        <img
+      >
-          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+      <span
-          src="/assets/img/gg.png"
+        id="gg"
-          alt="Gadu-Gadu"
+        class="contact_element_text"
-        >
+      >GG: 38429969</span>
-        <span
+    </div>
-          id="gg"
+    <div class="contact_element">
-          class="font-bold"
+      <img
-        >GG: 38429969</span>
+        class="contact_element_icon"
-      </div>
+        src="/assets/img/user.jpg"
-      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+        alt="E-mail"
-        <img
+      >
-          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+      <span
-          src="/assets/img/user.jpg"
+        id="mailto"
-          alt="E-mail"
+        class="contact_element_text"
-        >
+      >
-        <span
+        <a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a>
-          id="mailto"
+      </span>
          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>
 </template>
@@ -94,18 +84,51 @@
 <style lang="scss" scoped>
@import "scss/media";
-@screen md {
+.contact_info {
-  .contact_info {
+  flex-basis: 410px;
    flex-basis: 410px;
  }
 }
-a {
+.info_head {
-  color: inherit;
+  padding: 10px;
  line-height: 1.6em;
  font-size: 1.3em;
  font-weight: bold;
 }
-  &:hover {
+.contact_element {
-    -webkit-text-fill-color: #374151;
+  display: flex;
-    color: #374151;
+  align-items: center;
  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;
  }
 }
@@ -130,4 +153,11 @@ a {
 #gg {
  color: #ffa214;
 }
@include media-tablet {
  #instagram, #facebook, #twitter, #mailto, #gg {
    font-size: 1em;
    line-height: 1.2em;
  }
 }
 </style>
--- a/src/main.js
+++ b/src/main.js
@@ -1,20 +1,26 @@
-import { createApp } 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 VueMeta from 'vue-meta'
-import '../scss/default.scss';
+import '../scss/default.scss'
-import '../css/index.css';
+import { library } from '@fortawesome/fontawesome-svg-core'
-import { library } from '@fortawesome/fontawesome-svg-core';
+import { fas } from '@fortawesome/free-solid-svg-icons'
-import { fas } from '@fortawesome/free-solid-svg-icons';
+import { fab } from '@fortawesome/free-brands-svg-icons'
-import { fab } from '@fortawesome/free-brands-svg-icons';
+import { far } from '@fortawesome/free-regular-svg-icons'
-import { far } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-library.add(fas, fab, far);
+library.add(fas, fab, far)
-createApp(App)
+const app = createApp(App)
-    .component('FontAwesomeIcon', FontAwesomeIcon)
+
-    .use(router)
+app.config.productionTip = false
-    .use(store)
+
-    .mount('#app');
+app.component('FontAwesomeIcon', FontAwesomeIcon)
 app.use(router)
 app.use(store)
 // app.use(VueMeta)
 app.mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,11 +1,10 @@
 import { createRouter, createWebHistory } from 'vue-router'
-
+import Home from '../views/HomeView'
-const Home = () => import('@/views/HomeView.vue');
+import About from '../views/AboutView'
-const About = () => import('@/views/AboutView.vue');
+import Projects from '../views/ProjectsView'
-const Projects = () => import('@/views/ProjectsView.vue');
+import Project from '../views/ProjectView'
-const Project = () => import('@/views/ProjectView.vue');
+import Contact from '../views/ContactView'
-const Contact = () => import('@/views/ContactView.vue');
+import NotFound from '../views/NotFound'
 const NotFound = () => import('@/views/NotFound.vue');
 const mainTitle = 'kamilcraft.com'
@@ -78,6 +77,21 @@ const router = createRouter({
      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,6 +1,4 @@
-import { createStore } from 'vuex';
+import { createStore } from 'vuex'
 const apiURL = import.meta.env.VITE_APP_API_URL;
 export const store = createStore({
  state: {
@@ -24,7 +22,7 @@ export const store = createStore({
  },
  actions: {
    fetchProjects (store) {
-      return fetch(apiURL + '/projects')
+      return fetch(process.env.VUE_APP_API_URL + '/projects')
        .then(response => response.json())
        .then(data => {
          store.commit('setProjects', data)
@@ -32,7 +30,7 @@ export const store = createStore({
        })
    },
    fetchCategories (store) {
-      return fetch(apiURL + '/categories')
+      return fetch(process.env.VUE_APP_API_URL + '/categories')
        .then(response => response.json())
        .then(data => {
          store.commit('setCategories', data)
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,66 +1,91 @@
-<script setup>
+<template>
-import { onMounted, onUnmounted } from 'vue';
+  <section id="about">
-import { useStore } from 'vuex';
+    <div class="container">
-import { useRoute } from 'vue-router';
+      <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>
-const store = useStore();
+<script setup>
-const route = useRoute();
+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.',
+    description: 'Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.'
  }
-  store.commit('setHeader', header);
+  store.commit('setHeader', header)
-});
+})
 onUnmounted(() => {
-  store.commit('resetHeaderTitle');
+  store.commit('resetHeaderTitle')
-  store.commit('resetHeaderDescription');
+  store.commit('resetHeaderDescription')
-});
+})
 </script>
-<template>
+<style lang="scss">
-  <section class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
+section#about {
-    <p class="font-bold">
+  padding: 45px 0;
-      Nazywam się Kamil Niemczycki. Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
+  background-color: #fafafa !important;
-      W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.
+
-    </p>
+  h2 {
-    <h2 class="text-[2rem]">
+    margin-top: 25px;
-      Studia
+
-    </h2>
+    &:first-of-type {
-    <p>
+      margin-top: 10px;
-      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.
+  h3 {
-      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.
+    font-size: 1.3em;
-    </p>
+    margin-top: 8px;
-    <h3 class="text-[1.5rem]">
+    margin-bottom: 10px;
-      Kursy
+  }
-    </h3>
+
-    <p>
+  a {
-      W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
+    color: #8D8D8D;
-      <a
+
-        href="/download/certyfikat-laravel.pdf"
+    &:hover {
-        class="text-gray-500 underline hover:text-kamilcraft-green hover:no-underline"
+      color: #A2CF00;
-        target="_blank"
+    }
-        rel="noopener nofollow noreferrer"
+  }
-      >
+}
-        Architektura aplikacji internetowych opartych o framework Laravel
+</style>
      </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>
--- a/src/views/ContactView.vue
+++ b/src/views/ContactView.vue
@@ -1,7 +1,9 @@
 <template>
-  <section class="flex flex-col px-3 py-6 md:flex-row items-start justify-center mx-auto gap-5">
+  <section class="contact">
-    <MailContact />
+    <div class="container">
-    <OtherContact />
+      <MailContact />
      <OtherContact />
    </div>
  </section>
 </template>
@@ -9,8 +11,8 @@
 import { onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
-import MailContact from '@/components/sections/contacts/MailContact.vue'
+import MailContact from '../components/sections/contacts/MailContact'
-import OtherContact from '@/components/sections/contacts/OtherContact.vue'
+import OtherContact from '../components/sections/contacts/OtherContact'
 const route = useRoute()
 const store = useStore()
@@ -23,3 +25,49 @@ onMounted(() => {
  store.commit('setHeader', header)
 })
 </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>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,31 +1,3 @@
 <script setup>
 import { onMounted, onUnmounted } from 'vue';
 import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
 import About from '@/components/sections/AboutSection.vue';
 import ExperiencesSection from '@/components/sections/ExperiencesSection.vue';
 import FavoriteProjects from '@/components/sections/FavoriteProjects.vue';
 const store = useStore();
 const route = useRoute();
 onMounted(() => {
  const header = {
    title: route.meta.title,
    description: [
      'Chciałbym Państwa powitać na mojej stronie!',
      'Przedstawiam tutaj część swojego życia związaną z programowaniem i projektowaniem aplikacji internetowych.'
    ],
  }
  store.commit('setHeader', header);
 })
 onUnmounted(() => {
  store.commit('resetHeaderTitle');
  store.commit('resetHeaderDescription');
 })
 </script>
 <template>
  <section class="home">
    <About />
@@ -33,3 +5,31 @@ onUnmounted(() => {
    <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/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -1,187 +1,269 @@
 <template>
  <section
    v-if="isLoaded"
-    class="max-w-screen-xl mx-auto px-6 xl:px-2 py-8"
+    class="project"
  >
-    <header class="text-neutral-800 font-roboto">
+    <header class="project_header">
-      <h1 class="text-center text-4xl font-light pb-5">
+      <h1>{{ project.title }}</h1>
-        {{ project.title }}
+      <ul class="project_info">
-      </h1>
+        <li class="info_text">
-      <ul class="grid grid-cols-2 gap-3 md:flex md:gap-5 justify-center list-none">
+          <font-awesome-icon
-        <li class="flex items-center gap-2">
+            class="icon"
          <FontAwesomeIcon
            class="w-4"
            :icon="['far', 'clock']"
          />
          <span>{{ project.release_date }}</span>
        </li>
-        <li class="flex items-center gap-2">
+        <li class="info_text">
-          <FontAwesomeIcon
+          <font-awesome-icon
-            class="w-4"
+            class="icon"
            :icon="['far', 'user']"
          />
          <span>{{ project.author }}</span>
        </li>
-        <li class="flex items-center gap-2">
+        <li class="info_text">
-          <FontAwesomeIcon
+          <font-awesome-icon
-            class="w-4"
+            class="icon"
            :icon="['far', 'folder']"
          />
          <span>{{ getCategoryName(project.categories) }}</span>
        </li>
-        <li class="flex items-center gap-2">
+        <li class="info_text">
-          <FontAwesomeIcon
+          <font-awesome-icon
-            class="w-4"
+            class="icon"
            :icon="['fas', 'code-branch']"
          />
          <span>{{ project.project_version }}</span>
        </li>
        <li
          v-if="project.project_url"
-          class="flex items-center gap-2"
+          class="info_text"
        >
-          <FontAwesomeIcon
+          <font-awesome-icon
-            class="w-4"
+            class="icon"
            :icon="['fas', 'link']"
          />
-          <span>
+          <span><a
-            <a
+            :href="project.project_url"
-              :href="project.project_url"
+            target="_blank"
-              target="_blank"
+            rel="noopener nofollow noreferrer"
-              rel="noopener nofollow noreferrer"
+          >Link</a></span>
            >
              Link
            </a>
          </span>
        </li>
      </ul>
    </header>
-    <div class="pt-5">
+    <div class="container">
-      <figure class="w-full shadow-xl">
+      <component
        :is="`figure`"
        class="project-photo"
      >
        <img
-          class="block max-h-[31.25rem] object-cover"
+          :src="`${project.images.large}`"
          :src="project.images.large"
          :alt="project.title"
        >
-      </figure>
+      </component>
-      <Markdown
+      <div
-        class="markdown mt-9"
+        class="content"
-        :source="project.description"
+        v-html="markdownToHtml"
      />
    </div>
  </section>
  <div
    v-else
-    class="flex items-center"
+    class="loading"
  >
    <div class="loading_animation" />
  </div>
 </template>
 <script setup>
-import { ref, reactive, computed, onMounted } from 'vue';
+import { ref, reactive, computed, onMounted } from 'vue'
-import { useRoute } from 'vue-router';
+import { useRoute } from 'vue-router'
-import { useStore } from 'vuex';
+import { useStore } from 'vuex'
-import Markdown from '@/components/markdowns/MarkdownDescription.vue';
+import { marked } from 'marked'
-const apiURL = import.meta.env.VITE_APP_API_URL;
+const route = useRoute()
-const route = useRoute();
+const store = useStore()
 const store = useStore();
-const isLoaded = ref(false);
+const isLoaded = ref(false)
-let project = reactive({});
+let project = reactive({})
-const getCategories = computed(() => store.getters.getCategories);
+const getCategories = computed(() => store.getters.getCategories)
 const markdownToHtml = computed(() => marked.parse(project.description))
 onMounted(() => {
  if (getCategories.value.length === 0) {
-    store.dispatch('fetchCategories');
+    store.dispatch('fetchCategories')
  }
-  loadProject(route.params.id);
+  loadProject(route.params.id)
 })
 function getCategoryName(categories = []) {
-  const categoriesText = [];
+  const categoriesText = []
  categories.forEach(categoryElement => {
-    const category = getCategories.value.find(category => category.slug === categoryElement);
+    const category = getCategories.value.find(category => category.slug === categoryElement)
    if (category) {
-      categoriesText.push(category.name);
+      categoriesText.push(category.name)
    }
-  });
+  })
-  return categoriesText[0] ?? undefined;
+  return categoriesText[0] ?? undefined
 }
 function loadProject(id) {
-  fetch(apiURL + '/project/' + id)
+  fetch(process.env.VUE_APP_API_URL + '/project/' + id)
    .then(response => response.json())
    .then(data => {
-      project.title = data.title;
+      project.title = data.title
-      project.description = data.description;
+      project.description = data.description
-      project.release_date = data.release_date;
+      project.release_date = data.release_date
-      project.author = data.author;
+      project.author = data.author
-      project.categories = data.categories;
+      project.categories = data.categories
-      project.project_version = data.project_version;
+      project.project_version = data.project_version
-      project.project_url = data.project_url;
+      project.project_url = data.project_url
-      project.images = data.images;
+      project.images = data.images
-      isLoaded.value = true;
+      isLoaded.value = true
-    });
+    })
 }
 </script>
 <style lang="scss">
@import "scss/default";
-a {
+.loading {
-  @apply text-neutral-800 hover:text-kamilcraft-green;
+  display: flex;
  align-items: center;
 }
-.markdown {
+.project {
-  h1 {
+  .project_header {
-    @apply text-4xl;
+    @extend .container;
-  }
+    text-align: center;
    margin-bottom: 25px;
-  h2 {
+    h1 {
-    @apply text-[2rem];
+      font-size: 2.2em;
-  }
+      font-weight: lighter;
      line-height: 2.4em;
    }
-  h3 {
+    .project_info {
-    @apply text-[1.5rem];
+      display: flex;
-  }
+      list-style: none;
      justify-content: center;
-  p, ol li, ul li {
+      .info_text {
-    @apply text-lg;
+        display: flex;
-  }
+        align-items: center;
-  p + ol, p + ul, p + blockquote {
+        .icon {
-    @apply -mb-2;
+          width: 2em;
-  }
+        }
-  ol {
+        span {
-    @apply list-decimal;
+          font-weight: lighter;
-  }
+          white-space: nowrap;
        }
-  ul {
+        &:not(&:last-child) {
-    @apply list-disc;
+          margin-right: 15px;
-  }
+        }
      }
      @include media-tablet {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 15px;
-  ol, ul {
+        .info-text {
-    @apply mb-2.5;
+          &:not(&:last-child) {
-    padding-inline-start: 1.75rem;
+            margin-right: 0;
-
+          }
-    li img {
+        }
-      @apply block w-full pr-1 pb-1 mt-3.5;
+      }
    }
  }
-  p {
+  .container {
-    @apply mb-2 text-justify;
+    .project-photo {
-  }
+      box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
    }
-  blockquote {
+    .project-photo, .project-photo img {
-    @apply pl-6 ml-5 border-neutral-400;
+      width: 100%;
    }
-    p {
+    .project-photo img {
-      text-indent: unset;
+      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;
        }
      }
    }
  }
 }
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -1,93 +1,135 @@
 <script setup>
 import { ref, reactive, computed, onMounted, onUnmounted } 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();
 });
 onUnmounted(() => {
  store.commit('resetHeaderTitle');
  store.commit('resetHeaderDescription');
 });
 function loadAllData () {
  store.dispatch('fetchCategories');
  store.dispatch('fetchProjects').then(loadedProjects => {
    loadedProjects.forEach(project => {
      projects.push(project);
    });
  });
 }
 function loadListWhereCategory(category) {
  projects.splice(0);
  setTimeout(() => {
    if (category !== 'all') {
      const storedProjects = store.getters.getProjects.filter(project => project.categories.includes(category));
      storedProjects.forEach(project => {
        projects.push(project);
      })
    } else {
      store.getters.getProjects.forEach(project => {
        projects.push(project);
      });
    }
  }, 500);
 }
 function changeCategory(category) {
  activeCategory.value = category
  loadListWhereCategory(category)
 }
 function selectedCategory(categorySlug) {
  return activeCategory.value === categorySlug;
 }
 </script>
 <template>
-  <SelectedProjects :projects="projects">
+  <div>
-    <div class="pb-9">
+    <div class="project_categories">
-      <ul class="flex justify-center list-none">
+      <ul class="categories">
        <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="categories_element"
-          :class="{ 'category-active': selectedCategory(category.slug) }"
+          :class="{ 'categories_element-active': categories.active === category.slug }"
          @click="changeCategory(category.slug)"
        >
-          <a
+          <a :title="`Kategoria ${category.name}`">{{ category.name }}</a>
            class="text-gray-500 hover:text-black"
            :title="`Kategoria ${category.name}`"
          >{{ category.name }}</a>
        </li>
      </ul>
    </div>
-  </SelectedProjects>
+    <SelectedProjects :projects="projects" />
-  <div
+    <div
-    v-if="projects.length === 0"
+      v-if="projects.length === 0"
-    class="loading"
+      class="loading"
-  >
+    >
-    <div class="loading_animation" />
+      <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";
-.category-active::after {
+.project_categories {
-  @apply absolute mx-auto left-0 right-0 bottom-0 h-0.5;
+  padding-top: 45px;
-  background-color: #A2CF00;
+
-  animation: load-underline 300ms forwards;
+  .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 {
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,26 +0,0 @@
 /** @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: [],
 }
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,26 +0,0 @@
 import { fileURLToPath, URL } from 'node:url';
 import { defineConfig, loadEnv } from 'vite';
 import vue from '@vitejs/plugin-vue';
 // https://vitejs.dev/config/
 export default defineConfig((mode) => {
  const env = loadEnv(mode, process.cwd(), "");
  return {
    publicPath: '/',
    transpileDependencies: true,
    server: {
      host: 'localhost',
      port: parseInt(env.VITE_PORT ?? 5173),
      hmr: {
        host: 'localhost',
      },
    },
    plugins: [ vue() ],
    resolve: {
        vue: 'vue/dist/vue.esm-bundler.js',
        alias: {
          '@': fileURLToPath(new URL('./src', import.meta.url))
        },
    },
  };
 });
--- a/vue.config.js
+++ b/vue.config.js
@@ -0,0 +1,6 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
  publicPath: '/',
  transpileDependencies: true
 })
Author	SHA1	Message	Date
Kamil Niemczycki	948a187931	updated contact	2022-07-12 23:46:12 +02:00
Kamil Niemczycki	5caa0f056d	duplicate id removed	2022-07-12 23:46:12 +02:00
Kamil Niemczycki	dc7d6773a9	updated buttons	2022-07-12 23:36:39 +02:00
Kamil Niemczycki	af0e5c519b	upgrade to vue 3	2022-07-12 22:06:48 +02:00
Kamil Niemczycki	69f53954bb	updated readme	2022-07-12 15:20:39 +02:00
Kamil Niemczycki	a8b9dde13e	updated dependencies	2022-07-12 15:20:06 +02:00