- version 1.2.0 & fix sass

- update readme
- add eslint to vite
2023-08-06 00:30:14 +02:00 · 2023-08-06 00:26:28 +02:00 · 2023-08-06 00:15:25 +02:00 · 2023-08-05 01:21:03 +02:00 · 2023-08-05 01:11:36 +02:00 · 2023-08-04 16:20:50 +02:00
59 changed files with 4504 additions and 31169 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -1,3 +1,4 @@
 > 1%
 last 2 versions
 not dead
 not ie 11
--- a/.env.development
+++ b/.env.development
@@ -0,0 +1,4 @@
 NODE_MODE=development
 VITE_APP_TITLE=kamilcraft.com
 VITE_APP_BASE_URL=https://localhost:5173
 VITE_APP_API_URL=http://localhost/v1
--- a/.env.example
+++ b/.env.example
@@ -1,2 +1,5 @@
 NODE_MODE=local
 VUE_APP_TITLE=kamilcraft.com
-BASE_URL=http://127.0.0.1
+VUE_APP_BASE_URL=http://localhost:5173
 VUE_APP_API_URL=https://api.kamilcraft.com/v1
 VITE_PORT=5173
--- a/.env.production
+++ b/.env.production
@@ -0,0 +1,4 @@
 NODE_MODE=production
 VITE_APP_TITLE=kamilcraft.com
 VITE_APP_BASE_URL=https://kamilcraft.com
 VITE_APP_API_URL=https://api.kamilcraft.com/v1
--- 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,25 +1,32 @@
 # kamilcraft.com
-Project of my website - portfolio
+
-The project uses a closed API at https://api.kamilcraft.com
+The project concerns a private website at [https://kamilcraft.com](https://kamilcraft.com). The website contains information about me and my projects.
 I used Vue.js in the project. Some of the content is static. The information about the projects is retrieved from the [API](https://github.com/kamilniemczycki/kamilcraft-api).
 ## Dependency installation
 ```
-npm install
+npm install --legacy-peer-deps
 ```
 ### Development
 ```
-npm run serve
+npm run dev
 ```
-Application should be available under `127.0.0.1:8080` or `localhost:8080`.
+Application should be available under `127.0.0.1:5173` or `localhost:5173`.
 ### Compilation
 ```
 npm run build
 ```
 The executable files should be in the `dist` folder.
 ### Code formatting
 ```
 npm run lint
 ```
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +0,0 @@
 module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
 }
--- a/css/index.css
+++ b/css/index.css
@@ -0,0 +1,9 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
    :root {
        --color-kamilcraft-green: 162 207 0;
    }
 }
--- a/public/index.html
+++ b/public/index.html
@@ -6,16 +6,13 @@
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="/favicon.ico">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Thasadith&display=swap" rel="stylesheet">
    <title>KamilCraft.com</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,42 +1,50 @@
 {
  "name": "kamilcraft.com",
-  "version": "1.0.0",
+  "version": "1.2.0",
  "private": true,
  "scripts": {
-    "serve": "vue-cli-service serve",
+    "dev": "vite",
-    "build": "vue-cli-service build",
+    "build": "vite build",
-    "lint": "vue-cli-service lint"
+    "preview": "vite preview",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore",
    "lintf": "eslint --ext .js,.vue --ignore-path .gitignore--fix"
  },
  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-brands-svg-icons": "^6.4.0",
-    "@fortawesome/free-regular-svg-icons": "^5.15.4",
+    "@fortawesome/free-regular-svg-icons": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
-    "@fortawesome/vue-fontawesome": "^2.0.2",
+    "@fortawesome/vue-fontawesome": "^3.0.3",
-    "bootstrap": "^5.0.2",
+    "@vitejs/plugin-vue": "^4.2.3",
-    "core-js": "^3.15.2",
+    "autoprefixer": "^10.4.14",
-    "jquery": "^3.6.0",
+    "markdown-it": "^13.0.1",
-    "popper.js": "^1.16.1",
+    "postcss": "^8.4.27",
-    "vue": "^2.6.14",
+    "sass": "^1.64.2",
    "sass-loader": "^13.3.2",
    "tailwindcss": "^3.3.3",
    "vite": "^4.4.7",
    "vue": "^3.3.4",
    "vue-meta": "^2.4.0",
-    "vue-router": "^3.5.2",
+    "vue-router": "^4.2.4",
-    "vuex": "^3.6.2"
+    "vuex": "^4.1.0"
  },
  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
+    "eslint": "^8.29.0",
-    "@vue/cli-plugin-eslint": "^3.1.1",
+    "eslint-plugin-vue": "^9.8.0",
-    "@vue/cli-plugin-router": "~4.5.0",
+    "vite-plugin-eslint": "^1.8.1"
-    "@vue/cli-service": "^4.5.13",
+  },
-    "@vue/eslint-config-standard": "^5.1.2",
+  "eslintConfig": {
-    "babel-eslint": "^10.1.0",
+    "root": true,
-    "eslint": "^6.7.2",
+    "env": {
-    "eslint-plugin-import": "^2.20.2",
+      "node": true
-    "eslint-plugin-node": "^11.1.0",
+    },
-    "eslint-plugin-promise": "^4.2.1",
+    "extends": [
-    "eslint-plugin-standard": "^4.0.0",
+      "plugin:vue/vue3-essential",
-    "eslint-plugin-vue": "^6.2.2",
+      "eslint:recommended"
-    "sass": "^1.26.5",
+    ],
-    "sass-loader": "^8.0.2",
+    "parserOptions": {
-    "vue-template-compiler": "^2.6.11"
+      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
 module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
 }
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/scss/_btn.scss
+++ b/scss/_btn.scss
@@ -1,3 +1,111 @@
-@mixin btn($revese: false) {
+@import "colors";
 $default-color: transparent !default;
 $dark-gray: #4f4f4f !default;
 $navy-blue: #436da7 !default;
 $white: white !default;
 $btn-colors: (
  border: $dark-gray,
  bg: $default-color,
  font: $dark-gray,
  hover: (
    bg: $dark-gray,
    font: $white
  )
 );
 .btn {
  display: block;
  min-width: 270px;
  padding: 8px 10px;
  @apply border-4 rounded-md;
  border-style: solid;
  border-color: $default-color;
  background-color: map-get($btn-colors, bg);
 }
@mixin btn($colors: $btn-colors) {
  border-color: map-get($colors, border);
  background-color: map-get($colors, bg);
  font-size: 1.05em;
  color: map-get($colors, font);
  &[disabled] {
    opacity: .7;
  }
  &:hover:not([disabled]) {
    $hovers: map-get($colors, hover);
    background-color: map-get($hovers, bg);
    color: map-get($hovers, font);
  }
  @content;
 }
@mixin btn-reverse($leading-color: $dark-gray) {
  $colors: (
    border: $leading-color,
    bg: $leading-color,
    font: $white,
    hover: (
      bg: $default-color,
      font: $leading-color
    )
  );
  @include btn($colors);
 }
@mixin button($reverse: false, $has-icon: false) {
  @if not $reverse {
    @include btn()
  } @else {
    @include btn-reverse($navy-blue);
  }
  @if $has-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
      margin-right: 10px;
      font-size: 1.3em;
    }
  }
  @content;
 }
@mixin ghost-button($has-icon: false) {
  @include button($has-icon: $has-icon);
  position: relative;
  font-size: 1.2em;
  border: unset;
  &:hover:not([disabled]) {
    background-color: $default-color;
    color: $dark-gray;
    &::after {
      width: 98%;
    }
  }
  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    width: 30%;
    height: 2px;
    background-color: $dark-gray;
    transform: translateY(2px);
    transition: width .3s linear;
  }
 }
--- a/scss/_colors.scss
+++ b/scss/_colors.scss
@@ -1,7 +1,10 @@
 // default colors
 $gray: #fafafa;
 $dark-gray: #4f4f4f;
 $navy-blue: #436da7 !default;
 // default colors for style
 $text-color: #2c3e50;
 $bg-color: white;
 $white: white;
--- a/scss/_media.scss
+++ b/scss/_media.scss
@@ -0,0 +1,34 @@
@mixin media($min-max, $reverse: false) {
  $type: max-width;
  @if $reverse {
    $type: min-width;
    $min-max: $min-max + 1;
  }
  @media screen and ($type: $min-max) {
    @content
  }
 }
@mixin media-mobile($reverse: false) {
  @include media(480px, $reverse) {
    @content
  }
 }
@mixin media-tablet($reverse: false) {
  @include media(768px, $reverse) {
    @content
  }
 }
@mixin media-small($reverse: false) {
  @include media(1024px, $reverse) {
    @content
  }
 }
@mixin media-large($reverse: false) {
  @include media(1200px, $reverse) {
    @content
  }
 }
