- version 1.2.0 & fix sass

- update readme
- add eslint to vite
2023-08-06 00:33:22 +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
40 changed files with 2624 additions and 20467 deletions
--- 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,3 +1,5 @@
+NODE_MODE=local
 VUE_APP_TITLE=kamilcraft.com
-VUE_APP_BASE_URL=http://127.0.0.1
-VUE_APP_API_URL=https://api.kamilcraft.com
+VUE_APP_BASE_URL=http://localhost:5173
+VUE_APP_API_URL=https://api.kamilcraft.com/v1
+VITE_PORT=5173
--- 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/README.md
+++ b/README.md
@@ -1,25 +1,32 @@
 # kamilcraft.com
-Project of my website - portfolio
-The project uses the [API](https://github.com/kamilniemczycki/kamilcraft-api) at https://api.kamilcraft.com
+
+The project concerns a private website at [https://kamilcraft.com](https://kamilcraft.com). The website contains information about me and my projects.
+
+I used Vue.js in the project. Some of the content is static. The information about the projects is retrieved from the [API](https://github.com/kamilniemczycki/kamilcraft-api).

 ## Dependency installation
+
 ```
 npm install --legacy-peer-deps
 ```

 ### Development
+
 ```
-npm run serve
+npm run dev
 ```
-Application should be available under `127.0.0.1:8080` or `localhost:8080`.
+Application should be available under `127.0.0.1:5173` or `localhost:5173`.

 ### Compilation
+
 ```
 npm run build
 ```
+
 The executable files should be in the `dist` folder.

 ### Code formatting
+
 ```
 npm run lint
 ```
--- 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="<%= VUE_APP_BASE_URL %>/favicon.ico">
+    <link rel="icon" href="/favicon.ico">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Thasadith&display=swap" rel="stylesheet">
    <title>KamilCraft.com</title>
  </head>
  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
    <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,35 +1,37 @@
 {
  "name": "kamilcraft.com",
-  "version": "1.0.0",
+  "version": "1.2.0",
  "private": true,
  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore",
+    "lintf": "eslint --ext .js,.vue --ignore-path .gitignore--fix"
  },
  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-brands-svg-icons": "^6.1.1",
-    "@fortawesome/free-regular-svg-icons": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@fortawesome/vue-fontawesome": "^3.0.1",
-    "core-js": "^3.8.3",
-    "marked": "^4.0.18",
-    "vue": "^3.2.37",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-brands-svg-icons": "^6.4.0",
+    "@fortawesome/free-regular-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "autoprefixer": "^10.4.14",
+    "markdown-it": "^13.0.1",
+    "postcss": "^8.4.27",
+    "sass": "^1.64.2",
+    "sass-loader": "^13.3.2",
+    "tailwindcss": "^3.3.3",
+    "vite": "^4.4.7",
+    "vue": "^3.3.4",
    "vue-meta": "^2.4.0",
-    "vue-router": "^4.1.2",
-    "vuex": "^4.0.2"
+    "vue-router": "^4.2.4",
+    "vuex": "^4.1.0"
  },
  "devDependencies": {
-    "@babel/core": "^7.12.16",
-    "@babel/eslint-parser": "^7.12.16",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3",
-    "sass": "^1.53.0",
-    "sass-loader": "^13.0.2"
+    "eslint": "^8.29.0",
+    "eslint-plugin-vue": "^9.8.0",
+    "vite-plugin-eslint": "^1.8.1"
  },
  "eslintConfig": {
    "root": true,
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/scss/_btn.scss
+++ b/scss/_btn.scss
@@ -20,8 +20,7 @@ $btn-colors: (
  min-width: 270px;
  padding: 8px 10px;

-  border-radius: 3px;
-  border-width: 3px;
+  @apply border-4 rounded-md;
  border-style: solid;
  border-color: $default-color;

--- a/src/App.vue
+++ b/src/App.vue
@@ -1,18 +1,18 @@
+<script setup>
+import SiteHeader from '@/components/SiteHeader.vue';
+import FooterComponent from '@/components/FooterComponent.vue';
+</script>
+
 <template>
+  <SiteHeader />
  <main
    rel="main"
  >
-    <SiteHeader />
    <RouterView />
-    <FooterComponent />
  </main>
+  <FooterComponent />
 </template>

-<script setup>
-import SiteHeader from './components/SiteHeader'
-import FooterComponent from './components/FooterComponent'
-</script>
-
 <style lang="scss">
 #app {
  font-family: var(--font-family);
--- 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/FooterComponent.vue
+++ b/src/components/FooterComponent.vue
@@ -1,122 +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="footer">
-    <div class="footer_container">
-      <div class="container_logo">
-        Kamil<span class="logo_element">Craft</span>
+  <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="socials">
+      <ul class="flex gap-5 pr-3 text-lg">
        <li
          v-for="link in socialLinks"
          :key="link.title.slug"
-          class="social_link"
        >
          <a
-            class="link"
+            class="text-neutral-400 hover:text-neutral-500"
            :href="link.link"
            :title="link.title"
            target="_blank"
            rel="noopener nofollow noreferrer"
          >
-            <font-awesome-icon
-              class="icon"
+            <FontAwesomeIcon
+              class="mr-1"
              :icon="['fab', link.icon]"
            />
-            <span class="social_title">{{ link.title }}</span>
-            <span class="social_shortcut">{{ link.shortcut }}</span>
+            <span class="hidden lg:inline-block">{{ link.title }}</span>
+            <span class="hidden sm:inline-block lg:hidden">{{ link.shortcut }}</span>
          </a>
        </li>
      </ul>
    </div>
-    <div class="container" />
  </footer>
 </template>
-
-<script setup>
-const socialLinks = [
-  { link: 'https://www.youtube.com/user/kamilniemczycki', icon: 'youtube', title: 'Oglądaj mnie na YouTube', shortcut: 'YouTube' },
-  { link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku', shortcut: 'Facebook' }
-]
-</script>
-
-<style lang="scss" scoped>
-@import "scss/default";
-
-.footer {
-  background-color: #323232;
-  padding: 35px 0;
-
-  &_container {
-    @extend .container;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .container_logo {
-      padding: 14px 20px 14px 40px;
-      font-family: 'Thasadith', sans-serif;
-      font-size: 2.5em;
-      color: #D4D4D4;
-      background-color: #5B5B5B;
-
-      .logo_element {
-        color: #A2CF00;
-      }
-    }
-
-    .socials {
-      display: flex;
-      list-style: none;
-
-      .social_link {
-        margin-right: 25px;
-        padding-right: 15px;
-        font-size: 1.1em;
-
-        a {
-          color: #A3A3A3;
-
-          .icon {
-            margin-right: 5px;
-          }
-
-          .social_shortcut {
-            display: none;
-          }
-
-          @include media-tablet {
-            .social_title {
-              display: none;
-            }
-
-            .social_shortcut {
-              display: inline-block;
-            }
-          }
-
-          @include media-mobile {
-            .social_shortcut {
-              display: none;
-            }
-          }
-        }
-
-        @include media-mobile {
-          padding-right: 0;
-        }
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-    }
-
-    @include media-tablet {
-      padding: 0;
-    }
-  }
-
-  @include media-mobile {
-    padding: 15px 0;
-  }
-}
-</style>
--- a/src/components/HomePageElement.vue
+++ b/src/components/HomePageElement.vue
@@ -1,29 +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>
-
-<script setup>
-import { useRoute } from 'vue-router'
-
-const route = useRoute()
-</script>
-
-<style scoped lang="scss">
-  h1 {
-    margin: 30px 0 20px;
-  }
-  ul {
-    list-style-type: none;
-    padding: 0;
-  }
-  li {
-    display: inline-block;
-    margin: 0 10px;
-  }
-  a {
-    color: #42b983;
-  }
-</style>
--- a/src/components/NavigationHeader.vue
+++ b/src/components/NavigationHeader.vue
@@ -1,51 +1,12 @@
-<template>
-  <div
-    class="container"
-    :class="{ 'container-menu-active': isClicked }"
-  >
-    <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="!isClicked"
-          icon="bars"
-        />
-        <font-awesome-icon
-          v-else
-          icon="times"
-        />
-      </button>
-      <ul
-        class="site-menu"
-        :class="{ 'menu-clicked': isClicked }"
-      >
-        <li
-          v-for="menuItem in menuItems"
-          :key="menuItem.slug"
-          class="menu-element"
-          @click="linkClicked"
-        >
-          <RouterLink :to="menuItem.uri">
-            {{ menuItem.title }}
-          </RouterLink>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</template>
-
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed } from 'vue';
+
+defineProps({
+  isHomePage: {
+    type: Boolean,
+    default: false,
+  },
+});

 const menuItems = [
  {
@@ -68,147 +29,95 @@ const menuItems = [
    title: 'Kontakt',
    uri: '/contact'
  }
-]
+];

-const clicked = ref(false)
-const isClicked = computed(() => clicked.value)
+const clicked = ref(false);
+const isClicked = computed(() => clicked.value);

 function changeClickedStatus() {
-  clicked.value = !clicked.value
+  clicked.value = !clicked.value;
 }

 function clickMenu() {
-  changeClickedStatus()
+  changeClickedStatus();
 }

 function linkClicked() {
  if (isClicked.value) {
-    changeClickedStatus()
+    changeClickedStatus();
  }
 }
 </script>

-<style lang="scss" scoped>
-@import "scss/media";
+<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>

-.sub-page > .container {
-  .nav-btn {
-    color: #8D8D8D;
-  }
-
-  .nav .site-menu .menu-element {
-    a:not([class|=router-link]) {
-      color: #8D8D8D;
-
-      &:hover {
-        color: #A2CF00;
-      }
-    }
-  }
+<style lang="scss">
+.clicked-menu {
+  animation: bg-menu-animation 500ms forwards ease-in-out;
 }
-.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;
-      }
-    }
-  }
+.clicked-logo {
+  animation: bg-logo-animation 500ms forwards ease-in-out;
 }
-.nav {
-  margin-left: 20px;
-  z-index: 10;
-  .nav-btn {
-    display: none;
-    margin: 10px 25px;
-    font-size: 2em;
-    color: white;
-    background: transparent !important;
-    border: none;
-  }
-  .site-menu {
-    display: flex;
-    list-style: none;

-    .menu-element {
-      margin-right: 30px;
-
-      a {
-        color: #EBEBEB;
-
-        &.router-link-exact-active, &:hover {
-          color: #A2CF00;
-        }
-      }
-
-      &:last-child {
-        margin-right: unset;
-      }
-    }
-  }
-  @include media-tablet {
-    margin-left: 0;
-
-    .nav-btn {
-      display: block;
-    }
-
-    .site-menu {
-      display: none;
-      width: 100%;
-      position: absolute;
-      top: 80px;
-      left: 0;
-      background-color: white;
-      box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
-
-      .menu-element {
-        width: 100%;
-        padding: 5px 20px;
-        text-align: right;
-        font-size: 1.8em;
-        line-height: 2em;
-      }
-    }
-
-    .menu-clicked {
-      display: block;
-    }
-  }
-}
-@include media-tablet {
-  .container {
-    justify-content: space-between;
-  }
-}
-@keyframes container-active-menu {
+@keyframes bg-menu-animation {
  0% {
    background-color: transparent;
  }
@@ -216,7 +125,7 @@ function linkClicked() {
    background-color: #EFEFEF;
  }
 }
-@keyframes logo-active-menu {
+@keyframes bg-logo-animation {
  0% {
    background-color: white;
  }
--- a/src/components/SelectedProjects.vue
+++ b/src/components/SelectedProjects.vue
@@ -1,58 +1,7 @@
-<template>
-  <div class="projects">
-    <slot />
-    <div class="container">
-      <div
-        v-for="project in projects"
-        :key="project.title.slug"
-        class="project"
-      >
-        <img
-          v-if="project.images.small"
-          class="project_image"
-          :src="project.images.small"
-          :alt="project.title"
-        >
-        <img
-          v-else-if="project.images.large"
-          class="project_image"
-          :src="project.images.large"
-          :alt="project.title"
-        >
-        <div class="project_content">
-          <h3 class="project_title">
-            {{ project.title }}
-          </h3>
-          <div class="project_release">
-            {{ project.version }}
-          </div>
-          <div
-            class="project_description"
-            v-html="markdownToText(project)"
-          />
-        </div>
-        <div class="more-button">
-          <BaseButton
-            has-icon
-            icon="eye"
-            is-reverse
-            class="btn"
-            @click="router.push({ name: 'Project', params: { id: project.id } })"
-          >
-            O projekcie
-          </BaseButton>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup>
-import { defineProps, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useStore } from 'vuex'
-import BaseButton from './buttons/BaseButton'
-import { marked } from 'marked'
+import { useRouter } from 'vue-router';
+import BaseButton from '@/components/buttons/BaseButton.vue';
+import Markdown from "@/components/markdowns/MarkdownShort.vue";

 defineProps({
  projects: {
@@ -61,155 +10,104 @@ defineProps({
  }
 })

-const route = useRoute()
-const router = useRouter()
-const store = useStore()
-
-onMounted(() => {
-  const header = {
-    title: route.meta.title,
-    description: [
-      'Witam Państwa na podstronie z moimi projektami!'
-    ]
-  }
-  store.commit('setHeader', header)
-})
-
-function markdownToText (project) {
-  const projectText = marked.parse(project.description)
-  const nodeElement = document.createElement('div')
-  nodeElement.innerHTML = projectText
-  return nodeElement.querySelector('p').innerText.substr(0, 350)
-}
+const router = useRouter();
 </script>

+<template>
+  <section
+    id="projects"
+    class="max-w-screen-xl mx-auto px-6 xl:px-2 py-10"
+  >
+    <slot />
+    <div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-5">
+      <div
+        v-for="project in projects"
+        :key="project.title.slug"
+        class="flex flex-col lg:grid grid-project relative bg-neutral-100 border border-gray-200 rounded-md"
+      >
+        <img
+          v-if="project.images.small"
+          class="project-image w-full h-[16rem] lg:w-[12.5rem] lg:h-[12.5rem] object-cover object-top rounded-t-md lg:rounded-bl-md lg:rounded-tr-none"
+          :src="project.images.small"
+          :alt="project.title"
+        >
+        <img
+          v-else-if="project.images.large"
+          class="project-image w-[12.5rem] h-[12.5rem] object-cover"
+          :src="project.images.large"
+          :alt="project.title"
+        >
+        <div class="project-content relative p-3 h-[12.5rem] overflow-y-hidden after:absolute after:left-0 after:top-0 after:w-full after:h-full">
+          <header class="pb-2">
+            <h3 class="text-lg font-bold">
+              {{ project.title }}
+            </h3>
+            <p class="text-sm">
+              {{ project.project_version }}
+            </p>
+          </header>
+          <Markdown :source="project.description" />
+        </div>
+        <div
+          class="project-button lg:flex lg:absolute lg:justify-center lg:items-center lg:left-0 lg:top-0 lg:w-full lg:h-full"
+        >
+          <BaseButton
+            has-icon
+            icon="eye"
+            is-reverse
+            class="w-full lg:w-80 rounded-t-none lg:rounded-t-md"
+            title="Pokaż więcej"
+            @click="router.push({ name: 'Project', params: { id: project.id } })"
+          >
+            O projekcie
+          </BaseButton>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
 <style lang="scss">
-@import "scss/media";
+@import 'scss/media';

-.projects {
-  padding-top: 45px;
-  padding-bottom: 45px;
+.grid-project {
+  animation: load-project 2s forwards;

-  .container {
-    display: grid;
-    align-items: flex-start;
-    grid-template-columns: 1fr 1fr;
-    grid-auto-rows: minmax(80px, auto);
-    column-gap: 25px;
-    row-gap: 20px;
+  .project-image, .project-content {
+    object-position: top center;
+  }

-    .project {
-      display: grid;
-      position: relative;
-      grid-template-areas: 'image content';
-      grid-template-columns: 200px 1fr;
-      background-color: #fafafa;
-      border: 1px solid rgba(0, 0, 0, .025);
-      border-radius: 5px;
-      animation: load-project 2s forwards;
+  .project-image {
+    grid-area: image;
+  }

-      .project_image {
-        grid-area: image;
-        width: 200px;
-        height: 200px;
-        object-fit: cover;
-        object-position: top center;
-      }
+  .project-content {
+    grid-area: content;

-      .project_content {
-        grid-area: content;
-        padding: 10px 15px;
-        height: 200px;
-        overflow-y: hidden;
-        position: relative;
-
-        .project_title {
-          font-size: 1.3em;
-          font-weight: normal;
-          line-height: 1.5em;
-        }
-
-        .project_release {
-          font-size: .9em;
-          font-weight: bold;
-          padding: 5px 0;
-        }
-
-        &::after {
-          content: "";
-          position: absolute;
-          left: 0;
-          top: 0;
-          width: 100%;
-          height: 100%;
-          background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #fafafa 100%);
-        }
-      }
-
-      p {
-        font-size: .9em;
-      }
+    &::after {
+      background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 60%, #fafafa);
    }
+  }
+}

-    @include media-tablet(true) {
-      .project {
-        .more-button {
+@screen lg {
+  .grid-project {
+    grid-template-areas: 'image content';
+    grid-template-columns: 200px 1fr;
+
+    .project-button {
+      .btn {
+        display: none;
+      }
+      &:hover {
+        background: rgba(0, 0, 0, .3);
+        border-radius: 5px;
+
+        .btn {
          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);
-            border-radius: 5px;
-
-            .btn {
-              display: flex;
-              color: white;
-              border-style: none;
-              &:hover {
-                background-color: #385c8a;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    @include media-small {
-      .project {
-        display: block;
-
-        .project_image {
-          width: 100%;
-          height: 250px;
-        }
-
-        .project_content {
-          height: 125px;
-        }
-
-        .more-button {
-          display: block;
-          position: unset;
-          margin-top: 8px;
-          height: auto;
-          left: unset;
-          top: unset;
-
-          .btn {
-            display: flex;
-            width: 100%;
-            border-radius: 0;
-            border-style: solid;
+            background-color: rgba(255, 255, 255, .9);
          }
        }
      }
@@ -227,13 +125,4 @@ function markdownToText (project) {
    opacity: 1;
  }
 }
-
-@include media-tablet {
-  .projects .container {
-    grid-template-columns: 1fr;
-    padding: 25px;
-    column-gap: 0;
-    row-gap: 20px;
-  }
-}
 </style>
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -1,79 +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 }"
+      class="max-w-screen-header-content mx-auto text-center px-2.5 py-10"
+      :class="{ 'text-white': isHome }"
    >
-      <h1>{{ getTitle }}</h1>
-      <p v-if="isDescription && descriptionType === 'string'">
-        {{ getDescription }}
-      </p>
-      <p
-        v-for="(desc, key) in getDescription"
-        v-else-if="isDescription && descriptionType === 'array'"
-        :key="key"
-      >
-        {{ desc }}
-      </p>
+      <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 setup>
-import { computed } from 'vue'
-import { useStore } from 'vuex'
-import { useRoute } from 'vue-router'
-import Navigation from './NavigationHeader'
-
-const store = useStore()
-const route = useRoute()
-
-const isHome = computed(() => route.path === '/')
-const thisClass = computed(() => [isHome.value ? 'home-page' : 'sub-page'])
-const getTitle = computed(() => store.getters.getHeader.title)
-const isTitle = computed(() => getTitle.value !== null)
-const getDescription = computed(() => store.getters.getHeader.description)
-const isDescription = computed(() => getDescription.value !== null)
-const descriptionType = computed(() => {
-  const isArray = getDescription.value instanceof Array
-  return isArray ? 'array' : typeof getDescription.value
-})
-</script>
-
-<style lang="scss">
+<style scoped>
 .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
@@ -1,3 +1,20 @@
+<script setup>
+defineProps({
+  hasIcon: {
+    type: Boolean,
+    default: false,
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  isReverse: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
 <template>
  <button
    class="btn"
@@ -13,27 +30,8 @@
  </button>
 </template>

-<script setup>
-import { defineProps } from 'vue'
-
-defineProps({
-  hasIcon: {
-    type: Boolean,
-    default: false
-  },
-  icon: {
-    type: String,
-    default: ''
-  },
-  isReverse: {
-    type: Boolean,
-    default: false
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-@import "../../../scss/btn";
+<style lang="scss">
+@import 'scss/btn';

 .btn {
  @include button($has-icon: true);
--- a/src/components/buttons/GhostButton.vue
+++ b/src/components/buttons/GhostButton.vue
@@ -1,3 +1,16 @@
+<script setup>
+defineProps({
+  hasIcon: {
+    type: Boolean,
+    default: false
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
 <template>
  <button class="btn">
    <font-awesome-icon
@@ -9,23 +22,8 @@
  </button>
 </template>

-<script setup>
-import { defineProps } from 'vue'
-
-defineProps({
-  hasIcon: {
-    type: Boolean,
-    default: false
-  },
-  icon: {
-    type: String,
-    default: ''
-  }
-})
-</script>
-
 <style lang="scss" scoped>
-@import "../../../scss/btn";
+@import 'scss/btn';

 .btn {
  @include ghost-button();
--- 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/AboutSection.vue
+++ b/src/components/sections/AboutSection.vue
@@ -1,24 +1,40 @@
+<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="about">
-    <div class="container">
-      <div id="grid">
-        <div id="grid-text">
-          <h2 class="name">
+  <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="tagline">
+          <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="buttons">
+          <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('.selected-projects')"
+              @click="scrollTo('#projects')"
            >
              Wybrane projekty
            </BaseButton>
@@ -32,9 +48,10 @@
          </div>
        </div>
        <div id="grid-photo">
-          <figure id="about-photo">
+          <figure>
            <img
-              :src="`${publicPath}assets/me.jpg`"
+              src="/assets/me.jpg"
+              class="mx-auto rounded-full object-cover w-[12.5rem] h-[12.5rem]"
              alt="Moje zdjęcie"
            >
          </figure>
@@ -44,112 +61,18 @@
  </div>
 </template>

-<script setup>
-import BaseButton from '../buttons/BaseButton'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-const publicPath = process.env.VUE_APP_BASE_URL + '/'
-
-function scrollTo(id) {
-  document.querySelector(id).scrollIntoView({
-    behavior: 'smooth'
-  })
-}
-</script>
-
 <style lang="scss">
-@import "scss/media";
+#grid-columns {
+  grid-template-columns: 1fr 1fr .8fr;
+  grid-template-areas:
+    'text text photo';
+}

-.about {
-  background-color: var(--gray-color) !important;
+#grid-content {
+  grid-area: text;
+}

-  .container {
-    padding-top: 45px;
-    padding-bottom: 45px;
-  }
-  h2.name {
-    font-size: 2.1em;
-    margin-bottom: 5px;
-  }
-  div.tagline {
-    font-size: 1.6em;
-    margin-bottom: .7em;
-  }
-  #grid {
-     display: grid;
-     grid-template-columns: 1fr 1fr .8fr;
-     grid-template-areas:
-       'text text photo';
-     align-items: center;
-
-     #grid-text {
-       grid-area: text;
-       text-align: left;
-
-       .buttons {
-         display: flex;
-         justify-content: flex-start;
-         padding: 25px 0;
-
-         .btn {
-           margin-right: 20px;
-
-           &:last-child {
-             margin-right: 0;
-           }
-
-           @include media-tablet {
-             margin: 0 auto 15px;
-
-             &:last-child {
-               margin: 0 auto;
-             }
-           }
-         }
-
-         @include media-small {
-           justify-content: center;
-           margin-bottom: 25px;
-         }
-
-         @include media-tablet {
-           display: block;
-           margin-bottom: 25px;
-         }
-       }
-
-       @include media-mobile() {
-         .buttons .btn,
-         .buttons a {
-           min-width: unset;
-           width: 100%;
-         }
-       }
-     }
-     #grid-photo {
-       grid-area: photo;
-
-       #about-photo img {
-         border-radius: 50%;
-       }
-     }
-     figure {
-       text-align: center;
-       img {
-         object-fit: cover;
-         width: 200px;
-         height: 200px;
-       }
-     }
-  }
-  @include media-small {
-    #grid {
-      grid-template-columns: 1fr 1fr;
-      grid-template-areas:
-    'text text'
-    'photo photo';
-    }
-  }
+#grid-photo {
+  grid-area: photo;
 }
 </style>
--- a/src/components/sections/ExperiencesSection.vue
+++ b/src/components/sections/ExperiencesSection.vue
@@ -1,20 +1,46 @@
+<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 class="experiences">
-    <div class="container">
-      <h2>Wykorzystywane technologie</h2>
-      <p>
+  <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="skills">
+      <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="skill-group"
+          class="p-4 bg-neutral-50 rounded-lg"
        >
-          <header class="skill-header">
-            <div class="tech-icons">
+          <header>
+            <div class="flex gap-2 text-3xl mb-2">
              <font-awesome-icon
                v-for="(icon, iconKey) in skill.icons"
                :key="iconKey"
@@ -24,13 +50,17 @@
                :title="icon.title"
              />
            </div>
-            <h3>{{ skill.header }}</h3>
+            <h3 class="text-lg font-bold">
+              {{ skill.header }}
+            </h3>
          </header>
-          <p v-if="skill.showMore.value || skill.description.length < 200">
-            {{ skill.description }}
-          </p>
-          <p v-else>
-            {{ parseText(skill.description) }}... <a @click="changeMoreStatus(skill)">Więcej</a>
+          <p 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>
@@ -38,196 +68,7 @@
  </div>
 </template>

-<script setup>
-import { ref } from 'vue'
-
-let list = [
-  {
-    icons: [
-      {
-        class: 'icon-php',
-        name: 'php',
-        alt: 'Ikona przedstawiająca język PHP',
-        title: 'Ikona PHP'
-      },
-      {
-        class: 'icon-laravel',
-        name: 'laravel',
-        alt: 'Ikona przedstawiająca framework Laravel',
-        title: 'Ikona Laravel'
-      }
-    ],
-    header: 'PHP & Laravel',
-    showMore: ref(false),
-    description: `PHP wraz z frameworkiem Laravel wykorzystuję do tworzenia nowych projektów. Laravel znacznie
-      przyspiesza pisanie części backendowej, odciążając programistę od pisania skomplikownych filtrów i monotonnych
-      walidacji przyjmowanych danych od użytkowników. Jednakże, choć dobrze pracuje mi się w środowisku Laravel
-      w miarę możliwości staram się pisać kod w samym PHP z wykorzystaniem bibliotek i paczek autorskich.`
-  },
-  {
-    icons: [
-      {
-        class: 'icon-js',
-        name: 'js-square',
-        alt: 'Ikona przedstawiająca język JavaScript',
-        title: 'Ikona JavaScript'
-      }
-    ],
-    header: 'JavaScript Vanilla',
-    showMore: ref(false),
-    description: `JavaScript wykorzystuję głównie do logiki frontendowej jak i pisania kodu wykonywalnego po stronie
-      przeglądarki internetowej. Wykorzystując możliwości reaktywnych frameworków mogę przyspieszyć pisanie UI.`
-  },
-  {
-    icons: [
-      {
-        class: 'icon-vue',
-        name: 'vuejs',
-        alt: 'Ikona przedstawiająca framework Vue.js',
-        title: 'Ikona Vue.js'
-      }
-    ],
-    header: 'Vue',
-    showMore: ref(false),
-    description: `Framework ten wspomaga mnie w pisaniu aplikacji frontendowej. Przyspiesza tworzenie warstwy
-      wizualnej, obsługę interakcji z użytkownikiem i bindowanie zdefiniowanych pól, które są odpowiednio renderowane
-      przez przeglądarkę. To wszystko, umożliwia łatwe łączenie CSS i HTML z logiką i otrzymanymi danymi z API.`
-  },
-  {
-    icons: [
-      {
-        class: 'icon-html5',
-        name: 'html5',
-        alt: 'Ikona przedstawiająca HTML5',
-        title: 'Ikona HTML5'
-      },
-      {
-        class: 'icon-css3',
-        name: 'css3-alt',
-        alt: 'Ikona przedstawiająca CSS3',
-        title: 'Ikona CSS3'
-      }
-    ],
-    header: 'HTML & CSS',
-    showMore: ref(false),
-    description: `HTML i CSS to już nieodłączne technologie, które w łatwy sposób umożliwiają nadanie wizualnej
-      spójności dla treści, obrazów lub ułożenia elementów. Nie raz, odpowednie zaprojektowanie interfejsu użytkownika
-      przyspiesza integrację z naszą stroną/sklepem. Ma to przełożenie na zyski dla obu stron - firmy (finanse)
-      i klienta (czas).`
-  },
-  {
-    icons: [
-      {
-        class: 'icon-node',
-        name: 'node',
-        alt: 'Ikona przedstawiająca Node.js',
-        title: 'Ikona Node.js'
-      }
-    ],
-    header: 'Node.js',
-    showMore: ref(false),
-    description: `Node jest wieloplatformowym środowiskiem uruchomieniowym, umożliwiającym uruchomienie kodu
-      JavaScript po stronie backendowej. Jest to bardzo przyjemny język, który ułatwia projektowanie logiki biznesowej
-      aplikacji, dla mniej wymagających serwisów pod względem analizy i przetwarzania danych.`
-  },
-  {
-    icons: [
-      {
-        class: 'icon-sass',
-        name: 'sass',
-        alt: 'Ikona przedstawiająca Sass',
-        title: 'Ikona Sass'
-      }
-    ],
-    header: 'Sass',
-    showMore: ref(false),
-    description: `Sass zwiększa czytelność kodu dla programisty. Zawiera abstrakcje znane z języków obiektowych,
-      przy czym ogranicza powtarzalność i umożliwia optymalizację kodu. Kompilacja napisanego stylu w Sass jest
-      przekształcana do formy czytelnej dla silnika graficznego przeglądarki, co przyspiesza proces generowania strony.`
-  }
-]
-
-function parseText(text) {
-  let shortText = text.substr(0, 200)
-  if (shortText.slice(-1) === ' ') {
-    shortText = text.substr(0, 199)
-  }
-  return shortText
-}
-
-function changeMoreStatus(skill) {
-  skill.showMore.value = !skill.showMore.value
-}
-</script>
-
-<style lang="scss">
-@import "scss/media";
-
-.experiences {
-  .container {
-    padding-top: 45px;
-    padding-bottom: 45px;
-
-    .skills {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      column-gap: 20px;
-      row-gap: 20px;
-      margin-top: 15px;
-
-      .skill-group {
-        background-color: #fafafa;
-        padding: 15px;
-        border-radius: 5px;
-
-        .tech-icons {
-          font-size: 1.8em;
-          margin-bottom: 3px;
-
-          & > svg[class*='icon'] {
-            margin-right: 10px;
-
-            &:last-child {
-              margin-right: 0;
-            }
-          }
-        }
-        h3 {
-          font-size: 1.2em;
-          line-height: 1.6em;
-          font-weight: bold;
-        }
-        .skill-list {
-          margin-block: auto;
-          padding-inline: inherit;
-          margin-left: 5px;
-          list-style-type: initial;
-        }
-        p {
-          font-size: .9em;
-
-          a {
-            color: #8D8D8D;
-            cursor: pointer;
-          }
-        }
-        &:hover {
-          background-color: rgba(0, 0, 0, .03);
-        }
-      }
-
-      @include media-small {
-        grid-template-columns: repeat(3, 1fr);
-      }
-      @include media-tablet {
-        grid-template-columns: repeat(2, 1fr);
-      }
-      @include media-mobile {
-        grid-template-columns: repeat(1, 1fr);
-      }
-    }
-  }
-}
+<style scoped>
 .icon-js {
  color: #F1DE4F;
 }
--- a/src/components/sections/FavoriteProjects.vue
+++ b/src/components/sections/FavoriteProjects.vue
@@ -1,43 +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">
-        <h2>Wybrane projekty</h2>
-        <p>Poniżej przedstawiam Państwu, wybraną przeze mnie, listę projektów.</p>
-      </div>
+      <header>
+        <h2 class="text-[2rem] mb-2">
+          Wybrane projekty
+        </h2>
+        <p class="mb-5">
+          Poniżej przedstawiam Państwu, wybraną przeze mnie, listę projektów.
+        </p>
+      </header>
    </projects>
-    <div class="more-button">
-      <GhostButton @click="router.push('projects')">
+    <div class="w-full -translate-y-5 pb-5 more-button">
+      <GhostButton
+        class="mx-auto"
+        @click="router.push('projects')"
+      >
        ZOBACZ WIĘCEJ
      </GhostButton>
    </div>
  </section>
 </template>

-<script setup>
-import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import Projects from '../SelectedProjects'
-import GhostButton from '../buttons/GhostButton'
-
-const router = useRouter()
-
-let select_projects = ref([])
-
-onMounted(() => {
-  loadProjectList()
-})
-
-function loadProjectList() {
-  fetch(process.env.VUE_APP_API_URL + '/projects?category=selected')
-    .then(response => response.json())
-    .then(data => {
-      select_projects.value = data
-    })
-}
-</script>
-
-<style lang="scss" scoped>
+<style lang="scss">
@import "scss/default";

 .selected-projects {
--- a/src/components/sections/contacts/MailContact.vue
+++ b/src/components/sections/contacts/MailContact.vue
@@ -1,91 +1,243 @@
+<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">
-    <div
-      v-if="hasMessageError"
-      class="message message_error"
-    >
-      {{ messageError }}
-    </div>
-    <div
-      v-if="hasMessageOkStatus"
-      class="message message_ok"
-    >
-      {{ messageOk }}
-    </div>
-    <header class="container_head">
-      Formularz kontaktowy:
+  <div
+    id="contact-form"
+    class="contact_container w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[500px] p-2 shadow"
+  >
+    <header class="mb-1.5">
+      <h3 class="text-xl">
+        Formularz kontaktowy
+      </h3>
    </header>
    <form
-      id="form-point"
+      class="flex flex-col gap-3 justify-start items-start"
      @submit="formSubmit"
    >
-      <label
-        class="label-info"
-        :class="{ 'label-error': isEmailError }"
-        for="email"
+      <div
+        v-if="responseMessage.type === 'err'"
+        class="w-full px-2 py-2.5 bg-red-100 text-red-700 text-sm rounded-md"
      >
-        E-mail:
-      </label>
-      <input
-        id="email"
-        v-model="emailValue"
-        class="contact_input"
-        :class="{ 'contact_input-error': isEmailError }"
-        type="text"
-        name="email"
-        placeholder="przemek.kowalski@gmail.com"
+        {{ 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"
      >
-      <span
-        v-if="isEmailError"
-        class="error-message"
-      >
-        E-mail musi być poprawny, np. przemek.kowalski@gmail.com
-      </span>
-      <label
-        class="label-info"
-        :class="{ 'label-error': isMessageError }"
-        for="message"
-      >
-        Wiadomość:
-      </label>
-      <textarea
-        id="message"
-        v-model="messageValue"
-        class="contact_input"
-        :class="{ 'contact_input-error': isMessageError }"
-        name="message"
-        placeholder="Chciałbym zlecić wykonanie strony..."
-      />
-      <span
-        v-if="isMessageError"
-        class="error-message"
-      >
-        Wiadomość musi zawierać przynajmniej 3 znaki!
-      </span>
-      <label
-        class="label-info"
-        :class="{ 'label-error': isSenderError }"
-        for="sender"
-      >
-        Podpis nadawcy:
-      </label>
-      <input
-        id="sender"
-        v-model="senderValue"
-        class="contact_input"
-        :class="{ 'contact_input-error': isSenderError }"
-        type="text"
-        name="sender"
-        placeholder="np. Przemek Kowalski"
-      >
-      <span
-        v-if="isSenderError"
-        class="error-message"
-      >
-        Podpis musi zawierać przynajmniej 3 znaki!
-      </span>
+        {{ 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
@@ -94,217 +246,10 @@
  </div>
 </template>

-<script setup>
-import BaseButton from '../../buttons/BaseButton'
-import { ref, reactive, watch, computed } from 'vue'
-
-function emailValidate (mailObj) {
-  const mailFormat = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/
-  return mailObj.match(mailFormat)
-}
-
-async function postData (url = '', data = {}) {
-  const response = await fetch(url, {
-    method: 'POST',
-    cache: 'no-cache',
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify(data)
-  })
-  return response.json()
-}
-
-const buttonDisabled = ref(false)
-const statusError = ref(0)
-const emailValue = ref('')
-const messageValue = ref('')
-const senderValue = ref('')
-
-const messageError = ref('')
-const messageOk = ref('')
-
-const errors = reactive({
-  email: false,
-  message: false,
-  sender: false
-})
-
-const isButtonDisabled = computed(() => buttonDisabled.value || errors.email || errors.message || errors.sender)
-const isEmailError = computed(() => errors.email)
-const isMessageError = computed(() => errors.message)
-const isSenderError = computed(() => errors.sender)
-const hasMessageError = computed(() => messageError.value)
-const hasMessageOkStatus = computed(() => messageOk.value && !hasMessageError.value)
-
-watch([statusError, emailValue], ([errorCount, value]) => {
-  errors.email = errorCount > 0 && !emailValidate(value)
-})
-
-watch([statusError, messageValue], ([errorCount, value]) => {
-  errors.message = errorCount > 0 && (value === '' || value.length < 3)
-})
-
-watch([statusError, senderValue], ([errorCount, value]) => {
-  errors.sender = errorCount > 0 && (value === '' || value.length < 3)
-})
-
-function clearErrors() {
-  statusError.value = 0
-  errors.email = false
-  errors.message = false
-  errors.sender = false
-}
-
-function checkForm() {
-  clearErrors()
-  if (!emailValidate(emailValue.value)) {
-    errors.email = true
-    statusError.value++
+<style lang="scss">
+@screen md {
+  .contact_container {
+    flex-basis: 500px;
  }
-  if (messageValue.value === '') {
-    errors.message = true
-    statusError.value++
-  }
-  if (senderValue.value === '') {
-    errors.sender = true
-    statusError.value++
-  }
-}
-
-function formSubmit(event) {
-  event.preventDefault()
-
-  checkForm()
-
-  if (statusError.value === 0) {
-    console.log('Send!')
-    buttonDisabled.value = true
-    postData('https://kamilcraft.com/send', {
-      email: emailValue.value,
-      message: messageValue.value,
-      sender: senderValue.value
-    }).then(result => {
-      if (result.error) {
-        messageError.value = result.message
-      } else {
-        messageOk.value = result.message
-        messageValue.value = ''
-        emailValue.value = ''
-        senderValue.value = ''
-      }
-      buttonDisabled.value = false
-    }).catch(() => {
-      messageError.value = 'Wystąpił błąd podczas wysyłania wiadomości. Proszę spróbować później.'
-      buttonDisabled.value = false
-    })
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "scss/media";
-
-.contact_container {
-  flex-basis: 500px;
-
-  #form-point {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .btn {
-    width: 97%;
-    margin: 0 20px 5px;
-  }
-}
-
-.container_head {
-  padding: 10px;
-  line-height: 1.6em;
-  font-size: 1.3em;
-  font-weight: bold;
-}
-
-.contact_container {
-  .label-info {
-    width: 97%;
-    padding-bottom: 5px;
-    color: #7a7a7a;
-  }
-
-  .error-message {
-    width: 97%;
-    padding: 5px 0 10px;
-    color: #d44950;
-  }
-
-  input, textarea {
-    width: 97%;
-    max-width: 97%;
-    border: 0;
-    border-bottom: 2px solid #c9c9c9;
-    padding: 10px 10px 8px;
-    font-size: 1em;
-    font-family: var(--font-family);
-    line-height: 1.3em;
-    margin-bottom: 15px;
-    border-radius: 5px;
-  }
-}
-
-.contact_input::placeholder {
-  color: #bdbdbd;
-}
-
-.contact_input:focus, .contact_input:focus {
-  outline: none;
-  border-color: black;
-}
-
-textarea.contact_input {
-  max-width: 97%;
-  min-width: 97%;
-  min-height: 150px;
-}
-
-input.contact_input-error, textarea.contact_input-error {
-  border-color: #d44950;
-  color: #d44950;
-  margin-bottom: 0;
-}
-
-.contact_input-error::placeholder, .contact_input-error::placeholder {
-  color: #d7626a;
-}
-
-input[disabled].contact_input {
-  background-color: #cdcdcd;
-  border-color: gray;
-  color: black;
-}
-
-.message {
-  display: none;
-  margin: 5px;
-  padding: 8px;
-  border-radius: 5px;
-}
-
-.message_ok, .message_error {
-  display: block;
-}
-
-.message_ok {
-  background-color: #4CAF50;
-  border: 1px solid #387d3b;
-  color: white;
-}
-
-.message_error {
-  background-color: #f8d7da;
-  border: 1px solid #f5c6cb;
-  color: #721c24;
 }
 </style>
--- a/src/components/sections/contacts/OtherContact.vue
+++ b/src/components/sections/contacts/OtherContact.vue
@@ -1,134 +1,111 @@
 <template>
-  <div class="contact_info">
-    <header class="info_head">
-      Inne formy kontaktu:
+  <div class="contact_info w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[410px] p-2 shadow">
+    <header class="mb-1.5">
+      <h3 class="text-xl">
+        Inne formy kontaktu:
+      </h3>
    </header>
-    <div class="contact_element">
-      <img
-        class="contact_element_icon"
-        src="/assets/img/instagram.jpg"
-        alt="Instagram"
-      >
-      <span
-        id="instagram"
-        class="contact_element_text"
-      >
-        <a
-          href="https://www.instagram.com/nikcamii/"
-          target="_blank"
-          rel="noopener nofollow noreferrer"
-        >Instagram: @NiKCamii</a>
-      </span>
-    </div>
-    <div class="contact_element">
-      <img
-        class="contact_element_icon"
-        src="/assets/img/facebook.jpg"
-        alt="Facebook"
-      >
-      <span
-        id="facebook"
-        class="contact_element_text"
-      >
-        <a
-          href="https://www.facebook.com/nikcamii/"
-          target="_blank"
-          rel="noopener nofollow noreferrer"
-        >Facebook: @NiKCamii</a>
-      </span>
-    </div>
-    <div class="contact_element">
-      <img
-        class="contact_element_icon"
-        src="/assets/img/twitter.jpg"
-        alt="Twitter"
-      >
-      <span
-        id="twitter"
-        class="contact_element_text"
-      >
-        <a
-          href="https://twitter.com/nikcamii"
-          target="_blank"
-          rel="noopener nofollow noreferrer"
-        >Twitter: @NiKCamii</a>
-      </span>
-    </div>
-    <div class="contact_element">
-      <img
-        class="contact_element_icon"
-        src="/assets/img/gg.png"
-        alt="Gadu-Gadu"
-      >
-      <span
-        id="gg"
-        class="contact_element_text"
-      >GG: 38429969</span>
-    </div>
-    <div class="contact_element">
-      <img
-        class="contact_element_icon"
-        src="/assets/img/user.jpg"
-        alt="E-mail"
-      >
-      <span
-        id="mailto"
-        class="contact_element_text"
-      >
-        <a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a>
-      </span>
+    <div class="flex flex-col gap-2.5 justify-start items-start">
+      <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/instagram.jpg"
+          alt="Instagram"
+        >
+        <span
+          id="instagram"
+          class="font-bold"
+        >
+          <a
+            href="https://www.instagram.com/nikcamii/"
+            target="_blank"
+            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>

-<style lang="scss" scoped>
+<style lang="scss">
@import "scss/media";

-.contact_info {
-  flex-basis: 410px;
+@screen md {
+  .contact_info {
+    flex-basis: 410px;
+  }
 }

-.info_head {
-  padding: 10px;
-  line-height: 1.6em;
-  font-size: 1.3em;
-  font-weight: bold;
-}
+a {
+  color: inherit;

-.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;
-    }
-  }
-
-  &_icon {
-    border-radius: 50%;
-    border: 1px solid #e2e2e2;
-    width: 50px;
-    height: 50px;
-    margin-right: 10px;
-    object-fit: contain;
-  }
-
-  &_text{
-    padding-top: 2px;
-    line-height: 1.6em;
-    font-size: 1.1em;
-    font-weight: bold;
+  &:hover {
+    -webkit-text-fill-color: #374151;
+    color: #374151;
  }
 }

@@ -153,11 +130,4 @@
 #gg {
  color: #ffa214;
 }
-
-@include media-tablet {
-  #instagram, #facebook, #twitter, #mailto, #gg {
-    font-size: 1em;
-    line-height: 1.2em;
-  }
-}
 </style>
--- a/src/main.js
+++ b/src/main.js
@@ -1,26 +1,21 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
-import { store } from './store'
-// import VueMeta from 'vue-meta'
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+import { store } from './store';

-import '../scss/default.scss'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { fas } from '@fortawesome/free-solid-svg-icons'
-import { fab } from '@fortawesome/free-brands-svg-icons'
-import { far } from '@fortawesome/free-regular-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import '../scss/default.scss';
+import '../css/index.css';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { fab } from '@fortawesome/free-brands-svg-icons';
+import { far } from '@fortawesome/free-regular-svg-icons';

-library.add(fas, fab, far)
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

-const app = createApp(App)
+library.add(fas, fab, far);

-app.config.productionTip = false
-
-app.component('FontAwesomeIcon', FontAwesomeIcon)
-
-app.use(router)
-app.use(store)
-// app.use(VueMeta)
-
-app.mount('#app')
+createApp(App)
+    .component('FontAwesomeIcon', FontAwesomeIcon)
+    .use(router)
+    .use(store)
+    .mount('#app');
--- 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,61 +1,76 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import Home from '../views/HomeView'
-import About from '../views/AboutView'
-import Projects from '../views/ProjectsView'
-import Project from '../views/ProjectView'
-import Contact from '../views/ContactView'
-import NotFound from '../views/NotFound'
+import { createRouter, createWebHistory } from 'vue-router';
+import { setHeaderTitle, setHeaderDescription, clearHeaderDescription } from '@/HeaderReference';

-const mainTitle = 'kamilcraft.com'
+const Home = () => import('@/views/HomeView.vue');
+const About = () => import('@/views/AboutView.vue');
+const Projects = () => import('@/views/ProjectsView.vue');
+const Project = () => import('@/views/ProjectView.vue');
+const Contact = () => import('@/views/ContactView.vue');
+const NotFound = () => import('@/views/NotFoundView.vue');
+
+const mainTitle = 'kamilcraft.com';

 const routes = [
  {
    path: '/',
    name: 'Home',
    meta: {
-      title: 'Dzień dobry! 😊'
+      title: 'Dzień dobry! 😊',
+      description: [
+        'Chciałbym Państwa powitać na mojej stronie!',
+        'Przedstawiam tutaj część swojego życia związaną z programowaniem i projektowaniem aplikacji internetowych.',
+      ],
    },
-    component: Home
+    component: Home,
  },
  {
    path: '/projects',
    name: 'Projects',
    meta: {
-      title: 'Moje projekty'
+      title: 'Moje projekty',
+      description: [
+        'Witam Państwa na podstronie z moimi projektami!',
+      ],
    },
-    component: Projects
+    component: Projects,
  },
  {
    path: '/projects/:id',
    name: 'Project',
    meta: {
-      title: 'Projekt'
+      title: 'Projekt',
    },
-    component: Project
+    component: Project,
  },
  {
    path: '/about',
    name: 'About',
    meta: {
-      title: 'O mnie'
+      title: 'O mnie',
+      description: [
+        'Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.',
+      ],
    },
-    component: About
+    component: About,
  },
  {
    path: '/contact',
    name: 'Kontakt',
    meta: {
-      title: 'Kontakt'
+      title: 'Kontakt',
+      description: [
+        'Chcesz o coś zapytać? Chciałbyś współpracować? Napisz!',
+      ],
    },
-    component: Contact
+    component: Contact,
  },
  {
-    path: '/:catchAll(.*)',
+    path: '/:pathMatch(.*)*',
    name: '404',
    meta: {
-      title: 'Błąd 404'
+      title: 'Błąd 404',
    },
-    component: NotFound
+    component: NotFound,
  }
 ]

@@ -64,41 +79,34 @@ const router = createRouter({
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
-      return savedPosition
+      return savedPosition;
    } else if (to.hash) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve({
            selector: to.hash
-          }, 1000)
-        })
-      })
+          }, 1000);
+        });
+      });
    } else {
-      return { left: 0, top: 0 }
+      return { left: 0, top: 0 };
    }
  }
-  /*scrollBehavior (to, from, savedPosition) {
-    if (savedPosition) {
-      return savedPosition
-    } else if (to.hash) {
-      return new Promise(resolve => {
-        setTimeout(() => {
-          resolve({
-            selector: to.hash
-          }, 1000)
-        })
-      })
-    } else {
-      return { x: 0, y: 0 }
-    }
-  }*/
-})
+});

-const title = ' :: ' + mainTitle
+const title = ' :: ' + mainTitle;
 router.beforeEach((to, form, next) => {
-  const documentTitle = to.meta.title + title || mainTitle
-  document.title = documentTitle === to.meta.title ? title : documentTitle
-  next()
-})
+  const documentTitle = to.meta.title + title || mainTitle;
+  document.title = documentTitle === to.meta.title ? title : documentTitle;
+  if (to.meta.title) {
+    setHeaderTitle(to.meta.title);
+  }
+  if (to.meta.description && to.meta.description !== []) {
+    setHeaderDescription(to.meta.description);
+  } else {
+    clearHeaderDescription();
+  }
+  next();
+});

-export default router
+export default router;
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,41 +1,36 @@
-import { createStore } from 'vuex'
+import { createStore } from 'vuex';
+
+const apiURL = import.meta.env.VITE_APP_API_URL;

 export const store = createStore({
  state: {
-    header: {
-      title: null,
-      description: null
-    },
    categories: [],
    projects: []
  },
  getters: {
-    getHeader (state) {
-      return state.header
-    },
    getCategories (state) {
-      return state.categories
+      return state.categories;
    },
    getProjects (state) {
-      return state.projects
+      return state.projects;
    }
  },
  actions: {
    fetchProjects (store) {
-      return fetch(process.env.VUE_APP_API_URL + '/projects')
+      return fetch(apiURL + '/projects')
        .then(response => response.json())
        .then(data => {
          store.commit('setProjects', data)
          return store.getters.getProjects
-        })
+        });
    },
    fetchCategories (store) {
-      return fetch(process.env.VUE_APP_API_URL + '/categories')
+      return fetch(apiURL + '/categories')
        .then(response => response.json())
        .then(data => {
          store.commit('setCategories', data)
          return store.getters.getCategories
-        })
+        });
    }
  },
  mutations: {
@@ -45,20 +40,5 @@ export const store = createStore({
    setProjects: (state, array = []) => {
      state.projects = array
    },
-    setHeader: (state, text) => {
-      state.header = {
-        title: text.title ?? null,
-        description: text.description ?? null
-      }
-    },
-    resetHeaderTitle (state) {
-      state.header.title = null
-    },
-    setHeaderDescription: (state, payload) => {
-      state.header.description = payload.title
-    },
-    resetHeaderDescription (state) {
-      state.header.description = null
-    }
  }
 })
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,91 +1,44 @@
 <template>
-  <section id="about">
-    <div class="container">
-      <p>
-        <strong>Nazywam się Kamil Niemczycki. Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
-          W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.</strong>
-      </p>
-      <h2>Studia</h2>
-      <p>
-        Jestem absolwentem Państwowej Wyższej Szkoły Zawodowej im. Witelona w Legnicy. Studiowałem na kierunku <em>Informatyka</em> o specjalności <em>Programowanie Aplikacji Mobilnych i Internetowych.</em>
-      </p>
-      <p>
-        Podczas studiów zdobyłem niezbędną wiedzę z zakresu projektowania, wdrażania i rozwoju aplikacji internetowych, mobilnych i desktopowych.
-        Zdobyłem także umiejętności pracy w zespole, które owocują tworzeniem merytorycznej dyskusji na temat części lub całości projektu.
-      </p>
-      <h3>Kursy</h3>
-      <p>
-        W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
-        <strong><a
-          :href="publicPath + 'download/certyfikat-laravel.pdf'"
-          target="_blank"
-          rel="noopener nofollow noreferrer"
-        >
-          Architektura aplikacji internetowych opartych o framework Laravel</a></strong>.
-      </p>
-      <p>
-        Umożliwiło mi to szersze spojrzenie na możliwości jakie daje nam Laravel i wzbogaconie poprzednio zdobytej
-        wiedzy o nowe doświadczenia.
-      </p>
-      <h2>Moje zainteresowania</h2>
-      <p>
-        W wolnym czasie przyjmuje małe zlecenia na strony lub serwisy internetowe. Uczę się nowych języków
-        programowania lub frameworków w znanych mi już technologiach. Hobbistycznie, tworzę także rozwiązania do
-        problemów przy prywatnych projektach.
-      </p>
-    </div>
+  <section 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>
-
-<script setup>
-import { onMounted, onUnmounted } from 'vue'
-import { useStore } from 'vuex'
-import { useRoute } from 'vue-router'
-
-const publicPath = process.env.VUE_APP_BASE_URL + '/'
-
-const store = useStore()
-const route = useRoute()
-
-onMounted(() => {
-  const header = {
-    title: route.meta.title,
-    description: 'Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.'
-  }
-  store.commit('setHeader', header)
-})
-
-onUnmounted(() => {
-  store.commit('resetHeaderTitle')
-  store.commit('resetHeaderDescription')
-})
-</script>
-
-<style lang="scss">
-section#about {
-  padding: 45px 0;
-  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>
--- a/src/views/ContactView.vue
+++ b/src/views/ContactView.vue
@@ -1,73 +1,11 @@
-<template>
-  <section class="contact">
-    <div class="container">
-      <MailContact />
-      <OtherContact />
-    </div>
-  </section>
-</template>
-
 <script setup>
-import { onMounted } from 'vue'
-import { useRoute } from 'vue-router'
-import { useStore } from 'vuex'
-import MailContact from '../components/sections/contacts/MailContact'
-import OtherContact from '../components/sections/contacts/OtherContact'
-
-const route = useRoute()
-const store = useStore()
-
-onMounted(() => {
-  const header = {
-    title: route.meta.title,
-    description: 'Chcesz o coś zapytać? Chciałbyś współpracować? Napisz!'
-  }
-  store.commit('setHeader', header)
-})
+import MailContact from '@/components/sections/contacts/MailContact.vue';
+import OtherContact from '@/components/sections/contacts/OtherContact.vue';
 </script>

-<style lang="scss">
-@import "scss/media";
-
-.contact {
-  padding: 25px 0;
-
-  .container {
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-  }
-
-  .contact_container, .contact_info {
-    margin: 10px;
-    max-width: 500px;
-    background-color: #eaeaea;
-    border: 2px solid #dadada;
-    border-radius: 2px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
-  }
-
-  @include media-tablet {
-    .container {
-      display: block;
-      margin: 0 auto;
-
-      .contact_container, .contact_info {
-        margin: 0 auto 25px;
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-    }
-  }
-  @include media-mobile {
-    .container {
-      padding: 0 10px;
-
-      .contact_container {
-        max-width: unset;
-      }
-    }
-  }
-}
-</style>
+<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/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,35 +1,13 @@
+<script setup>
+import About from'@/components/sections/AboutSection.vue';
+import Experiences from'@/components/sections/ExperiencesSection.vue';
+import FavoriteProjects from'@/components/sections/FavoriteProjects.vue';
+</script>
+
 <template>
  <section class="home">
    <About />
-    <ExperiencesSection />
+    <Experiences />
    <FavoriteProjects />
  </section>
 </template>
-
-<script setup>
-import { onMounted, onUnmounted } from 'vue'
-import { useStore } from 'vuex'
-import { useRoute } from 'vue-router'
-import About from '../components/sections/AboutSection'
-import ExperiencesSection from '../components/sections/ExperiencesSection'
-import FavoriteProjects from '../components/sections/FavoriteProjects'
-
-const store = useStore()
-const route = useRoute()
-
-onMounted(() => {
-  const header = {
-    title: route.meta.title,
-    description: [
-      'Chciałbym Państwa powitać na mojej stronie!',
-      'Przedstawiam tutaj część swojego życia związaną z programowaniem i projektowaniem aplikacji internetowych.'
-    ]
-  }
-  store.commit('setHeader', header)
-})
-
-onUnmounted(() => {
-  store.commit('resetHeaderTitle')
-  store.commit('resetHeaderDescription')
-})
-</script>
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -1,269 +1,190 @@
+<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="project"
+    class="max-w-screen-xl mx-auto px-6 xl:px-2 py-8"
  >
-    <header class="project_header">
-      <h1>{{ project.title }}</h1>
-      <ul class="project_info">
-        <li class="info_text">
-          <font-awesome-icon
-            class="icon"
+    <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="info_text">
-          <font-awesome-icon
-            class="icon"
+        <li class="flex items-center gap-2">
+          <FontAwesomeIcon
+            class="w-4"
            :icon="['far', 'user']"
          />
          <span>{{ project.author }}</span>
        </li>
-        <li class="info_text">
-          <font-awesome-icon
-            class="icon"
+        <li class="flex items-center gap-2">
+          <FontAwesomeIcon
+            class="w-4"
            :icon="['far', 'folder']"
          />
          <span>{{ getCategoryName(project.categories) }}</span>
        </li>
-        <li class="info_text">
-          <font-awesome-icon
-            class="icon"
+        <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="info_text"
+          class="flex items-center gap-2"
        >
-          <font-awesome-icon
-            class="icon"
+          <FontAwesomeIcon
+            class="w-4"
            :icon="['fas', 'link']"
          />
-          <span><a
-            :href="project.project_url"
-            target="_blank"
-            rel="noopener nofollow noreferrer"
-          >Link</a></span>
+          <span>
+            <a
+              :href="project.project_url"
+              target="_blank"
+              rel="noopener nofollow noreferrer"
+            >
+              Link
+            </a>
+          </span>
        </li>
      </ul>
    </header>
-    <div class="container">
-      <component
-        :is="`figure`"
-        class="project-photo"
-      >
+    <div class="pt-5">
+      <figure class="w-full shadow-xl">
        <img
-          :src="`${project.images.large}`"
+          class="block max-h-[31.25rem] object-cover"
+          :src="project.images.large"
          :alt="project.title"
        >
-      </component>
-      <div
-        class="content"
-        v-html="markdownToHtml"
+      </figure>
+      <Markdown
+        class="markdown mt-9"
+        :source="project.description"
      />
    </div>
  </section>
  <div
    v-else
-    class="loading"
+    class="flex items-center"
  >
    <div class="loading_animation" />
  </div>
 </template>

-<script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
-import { useRoute } from 'vue-router'
-import { useStore } from 'vuex'
-import { marked } from 'marked'
-
-const route = useRoute()
-const store = useStore()
-
-const isLoaded = ref(false)
-let project = reactive({})
-
-const getCategories = computed(() => store.getters.getCategories)
-const markdownToHtml = computed(() => marked.parse(project.description))
-
-onMounted(() => {
-  if (getCategories.value.length === 0) {
-    store.dispatch('fetchCategories')
-  }
-  loadProject(route.params.id)
-})
-
-function getCategoryName(categories = []) {
-  const categoriesText = []
-  categories.forEach(categoryElement => {
-    const category = getCategories.value.find(category => category.slug === categoryElement)
-    if (category) {
-      categoriesText.push(category.name)
-    }
-  })
-  return categoriesText[0] ?? undefined
-}
-
-function loadProject(id) {
-  fetch(process.env.VUE_APP_API_URL + '/project/' + id)
-    .then(response => response.json())
-    .then(data => {
-      project.title = data.title
-      project.description = data.description
-      project.release_date = data.release_date
-      project.author = data.author
-      project.categories = data.categories
-      project.project_version = data.project_version
-      project.project_url = data.project_url
-      project.images = data.images
-      isLoaded.value = true
-    })
-}
-</script>
-
 <style lang="scss">
@import "scss/default";

-.loading {
-  display: flex;
-  align-items: center;
+a {
+  @apply text-neutral-800 hover:text-kamilcraft-green;
 }

-.project {
-  .project_header {
-    @extend .container;
-    text-align: center;
-    margin-bottom: 25px;
+.markdown {
+  h1 {
+    @apply text-4xl;
+  }

-    h1 {
-      font-size: 2.2em;
-      font-weight: lighter;
-      line-height: 2.4em;
-    }
+  h2 {
+    @apply text-[2rem];
+  }

-    .project_info {
-      display: flex;
-      list-style: none;
-      justify-content: center;
+  h3 {
+    @apply text-[1.5rem];
+  }

-      .info_text {
-        display: flex;
-        align-items: center;
+  p, ol li, ul li {
+    @apply text-lg;
+  }

-        .icon {
-          width: 2em;
-        }
+  p + ol, p + ul, p + blockquote {
+    @apply -mb-2;
+  }

-        span {
-          font-weight: lighter;
-          white-space: nowrap;
-        }
+  ol {
+    @apply list-decimal;
+  }

-        &:not(&:last-child) {
-          margin-right: 15px;
-        }
-      }
-      @include media-tablet {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        row-gap: 15px;
+  ul {
+    @apply list-disc;
+  }

-        .info-text {
-          &:not(&:last-child) {
-            margin-right: 0;
-          }
-        }
-      }
+  ol, ul {
+    @apply mb-2.5;
+    padding-inline-start: 1.75rem;
+
+    li img {
+      @apply block w-full pr-1 pb-1 mt-3.5;
    }
  }

-  .container {
-    .project-photo {
-      box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
-    }
+  p {
+    @apply mb-2 text-justify;
+  }

-    .project-photo, .project-photo img {
-      width: 100%;
-    }
+  blockquote {
+    @apply pl-6 ml-5 border-neutral-400;

-    .project-photo img {
-      display: block;
-      object-fit: cover;
-      max-height: 500px;
-    }
-
-    .content {
-      margin: 35px 0;
-
-      a {
-        color: #8D8D8D;
-
-        &:hover {
-          color: #A2CF00;
-        }
-      }
-
-      h2, h3 {
-        margin-top: 15px;
-        margin-bottom: 5px;
-      }
-
-      h2:first-of-type {
-        margin-top: 0;
-      }
-
-      h2 {
-        font-size: 1.6em;
-      }
-
-      h3 {
-        font-size: 1.4em;
-      }
-
-      p, ol li, ul li {
-        line-height: 1.8em;
-        font-size: 1.1em;
-
-        @include media-tablet {
-          font-size: 1.2em;
-          line-height: 1.5em;
-        }
-      }
-
-      p + ol, p + ul, p + blockquote {
-        margin-top: -10px;
-      }
-
-      ol, ul {
-        margin-bottom: 10px;
-        padding-inline-start: 2.1em;
-
-        li img {
-          display: block;
-          width: 100%;
-          padding: 0 5px 5px;
-          margin-top: .9em;
-        }
-      }
-
-      p {
-        margin-bottom: 10px;
-        text-align: justify;
-        /* text-indent: 1.5em; */
-      }
-
-      blockquote {
-        padding-left: 25px;
-        margin-left: 1.3em;
-        border-left: 1px solid rgb(116, 116, 116);
-
-        p {
-          text-indent: unset;
-        }
-      }
+    p {
+      text-indent: unset;
    }
  }
 }
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -1,135 +1,88 @@
-<template>
-  <div>
-    <div class="project_categories">
-      <ul class="categories">
-        <li
-          v-for="category in getCategories"
-          :key="category.slug"
-          class="categories_element"
-          :class="{ 'categories_element-active': categories.active === category.slug }"
-          @click="changeCategory(category.slug)"
-        >
-          <a :title="`Kategoria ${category.name}`">{{ category.name }}</a>
-        </li>
-      </ul>
-    </div>
-    <SelectedProjects :projects="projects" />
-    <div
-      v-if="projects.length === 0"
-      class="loading"
-    >
-      <div class="loading_animation" />
-    </div>
-  </div>
-</template>
-
 <script setup>
-import { reactive, computed, onMounted, onUnmounted } from 'vue'
-import { useStore } from 'vuex'
-import SelectedProjects from '../components/SelectedProjects'
+import { ref, reactive, computed, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import SelectedProjects from '@/components/SelectedProjects.vue';

-const store = useStore()
+const store = useStore();

-const categories = reactive({
-  active: 'all'
-})
-const projects = reactive([])
+const activeCategory = ref('all');
+const projects = reactive([]);

-const getCategories = computed(() => store.getters.getCategories)
+const getCategories = computed(() => store.getters.getCategories);

 onMounted(() => {
-  loadAllData()
-})
-
-onUnmounted(() => {
-  store.commit('resetHeaderTitle')
-  store.commit('resetHeaderDescription')
-})
+  loadAllData();
+});

 function loadAllData () {
-  store.dispatch('fetchCategories')
+  store.dispatch('fetchCategories');
  store.dispatch('fetchProjects').then(loadedProjects => {
    loadedProjects.forEach(project => {
-      projects.push(project)
-    })
-  })
+      projects.push(project);
+    });
+  });
 }

 function loadListWhereCategory(category) {
-  projects.splice(0)
+  projects.splice(0);
  setTimeout(() => {
    if (category !== 'all') {
-      const storedProjects = store.getters.getProjects.filter(project => project.categories.includes(category))
+      const storedProjects = store.getters.getProjects.filter(project => project.categories.includes(category));
      storedProjects.forEach(project => {
-        projects.push(project)
+        projects.push(project);
      })
    } else {
      store.getters.getProjects.forEach(project => {
-        projects.push(project)
-      })
+        projects.push(project);
+      });
    }
-  }, 500)
+  }, 500);
 }

 function changeCategory(category) {
-  categories.active = 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";

-.project_categories {
-  padding-top: 45px;
-
-  .categories {
-    display: flex;
-    justify-content: center;
-    list-style: none;
-
-    .categories_element {
-      position: relative;
-      cursor: pointer;
-      margin-right: 25px;
-
-      a {
-        color: var(--text-color);
-        &:hover {
-          color: black;
-        }
-      }
-
-      &:last-child {
-        margin-right: 0;
-      }
-
-      &-active {
-        &::after {
-          content: '';
-          position: absolute;
-          margin: 0 auto;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          width: 0;
-          height: 2px;
-          background-color: #A2CF00;
-          transform: translateY(8px);
-          animation: load-underline 300ms forwards;
-        }
-      }
-
-      @include media-mobile {
-        margin-right: 15px;
-      }
-    }
-  }
-}
-
-.projects {
-  padding-top: 25px;
-  padding-bottom: 25px;
+.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 {
--- 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,6 +0,0 @@
-const { defineConfig } = require('@vue/cli-service')
-
-module.exports = defineConfig({
-  publicPath: '/',
-  transpileDependencies: true
-})
Author	SHA1	Message	Date
Kamil Niemczycki	2d9bda3ef3	- version 1.2.0 & fix sass	2023-08-06 00:33:22 +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