--- a/scss/default.scss
+++ b/scss/default.scss
@@ -1,28 +1,42 @@
@import "media";
@import "root";
@import "all";
 a {
  text-decoration: none;
 }
 h2 {
  font-size: 1.8em;
  margin-bottom: 10px;
 }
 p {
  font-size: 1.1em;
  line-height: 1.4em;
  &:not(&:last-of-type) {
    padding-bottom: 10px;
  }
 }
 .container {
  max-width: 1200px;
  margin: 0 auto;
 }
 .loading {
  height: 300px;
-  .loading-animation {
+  @include media-large {
    padding: 0 10px;
  }
  @include media-small {
    padding: 0 20px;
  }
 }
 .loading {
  height: 200px;
  .loading_animation {
    margin: 20px auto;
    width: 50px;
    height: 50px;
@@ -32,8 +46,3 @@ p {
    animation: loading-animation 1s linear infinite;
  }
 }
@media screen and (max-width: 1200px) {
  .container {
    padding: 0 20px;
  }
 }
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,16 @@
 <script setup>
 import SiteHeader from '@/components/SiteHeader.vue';
 import FooterComponent from '@/components/FooterComponent.vue';
 </script>
 <template>
-  <div id="app">
+  <SiteHeader />
-    <SiteHeader />
+  <main
-    <router-view />
+    rel="main"
-    <Footer />
+  >
-  </div>
+    <RouterView />
  </main>
  <FooterComponent />
 </template>
 <style lang="scss">
@@ -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/HeaderReference/index.js
+++ b/src/HeaderReference/index.js
@@ -0,0 +1,33 @@
 import { ref } from 'vue';
 const head = ref(null);
 const description = ref(null);
 export function defineHeader(headString = null, descriptionArray = null) {
    head.value = headString;
    description.value = descriptionArray;
 }
 export function setHeaderTitle(value) {
    head.value = value;
 }
 export function setHeaderDescription(value) {
    description.value = value;
 }
 export function getHeaderTitle() {
    return head;
 }
 export function getHeaderDescription() {
    return description;
 }
 export function clearHeaderTitle() {
    head.value = null;
 }
 export function clearHeaderDescription() {
    description.value = null;
 }
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -1,56 +0,0 @@
 <template>
  <button class="btn" :class="{ 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>
 $btn-blue-color: #436DA7;
 $btn-gray-color: #4f4f4f;
 $hover-btn-color: white;
 .btn {
  display: flex;
  min-width: 270px;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 3px solid $btn-gray-color;
  background-color: transparent;
  color: $btn-gray-color;
  border-radius: 3px;
  font-size: 1.05em;
  .icon {
    margin-right: 10px;
    font-size: 1.3em;
  }
  &:hover {
    background-color: $btn-gray-color;
    color: $hover-btn-color;
  }
 }
 .reverse {
  background-color: $btn-blue-color;
  border-color: $btn-blue-color;
  color: $hover-btn-color;
  &:hover {
    background-color: transparent;
    color: $btn-blue-color;
  }
 }
 </style>
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,102 +0,0 @@
 <template>
  <footer class="footer">
    <div class="footer-container">
      <div class="logo">Kamil<span class="logo-element">Craft</span></div>
      <ul class="social-media">
        <li class="social-link"
            v-for="link in socialLinks"
            :key="link.title.slug">
          <a class="link"
             :href="link.link"
             :title="link.title"
             target="_blank">
            <font-awesome-icon class="icon" :icon="['fab', link.icon]" />
            <span class="title">{{ link.title }}</span>
          </a>
        </li>
      </ul>
    </div>
    <div class="container"></div>
  </footer>
 </template>
 <style lang="scss" scoped>
@import "scss/default";
 .footer {
  background-color: #323232;
  padding: 35px 0;
  &-container {
    @extend .container;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .logo {
      padding: 14px 20px 14px 40px;
      font-family: 'Thasadith', sans-serif;
      font-size: 2.5em;
      color: #D4D4D4;
      background-color: #5B5B5B;
      .logo-element {
        color: #A2CF00;
      }
    }
    .social-media {
      display: flex;
      list-style: none;
      .social-link {
        margin-right: 25px;
        font-size: 1.1em;
        a {
          color: #A3A3A3;
          .icon {
            margin-right: 5px;
          }
          @media screen and (max-width: 790px) {
            .title {
              display: none;
            }
          }
        }
        &:last-child {
          margin-right: 0;
        }
      }
      @media screen and (max-width: 500px) {
        padding-right: 15px;
      }
    }
    @media screen and (max-width: 500px) {
      padding: 0;
    }
  }
  @media screen and (max-width: 500px) {
    padding: 15px 0;
  }
 }
 </style>
 <script>
 export default {
  name: 'Footer',
  data () {
    return {
      socialLinks: [
        { link: 'https://www.youtube.com/user/kamilniemczycki', icon: 'youtube', title: 'Oglądaj mnie na YouTube' },
        { link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku' }
      ]
    }
  }
 }
 </script>
--- a/src/components/FooterComponent.vue
+++ b/src/components/FooterComponent.vue
@@ -0,0 +1,53 @@
 <script setup>
 const socialLinks = [
  {
    link: 'https://www.youtube.com/user/kamilniemczycki',
    icon: 'youtube',
    title: 'Oglądaj mnie na YouTube',
    shortcut: 'YouTube'
  },
  {
    link: 'https://www.facebook.com/nikcamii',
    icon: 'facebook',
    title: 'Znajdź mnie na Facebooku',
    shortcut: 'Facebook'
  },
  {
    link: 'https://github.com/kamilniemczycki/kamilcraft.com',
    icon: 'github',
    title: 'Kod na GitHub',
    shortcut: 'GitHub'
  }
 ];
 </script>
 <template>
  <footer class="bg-neutral-800 py-8">
    <div class="flex items-center justify-between max-w-screen-xl mx-auto">
      <div class="bg-neutral-600 text-white pl-10 pr-5 py-2.5 text-logo-size leading-normal font-thasadith">
        Kamil<span class="text-kamilcraft-green">Craft</span>
      </div>
      <ul class="flex gap-5 pr-3 text-lg">
        <li
          v-for="link in socialLinks"
          :key="link.title.slug"
        >
          <a
            class="text-neutral-400 hover:text-neutral-500"
            :href="link.link"
            :title="link.title"
            target="_blank"
            rel="noopener nofollow noreferrer"
          >
            <FontAwesomeIcon
              class="mr-1"
              :icon="['fab', link.icon]"
            />
            <span class="hidden lg:inline-block">{{ link.title }}</span>
            <span class="hidden sm:inline-block lg:hidden">{{ link.shortcut }}</span>
          </a>
        </li>
      </ul>
    </div>
  </footer>
 </template>
--- a/src/components/GhostButton.vue
+++ b/src/components/GhostButton.vue
@@ -1,60 +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>
 $btn-gray-color: #4f4f4f;
 .btn {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  background-color: transparent;
  color: $btn-gray-color;
  font-size: 1.2em;
  border: unset;
  .icon {
    margin-right: 10px;
    font-size: 1.3em;
  }
  &:hover {
    &::after {
      width: 98%;
    }
  }
  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    width: 30%;
    height: 2px;
    background-color: $btn-gray-color;
    transform: translateY(2px);
    transition: width .3s linear;
  }
 }
 </style>
--- a/src/components/HomePageElement.vue
+++ b/src/components/HomePageElement.vue
@@ -1,23 +0,0 @@
 <template>
  <div class="hello">
    <h1>{{ $route.meta.title }}</h1>
    <p>Witam na mojej stronie głównej. Wszystkich zainteresowanych oczywiście 😁</p>
  </div>
 </template>
 <style scoped lang="scss">
  h1 {
    margin: 30px 0 20px;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
 </style>
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -1,191 +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>
 .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;
      }
    }
  }
  @media screen and (max-width: 600px) {
    .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;
    }
  }
 }
@media screen and (max-width: 600px) {
  .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.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,136 @@
 <script setup>
 import { ref, computed } from 'vue';
 defineProps({
  isHomePage: {
    type: Boolean,
    default: false,
  },
 });
 const menuItems = [
  {
    slug: 'start',
    title: 'Start',
    uri: '/'
  },
  {
    slug: 'projects',
    title: 'Projekty',
    uri: '/projects'
  },
  {
    slug: 'about',
    title: 'O mnie',
    uri: '/about'
  },
  {
    slug: 'contact',
    title: 'Kontakt',
    uri: '/contact'
  }
 ];
 const clicked = ref(false);
 const isClicked = computed(() => clicked.value);
 function changeClickedStatus() {
  clicked.value = !clicked.value;
 }
 function clickMenu() {
  changeClickedStatus();
 }
 function linkClicked() {
  if (isClicked.value) {
    changeClickedStatus();
  }
 }
 </script>
 <template>
  <div
    class="flex relative items-center justify-between md:justify-start max-w-screen-xl mx-auto gap-5"
    :class="{ 'clicked-menu': isClicked }"
  >
    <RouterLink to="/">
      <div
        class="bg-white text-gray-800 pl-10 pr-5 py-2.5 text-logo-size leading-normal font-thasadith"
        :class="{ 'clicked-logo': isClicked }"
        @click="linkClicked"
      >
        Kamil<span class="text-kamilcraft-green">Craft</span>
      </div>
    </RouterLink>
    <nav>
      <button
        class="md:hidden text-3xl mx-5"
        :class="[ (isHomePage && !isClicked) ? 'text-white' : 'text-gray-600' ]"
        title="Menu"
        @click="clickMenu"
      >
        <font-awesome-icon
          v-if="!isClicked"
          icon="bars"
        />
        <font-awesome-icon
          v-else
          icon="times"
        />
      </button>
      <ul
        :class="[ isClicked ? 'absolute top-20 left-0 w-full z-10 text-3xl text-right bg-white shadow-lg' : 'hidden md:flex md:flex-row md:gap-9' ]"
      >
        <li
          v-for="menuItem in menuItems"
          :key="menuItem.slug"
          :class="{ 'py-5 px-3 leading-6': isClicked }"
          @click="linkClicked"
        >
          <RouterLink
            v-slot="{ href, navigate, isActive }"
            :to="menuItem.uri"
            custom
          >
            <a
              :href="href"
              class="hover:text-kamilcraft-green"
              :class="[ (!isActive && isHomePage && !isClicked) ? 'text-white' : (isActive ? 'text-kamilcraft-green' : 'text-gray-500') ]"
              @click="navigate"
            >
              {{ menuItem.title }}
            </a>
          </RouterLink>
        </li>
      </ul>
    </nav>
  </div>
 </template>
 <style lang="scss">
 .clicked-menu {
  animation: bg-menu-animation 500ms forwards ease-in-out;
 }
 .clicked-logo {
  animation: bg-logo-animation 500ms forwards ease-in-out;
 }
@keyframes bg-menu-animation {
  0% {
    background-color: transparent;
  }
  100% {
    background-color: #EFEFEF;
  }
 }
@keyframes bg-logo-animation {
  0% {
    background-color: white;
  }
  100% {
    background-color: #F6F6F6;
  }
 }
 </style>
--- a/src/components/SelectedProjects.vue
+++ b/src/components/SelectedProjects.vue
@@ -1,153 +1,113 @@
 <script setup>
 import { useRouter } from 'vue-router';
 import BaseButton from '@/components/buttons/BaseButton.vue';
 import Markdown from "@/components/markdowns/MarkdownShort.vue";
 defineProps({
  projects: {
    type: Array,
    default: () => []
  }
 })
 const router = useRouter();
 </script>
 <template>
-  <div class="projects">
+  <section
-    <slot></slot>
+    id="projects"
-    <div class="container">
+    class="max-w-screen-xl mx-auto px-6 xl:px-2 py-10"
-      <div class="project"
+  >
-           v-for="project in projects"
+    <slot />
-           :key="project.title.slug">
+    <div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-5">
-        <img class="project-image" :src="project.image" :alt="project.title" />
+      <div
-        <div class="project-content">
+        v-for="project in projects"
-          <h3 class="title">{{ project.title }}</h3>
+        :key="project.title.slug"
-          <div class="release">{{ project.version }}</div>
+        class="flex flex-col lg:grid grid-project relative bg-neutral-100 border border-gray-200 rounded-md"
-          <div class="description">
+      >
-            <p>{{ project.short_description }}</p>
+        <img
-          </div>
+          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="more-button">
+        <div
-          <base-btn has-icon
+          class="project-button lg:flex lg:absolute lg:justify-center lg:items-center lg:left-0 lg:top-0 lg:w-full lg:h-full"
-                    icon="eye"
+        >
-                    is-reverse
+          <BaseButton
-                    @click.native="$router.push({ name: 'Project', params: { id: project.id } })"
+            has-icon
-                    class="btn">O projekcie</base-btn>
+            icon="eye"
            is-reverse
            class="w-full lg:w-80 rounded-t-none lg:rounded-t-md"
            title="Pokaż więcej"
            @click="router.push({ name: 'Project', params: { id: project.id } })"
          >
            O projekcie
          </BaseButton>
        </div>
      </div>
    </div>
-  </div>
+  </section>
 </template>
 <style lang="scss">
-.projects {
+@import 'scss/media';
  padding-top: 45px;
  padding-bottom: 45px;
-  .container {
+.grid-project {
-    display: grid;
+  animation: load-project 2s forwards;
    align-items: flex-start;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(80px, auto);
    column-gap: 25px;
    row-gap: 20px;
-    .project {
+  .project-image, .project-content {
-      display: grid;
+    object-position: top center;
-      position: relative;
+  }
      grid-template-areas: 'image content';
      grid-template-columns: 200px 1fr;
      background-color: #fafafa;
      border: 1px solid rgba(0, 0, 0, .025);
      border-radius: 5px;
      animation: load-project 2s forwards;
-      .project-image {
+  .project-image {
-        grid-area: image;
+    grid-area: image;
-        width: 200px;
+  }
        height: 200px;
        object-fit: cover;
      }
-      .project-content {
+  .project-content {
-        grid-area: content;
+    grid-area: content;
        padding: 10px 15px;
        height: 200px;
        overflow-y: hidden;
        position: relative;
-        .title {
+    &::after {
-          font-size: 1.3em;
+      background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 60%, #fafafa);
          font-weight: normal;
          line-height: 1.5em;
        }
        .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;
      }
    }
  }
 }
-    @media screen and (min-width: 900px) {
+@screen lg {
-      .project {
+  .grid-project {
-        .more-button {
+    grid-template-areas: 'image content';
    grid-template-columns: 200px 1fr;
    .project-button {
      .btn {
        display: none;
      }
      &:hover {
        background: rgba(0, 0, 0, .3);
        border-radius: 5px;
        .btn {
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          .btn {
            display: none;
          }
          &:hover {
-            background: rgba(0, 0, 0, .3);
+            background-color: rgba(255, 255, 255, .9);
            border-radius: 5px;
            .btn {
              display: flex;
              color: white;
              border-style: none;
              &:hover {
                background-color: #385c8a;
              }
            }
          }
        }
      }
    }
    @media screen and (max-width: 900px) {
      .project {
        display: block;
        .project-image {
          width: 100%;
          height: 250px;
        }
        .project-content {
          height: auto;
          max-height: 250px;
        }
        .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;
          }
        }
      }
@@ -165,42 +125,4 @@
    opacity: 1;
  }
 }
@media screen and (max-width: 600px) {
  .projects .container {
    grid-template-columns: 1fr;
    padding: 25px;
    column-gap: 0;
    row-gap: 20px;
  }
 }
 </style>
 <script>
 import BaseButton from './BaseButton'
 export default {
  name: 'SelectedProjects',
  data () {
    return {}
  },
  mounted () {
    const header = {
      title: this.$route.meta.title,
      description: [
        'Witam Państwa na podstronie z moimi projektami!',
        'Lista i treść jest niekompletna! (BETA)'
      ]
    }
    this.$store.commit('setHeader', header)
  },
  props: {
    projects: {
      type: Array
    }
  },
  components: {
    'base-btn': BaseButton
  }
 }
 </script>
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -1,82 +1,49 @@
 <script setup>
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import Navigation from '@/components/NavigationHeader.vue';
 import { getHeaderTitle, getHeaderDescription } from '@/HeaderReference';
 const route = useRoute();
 const isHome = computed(() => route.path === '/');
 const thisClass = computed(() => [isHome.value ? 'home-page' : 'sub-page']);
 const title = getHeaderTitle();
 const isTitle = computed(() => title.value !== null);
 const description = getHeaderDescription();
 const isDescription = computed(() => description.value !== null);
 </script>
 <template>
  <header :class="thisClass">
-    <navigation/>
+    <Navigation :is-home-page="isHome" />
-    <div v-if="isTitle" class="header-info" :class="{ 'header-info-home': isHome }">
+    <div
-      <h1>{{ getTitle }}</h1>
+      v-if="isTitle"
-      <p v-if="isDescription && descriptionType === 'string'">{{ getDescription }}</p>
+      class="max-w-screen-header-content mx-auto text-center px-2.5 py-10"
-      <p v-else-if="isDescription && descriptionType === 'array'"
+      :class="{ 'text-white': isHome }"
-         v-for="(desc, key) in getDescription" :key="key">{{ desc }}</p>
+    >
      <h1 class="mb-6 relative font-light text-[2.5rem] leading-[3.5rem] after:block after:absolute after:w-24 after:h-0.5 after:bg-kamilcraft-green after:left-1/2 after:-ml-12">
        {{ title }}
      </h1>
      <template v-if="isDescription">
        <p
          v-for="(descriptionLine, key) in description"
          :key="key"
        >
          {{ descriptionLine }}
        </p>
      </template>
    </div>
  </header>
 </template>
-<script>
+<style scoped>
 import Navigation from '@/components/Navigation'
 export default {
  name: 'SiteHeader',
  computed: {
    isHome () {
      return this.$route.path === '/'
    },
    thisClass () {
      return [this.isHome ? 'home-page' : 'sub-page']
    },
    getTitle () {
      return this.$store.getters.getHeader.title
    },
    isTitle () {
      return this.getTitle !== null
    },
    getDescription () {
      return this.$store.getters.getHeader.description
    },
    descriptionType () {
      const isArray = this.getDescription instanceof Array
      return isArray ? 'array' : typeof this.getDescription
    },
    isDescription () {
      return this.getDescription !== null
    }
  },
  components: {
    navigation: Navigation
  }
 }
 </script>
 <style lang="scss">
 .home-page {
  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
@@ -0,0 +1,43 @@
 <script setup>
 defineProps({
  hasIcon: {
    type: Boolean,
    default: false,
  },
  icon: {
    type: String,
    default: '',
  },
  isReverse: {
    type: Boolean,
    default: false,
  },
 });
 </script>
 <template>
  <button
    class="btn"
    :class="{ 'btn-reverse': isReverse }"
    title="Wyślij wiadomość"
  >
    <font-awesome-icon
      v-if="hasIcon && icon"
      class="icon"
      :icon="icon"
    />
    <slot />
  </button>
 </template>
 <style lang="scss">
@import 'scss/btn';
 .btn {
  @include button($has-icon: true);
 }
 .btn-reverse {
  @include button(true, true);
 }
 </style>
--- a/src/components/buttons/GhostButton.vue
+++ b/src/components/buttons/GhostButton.vue
@@ -0,0 +1,31 @@
 <script setup>
 defineProps({
  hasIcon: {
    type: Boolean,
    default: false
  },
  icon: {
    type: String,
    default: '',
  },
 });
 </script>
 <template>
  <button class="btn">
    <font-awesome-icon
      v-if="hasIcon && icon"
      class="icon"
      :icon="icon"
    />
    <slot />
  </button>
 </template>
 <style lang="scss" scoped>
@import 'scss/btn';
 .btn {
  @include ghost-button();
 }
 </style>
--- a/src/components/markdowns/MarkdownDescription.vue
+++ b/src/components/markdowns/MarkdownDescription.vue
@@ -0,0 +1,20 @@
 <script setup>
 import MarkdownIt from 'markdown-it';
 const markdown = new MarkdownIt();
 const props = defineProps({
    source: {
        type: String,
        required: true,
    }
 });
 function render() {
    return markdown.render(props.source);
 }
 </script>
 <template>
  <div v-html="render()" />
 </template>
--- a/src/components/markdowns/MarkdownShort.vue
+++ b/src/components/markdowns/MarkdownShort.vue
@@ -0,0 +1,33 @@
 <script setup>
 import MarkdownIt from 'markdown-it';
 const markdown = new MarkdownIt();
 const props = defineProps({
    source: {
        type: String,
        required: true,
    }
 });
 function render() {
    const nodeChildElement = markdown.render(props.source);
    const nodeElement = document.createElement('div');
    nodeElement.innerHTML = nodeChildElement;
    let length = 0;
    let returnText = '';
    nodeElement.querySelectorAll('p').forEach(value => {
        if (length < 351) {
            length += value.innerText.length;
            returnText += value.innerText + ' ';
        } else {
            return;
        }
    });
    return returnText.substring(0, 350).trim();
 }
 </script>
 <template>
  <p v-text="render()" />
 </template>
--- a/src/components/sections/About.vue
+++ b/src/components/sections/About.vue
@@ -1,143 +0,0 @@
 <template>
  <div class="about">
    <div class="container">
      <div id="grid">
        <div id="grid-text">
          <h2 class="name">Kamil Niemczycki</h2>
          <div class="tagline">Web Developer</div>
          <p>Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
            W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.</p>
          <div class="buttons">
            <base-btn has-icon
                      icon="portrait"
                      is-reverse
                      @click.native="scrollTo('.selected-projects')">Wybrane projekty</base-btn>
            <base-btn has-icon
                      icon="user"
                      @click.native="$router.push('about')">Więcej o mnie</base-btn>
          </div>
        </div>
        <div id="grid-photo">
          <figure id="about-photo">
            <img :src="`${publicPath}assets/me.jpg`" />
          </figure>
        </div>
      </div>
    </div>
  </div>
 </template>
 <style lang="scss">
 .about {
  background-color: var(--gray-color) !important;
  .container {
    padding-top: 45px;
    padding-bottom: 45px;
  }
  h2.name {
    font-size: 2.1em;
    margin-bottom: 5px;
  }
  div.tagline {
    font-size: 1.6em;
    margin-bottom: .7em;
  }
  #grid {
     display: grid;
     grid-template-columns: 1fr 1fr .8fr;
     grid-template-areas:
       'text text photo';
     align-items: center;
     #grid-text {
       grid-area: text;
       text-align: left;
       .buttons {
         display: flex;
         justify-content: flex-start;
         padding: 25px 0;
         .btn {
           margin-right: 20px;
           &:last-child {
             margin-right: 0;
           }
           @media screen and (max-width: 600px) {
             margin: 0 auto 15px;
             &:last-child {
               margin: 0 auto;
             }
           }
         }
         @media screen and (max-width: 900px) {
           justify-content: center;
           margin-bottom: 25px;
         }
         @media screen and (max-width: 600px) {
           display: block;
           margin-bottom: 25px;
         }
       }
       @media screen and (max-width: 400px) {
         .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;
       }
     }
  }
  @media (max-width: 900px) {
    #grid {
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
    'text text'
    'photo photo';
    }
  }
 }
 </style>
 <script>
 import BaseButton from '../BaseButton'
 export default {
  data () {
    return {
      publicPath: process.env.BASE_URL
    }
  },
  methods: {
    scrollTo (id) {
      document.querySelector(id).scrollIntoView({
        behavior: 'smooth'
      })
    }
  },
  components: {
    'base-btn': BaseButton
  }
 }
 </script>
--- a/src/components/sections/AboutSection.vue
+++ b/src/components/sections/AboutSection.vue
@@ -0,0 +1,78 @@
 <script setup>
 import BaseButton from '@/components/buttons/BaseButton.vue'
 import { useRouter } from 'vue-router';
 const router = useRouter();
 function scrollTo(id) {
  document.querySelector(id).scrollIntoView({
    behavior: 'smooth',
  });
 }
 </script>
 <template>
  <div class="bg-neutral-50">
    <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
      <div
        id="grid-columns"
        class="flex flex-col md:grid items-center"
      >
        <div id="grid-content">
          <h2 class="text-[2rem]">
            Kamil Niemczycki
          </h2>
          <div class="mb-2 text-[1.5rem]">
            Web Developer
          </div>
          <p>
            Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
            W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.
          </p>
          <div class="flex flex-col sm:flex-row justify-center md:justify-start py-6 gap-5">
            <BaseButton
              has-icon
              icon="portrait"
              is-reverse
              @click="scrollTo('#projects')"
            >
              Wybrane projekty
            </BaseButton>
            <BaseButton
              has-icon
              icon="user"
              @click="router.push('about')"
            >
              Więcej o mnie
            </BaseButton>
          </div>
        </div>
        <div id="grid-photo">
          <figure>
            <img
              src="/assets/me.jpg"
              class="mx-auto rounded-full object-cover w-[12.5rem] h-[12.5rem]"
              alt="Moje zdjęcie"
            >
          </figure>
        </div>
      </div>
    </div>
  </div>
 </template>
 <style lang="scss">
 #grid-columns {
  grid-template-columns: 1fr 1fr .8fr;
  grid-template-areas:
    'text text photo';
 }
 #grid-content {
  grid-area: text;
 }
 #grid-photo {
  grid-area: photo;
 }
 </style>
--- a/src/components/sections/Experiences.vue
+++ b/src/components/sections/Experiences.vue
@@ -1,251 +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">
 .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);
        }
      }
      @media screen and (max-width: 1100px) {
        grid-template-columns: repeat(3, 1fr);
      }
      @media screen and (max-width: 800px) {
        grid-template-columns: repeat(2, 1fr);
      }
      @media screen and (max-width: 550px) {
        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,96 @@
 <script setup>
 import { onMounted, reactive } from 'vue';
 let list = reactive([]);
 onMounted(() => {
  const importedList = () => import('@/resource/data/Technologies');
  importedList().then(data => {
    data.default.forEach(obj => {
      obj.showMore = false;
      list.push(obj);
    });
  });
 });
 function parseText(text) {
  return text.substr(0, 200).trim();
 }
 function showMore(skill) {
  skill.showMore = !skill.showMore;
 }
 </script>
 <template>
  <div>
    <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
      <h2 class="text-[2rem] mb-2">
        Wykorzystywane technologie
      </h2>
      <p class="mb-5">
        Programowaniem stron internetowych zajmuję się najmłodszych lat, czyli od 2011 roku. Pierwsze projekty były
        proste i najczęściej na użytek własny. Jednakże, doświadczenie zebrane przez lata pomogło mi wyselekcjonować
        technologie, które wspomagają pisanie i rozwijanie oprogramowania.
      </p>
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
        <div
          v-for="(skill, skillKey) in list"
          :key="skillKey"
          class="p-4 bg-neutral-50 rounded-lg"
        >
          <header>
            <div class="flex gap-2 text-3xl mb-2">
              <font-awesome-icon
                v-for="(icon, iconKey) in skill.icons"
                :key="iconKey"
                :class="icon.class"
                :icon="['fab', icon.name]"
                :alt="icon.alt"
                :title="icon.title"
              />
            </div>
            <h3 class="text-lg font-bold">
              {{ skill.header }}
            </h3>
          </header>
          <p class="text-sm">
            {{ skill.showMore || skill.description.length < 200 ? skill.description : parseText(skill.description) }}...
            <a
              v-if="!skill.showMore"
              class="text-neutral-500 hover:text-neutral-700 hover:underline cursor-pointer"
              @click="showMore(skill)"
            >Więcej</a>
          </p>
        </div>
      </div>
    </div>
  </div>
 </template>
 <style scoped>
 .icon-js {
  color: #F1DE4F;
 }
 .icon-php {
  color: #777bb3;
 }
 .icon-laravel {
  color: #FF2D20;
 }
 .icon-vue {
  color: #64B687;
 }
 .icon-html5 {
  color: #DE6E3C;
 }
 .icon-node {
  color: #64B687;
 }
 .icon-css3 {
  color: #53A7DC;
 }
 .icon-sass {
  color: #BF6B97;
 }
 </style>
--- a/src/components/sections/FavoriteProjects.vue
+++ b/src/components/sections/FavoriteProjects.vue
@@ -1,51 +1,51 @@
 <script setup>
 import { ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import Projects from '@/components/SelectedProjects.vue';
 import GhostButton from '@/components/buttons/GhostButton.vue';
 const router = useRouter();
 const apiURL = import.meta.env.VITE_APP_API_URL;
 let select_projects = ref([]);
 onMounted(() => {
  loadProjectList();
 });
 function loadProjectList() {
  fetch(apiURL + '/projects?category=selected')
    .then(response => response.json())
    .then(data => {
      select_projects.value = data
    });
 }
 </script>
 <template>
-  <section class="selected-projects">
+  <section class="bg-neutral-50">
    <projects :projects="select_projects">
-      <div class="header-container">
+      <header>
-        <h2>Wybrane projekty</h2>
+        <h2 class="text-[2rem] mb-2">
-        <p>Poniżej przedstawiam Państwu, wybraną przeze mnie, listę projektów.</p>
+          Wybrane projekty
-      </div>
+        </h2>
        <p class="mb-5">
          Poniżej przedstawiam Państwu, wybraną przeze mnie, listę projektów.
        </p>
      </header>
    </projects>
-    <div class="more-button">
+    <div class="w-full -translate-y-5 pb-5 more-button">
-      <GhostButton @click.native="$router.push('projects')">
+      <GhostButton
-        RESZTA PROJEKTÓW
+        class="mx-auto"
        @click="router.push('projects')"
      >
        ZOBACZ WIĘCEJ
      </GhostButton>
    </div>
  </section>
 </template>
-<script>
+<style lang="scss">
 import Projects from '../SelectedProjects'
 import GhostButton from '../GhostButton'
 export default {
  name: 'FavoriteProjects',
  data () {
    return {
      publicPath: process.env.BASE_URL,
      select_projects: []
    }
  },
  mounted () {
    this.loadProjectList()
  },
  methods: {
    loadProjectList () {
      fetch('https://api.kamilcraft.com/projects/category/selected')
        .then(response => response.json())
        .then(data => {
          this.select_projects = data
        })
    }
  },
  components: {
    GhostButton,
    Projects
  }
 }
 </script>
 <style lang="scss" scoped>
@import "scss/default";
 .selected-projects {
@@ -57,12 +57,12 @@ export default {
    .btn {
      margin: 0 auto;
-      @media screen and (max-width: 600px) {
+      @include media-tablet {
        width: 100%;
      }
    }
-    @media screen and (max-width: 600px) {
+    @include media-tablet {
      padding: 0 25px;
    }
  }
--- a/src/components/sections/contacts/MailContact.vue
+++ b/src/components/sections/contacts/MailContact.vue
@@ -1,219 +1,255 @@
 <script setup>
 import { ref, reactive, watch, computed } from 'vue';
 import BaseButton from '@/components/buttons/BaseButton.vue';
 function emailValidate (mailObj) {
  const mailFormat = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/;
  return mailObj.match(mailFormat);
 }
 async function postData (url = '', data = {}) {
  return await fetch(url, {
    method: 'POST',
    cache: 'no-cache',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    },
    body: JSON.stringify(data),
  }).then(r =>  r.json().then(response => ({ status: r.status, data: response })) );
 }
 const buttonDisabled = ref(false);
 const isError = ref(false);
 const email = ref(null);
 const message = ref(null);
 const sender = ref(null);
 const errors = reactive({
  email: null,
  message: null,
  sender: null,
 });
 const responseMessage = reactive({
  type: null,
  data: null,
 });
 const isButtonDisabled = computed(() => buttonDisabled.value || errors.email || errors.message || errors.sender);
 const messageLength = computed(() => `${message.value?.length ?? 0}/500`);
 const senderLength = computed(() => `${sender.value?.length ?? 0}/50`);
 watch([isError, message], async ([errorStatus, messageValue]) => {
  const errMsg = (len) => {
    if (len < 3)
      return 'Wymanage są przynajmniej 3 znaki.';
    if (len > 500)
      return 'Wiadomość nie może mieć więcej niż 500 znaków.';
  };
  errors.message = (messageValue !== null || errorStatus) &&
    ((messageValue?.length ?? 0) < 3 || (messageValue?.length ?? 0) > 500)
    ? errMsg(messageValue?.length ?? 0)
    : null;
 });
 watch([isError, email], async ([errorStatus, emailValue]) => {
  errors.email = (emailValue !== null || errorStatus) && !emailValidate(emailValue ?? '') ? 'E-mail powinien mieć formę: adam.nowak@gmail.com.' : null;
 });
 watch([isError, sender], async ([errorStatus, senderValue]) => {
    const errMsg = (len) => {
    if (len < 3)
      return 'Wymanage są przynajmniej 3 znaki.';
    if (len > 50)
      return 'Podpis nie może mieć więcej niż 50 znaków.';
  };
  errors.sender = (senderValue !== null || errorStatus) &&
    ((senderValue?.length ?? 0) < 3 || (senderValue?.length ?? 0) > 50)
    ? errMsg(senderValue?.length ?? 0)
    : null;
 });
 function checkForm() {
  isError.value = false;
  responseMessage.type = null;
  responseMessage.data = null;
  if (email.value === null || !emailValidate(email.value)) {
    errors.email = '';
    isError.value = true;
  }
  if (message.value === null) {
    errors.message = '';
    isError.value = true;
  }
  if (sender.value === null) {
    errors.sender = '';
    isError.value = true;
  }
  if (isError.value) {
    responseMessage.type = 'err';
    responseMessage.data = 'Podane dane są niepoprawne. Sprawdź komunikaty pod polami.';
  }
 }
 function formSubmit(event) {
  event.preventDefault();
  checkForm();
  if (!isError.value) {
    buttonDisabled.value = true;
    const sendUrl = import.meta.env.VITE_APP_API_URL;
    postData(`${sendUrl}/message`, {
      email: email.value,
      message: message.value,
      sender: sender.value,
    }).then(({ status, data }) => {
      console.log(status, data);
      if (200 == status) {
        email.value = null;
        sender.value = null;
        message.value = null;
        responseMessage.type = 'ok';
        responseMessage.data = data.message;
      } else if (422 == status) {
        responseMessage.type = 'err';
        responseMessage.data = 'Podane dane są niepoprawne. Sprawdź komunikaty pod polami.';
        if (data.errors.email !== undefined)
          errors.email = data.errors.email[0];
        if (data.errors.message !== undefined)
          errors.message = data.errors.message[0] ?? null;
        if (data.errors.sender !== undefined)
          errors.sender = data.errors.sender[0] ?? null;
      } else {
        responseMessage.type = 'err';
        responseMessage.data = 'Wystąpił błąd podczas wysyłania wiadomości. Proszę spróbować później.';
      }
      buttonDisabled.value = false;
    });
  }
  scrollTo('#contact-form');
 }
 function scrollTo(id) {
  document.querySelector(id).scrollIntoView({
    behavior: 'smooth',
  });
 }
 </script>
 <template>
-  <div class="contact-container" style="flex-basis: 500px;">
+  <div
-    <div class="message-status"></div>
+    id="contact-form"
-    <header class="head">Formularz kontaktowy:</header>
+    class="contact_container w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[500px] p-2 shadow"
-    <form id="form-point" @submit="formSubmit">
+  >
-      <input v-model="emailValue" class="contact-input" type="text" name="email" placeholder="Twój adres e-mail." />
+    <header class="mb-1.5">
-      <textarea v-model="messageValue" class="contact-input" name="message" placeholder="Twoja wiadomość."></textarea>
+      <h3 class="text-xl">
-      <input v-model="senderValue" class="contact-input" type="text" name="sender" placeholder="Twój podpis." />
+        Formularz kontaktowy
-      <input :disabled="buttonDisabled" class="contact-input" type="submit" value="Wyślij"/>
+      </h3>
    </header>
    <form
      class="flex flex-col gap-3 justify-start items-start"
      @submit="formSubmit"
    >
      <div
        v-if="responseMessage.type === 'err'"
        class="w-full px-2 py-2.5 bg-red-100 text-red-700 text-sm rounded-md"
      >
        {{ responseMessage.data }}
      </div>
      <div
        v-else-if="responseMessage.type === 'ok'"
        class="w-full p-2 bg-green-100 text-green-700 text-sm rounded-md shadow"
      >
        {{ responseMessage.data }}
      </div>
      <div class="flex flex-col gap-1 w-full">
        <label
          class="text-gray-500"
          for="message"
        >
          W czym mogę pomóc?
        </label>
        <textarea
          id="message"
          v-model="message"
          class="w-full max-w-full min-h-[150px] px-2.5 py-2 border-b-2 border-neutral-300 rounded-md focus:border-neutral-400 hover:border-neutral-500 outline-none"
          :class="[ errors.message ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
          name="message"
          placeholder="Chciałbym zlecić wykonanie strony..."
        />
        <span
          :class="{ 'text-red-400': errors.message }"
        >
          {{ messageLength + (errors.message ? `. ${errors.message}` : '') }}
        </span>
      </div>
      <div class="flex flex-col gap-1 w-full">
        <label
          class="text-gray-500"
          for="email"
        >
          Gdzie mam odesłać odpowiedź?
        </label>
        <input
          id="email"
          v-model="email"
          class="w-full px-2.5 py-2 border-b-2 border-neutral-300 rounded-md focus:border-neutral-400 hover:border-neutral-500 outline-none"
          :class="[ errors.email ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
          type="text"
          name="email"
          placeholder="Twój adres e-mail"
        >
        <span
          v-if="errors.email"
          class="text-red-400"
        >
          {{ errors.email }}
        </span>
      </div>
      <div class="flex flex-col gap-1 w-full">
        <label
          class="text-gray-500"
          for="sender"
        >
          Podpis
        </label>
        <input
          id="sender"
          v-model="sender"
          class="w-full px-2.5 py-2 border-b-2 border-neutral-300 rounded-md focus:border-neutral-400 hover:border-neutral-500 outline-none"
          :class="[ errors.sender ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
          type="text"
          name="sender"
        >
        <span
          :class="{ 'text-red-400': errors.sender }"
        >
          {{ senderLength + (errors.sender ? `. ${errors.sender}` : '') }}
        </span>
      </div>
      <BaseButton
        is-reverse
        class="py-1 w-full"
        :disabled="isButtonDisabled"
      >
        Wyślij
      </BaseButton>
    </form>
  </div>
 </template>
-<script>
+<style lang="scss">
-function emailValidate (mailObj) {
+@screen md {
-  const mailFormat = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/
+  .contact_container {
-  return !!mailObj.value.match(mailFormat)
+    flex-basis: 500px;
 }
 async function postData (url = '', data = {}) {
  const response = await fetch(url, {
    method: 'POST',
    cache: 'no-cache',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  })
  return response.json()
 }
 export default {
  name: 'MailContact',
  data () {
    return {
      buttonDisabled: false,
      statusError: 0,
      email: {},
      emailValue: '',
      message: {},
      messageValue: '',
      sender: {},
      senderValue: ''
    }
  },
  watch: {
    emailValue (value) {
      if (this.statusError > 0 && emailValidate(this.email)) {
        this.email.classList.remove('error')
      }
    },
    messageValue (value) {
      if (this.statusError > 0 && value !== '') {
        this.message.classList.remove('error')
      }
    },
    senderValue (value) {
      if (this.statusError > 0 && value !== '') {
        this.sender.classList.remove('error')
      }
    }
  },
  methods: {
    clearErrors () {
      this.statusError = 0
      this.email.classList.remove('error')
      this.message.classList.remove('error')
      this.sender.classList.remove('error')
    },
    checkForm () {
      if (!emailValidate(this.email)) {
        this.email.classList.add('error')
        this.statusError++
      }
      if (this.message.value === '') {
        this.message.classList.add('error')
        this.statusError++
      }
      if (this.sender.value === '') {
        this.sender.classList.add('error')
        this.statusError++
      }
    },
    formSubmit (event) {
      event.preventDefault()
      this.email = event.target[0]
      this.message = event.target[1]
      this.sender = event.target[2]
      this.clearErrors()
      this.checkForm()
      const messageElement = document.querySelector('.message-status')
      messageElement.classList.remove('message-status__ok', 'message-status__error')
      if (this.statusError === 0) {
        this.buttonDisabled = true
        postData('/send', {
          email: this.emailValue,
          message: this.messageValue,
          sender: this.senderValue
        }).then(result => {
          messageElement.classList.add(
            result.error ? 'message-status__error' : 'message-status__ok'
          )
          messageElement.textContent = result.message
          if (!result.error) {
            this.messageValue = ''
            this.emailValue = ''
            this.senderValue = ''
          }
          this.buttonDisabled = false
        }).catch(() => {
          messageElement.classList.add('message-status__error')
          messageElement.textContent = 'Wystąpił błąd podczas wysyłania wiadomości. Proszę spróbować później.'
          this.buttonDisabled = false
        })
      }
    }
  }
 }
 </script>
 <style lang="scss" scoped>
 .contact-container {
  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);
  header.head {
    padding: 10px;
    line-height: 1.6em;
    font-size: 1.3em;
    font-weight: bold;
  }
  form#form-point {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
 }
 .contact-container input, .contact-container textarea {
  width: 97%;
  border: 0;
  border-bottom: 2px solid #c9c9c9;
  padding: 10px 10px 8px;
  font-size: 1em;
  font-family: var(--font-family);
  line-height: 1.3em;
  margin-bottom: 10px;
  border-radius: 5px;
 }
 input.contact-input:focus, textarea.contact-input:focus {
  outline: none;
  border-color: black;
 }
 textarea.contact-input {
  max-width: 97%;
  min-width: 97%;
  min-height: 150px;
 }
 input.error, textarea.error {
  background-color: #ffc3b0;
  border-color: #ff865f;
  color: #c90000;
 }
 input.error::placeholder, textarea.error::placeholder {
  color: #c9000094;
 }
 input[type="submit"].contact-input {
  appearance: unset;
  color: white;
  background-color: #4CAF50;
  border-bottom: 2px solid #387d3b;
 }
 input[type="submit"].contact-input:hover {
  box-shadow: 0 0 8px rgba(0,0,0,.4);
 }
 input[disabled].contact-input {
  background-color: #cdcdcd;
  border-color: gray;
  color: black;
 }
 .message-status {
  display: none;
  margin: 5px;
  padding: 8px;
  border-radius: 5px;
 }
 .message-status__ok, .message-status__error {
  display: block;
 }
 .message-status__ok {
  background-color: #4CAF50;
  border: 1px solid #387d3b;
  color: white;
 }
 .message-status__error {
  background-color: #ffc3b0;
  border: 1px solid #ff865f;
  color: #c90000;
 }
@media screen and (max-width: 800px) {
  .contact-elements {
    display: block;
    width: auto;
  }
  #instagram, #facebook, #twitter, #email, #gg {
    font-size: 1em;
    line-height: 1.2em;
  }
 }
 </style>
--- a/src/components/sections/contacts/OtherContact.vue
+++ b/src/components/sections/contacts/OtherContact.vue
@@ -1,92 +1,112 @@
 <template>
-  <div class="contact-container" style="flex-basis: 410px">
+  <div class="contact_info w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[410px] p-2 shadow">
-    <header class="head">Inne formy kontaktu:</header>
+    <header class="mb-1.5">
-    <div class="contact-element">
+      <h3 class="text-xl">
-      <img class="contact-element-icon" src="/assets/img/instagram.jpg" />
+        Inne formy kontaktu:
-      <span id="instagram"><a href="https://www.instagram.com/nikcamii/" target="_blank">Instagram: @NiKCamii</a></span>
+      </h3>
-    </div>
+    </header>
-    <div class="contact-element">
+    <div class="flex flex-col gap-2.5 justify-start items-start">
-      <img class="contact-element-icon" src="/assets/img/facebook.jpg" />
+      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
-      <span id="facebook"><a href="https://www.facebook.com/nikcamii/" target="_blank">Facebook: @NiKCamii</a></span>
+        <img
-    </div>
+          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
-    <div class="contact-element">
+          src="/assets/img/instagram.jpg"
-      <img class="contact-element-icon" src="/assets/img/twitter.jpg" />
+          alt="Instagram"
-      <span id="twitter"><a href="https://twitter.com/nikcamii" target="_blank">Twitter: @NiKCamii</a></span>
+        >
-    </div>
+        <span
-    <div class="contact-element">
+          id="instagram"
-      <img class="contact-element-icon" src="/assets/img/gg.png" />
+          class="font-bold"
-      <span id="gg">GG: 38429969</span>
+        >
-    </div>
+          <a
-    <div class="contact-element">
+            href="https://www.instagram.com/nikcamii/"
-      <img class="contact-element-icon" src="/assets/img/user.jpg" />
+            target="_blank"
-      <span id="email"><a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a></span>
+            rel="noopener nofollow noreferrer"
            class="hover:underline"
          >Instagram: @NiKCamii</a>
        </span>
      </div>
      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
        <img
          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
          src="/assets/img/facebook.jpg"
          alt="Facebook"
        >
        <span
          id="facebook"
          class="font-bold"
        >
          <a
            href="https://www.facebook.com/nikcamii/"
            target="_blank"
            rel="noopener nofollow noreferrer"
            class="hover:text-gray-700 hover:underline"
          >Facebook: @NiKCamii</a>
        </span>
      </div>
      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
        <img
          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
          src="/assets/img/twitter.jpg"
          alt="Twitter"
        >
        <span
          id="twitter"
          class="font-bold"
        >
          <a
            href="https://twitter.com/nikcamii"
            target="_blank"
            rel="noopener nofollow noreferrer"
            class="hover:text-gray-700 hover:underline"
          >Twitter: @NiKCamii</a>
        </span>
      </div>
      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
        <img
          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
          src="/assets/img/gg.png"
          alt="Gadu-Gadu"
        >
        <span
          id="gg"
          class="font-bold"
        >GG: 38429969</span>
      </div>
      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
        <img
          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
          src="/assets/img/user.jpg"
          alt="E-mail"
        >
        <span
          id="mailto"
          class="font-bold"
        >
          <a
            href="mailto:contact@kamilcraft.com"
            class="hover:text-gray-700 hover:underline"
          >Email: contact@kamilcraft.com</a>
        </span>
      </div>
    </div>
  </div>
 </template>
-<script>
+<style lang="scss">
-export default {
+@import "scss/media";
  name: 'OtherContact'
 }
 </script>
-<style lang="scss" scoped>
+@screen md {
-.contact-container {
+  .contact_info {
-  margin: 10px;
+    flex-basis: 410px;
  max-width: 500px;
  background-color: #eaeaea;
  border: 2px solid #dadada;
  border-radius: 2px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
  header.head {
    padding: 10px;
    line-height: 1.6em;
    font-size: 1.3em;
    font-weight: bold;
  }
  form#form-point {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
 }
 .contact-element {
  display: flex;
  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;
    }
  }
 }
-.contact-element-icon {
+a {
-  border-radius: 50%;
+  color: inherit;
  border: 1px solid #e2e2e2;
  width: 50px;
  height: 50px;
  margin-right: 10px;
  object-fit: contain;
 }
-#instagram, #facebook, #twitter, #email, #gg {
+  &:hover {
-  padding-top: 2px;
+    -webkit-text-fill-color: #374151;
-  line-height: 1.6em;
+    color: #374151;
-  font-size: 1.1em;
+  }
  font-weight: bold;
 }
 #instagram {
@@ -103,7 +123,7 @@ export default {
  color: #5eaade;
 }
-#email {
+#mailto {
  color: #696969;
 }
--- a/src/main.js
+++ b/src/main.js
@@ -1,25 +1,21 @@
-import Vue from 'vue'
+import { createApp } from 'vue';
-import App from './App.vue'
+import App from './App.vue';
-import router from './router'
+import router from './router';
-import store from './store'
+import { store } from './store';
 import './vue-meta'
-import '../scss/default.scss'
+import '../scss/default.scss';
-import { library } from '@fortawesome/fontawesome-svg-core'
+import '../css/index.css';
-import { fas } from '@fortawesome/free-solid-svg-icons'
+import { library } from '@fortawesome/fontawesome-svg-core';
-import { fab } from '@fortawesome/free-brands-svg-icons'
+import { fas } from '@fortawesome/free-solid-svg-icons';
-import { far } from '@fortawesome/free-regular-svg-icons'
+import { fab } from '@fortawesome/free-brands-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { far } from '@fortawesome/free-regular-svg-icons';
-library.add(fas)
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 library.add(fab)
 library.add(far)
 Vue.component('font-awesome-icon', FontAwesomeIcon)
-Vue.config.productionTip = false
+library.add(fas, fab, far);
-new Vue({
+createApp(App)
-  store,
+    .component('FontAwesomeIcon', FontAwesomeIcon)
-  router,
+    .use(router)
-  render: h => h(App)
+    .use(store)
-}).$mount('#app')
+    .mount('#app');
--- a/src/resource/data/Technologies.js
+++ b/src/resource/data/Technologies.js
@@ -0,0 +1,99 @@
 export default [
    {
      icons: [
        {
          class: 'icon-php',
          name: 'php',
          alt: 'Ikona przedstawiająca język PHP',
          title: 'Ikona PHP'
        },
        {
          class: 'icon-laravel',
          name: 'laravel',
          alt: 'Ikona przedstawiająca framework Laravel',
          title: 'Ikona Laravel'
        }
      ],
      header: 'PHP & Laravel',
      description: `PHP wraz z frameworkiem Laravel wykorzystuję do tworzenia nowych projektów. Laravel znacznie
        przyspiesza pisanie części backendowej, odciążając programistę od pisania skomplikownych filtrów i monotonnych
        walidacji przyjmowanych danych od użytkowników. Jednakże, choć dobrze pracuje mi się w środowisku Laravel
        w miarę możliwości staram się pisać kod w samym PHP z wykorzystaniem bibliotek i paczek autorskich.`
    },
    {
      icons: [
        {
          class: 'icon-js',
          name: 'js-square',
          alt: 'Ikona przedstawiająca język JavaScript',
          title: 'Ikona JavaScript'
        }
      ],
      header: 'JavaScript Vanilla',
      description: `JavaScript wykorzystuję głównie do logiki frontendowej jak i pisania kodu wykonywalnego po stronie
        przeglądarki internetowej. Wykorzystując możliwości reaktywnych frameworków mogę przyspieszyć pisanie UI.`
    },
    {
      icons: [
        {
          class: 'icon-vue',
          name: 'vuejs',
          alt: 'Ikona przedstawiająca framework Vue.js',
          title: 'Ikona Vue.js'
        }
      ],
      header: 'Vue',
      description: `Framework ten wspomaga mnie w pisaniu aplikacji frontendowej. Przyspiesza tworzenie warstwy
        wizualnej, obsługę interakcji z użytkownikiem i bindowanie zdefiniowanych pól, które są odpowiednio renderowane
        przez przeglądarkę. To wszystko, umożliwia łatwe łączenie CSS i HTML z logiką i otrzymanymi danymi z API.`
    },
    {
      icons: [
        {
          class: 'icon-html5',
          name: 'html5',
          alt: 'Ikona przedstawiająca HTML5',
          title: 'Ikona HTML5'
        },
        {
          class: 'icon-css3',
          name: 'css3-alt',
          alt: 'Ikona przedstawiająca CSS3',
          title: 'Ikona CSS3'
        }
      ],
      header: 'HTML & CSS',
      description: `HTML i CSS to już nieodłączne technologie, które w łatwy sposób umożliwiają nadanie wizualnej
        spójności dla treści, obrazów lub ułożenia elementów. Nie raz, odpowednie zaprojektowanie interfejsu użytkownika
        przyspiesza integrację z naszą stroną/sklepem. Ma to przełożenie na zyski dla obu stron - firmy (finanse)
        i klienta (czas).`
    },
    {
      icons: [
        {
          class: 'icon-node',
          name: 'node',
          alt: 'Ikona przedstawiająca Node.js',
          title: 'Ikona Node.js'
        }
      ],
      header: 'Node.js',
      description: `Node jest wieloplatformowym środowiskiem uruchomieniowym, umożliwiającym uruchomienie kodu
        JavaScript po stronie backendowej. Jest to bardzo przyjemny język, który ułatwia projektowanie logiki biznesowej
        aplikacji, dla mniej wymagających serwisów pod względem analizy i przetwarzania danych.`
    },
    {
      icons: [
        {
          class: 'icon-sass',
          name: 'sass',
          alt: 'Ikona przedstawiająca Sass',
          title: 'Ikona Sass'
        }
      ],
      header: 'Sass',
      description: `Sass zwiększa czytelność kodu dla programisty. Zawiera abstrakcje znane z języków obiektowych,
        przy czym ogranicza powtarzalność i umożliwia optymalizację kodu. Kompilacja napisanego stylu w Sass jest
        przekształcana do formy czytelnej dla silnika graficznego przeglądarki, co przyspiesza proces generowania strony.`
    }
  ];
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,96 +1,112 @@
-import Vue from 'vue'
+import { createRouter, createWebHistory } from 'vue-router';
-import VueRouter from 'vue-router'
+import { setHeaderTitle, setHeaderDescription, clearHeaderDescription } from '@/HeaderReference';
 import Home from '../views/Home'
 import About from '../views/About'
 import Projects from '../views/Projects'
 import Project from '../views/Project'
 import Contact from '../views/Contact'
 import KamilCraftInfo from '../views/KamilCraftInfo'
 import NotFound from '../views/NotFound'
-Vue.use(VueRouter)
+const Home = () => import('@/views/HomeView.vue');
 const About = () => import('@/views/AboutView.vue');
 const Projects = () => import('@/views/ProjectsView.vue');
 const Project = () => import('@/views/ProjectView.vue');
 const Contact = () => import('@/views/ContactView.vue');
 const NotFound = () => import('@/views/NotFoundView.vue');
-const mainTitle = 'kamilcraft.com'
+const mainTitle = 'kamilcraft.com';
 const routes = [
  {
    path: '/',
    name: 'Home',
    meta: {
-      title: 'Dzień dobry! 😊'
+      title: 'Dzień dobry! 😊',
      description: [
        'Chciałbym Państwa powitać na mojej stronie!',
        'Przedstawiam tutaj część swojego życia związaną z programowaniem i projektowaniem aplikacji internetowych.',
      ],
    },
-    component: Home
+    component: Home,
  },
  {
    path: '/projects',
    name: 'Projects',
    meta: {
-      title: 'Moje projekty'
+      title: 'Moje projekty',
      description: [
        'Witam Państwa na podstronie z moimi projektami!',
      ],
    },
-    component: Projects
+    component: Projects,
  },
  {
    path: '/projects/:id',
    name: 'Project',
    meta: {
-      title: 'Projekt'
+      title: 'Projekt',
    },
-    component: Project
+    component: Project,
  },
  {
    path: '/about',
    name: 'About',
    meta: {
-      title: 'O mnie'
+      title: 'O mnie',
      description: [
        'Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.',
      ],
    },
-    component: About
+    component: About,
  },
  {
    path: '/contact',
    name: 'Kontakt',
    meta: {
-      title: 'Kontakt'
+      title: 'Kontakt',
      description: [
        'Chcesz o coś zapytać? Chciałbyś współpracować? Napisz!',
      ],
    },
-    component: Contact
+    component: Contact,
  },
  {
-    path: '/info',
+    path: '/:pathMatch(.*)*',
    name: 'KamilCraftProject',
    meta: {
      title: 'KamilCraft Project'
    },
    component: KamilCraftInfo
  },
  {
    path: '*',
    name: '404',
-    component: NotFound
+    meta: {
      title: 'Błąd 404',
    },
    component: NotFound,
  }
 ]
-const router = new VueRouter({
+const router = createRouter({
-  mode: 'history',
+  history: createWebHistory('/'),
  base: process.env.BASE_URL ?? '/',
  routes,
-  scrollBehavior (to, from, savedPosition) {
+  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
-      return 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 { x: 0, y: 0 }
+      return { left: 0, top: 0 };
    }
  }
-})
+});
-const title = ' :: ' + mainTitle
+const title = ' :: ' + mainTitle;
 router.beforeEach((to, form, next) => {
-  const documentTitle = to.meta.title + title || mainTitle
+  const documentTitle = to.meta.title + title || mainTitle;
-  document.title = documentTitle === to.meta.title ? title : documentTitle
+  document.title = documentTitle === to.meta.title ? title : documentTitle;
-  next()
+  if (to.meta.title) {
-})
+    setHeaderTitle(to.meta.title);
  }
  if (to.meta.description && to.meta.description !== []) {
    setHeaderDescription(to.meta.description);
  } else {
    clearHeaderDescription();
  }
  next();
 });
-export default router
+export default router;
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,44 +1,36 @@
-import Vue from 'vue'
+import { createStore } from 'vuex';
 import Vuex from 'vuex'
-Vue.use(Vuex)
+const apiURL = import.meta.env.VITE_APP_API_URL;
-const moduleSettings = {
+export const store = createStore({
  state: {
    header: {
      title: null,
      description: null
    },
    categories: [],
    projects: []
  },
  getters: {
    getHeader (state) {
      return state.header
    },
    getCategories (state) {
-      return state.categories
+      return state.categories;
    },
    getProjects (state) {
-      return state.projects
+      return state.projects;
    }
  },
  actions: {
    fetchProjects (store) {
-      return fetch('https://api.kamilcraft.com/projects')
+      return fetch(apiURL + '/projects')
        .then(response => response.json())
        .then(data => {
          store.commit('setProjects', data)
          return store.getters.getProjects
-        })
+        });
    },
    fetchCategories (store) {
-      return fetch('https://api.kamilcraft.com/categories')
+      return fetch(apiURL + '/categories')
        .then(response => response.json())
        .then(data => {
          store.commit('setCategories', data)
          return store.getters.getCategories
-        })
+        });
    }
  },
  mutations: {
@@ -48,26 +40,5 @@ const moduleSettings = {
    setProjects: (state, array = []) => {
      state.projects = array
    },
    setHeader: (state, text) => {
      state.header = {
        title: text.title ?? null,
        description: text.description ?? null
      }
    },
    resetHeaderTitle (state) {
      state.header.title = null
    },
    setHeaderDescription: (state, payload) => {
      state.header.description = payload.title
    },
    resetHeaderDescription (state) {
      state.header.description = null
    }
  }
 }
 export default new Vuex.Store({
  modules: {
    settings: moduleSettings
  }
 })
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,78 +0,0 @@
 <template>
  <section id="about">
    <div class="container">
      <p>
        <strong>Nazywam się Kamil Niemczycki. Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
          W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.</strong>
      </p>
      <h2>Studia</h2>
      <p>
        Jestem absolwentem Państwowej Wyższej Szkoły Zawodowej im. Witelona w Legnicy. Studiowałem na kierunku <em>Informatyka</em> o specjalności <em>Programowanie Aplikacji Mobilnych i Internetowych.</em>
      </p>
      <p>
        Podczas studiów zdobyłem niezbędną wiedzę z zakresu projektowania, wdrażania i rozwoju aplikacji internetowych, mobilnych i desktopowych.
        Zdobyłem także umiejętności pracy w zespole, które owocują tworzeniem merytorycznej dyskusji na temat części lub całości projektu.
      </p>
      <h3>Kursy</h3>
      <p>W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
        <a :href="publicPath + 'download/certyfikat-laravel.pdf'"><strong>Architektura aplikacji internetowych opartych o framework Laravel</strong></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>Moje zainteresowania</h2>
      <p>W wolnym czasie przyjmuje małe zlecenia na strony lub serwisy internetowe. Uczę się nowych języków
        programowania lub frameworków w znanych mi już technologiach. Hobbistycznie, tworzę także rozwiązania do
        problemów przy prywatnych projektach.</p>
    </div>
  </section>
 </template>
 <style lang="scss">
 section#about {
  padding: 45px 0;
  background-color: #fafafa !important;
  h2 {
    margin-top: 25px;
    &:first-of-type {
      margin-top: 10px;
    }
  }
  h3 {
    font-size: 1.3em;
    margin-top: 8px;
    margin-bottom: 10px;
  }
  a {
    color: #8D8D8D;
    &:hover {
      color: #A2CF00;
    }
  }
 }
 </style>
 <script>
 export default {
  name: 'About',
  data () {
    return {
      publicPath: process.env.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/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -0,0 +1,44 @@
 <template>
  <section class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
    <p class="font-bold">
      Nazywam się Kamil Niemczycki. Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
      W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.
    </p>
    <h2 class="text-[2rem]">
      Studia
    </h2>
    <p>
      Jestem absolwentem Państwowej Wyższej Szkoły Zawodowej im. Witelona w Legnicy. Studiowałem na kierunku <em>Informatyka</em> o specjalności <em>Programowanie Aplikacji Mobilnych i Internetowych.</em>
    </p>
    <p>
      Podczas studiów zdobyłem niezbędną wiedzę z zakresu projektowania, wdrażania i rozwoju aplikacji internetowych, mobilnych i desktopowych.
      Zdobyłem także umiejętności pracy w zespole, które owocują tworzeniem merytorycznej dyskusji na temat części lub całości projektu.
    </p>
    <h3 class="text-[1.5rem]">
      Kursy
    </h3>
    <p>
      W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
      <a
        href="/download/certyfikat-laravel.pdf"
        class="text-gray-500 underline hover:text-kamilcraft-green hover:no-underline"
        target="_blank"
        rel="noopener nofollow noreferrer"
      >
        Architektura aplikacji internetowych opartych o framework Laravel
      </a>.
    </p>
    <p>
      Umożliwiło mi to szersze spojrzenie na możliwości jakie daje nam Laravel i wzbogaconie poprzednio zdobytej
      wiedzy o nowe doświadczenia.
    </p>
    <h2 class="text-[2rem]">
      Moje zainteresowania
    </h2>
    <p>
      W wolnym czasie przyjmuje małe zlecenia na strony lub serwisy internetowe. Uczę się nowych języków
      programowania lub frameworków w znanych mi już technologiach. Hobbistycznie, tworzę także rozwiązania do
      problemów przy prywatnych projektach.
    </p>
  </section>
 </template>
--- a/src/views/Contact.vue
+++ b/src/views/Contact.vue
@@ -1,63 +0,0 @@
 <template>
  <section class="contact">
    <div class="container">
      <MailContact />
      <OtherContact />
    </div>
  </section>
 </template>
 <script>
 import MailContact from '../components/sections/contacts/MailContact'
 import OtherContact from '../components/sections/contacts/OtherContact'
 export default {
  name: 'Contact',
  mounted () {
    const header = {
      title: this.$route.meta.title,
      description: 'Chcesz o coś zapytać? Chciałbyś współpracować? Napisz!'
    }
    this.$store.commit('setHeader', header)
  },
  components: {
    MailContact,
    OtherContact
  }
 }
 </script>
 <style lang="scss">
  .contact {
    padding: 25px 0;
    .container {
      display: flex;
      align-items: flex-start;
      justify-content: center;
    }
    @media screen and (max-width: 940px) {
      .container {
        display: block;
        margin: 0 auto;
        .contact-container {
          margin: 0 auto 25px;
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
    @media screen and (max-width: 640px) {
      .container {
        padding: 0 10px;
        .contact-container {
          max-width: unset;
        }
      }
    }
  }
 </style>
--- a/src/views/ContactView.vue
+++ b/src/views/ContactView.vue
@@ -0,0 +1,11 @@
 <script setup>
 import MailContact from '@/components/sections/contacts/MailContact.vue';
 import OtherContact from '@/components/sections/contacts/OtherContact.vue';
 </script>
 <template>
  <section class="flex flex-col px-3 py-6 md:flex-row items-start justify-center mx-auto gap-5">
    <MailContact />
    <OtherContact />
  </section>
 </template>
--- 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.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,13 @@
 <script setup>
 import About from'@/components/sections/AboutSection.vue';
 import Experiences from'@/components/sections/ExperiencesSection.vue';
 import FavoriteProjects from'@/components/sections/FavoriteProjects.vue';
 </script>
 <template>
  <section class="home">
    <About />
    <Experiences />
    <FavoriteProjects />
  </section>
 </template>
--- 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/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -10,12 +10,6 @@
  </div>
 </template>
 <script>
 export default {
  name: 'NotFound'
 }
 </script>
 <style lang="scss" scoped>
 .not-found {
  .container {
--- a/src/views/Project.vue
+++ b/src/views/Project.vue
@@ -1,163 +0,0 @@
 <template>
  <section class="project" v-if="project">
    <header class="project-header">
      <h1>{{ project.title }}</h1>
      <ul class="project-info">
        <li class="info-text">
          <font-awesome-icon class="icon" :icon="['far', 'clock']"/>
          <span>{{ project.release_data }}</span>
        </li>
        <li class="info-text">
          <font-awesome-icon class="icon" :icon="['far', 'user']"/>
          <span>{{ project.author }}</span>
        </li>
        <li class="info-text">
          <font-awesome-icon class="icon" :icon="['far', 'folder']"/>
          <span>{{ getCategoryName(project.categories)[0] }}</span>
        </li>
        <li class="info-text">
          <font-awesome-icon class="icon" :icon="['fas', 'code-branch']"/>
          <span>{{ project.version }}</span>
        </li>
      </ul>
    </header>
    <div class="container">
      <component :is="`figure`" class="project-photo">
        <img :src="`${publicPath}${project.image}`" :alt="project.title">
      </component>
      <div class="content">
        <p v-for="(description, key) in project.description.split('\n')" :key="key">
          {{ description }}
        </p>
      </div>
    </div>
  </section>
  <div v-else class="loading">
    <div class="loading-animation"></div>
  </div>
 </template>
 <script>
 export default {
  name: 'Project',
  data () {
    return {
      publicPath: process.env.BASE_URL,
      project: null
    }
  },
  mounted () {
    if (this.getCategories.length === 0) {
      this.$store.dispatch('fetchCategories')
    }
    this.loadProject(this.$route.params.id)
  },
  computed: {
    getCategories () {
      return this.$store.getters.getCategories
    }
  },
  methods: {
    getCategoryName (categories) {
      const categoriesText = []
      categories.forEach(categoryElement => {
        const cat = this.getCategories.find(category => category.slug === categoryElement)
        if (cat) {
          categoriesText.push(cat.name)
        }
      })
      return categoriesText
    },
    loadProject (id) {
      fetch('https://api.kamilcraft.com/projects/' + id)
        .then(response => response.json())
        .then(data => {
          this.project = data
        })
    }
  }
 }
 </script>
 <style lang="scss" scoped>
@import "scss/default";
 .project {
  .project-header {
    @extend .container;
    text-align: center;
    margin-bottom: 25px;
    h1 {
      font-size: 2.2em;
      font-weight: lighter;
      line-height: 2.4em;
    }
    .project-info {
      display: flex;
      list-style: none;
      justify-content: center;
      .info-text {
        display: flex;
        align-items: center;
        .icon {
          width: 2em;
        }
        span {
          font-weight: lighter;
        }
        &:not(&:last-child) {
          margin-right: 15px;
        }
      }
      @media screen and (max-width: 560px) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 15px;
        .info-text {
          &:not(&:last-child) {
            margin-right: 0;
          }
        }
      }
    }
  }
  .container {
    .project-photo {
      box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
    }
    .project-photo, .project-photo img {
      width: 100%;
    }
    .project-photo img {
      display: block;
      object-fit: cover;
      max-height: 500px;
    }
    .content {
      margin: 35px 0;
      p {
        text-align: justify;
        text-indent: 1.5em;
        line-height: 1.8em;
        @media screen and (max-width: 600px) {
          font-size: 1em;
          line-height: 1.5em;
        }
      }
    }
  }
 }
 </style>
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -0,0 +1,191 @@
 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { useStore } from 'vuex';
 import { clearHeaderTitle, clearHeaderDescription } from '@/HeaderReference';
 import Markdown from '@/components/markdowns/MarkdownDescription.vue';
 const apiURL = import.meta.env.VITE_APP_API_URL;
 const route = useRoute();
 const store = useStore();
 const isLoaded = ref(false);
 let project = reactive({});
 const getCategories = computed(() => store.getters.getCategories);
 onMounted(() => {
  clearHeaderTitle();
  clearHeaderDescription();
  if (getCategories.value.length === 0) {
    store.dispatch('fetchCategories');
  }
  loadProject(route.params.id);
 })
 function getCategoryName(categories = []) {
  const categoriesText = [];
  categories.forEach(categoryElement => {
    const category = getCategories.value.find(category => category.slug === categoryElement);
    if (category) {
      categoriesText.push(category.name);
    }
  });
  return categoriesText[0] ?? undefined;
 }
 function loadProject(id) {
  fetch(apiURL + '/project/' + id)
    .then(response => response.json())
    .then(data => {
      project.title = data.title;
      project.description = data.description;
      project.release_date = data.release_date;
      project.author = data.author;
      project.categories = data.categories;
      project.project_version = data.project_version;
      project.project_url = data.project_url;
      project.images = data.images;
      isLoaded.value = true;
    });
 }
 </script>
 <template>
  <section
    v-if="isLoaded"
    class="max-w-screen-xl mx-auto px-6 xl:px-2 py-8"
  >
    <header class="text-neutral-800 font-roboto">
      <h1 class="text-center text-4xl font-light pb-5">
        {{ project.title }}
      </h1>
      <ul class="grid grid-cols-2 gap-3 md:flex md:gap-5 justify-center list-none">
        <li class="flex items-center gap-2">
          <FontAwesomeIcon
            class="w-4"
            :icon="['far', 'clock']"
          />
          <span>{{ project.release_date }}</span>
        </li>
        <li class="flex items-center gap-2">
          <FontAwesomeIcon
            class="w-4"
            :icon="['far', 'user']"
          />
          <span>{{ project.author }}</span>
        </li>
        <li class="flex items-center gap-2">
          <FontAwesomeIcon
            class="w-4"
            :icon="['far', 'folder']"
          />
          <span>{{ getCategoryName(project.categories) }}</span>
        </li>
        <li class="flex items-center gap-2">
          <FontAwesomeIcon
            class="w-4"
            :icon="['fas', 'code-branch']"
          />
          <span>{{ project.project_version }}</span>
        </li>
        <li
          v-if="project.project_url"
          class="flex items-center gap-2"
        >
          <FontAwesomeIcon
            class="w-4"
            :icon="['fas', 'link']"
          />
          <span>
            <a
              :href="project.project_url"
              target="_blank"
              rel="noopener nofollow noreferrer"
            >
              Link
            </a>
          </span>
        </li>
      </ul>
    </header>
    <div class="pt-5">
      <figure class="w-full shadow-xl">
        <img
          class="block max-h-[31.25rem] object-cover"
          :src="project.images.large"
          :alt="project.title"
        >
      </figure>
      <Markdown
        class="markdown mt-9"
        :source="project.description"
      />
    </div>
  </section>
  <div
    v-else
    class="flex items-center"
  >
    <div class="loading_animation" />
  </div>
 </template>
 <style lang="scss">
@import "scss/default";
 a {
  @apply text-neutral-800 hover:text-kamilcraft-green;
 }
 .markdown {
  h1 {
    @apply text-4xl;
  }
  h2 {
    @apply text-[2rem];
  }
  h3 {
    @apply text-[1.5rem];
  }
  p, ol li, ul li {
    @apply text-lg;
  }
  p + ol, p + ul, p + blockquote {
    @apply -mb-2;
  }
  ol {
    @apply list-decimal;
  }
  ul {
    @apply list-disc;
  }
  ol, ul {
    @apply mb-2.5;
    padding-inline-start: 1.75rem;
    li img {
      @apply block w-full pr-1 pb-1 mt-3.5;
    }
  }
  p {
    @apply mb-2 text-justify;
  }
  blockquote {
    @apply pl-6 ml-5 border-neutral-400;
    p {
      text-indent: unset;
    }
  }
 }
 </style>
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -1,151 +0,0 @@
 <template>
  <div>
    <div class="category-menu">
      <ul class="categories">
        <li class="category"
            v-for="category in getCategories"
            :key="category.slug"
            :class="{ 'category-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">
 .category-menu {
  padding-top: 45px;
  .categories {
    display: flex;
    justify-content: center;
    list-style: none;
    .category {
      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;
        }
      }
      @media screen and (max-width: 450px) {
        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.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,105 @@
 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue';
 import { useStore } from 'vuex';
 import SelectedProjects from '@/components/SelectedProjects.vue';
 const store = useStore();
 const activeCategory = ref('all');
 const projects = reactive([]);
 const getCategories = computed(() => store.getters.getCategories);
 onMounted(() => {
  loadAllData();
 });
 function loadAllData () {
  store.dispatch('fetchCategories');
  store.dispatch('fetchProjects').then(loadedProjects => {
    loadedProjects.forEach(project => {
      projects.push(project);
    });
  });
 }
 function loadListWhereCategory(category) {
  projects.splice(0);
  setTimeout(() => {
    if (category !== 'all') {
      const storedProjects = store.getters.getProjects.filter(project => project.categories.includes(category));
      storedProjects.forEach(project => {
        projects.push(project);
      })
    } else {
      store.getters.getProjects.forEach(project => {
        projects.push(project);
      });
    }
  }, 500);
 }
 function changeCategory(category) {
  activeCategory.value = category
  loadListWhereCategory(category)
 }
 function selectedCategory(categorySlug) {
  return activeCategory.value === categorySlug;
 }
 </script>
 <template>
  <SelectedProjects :projects="projects">
    <div class="pb-9">
      <ul class="flex justify-center list-none">
        <li
          v-for="category in getCategories"
          :key="category.slug"
          class="relative cursor-pointer mr-3 md:mr-5 last:mr-0 after:translate-y-2"
          :class="{ 'category-active': selectedCategory(category.slug) }"
          @click="changeCategory(category.slug)"
        >
          <a
            class="text-gray-500 hover:text-black"
            :title="`Kategoria ${category.name}`"
          >{{ category.name }}</a>
        </li>
      </ul>
    </div>
  </SelectedProjects>
  <div
    v-if="projects.length === 0"
    class="loading"
  >
    <div class="loading_animation" />
  </div>
 </template>
 <style lang="scss">
@import "scss/media";
 .category-active::after {
  @apply absolute mx-auto left-0 right-0 bottom-0 h-0.5;
  background-color: #A2CF00;
  animation: load-underline 300ms forwards;
 }
@keyframes loading-animation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
 }
@keyframes load-underline {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
 }
 </style>
--- 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,26 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
  content: [
    "./src/**/*.{vue,js}",
  ],
  darkMode: true,
  theme: {
    extend: {
      fontFamily: {
        'arial': ['Arial', 'sans-serif'],
        'roboto': ['Roboto', 'sans-serif'],
        'thasadith': ['Thasadith', 'sans-serif']
      },
      fontSize: {
        'logo-size': '2.5rem',
      },
      screens: {
        'header-content': '900px'
      },
      colors: {
        'kamilcraft-green': 'rgb(var(--color-kamilcraft-green) / <alpha-value>)'
      }
    },
  },
  plugins: [],
 }
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,31 @@
 import { fileURLToPath, URL } from 'node:url';
 import { defineConfig, loadEnv, splitVendorChunkPlugin } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import eslint from 'vite-plugin-eslint';
 export default defineConfig((mode) => {
  const env = loadEnv(mode, process.cwd(), "");
  return {
    server: {
      host: 'localhost',
      port: parseInt(env.VITE_PORT ?? 5173),
      hmr: {
        host: 'localhost',
      },
    },
    plugins: [
      vue(),
      splitVendorChunkPlugin(),
      eslint(),
    ],
    resolve: {
        vue: 'vue/dist/vue.esm-bundler.js',
        alias: {
          '@': fileURLToPath(new URL('./src', import.meta.url))
        },
    },
    build: {
      manifest: true,
    },
  };
 });
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,5 +0,0 @@
 module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/beta/'
    : '/'
 }
Author	SHA1	Message	Date
Kamil Niemczycki	c3bc19d298	- version 1.2.0 & fix sass	2023-08-06 00:30:14 +02:00
Kamil Niemczycki	da04a355ac	- update readme	2023-08-06 00:26:28 +02:00
Kamil Niemczycki	70f63c8e9f	- add eslint to vite	2023-08-06 00:15:25 +02:00
Kamil Niemczycki	62f05232d8	- change error message for sender	2023-08-05 01:21:03 +02:00
Kamil Niemczycki	b5dd052dbd	- add information about max chars for inputs	2023-08-05 01:11:36 +02:00
Kamil Niemczycki	92f8ae8fba	- remove console logs	2023-08-04 16:20:50 +02:00
Kamil Niemczycki	961cb956b6	- add reset value for sended message	2023-08-04 12:42:30 +02:00
Kamil Niemczycki	7111222e19	- edit contact section	2023-08-03 18:32:59 +02:00
Kamil Niemczycki	a67389ff29	- add manifest.json file	2023-08-02 12:25:09 +02:00
Kamil Niemczycki	40432da0f2	- refactoring code	2023-07-31 20:03:00 +02:00
Kamil Niemczycki	8054be6846	- vite + markdown-it	2023-07-30 19:18:22 +02:00
Kamil Niemczycki	cbaca47fb2	- Update dependencies	2022-12-14 13:09:14 +01:00
Kamil Niemczycki	cbdc5c8676	Add GitHub link to footer (#4 ) * added link to github * update of dependencies	2022-09-13 15:02:44 +02:00
Kamil Niemczycki	cd0a5d613f	updated version (#3 )	2022-08-02 17:07:11 +02:00
Kamil Niemczycki	7bee728518	Conversion of scss into tailwind (#2 ) * installed tailwind * updated menu - tailwind * removed old style * updated container size for navigation * updated footer style - tailwind * updated header style - tailwind * updated colors * updated about section - tailwind * updated experiences style - tailwind * WIP * improved responsiveness * updated favorite projects * updated buttons * updated projects view * updated footer style * updated about view * updated project view * updated style for contact form * updated mail contact * final style update * fixed buttons * fix scroll button * added autoscroll for contact form * updated paths in project * empty line added * unnecessary comment removed	2022-08-02 17:01:32 +02:00
Kamil Niemczycki	7475bb5671	Upgrade to vue 3 (#1 ) * updated dependencies * updated readme * upgrade to vue 3 * updated buttons * duplicate id removed * updated contact	2022-07-13 09:48:44 +02:00
Kamil Niemczycki	0bd0d31947	Small style update	2022-02-22 19:10:32 +01:00
Kamil Niemczycki	cf410d1ac3	Updated favicon	2022-02-22 19:10:05 +01:00
Kamil Niemczycki	7d3531f058	Public path changed	2022-02-18 09:55:31 +01:00
Kamil Niemczycki	b195b35c68	Design updated for future API update	2022-02-17 22:57:17 +01:00
Kamil Niemczycki	519bad5689	Variables for the API have been updated	2022-02-16 13:21:35 +01:00
Kamil Niemczycki	04ad8334ba	Overridden inherited hover for ghost button	2022-01-06 11:23:48 +01:00
Kamil Niemczycki	39da77cf4c	Style for the ghost button has been changed	2022-01-06 11:16:23 +01:00
Kamil Niemczycki	769fd6ae7d	Fixed style for mobile devices	2022-01-06 10:51:51 +01:00
Kamil Niemczycki	24415e7743	Updated footer style	2022-01-06 10:20:32 +01:00
Kamil Niemczycki	6c890d03d6	RWD fix for the home page	2022-01-06 01:04:14 +01:00
Kamil Niemczycki	8f3649d141	Style update to contact page	2022-01-06 00:53:37 +01:00
Kamil Niemczycki	76d8e59f40	Unification for RWD has been added	2022-01-05 23:21:35 +01:00
Kamil Niemczycki	f3e7b18c34	Improving the button style	2022-01-05 16:38:35 +01:00
Kamil Niemczycki	49c153ee38	Tag changed from div to main	2022-01-05 12:12:51 +01:00
Kamil Niemczycki	28aab6a68b	Target link added	2022-01-05 12:10:55 +01:00
Kamil Niemczycki	423e610b1a	Disable host check for dev server has been added to vue config	2022-01-05 11:58:22 +01:00