Add GitHub link to footer (#4)

* added link to github

* update of dependencies

.browserslistrc

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

.env.example

@@ -1,2 +1,3 @@
 VUE_APP_TITLE=kamilcraft.com
-BASE_URL=http://127.0.0.1
+VUE_APP_BASE_URL=http://127.0.0.1
+VUE_APP_API_URL=https://api.kamilcraft.com

.eslintrc.js

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

README.md

@@ -1,10 +1,10 @@
 # kamilcraft.com
 Project of my website - portfolio
-The project uses a closed API at https://api.kamilcraft.com
+The project uses the [API](https://github.com/kamilniemczycki/kamilcraft-api) at https://api.kamilcraft.com
 
 ## Dependency installation
 ```
-npm install
+npm install --legacy-peer-deps
 ```
 
 ### Development

css/index.css

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kamilcraft.com",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -8,35 +8,44 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-brands-svg-icons": "^6.2.0",
-    "@fortawesome/free-regular-svg-icons": "^5.15.4",
+    "@fortawesome/free-regular-svg-icons": "^6.2.0",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
-    "@fortawesome/vue-fontawesome": "^2.0.2",
+    "@fortawesome/vue-fontawesome": "^3.0.1",
-    "bootstrap": "^5.0.2",
+    "core-js": "^3.25.0",
-    "core-js": "^3.15.2",
+    "marked": "^4.1.0",
-    "jquery": "^3.6.0",
+    "vue": "^3.2.38",
-    "popper.js": "^1.16.1",
-    "vue": "^2.6.14",
     "vue-meta": "^2.4.0",
-    "vue-router": "^3.5.2",
+    "vue-router": "^4.1.5",
-    "vuex": "^3.6.2"
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
+    "@babel/core": "^7.18.13",
-    "@vue/cli-plugin-eslint": "^3.1.1",
+    "@babel/eslint-parser": "^7.18.9",
-    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-service": "^4.5.13",
+    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/eslint-config-standard": "^5.1.2",
+    "@vue/cli-service": "~5.0.0",
-    "babel-eslint": "^10.1.0",
+    "autoprefixer": "^10.4.7",
-    "eslint": "^6.7.2",
+    "eslint": "^7.32.0",
-    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-vue": "^8.7.1",
-    "eslint-plugin-node": "^11.1.0",
+    "postcss": "^8.4.14",
-    "eslint-plugin-promise": "^4.2.1",
+    "sass": "^1.53.0",
-    "eslint-plugin-standard": "^4.0.0",
+    "sass-loader": "^13.0.2",
-    "eslint-plugin-vue": "^6.2.2",
+    "tailwindcss": "^3.1.6"
-    "sass": "^1.26.5",
+  },
-    "sass-loader": "^8.0.2",
+  "eslintConfig": {
-    "vue-template-compiler": "^2.6.11"
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
   }
 }

postcss.config.js

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

public/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="<%= VUE_APP_BASE_URL %>/favicon.ico">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Thasadith&display=swap" rel="stylesheet">
     <title>KamilCraft.com</title>

scss/_btn.scss

@@ -1,3 +1,111 @@
-@mixin btn($revese: false) {
+@import "colors";
 
+$default-color: transparent !default;
+$dark-gray: #4f4f4f !default;
+$navy-blue: #436da7 !default;
+$white: white !default;
+
+$btn-colors: (
+  border: $dark-gray,
+  bg: $default-color,
+  font: $dark-gray,
+  hover: (
+    bg: $dark-gray,
+    font: $white
+  )
+);
+
+.btn {
+  display: block;
+  min-width: 270px;
+  padding: 8px 10px;
+
+  @apply border-4 rounded-md;
+  border-style: solid;
+  border-color: $default-color;
+
+  background-color: map-get($btn-colors, bg);
+}
+
+@mixin btn($colors: $btn-colors) {
+  border-color: map-get($colors, border);
+  background-color: map-get($colors, bg);
+
+  font-size: 1.05em;
+  color: map-get($colors, font);
+
+  &[disabled] {
+    opacity: .7;
+  }
+
+  &:hover:not([disabled]) {
+    $hovers: map-get($colors, hover);
+    background-color: map-get($hovers, bg);
+    color: map-get($hovers, font);
+  }
+
+  @content;
+}
+
+@mixin btn-reverse($leading-color: $dark-gray) {
+  $colors: (
+    border: $leading-color,
+    bg: $leading-color,
+    font: $white,
+    hover: (
+      bg: $default-color,
+      font: $leading-color
+    )
+  );
+  @include btn($colors);
+}
+
+@mixin button($reverse: false, $has-icon: false) {
+  @if not $reverse {
+    @include btn()
+  } @else {
+    @include btn-reverse($navy-blue);
+  }
+  @if $has-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .icon {
+      margin-right: 10px;
+      font-size: 1.3em;
+    }
+  }
+  @content;
+}
+
+@mixin ghost-button($has-icon: false) {
+  @include button($has-icon: $has-icon);
+
+  position: relative;
+  font-size: 1.2em;
+  border: unset;
+
+  &:hover:not([disabled]) {
+    background-color: $default-color;
+    color: $dark-gray;
+
+    &::after {
+      width: 98%;
+    }
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0 auto;
+    width: 30%;
+    height: 2px;
+    background-color: $dark-gray;
+    transform: translateY(2px);
+    transition: width .3s linear;
+  }
 }

scss/_colors.scss

@@ -1,7 +1,10 @@
 // default colors
 $gray: #fafafa;
 $dark-gray: #4f4f4f;
+$navy-blue: #436da7 !default;
 
 // default colors for style
 $text-color: #2c3e50;
 $bg-color: white;
+
+$white: white;

scss/_media.scss

@@ -0,0 +1,34 @@
+@mixin media($min-max, $reverse: false) {
+  $type: max-width;
+  @if $reverse {
+    $type: min-width;
+    $min-max: $min-max + 1;
+  }
+  @media screen and ($type: $min-max) {
+    @content
+  }
+}
+
+@mixin media-mobile($reverse: false) {
+  @include media(480px, $reverse) {
+    @content
+  }
+}
+
+@mixin media-tablet($reverse: false) {
+  @include media(768px, $reverse) {
+    @content
+  }
+}
+
+@mixin media-small($reverse: false) {
+  @include media(1024px, $reverse) {
+    @content
+  }
+}
+
+@mixin media-large($reverse: false) {
+  @include media(1200px, $reverse) {
+    @content
+  }
+}

scss/default.scss

@@ -1,28 +1,42 @@
+@import "media";
 @import "root";
 @import "all";
 
 a {
   text-decoration: none;
 }
+
 h2 {
   font-size: 1.8em;
   margin-bottom: 10px;
 }
+
 p {
   font-size: 1.1em;
   line-height: 1.4em;
+
   &:not(&:last-of-type) {
     padding-bottom: 10px;
   }
 }
+
 .container {
   max-width: 1200px;
   margin: 0 auto;
-}
-.loading {
-  height: 300px;
 
-  .loading-animation {
+  @include media-large {
+    padding: 0 10px;
+  }
+
+  @include media-small {
+    padding: 0 20px;
+  }
+}
+
+.loading {
+  height: 200px;
+
+  .loading_animation {
     margin: 20px auto;
     width: 50px;
     height: 50px;
@@ -32,8 +46,3 @@ p {
     animation: loading-animation 1s linear infinite;
   }
 }
-@media screen and (max-width: 1200px) {
-  .container {
-    padding: 0 20px;
-  }
-}

src/App.vue

@@ -1,11 +1,18 @@
 <template>
-  <div id="app">
   <SiteHeader />
-    <router-view />
+  <main
-    <Footer />
+    rel="main"
-  </div>
+  >
+    <RouterView />
+  </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);
@@ -14,16 +21,3 @@
   color: var(--text-color);
 }
 </style>
-
-<script>
-import SiteHeader from './components/SiteHeader'
-import Footer from './components/Footer'
-
-export default {
-  name: 'App',
-  components: {
-    SiteHeader,
-    Footer
-  }
-}
-</script>

src/components/BaseButton.vue

@@ -1,56 +0,0 @@
-<template>
-  <button class="btn" :class="{ reverse: isReverse }">
-    <font-awesome-icon class="icon" v-if="hasIcon" :icon="icon"/>
-    <span><slot></slot></span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'BaseButton',
-  props: {
-    hasIcon: Boolean,
-    icon: String,
-    isReverse: Boolean
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-$btn-blue-color: #436DA7;
-$btn-gray-color: #4f4f4f;
-$hover-btn-color: white;
-
-.btn {
-  display: flex;
-  min-width: 270px;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 10px;
-  border: 3px solid $btn-gray-color;
-  background-color: transparent;
-  color: $btn-gray-color;
-  border-radius: 3px;
-  font-size: 1.05em;
-
-  .icon {
-    margin-right: 10px;
-    font-size: 1.3em;
-  }
-
-  &:hover {
-    background-color: $btn-gray-color;
-    color: $hover-btn-color;
-  }
-}
-.reverse {
-  background-color: $btn-blue-color;
-  border-color: $btn-blue-color;
-  color: $hover-btn-color;
-
-  &:hover {
-    background-color: transparent;
-    color: $btn-blue-color;
-  }
-}
-</style>

src/components/Footer.vue

@@ -1,102 +0,0 @@
-<template>
-  <footer class="footer">
-    <div class="footer-container">
-      <div class="logo">Kamil<span class="logo-element">Craft</span></div>
-      <ul class="social-media">
-        <li class="social-link"
-            v-for="link in socialLinks"
-            :key="link.title.slug">
-          <a class="link"
-             :href="link.link"
-             :title="link.title"
-             target="_blank">
-            <font-awesome-icon class="icon" :icon="['fab', link.icon]" />
-            <span class="title">{{ link.title }}</span>
-          </a>
-        </li>
-      </ul>
-    </div>
-    <div class="container"></div>
-  </footer>
-</template>
-
-<style lang="scss" scoped>
-@import "scss/default";
-
-.footer {
-  background-color: #323232;
-  padding: 35px 0;
-
-  &-container {
-    @extend .container;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .logo {
-      padding: 14px 20px 14px 40px;
-      font-family: 'Thasadith', sans-serif;
-      font-size: 2.5em;
-      color: #D4D4D4;
-      background-color: #5B5B5B;
-
-      .logo-element {
-        color: #A2CF00;
-      }
-    }
-
-    .social-media {
-      display: flex;
-      list-style: none;
-
-      .social-link {
-        margin-right: 25px;
-        font-size: 1.1em;
-
-        a {
-          color: #A3A3A3;
-
-          .icon {
-            margin-right: 5px;
-          }
-
-          @media screen and (max-width: 790px) {
-            .title {
-              display: none;
-            }
-          }
-        }
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-
-      @media screen and (max-width: 500px) {
-        padding-right: 15px;
-      }
-    }
-    @media screen and (max-width: 500px) {
-      padding: 0;
-    }
-  }
-
-  @media screen and (max-width: 500px) {
-    padding: 15px 0;
-  }
-}
-</style>
-
-<script>
-export default {
-  name: 'Footer',
-  data () {
-    return {
-      socialLinks: [
-        { link: 'https://www.youtube.com/user/kamilniemczycki', icon: 'youtube', title: 'Oglądaj mnie na YouTube' },
-        { link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku' }
-      ]
-    }
-  }
-}
-</script>

src/components/FooterComponent.vue

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

src/components/GhostButton.vue

@@ -1,60 +0,0 @@
-<template>
-  <button class="btn">
-    <font-awesome-icon class="icon" v-if="hasIcon" :icon="icon"/>
-    <span><slot></slot></span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'GhostButton',
-  props: {
-    hasIcon: {
-      type: Boolean,
-      default: false
-    },
-    icon: String
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-$btn-gray-color: #4f4f4f;
-
-.btn {
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 10px;
-  background-color: transparent;
-  color: $btn-gray-color;
-  font-size: 1.2em;
-  border: unset;
-
-  .icon {
-    margin-right: 10px;
-    font-size: 1.3em;
-  }
-
-  &:hover {
-    &::after {
-      width: 98%;
-    }
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: 0 auto;
-    width: 30%;
-    height: 2px;
-    background-color: $btn-gray-color;
-    transform: translateY(2px);
-    transition: width .3s linear;
-  }
-}
-</style>

src/components/HomePageElement.vue

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

src/components/Navigation.vue

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

src/components/NavigationHeader.vue

@@ -0,0 +1,136 @@
+<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>
+
+<script setup>
+import { defineProps, ref, computed } from 'vue'
+
+defineProps({
+  isHomePage: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const menuItems = [
+  {
+    slug: 'start',
+    title: 'Start',
+    uri: '/'
+  },
+  {
+    slug: 'projects',
+    title: 'Projekty',
+    uri: '/projects'
+  },
+  {
+    slug: 'about',
+    title: 'O mnie',
+    uri: '/about'
+  },
+  {
+    slug: 'contact',
+    title: 'Kontakt',
+    uri: '/contact'
+  }
+]
+
+const clicked = ref(false)
+const isClicked = computed(() => clicked.value)
+
+function changeClickedStatus() {
+  clicked.value = !clicked.value
+}
+
+function clickMenu() {
+  changeClickedStatus()
+}
+
+function linkClicked() {
+  if (isClicked.value) {
+    changeClickedStatus()
+  }
+}
+</script>
+
+<style lang="scss">
+.clicked-menu {
+  animation: bg-menu-animation 500ms forwards ease-in-out;
+}
+
+.clicked-logo {
+  animation: bg-logo-animation 500ms forwards ease-in-out;
+}
+
+@keyframes bg-menu-animation {
+  0% {
+    background-color: transparent;
+  }
+  100% {
+    background-color: #EFEFEF;
+  }
+}
+@keyframes bg-logo-animation {
+  0% {
+    background-color: white;
+  }
+  100% {
+    background-color: #F6F6F6;
+  }
+}
+</style>

src/components/SelectedProjects.vue

@@ -1,153 +1,137 @@
 <template>
-  <div class="projects">
+  <section
-    <slot></slot>
+    id="projects"
-    <div class="container">
+    class="max-w-screen-xl mx-auto px-6 xl:px-2 py-10"
-      <div class="project"
+  >
+    <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">
+        :key="project.title.slug"
-        <img class="project-image" :src="project.image" :alt="project.title" />
+        class="flex flex-col lg:grid grid-project relative bg-neutral-100 border border-gray-200 rounded-md"
-        <div class="project-content">
+      >
-          <h3 class="title">{{ project.title }}</h3>
+        <img
-          <div class="release">{{ project.version }}</div>
+          v-if="project.images.small"
-          <div class="description">
+          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"
-            <p>{{ project.short_description }}</p>
+          :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>
+          <p
+            class="text-sm"
+            v-html="markdownToText(project)"
+          />
         </div>
-        </div>
+        <div
-        <div class="more-button">
+          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"
-          <base-btn has-icon
+        >
+          <BaseButton
+            has-icon
             icon="eye"
             is-reverse
-                    @click.native="$router.push({ name: 'Project', params: { id: project.id } })"
+            class="w-full lg:w-80 rounded-t-none lg:rounded-t-md"
-                    class="btn">O projekcie</base-btn>
+            title="Pokaż więcej"
-        </div>
+            @click="router.push({ name: 'Project', params: { id: project.id } })"
+          >
+            O projekcie
+          </BaseButton>
         </div>
       </div>
     </div>
+  </section>
 </template>
 
-<style lang="scss">
+<script setup>
-.projects {
+import { defineProps, onMounted } from 'vue'
-  padding-top: 45px;
+import { useRoute, useRouter } from 'vue-router'
-  padding-bottom: 45px;
+import { useStore } from 'vuex'
+import BaseButton from '@/components/buttons/BaseButton'
+import { marked } from 'marked'
 
-  .container {
+defineProps({
-    display: grid;
+  projects: {
-    align-items: flex-start;
+    type: Array,
-    grid-template-columns: 1fr 1fr;
+    default: () => []
-    grid-auto-rows: minmax(80px, auto);
+  }
-    column-gap: 25px;
+})
-    row-gap: 20px;
 
-    .project {
+const route = useRoute()
-      display: grid;
+const router = useRouter()
-      position: relative;
+const store = useStore()
-      grid-template-areas: 'image content';
+
-      grid-template-columns: 200px 1fr;
+onMounted(() => {
-      background-color: #fafafa;
+  const header = {
-      border: 1px solid rgba(0, 0, 0, .025);
+    title: route.meta.title,
-      border-radius: 5px;
+    description: [
+      'Witam Państwa na podstronie z moimi projektami!'
+    ]
+  }
+  store.commit('setHeader', header)
+})
+
+function markdownToText (project) {
+  const projectText = marked.parse(project.description)
+  const nodeElement = document.createElement('div')
+  nodeElement.innerHTML = projectText
+  return nodeElement.querySelector('p').innerText.substr(0, 350)
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'scss/media';
+
+.grid-project {
   animation: load-project 2s forwards;
 
+  .project-image, .project-content {
+    object-position: top center;
+  }
+
   .project-image {
     grid-area: image;
-        width: 200px;
-        height: 200px;
-        object-fit: cover;
   }
 
   .project-content {
     grid-area: content;
-        padding: 10px 15px;
-        height: 200px;
-        overflow-y: hidden;
-        position: relative;
-
-        .title {
-          font-size: 1.3em;
-          font-weight: normal;
-          line-height: 1.5em;
-        }
-
-        .release {
-          font-size: .9em;
-          font-weight: bold;
-          padding: 5px 0;
-        }
 
     &::after {
-          content: "";
+      background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 60%, #fafafa);
-          position: absolute;
+    }
-          left: 0;
-          top: 0;
-          width: 100%;
-          height: 100%;
-          background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #fafafa 100%);
   }
 }
 
-      p {
+@screen lg {
-        font-size: .9em;
+  .grid-project {
-      }
+    grid-template-areas: 'image content';
-    }
+    grid-template-columns: 200px 1fr;
-
-    @media screen and (min-width: 900px) {
-      .project {
-        .more-button {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          position: absolute;
-          left: 0;
-          top: 0;
-          width: 100%;
-          height: 100%;
 
+    .project-button {
       .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;
+            background-color: rgba(255, 255, 255, .9);
-              }
-            }
-          }
-        }
-      }
-    }
-
-    @media screen and (max-width: 900px) {
-      .project {
-        display: block;
-
-        .project-image {
-          width: 100%;
-          height: 250px;
-        }
-
-        .project-content {
-          height: auto;
-          max-height: 250px;
-        }
-
-        .more-button {
-          display: block;
-          position: unset;
-          margin-top: 8px;
-          height: auto;
-          left: unset;
-          top: unset;
-          .btn {
-            display: flex;
-            width: 100%;
-            border-radius: 0;
-            border-style: solid;
           }
         }
       }
@@ -165,42 +149,4 @@
     opacity: 1;
   }
 }
-
-@media screen and (max-width: 600px) {
-  .projects .container {
-    grid-template-columns: 1fr;
-    padding: 25px;
-    column-gap: 0;
-    row-gap: 20px;
-  }
-}
 </style>
-
-<script>
-import BaseButton from './BaseButton'
-
-export default {
-  name: 'SelectedProjects',
-  data () {
-    return {}
-  },
-  mounted () {
-    const header = {
-      title: this.$route.meta.title,
-      description: [
-        'Witam Państwa na podstronie z moimi projektami!',
-        'Lista i treść jest niekompletna! (BETA)'
-      ]
-    }
-    this.$store.commit('setHeader', header)
-  },
-  props: {
-    projects: {
-      type: Array
-    }
-  },
-  components: {
-    'base-btn': BaseButton
-  }
-}
-</script>

src/components/SiteHeader.vue

@@ -1,82 +1,54 @@
 <template>
   <header :class="thisClass">
-    <navigation/>
+    <Navigation :is-home-page="isHome" />
-    <div v-if="isTitle" class="header-info" :class="{ 'header-info-home': isHome }">
+    <div
-      <h1>{{ getTitle }}</h1>
+      v-if="isTitle"
-      <p v-if="isDescription && descriptionType === 'string'">{{ getDescription }}</p>
+      class="max-w-screen-header-content mx-auto text-center px-2.5 py-10"
-      <p v-else-if="isDescription && descriptionType === 'array'"
+      :class="{ 'text-white': isHome }"
-         v-for="(desc, key) in getDescription" :key="key">{{ desc }}</p>
+    >
+      <h1 class="mb-6 relative font-light text-[2.5rem] leading-[3.5rem] after:block after:absolute after:w-24 after:h-0.5 after:bg-kamilcraft-green after:left-1/2 after:-ml-12">
+        {{ 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>
     </div>
   </header>
 </template>
 
-<script>
+<script setup>
-import Navigation from '@/components/Navigation'
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+import { useRoute } from 'vue-router'
+import Navigation from '@/components/NavigationHeader'
 
-export default {
+const store = useStore()
-  name: 'SiteHeader',
+const route = useRoute()
-  computed: {
+
-    isHome () {
+const isHome = computed(() => route.path === '/')
-      return this.$route.path === '/'
+const thisClass = computed(() => [isHome.value ? 'home-page' : 'sub-page'])
-    },
+const getTitle = computed(() => store.getters.getHeader.title)
-    thisClass () {
+const isTitle = computed(() => getTitle.value !== null)
-      return [this.isHome ? 'home-page' : 'sub-page']
+const getDescription = computed(() => store.getters.getHeader.description)
-    },
+const isDescription = computed(() => getDescription.value !== null)
-    getTitle () {
+const descriptionType = computed(() => {
-      return this.$store.getters.getHeader.title
+  const isArray = getDescription.value instanceof Array
-    },
+  return isArray ? 'array' : typeof getDescription.value
-    isTitle () {
+})
-      return this.getTitle !== null
-    },
-    getDescription () {
-      return this.$store.getters.getHeader.description
-    },
-    descriptionType () {
-      const isArray = this.getDescription instanceof Array
-      return isArray ? 'array' : typeof this.getDescription
-    },
-    isDescription () {
-      return this.getDescription !== null
-    }
-  },
-  components: {
-    navigation: Navigation
-  }
-}
 </script>
 
-<style lang="scss">
+<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>

src/components/buttons/BaseButton.vue

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

src/components/buttons/GhostButton.vue

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

src/components/sections/About.vue

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

src/components/sections/AboutSection.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="bg-neutral-50">
+    <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
+      <div
+        id="grid-columns"
+        class="flex flex-col md:grid items-center"
+      >
+        <div id="grid-content">
+          <h2 class="text-[2rem]">
+            Kamil Niemczycki
+          </h2>
+          <div class="mb-2 text-[1.5rem]">
+            Web Developer
+          </div>
+          <p>
+            Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
+            W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.
+          </p>
+          <div class="flex flex-col sm:flex-row justify-center md:justify-start py-6 gap-5">
+            <BaseButton
+              has-icon
+              icon="portrait"
+              is-reverse
+              @click="scrollTo('#projects')"
+            >
+              Wybrane projekty
+            </BaseButton>
+            <BaseButton
+              has-icon
+              icon="user"
+              @click="router.push('about')"
+            >
+              Więcej o mnie
+            </BaseButton>
+          </div>
+        </div>
+        <div id="grid-photo">
+          <figure>
+            <img
+              :src="`${publicPath}assets/me.jpg`"
+              class="mx-auto rounded-full object-cover w-[12.5rem] h-[12.5rem]"
+              alt="Moje zdjęcie"
+            >
+          </figure>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import BaseButton from '@/components/buttons/BaseButton'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const publicPath = process.env.VUE_APP_BASE_URL + '/'
+
+function scrollTo(id) {
+  document.querySelector(id).scrollIntoView({
+    behavior: 'smooth'
+  })
+}
+</script>
+
+<style lang="scss">
+#grid-columns {
+  grid-template-columns: 1fr 1fr .8fr;
+  grid-template-areas:
+    'text text photo';
+}
+
+#grid-content {
+  grid-area: text;
+}
+
+#grid-photo {
+  grid-area: photo;
+}
+</style>

src/components/sections/Experiences.vue

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

src/components/sections/ExperiencesSection.vue

@@ -0,0 +1,202 @@
+<template>
+  <div>
+    <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
+      <h2 class="text-[2rem] mb-2">
+        Wykorzystywane technologie
+      </h2>
+      <p class="mb-5">
+        Programowaniem stron internetowych zajmuję się najmłodszych lat, czyli od 2011 roku. Pierwsze projekty były
+        proste i najczęściej na użytek własny. Jednakże, doświadczenie zebrane przez lata pomogło mi wyselekcjonować
+        technologie, które wspomagają pisanie i rozwijanie oprogramowania.
+      </p>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
+        <div
+          v-for="(skill, skillKey) in list"
+          :key="skillKey"
+          class="p-4 bg-neutral-50 rounded-lg"
+        >
+          <header>
+            <div class="flex gap-2 text-3xl mb-2">
+              <font-awesome-icon
+                v-for="(icon, iconKey) in skill.icons"
+                :key="iconKey"
+                :class="icon.class"
+                :icon="['fab', icon.name]"
+                :alt="icon.alt"
+                :title="icon.title"
+              />
+            </div>
+            <h3 class="text-lg font-bold">
+              {{ skill.header }}
+            </h3>
+          </header>
+          <p
+            v-if="skill.showMore.value || skill.description.length < 200"
+            class="text-sm"
+          >
+            {{ skill.description }}
+          </p>
+          <p
+            v-else
+            class="text-sm"
+          >
+            {{ parseText(skill.description) }}...
+            <a
+              class="text-neutral-500 hover:text-neutral-700 hover:underline cursor-pointer"
+              @click="changeMoreStatus(skill)"
+            >Więcej</a>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+let list = [
+  {
+    icons: [
+      {
+        class: 'icon-php',
+        name: 'php',
+        alt: 'Ikona przedstawiająca język PHP',
+        title: 'Ikona PHP'
+      },
+      {
+        class: 'icon-laravel',
+        name: 'laravel',
+        alt: 'Ikona przedstawiająca framework Laravel',
+        title: 'Ikona Laravel'
+      }
+    ],
+    header: 'PHP & Laravel',
+    showMore: ref(false),
+    description: `PHP wraz z frameworkiem Laravel wykorzystuję do tworzenia nowych projektów. Laravel znacznie
+      przyspiesza pisanie części backendowej, odciążając programistę od pisania skomplikownych filtrów i monotonnych
+      walidacji przyjmowanych danych od użytkowników. Jednakże, choć dobrze pracuje mi się w środowisku Laravel
+      w miarę możliwości staram się pisać kod w samym PHP z wykorzystaniem bibliotek i paczek autorskich.`
+  },
+  {
+    icons: [
+      {
+        class: 'icon-js',
+        name: 'js-square',
+        alt: 'Ikona przedstawiająca język JavaScript',
+        title: 'Ikona JavaScript'
+      }
+    ],
+    header: 'JavaScript Vanilla',
+    showMore: ref(false),
+    description: `JavaScript wykorzystuję głównie do logiki frontendowej jak i pisania kodu wykonywalnego po stronie
+      przeglądarki internetowej. Wykorzystując możliwości reaktywnych frameworków mogę przyspieszyć pisanie UI.`
+  },
+  {
+    icons: [
+      {
+        class: 'icon-vue',
+        name: 'vuejs',
+        alt: 'Ikona przedstawiająca framework Vue.js',
+        title: 'Ikona Vue.js'
+      }
+    ],
+    header: 'Vue',
+    showMore: ref(false),
+    description: `Framework ten wspomaga mnie w pisaniu aplikacji frontendowej. Przyspiesza tworzenie warstwy
+      wizualnej, obsługę interakcji z użytkownikiem i bindowanie zdefiniowanych pól, które są odpowiednio renderowane
+      przez przeglądarkę. To wszystko, umożliwia łatwe łączenie CSS i HTML z logiką i otrzymanymi danymi z API.`
+  },
+  {
+    icons: [
+      {
+        class: 'icon-html5',
+        name: 'html5',
+        alt: 'Ikona przedstawiająca HTML5',
+        title: 'Ikona HTML5'
+      },
+      {
+        class: 'icon-css3',
+        name: 'css3-alt',
+        alt: 'Ikona przedstawiająca CSS3',
+        title: 'Ikona CSS3'
+      }
+    ],
+    header: 'HTML & CSS',
+    showMore: ref(false),
+    description: `HTML i CSS to już nieodłączne technologie, które w łatwy sposób umożliwiają nadanie wizualnej
+      spójności dla treści, obrazów lub ułożenia elementów. Nie raz, odpowednie zaprojektowanie interfejsu użytkownika
+      przyspiesza integrację z naszą stroną/sklepem. Ma to przełożenie na zyski dla obu stron - firmy (finanse)
+      i klienta (czas).`
+  },
+  {
+    icons: [
+      {
+        class: 'icon-node',
+        name: 'node',
+        alt: 'Ikona przedstawiająca Node.js',
+        title: 'Ikona Node.js'
+      }
+    ],
+    header: 'Node.js',
+    showMore: ref(false),
+    description: `Node jest wieloplatformowym środowiskiem uruchomieniowym, umożliwiającym uruchomienie kodu
+      JavaScript po stronie backendowej. Jest to bardzo przyjemny język, który ułatwia projektowanie logiki biznesowej
+      aplikacji, dla mniej wymagających serwisów pod względem analizy i przetwarzania danych.`
+  },
+  {
+    icons: [
+      {
+        class: 'icon-sass',
+        name: 'sass',
+        alt: 'Ikona przedstawiająca Sass',
+        title: 'Ikona Sass'
+      }
+    ],
+    header: 'Sass',
+    showMore: ref(false),
+    description: `Sass zwiększa czytelność kodu dla programisty. Zawiera abstrakcje znane z języków obiektowych,
+      przy czym ogranicza powtarzalność i umożliwia optymalizację kodu. Kompilacja napisanego stylu w Sass jest
+      przekształcana do formy czytelnej dla silnika graficznego przeglądarki, co przyspiesza proces generowania strony.`
+  }
+]
+
+function parseText(text) {
+  let shortText = text.substr(0, 200)
+  if (shortText.slice(-1) === ' ') {
+    shortText = text.substr(0, 199)
+  }
+  return shortText
+}
+
+function changeMoreStatus(skill) {
+  skill.showMore.value = !skill.showMore.value
+}
+</script>
+
+<style scoped>
+.icon-js {
+  color: #F1DE4F;
+}
+.icon-php {
+  color: #777bb3;
+}
+.icon-laravel {
+  color: #FF2D20;
+}
+.icon-vue {
+  color: #64B687;
+}
+.icon-html5 {
+  color: #DE6E3C;
+}
+.icon-node {
+  color: #64B687;
+}
+.icon-css3 {
+  color: #53A7DC;
+}
+.icon-sass {
+  color: #BF6B97;
+}
+</style>

src/components/sections/FavoriteProjects.vue

@@ -1,48 +1,47 @@
 <template>
-  <section class="selected-projects">
+  <section class="bg-neutral-50">
     <projects :projects="select_projects">
-      <div class="header-container">
+      <header>
-        <h2>Wybrane projekty</h2>
+        <h2 class="text-[2rem] mb-2">
-        <p>Poniżej przedstawiam Państwu, wybraną przeze mnie, listę projektów.</p>
+          Wybrane projekty
-      </div>
+        </h2>
+        <p class="mb-5">
+          Poniżej przedstawiam Państwu, wybraną przeze mnie, listę projektów.
+        </p>
+      </header>
     </projects>
-    <div class="more-button">
+    <div class="w-full -translate-y-5 pb-5 more-button">
-      <GhostButton @click.native="$router.push('projects')">
+      <GhostButton
-        RESZTA PROJEKTÓW
+        class="mx-auto"
+        @click="router.push('projects')"
+      >
+        ZOBACZ WIĘCEJ
       </GhostButton>
     </div>
   </section>
 </template>
 
-<script>
+<script setup>
-import Projects from '../SelectedProjects'
+import { ref, onMounted } from 'vue'
-import GhostButton from '../GhostButton'
+import { useRouter } from 'vue-router'
+import Projects from '@/components/SelectedProjects'
+import GhostButton from '@/components/buttons/GhostButton'
 
-export default {
+const router = useRouter()
-  name: 'FavoriteProjects',
+
-  data () {
+let select_projects = ref([])
-    return {
+
-      publicPath: process.env.BASE_URL,
+onMounted(() => {
-      select_projects: []
+  loadProjectList()
-    }
+})
-  },
+
-  mounted () {
+function loadProjectList() {
-    this.loadProjectList()
+  fetch(process.env.VUE_APP_API_URL + '/projects?category=selected')
-  },
-  methods: {
-    loadProjectList () {
-      fetch('https://api.kamilcraft.com/projects/category/selected')
     .then(response => response.json())
     .then(data => {
-          this.select_projects = data
+      select_projects.value = data
     })
 }
-  },
-  components: {
-    GhostButton,
-    Projects
-  }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -57,12 +56,12 @@ export default {
     .btn {
       margin: 0 auto;
 
-      @media screen and (max-width: 600px) {
+      @include media-tablet {
         width: 100%;
       }
     }
 
-    @media screen and (max-width: 600px) {
+    @include media-tablet {
       padding: 0 25px;
     }
   }

src/components/sections/contacts/MailContact.vue

@@ -1,20 +1,114 @@
 <template>
-  <div class="contact-container" style="flex-basis: 500px;">
+  <div
-    <div class="message-status"></div>
+    id="contact-form"
-    <header class="head">Formularz kontaktowy:</header>
+    class="contact_container w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[500px] p-2 shadow"
-    <form id="form-point" @submit="formSubmit">
+  >
-      <input v-model="emailValue" class="contact-input" type="text" name="email" placeholder="Twój adres e-mail." />
+    <header class="mb-1.5">
-      <textarea v-model="messageValue" class="contact-input" name="message" placeholder="Twoja wiadomość."></textarea>
+      <h3 class="text-xl">
-      <input v-model="senderValue" class="contact-input" type="text" name="sender" placeholder="Twój podpis." />
+        Formularz kontaktowy
-      <input :disabled="buttonDisabled" class="contact-input" type="submit" value="Wyślij"/>
+      </h3>
+    </header>
+    <form
+      class="flex flex-col gap-3 justify-start items-start"
+      @submit="formSubmit"
+    >
+      <div
+        v-if="hasMessageError"
+        class="w-full p-2 bg-red-200 text-red-500 text-sm border border-red-300 rounded-md"
+      >
+        {{ messageError }}
+      </div>
+      <div
+        v-else-if="hasMessageOkStatus"
+        class="w-full p-2 bg-[#27ae60] text-white text-sm border border-lime-600 rounded-md shadow"
+      >
+        {{ messageOk }}
+      </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="messageValue"
+          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="[ isMessageError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
+          name="message"
+          placeholder="Chciałbym zlecić wykonanie strony..."
+        />
+        <span
+          v-if="isMessageError"
+          class="text-red-400"
+        >
+          Wiadomość musi zawierać przynajmniej 3 znaki!
+        </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="emailValue"
+          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="[ isEmailError ? '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="isEmailError"
+          class="text-red-400"
+        >
+          E-mail musi być poprawny, np. przemek.kowalski@gmail.com
+        </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="senderValue"
+          class="w-full px-2.5 py-2 border-b-2 border-neutral-300 rounded-md focus:border-neutral-400 hover:border-neutral-500 outline-none"
+          :class="[ isSenderError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
+          type="text"
+          name="sender"
+        >
+        <span
+          v-if="isSenderError"
+          class="text-red-400"
+        >
+          Podpis musi zawierać przynajmniej 3 znaki!
+        </span>
+      </div>
+      <BaseButton
+        is-reverse
+        class="py-1 w-full"
+        :disabled="isButtonDisabled"
+      >
+        Wyślij
+      </BaseButton>
     </form>
   </div>
 </template>
 
-<script>
+<script setup>
+import BaseButton from '@/components/buttons/BaseButton'
+import { ref, reactive, watch, computed } from 'vue'
+
 function emailValidate (mailObj) {
   const mailFormat = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/
-  return !!mailObj.value.match(mailFormat)
+  return mailObj.match(mailFormat)
 }
 
 async function postData (url = '', data = {}) {
@@ -29,191 +123,105 @@ async function postData (url = '', data = {}) {
   return response.json()
 }
 
-export default {
+const buttonDisabled = ref(false)
-  name: 'MailContact',
+const statusError = ref(0)
-  data () {
+const emailValue = ref('')
-    return {
+const messageValue = ref('')
-      buttonDisabled: false,
+const senderValue = ref('')
-      statusError: 0,
+
-      email: {},
+const messageError = ref('')
-      emailValue: '',
+const messageOk = ref('')
-      message: {},
+
-      messageValue: '',
+const errors = reactive({
-      sender: {},
+  email: false,
-      senderValue: ''
+  message: false,
+  sender: false
+})
+
+const isButtonDisabled = computed(() => buttonDisabled.value || errors.email || errors.message || errors.sender)
+const isEmailError = computed(() => errors.email)
+const isMessageError = computed(() => errors.message)
+const isSenderError = computed(() => errors.sender)
+const hasMessageError = computed(() => messageError.value)
+const hasMessageOkStatus = computed(() => messageOk.value && !hasMessageError.value)
+
+watch([statusError, emailValue], ([errorCount, value]) => {
+  errors.email = errorCount > 0 && !emailValidate(value)
+})
+
+watch([statusError, messageValue], ([errorCount, value]) => {
+  errors.message = errorCount > 0 && (value === '' || value.length < 3)
+})
+
+watch([statusError, senderValue], ([errorCount, value]) => {
+  errors.sender = errorCount > 0 && (value === '' || value.length < 3)
+})
+
+function clearErrors() {
+  statusError.value = 0
+  errors.email = false
+  errors.message = false
+  errors.sender = false
 }
-  },
+
-  watch: {
+function checkForm() {
-    emailValue (value) {
+  clearErrors()
-      if (this.statusError > 0 && emailValidate(this.email)) {
+  if (!emailValidate(emailValue.value)) {
-        this.email.classList.remove('error')
+    errors.email = true
+    statusError.value++
   }
-    },
+  if (messageValue.value === '') {
-    messageValue (value) {
+    errors.message = true
-      if (this.statusError > 0 && value !== '') {
+    statusError.value++
-        this.message.classList.remove('error')
   }
-    },
+  if (senderValue.value === '') {
-    senderValue (value) {
+    errors.sender = true
-      if (this.statusError > 0 && value !== '') {
+    statusError.value++
-        this.sender.classList.remove('error')
   }
 }
-  },
+
-  methods: {
+function formSubmit(event) {
-    clearErrors () {
-      this.statusError = 0
-      this.email.classList.remove('error')
-      this.message.classList.remove('error')
-      this.sender.classList.remove('error')
-    },
-    checkForm () {
-      if (!emailValidate(this.email)) {
-        this.email.classList.add('error')
-        this.statusError++
-      }
-      if (this.message.value === '') {
-        this.message.classList.add('error')
-        this.statusError++
-      }
-      if (this.sender.value === '') {
-        this.sender.classList.add('error')
-        this.statusError++
-      }
-    },
-    formSubmit (event) {
   event.preventDefault()
 
-      this.email = event.target[0]
+  checkForm()
-      this.message = event.target[1]
-      this.sender = event.target[2]
 
-      this.clearErrors()
+  if (statusError.value === 0) {
-      this.checkForm()
+    console.log('Send!')
-
+    buttonDisabled.value = true
-      const messageElement = document.querySelector('.message-status')
+    postData('https://kamilcraft.com/send', {
-      messageElement.classList.remove('message-status__ok', 'message-status__error')
+      email: emailValue.value,
-
+      message: messageValue.value,
-      if (this.statusError === 0) {
+      sender: senderValue.value
-        this.buttonDisabled = true
-        postData('/send', {
-          email: this.emailValue,
-          message: this.messageValue,
-          sender: this.senderValue
     }).then(result => {
-          messageElement.classList.add(
+      if (result.error) {
-            result.error ? 'message-status__error' : 'message-status__ok'
+        messageError.value = result.message
-          )
+      } else {
-
+        messageOk.value = result.message
-          messageElement.textContent = result.message
+        messageValue.value = ''
-          if (!result.error) {
+        emailValue.value = ''
-            this.messageValue = ''
+        senderValue.value = ''
-            this.emailValue = ''
-            this.senderValue = ''
       }
-          this.buttonDisabled = false
+      buttonDisabled.value = false
     }).catch(() => {
-          messageElement.classList.add('message-status__error')
+      messageError.value = 'Wystąpił błąd podczas wysyłania wiadomości. Proszę spróbować później.'
-          messageElement.textContent = 'Wystąpił błąd podczas wysyłania wiadomości. Proszę spróbować później.'
+      buttonDisabled.value = false
-          this.buttonDisabled = false
     })
   }
+
+  scrollTo('#contact-form')
 }
-  }
+
+function scrollTo(id) {
+  document.querySelector(id).scrollIntoView({
+    behavior: 'smooth'
+  })
 }
 </script>
 
 <style lang="scss" scoped>
-.contact-container {
+@screen md {
-  margin: 10px;
+  .contact_container {
-  max-width: 500px;
+    flex-basis: 500px;
-  background-color: #eaeaea;
-  border: 2px solid #dadada;
-  border-radius: 2px;
-  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
-
-  header.head {
-    padding: 10px;
-    line-height: 1.6em;
-    font-size: 1.3em;
-    font-weight: bold;
-  }
-
-  form#form-point {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-}
-.contact-container input, .contact-container textarea {
-  width: 97%;
-  border: 0;
-  border-bottom: 2px solid #c9c9c9;
-  padding: 10px 10px 8px;
-  font-size: 1em;
-  font-family: var(--font-family);
-  line-height: 1.3em;
-  margin-bottom: 10px;
-  border-radius: 5px;
-}
-input.contact-input:focus, textarea.contact-input:focus {
-  outline: none;
-  border-color: black;
-}
-textarea.contact-input {
-  max-width: 97%;
-  min-width: 97%;
-  min-height: 150px;
-}
-input.error, textarea.error {
-  background-color: #ffc3b0;
-  border-color: #ff865f;
-  color: #c90000;
-}
-input.error::placeholder, textarea.error::placeholder {
-  color: #c9000094;
-}
-input[type="submit"].contact-input {
-  appearance: unset;
-  color: white;
-  background-color: #4CAF50;
-  border-bottom: 2px solid #387d3b;
-}
-input[type="submit"].contact-input:hover {
-  box-shadow: 0 0 8px rgba(0,0,0,.4);
-}
-input[disabled].contact-input {
-  background-color: #cdcdcd;
-  border-color: gray;
-  color: black;
-}
-.message-status {
-  display: none;
-  margin: 5px;
-  padding: 8px;
-  border-radius: 5px;
-}
-.message-status__ok, .message-status__error {
-  display: block;
-}
-.message-status__ok {
-  background-color: #4CAF50;
-  border: 1px solid #387d3b;
-  color: white;
-}
-.message-status__error {
-  background-color: #ffc3b0;
-  border: 1px solid #ff865f;
-  color: #c90000;
-}
-@media screen and (max-width: 800px) {
-  .contact-elements {
-    display: block;
-    width: auto;
-  }
-  #instagram, #facebook, #twitter, #email, #gg {
-    font-size: 1em;
-    line-height: 1.2em;
   }
 }
 </style>

src/components/sections/contacts/OtherContact.vue

@@ -1,93 +1,113 @@
 <template>
-  <div class="contact-container" style="flex-basis: 410px">
+  <div class="contact_info w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[410px] p-2 shadow">
-    <header class="head">Inne formy kontaktu:</header>
+    <header class="mb-1.5">
-    <div class="contact-element">
+      <h3 class="text-xl">
-      <img class="contact-element-icon" src="/assets/img/instagram.jpg" />
+        Inne formy kontaktu:
-      <span id="instagram"><a href="https://www.instagram.com/nikcamii/" target="_blank">Instagram: @NiKCamii</a></span>
+      </h3>
+    </header>
+    <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="contact-element">
+      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
-      <img class="contact-element-icon" src="/assets/img/facebook.jpg" />
+        <img
-      <span id="facebook"><a href="https://www.facebook.com/nikcamii/" target="_blank">Facebook: @NiKCamii</a></span>
+          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="contact-element">
+      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
-      <img class="contact-element-icon" src="/assets/img/twitter.jpg" />
+        <img
-      <span id="twitter"><a href="https://twitter.com/nikcamii" target="_blank">Twitter: @NiKCamii</a></span>
+          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="contact-element">
+      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
-      <img class="contact-element-icon" src="/assets/img/gg.png" />
+        <img
-      <span id="gg">GG: 38429969</span>
+          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 class="contact-element">
-      <img class="contact-element-icon" src="/assets/img/user.jpg" />
-      <span id="email"><a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a></span>
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'OtherContact'
-}
-</script>
-
 <style lang="scss" scoped>
-.contact-container {
+@import "scss/media";
-  margin: 10px;
-  max-width: 500px;
-  background-color: #eaeaea;
-  border: 2px solid #dadada;
-  border-radius: 2px;
-  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
 
-  header.head {
+@screen md {
-    padding: 10px;
+  .contact_info {
-    line-height: 1.6em;
+    flex-basis: 410px;
-    font-size: 1.3em;
-    font-weight: bold;
-  }
-
-  form#form-point {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
   }
 }
-.contact-element {
-  display: flex;
-  align-items: center;
-  padding: 5px;
-  background-color: #fff;
-  border-top: 1px solid #e6e6e6;
-  border-bottom: 1px solid #e6e6e6;
-  margin-bottom: 5px;
 
 a {
   color: inherit;
-    text-decoration: none;
 
   &:hover {
-      -webkit-text-fill-color: #444444;
+    -webkit-text-fill-color: #374151;
-      color: #444444;
+    color: #374151;
-      text-decoration: underline;
   }
 }
-}
-
-.contact-element-icon {
-  border-radius: 50%;
-  border: 1px solid #e2e2e2;
-  width: 50px;
-  height: 50px;
-  margin-right: 10px;
-  object-fit: contain;
-}
-
-#instagram, #facebook, #twitter, #email, #gg {
-  padding-top: 2px;
-  line-height: 1.6em;
-  font-size: 1.1em;
-  font-weight: bold;
-}
 
 #instagram {
   background: linear-gradient(120deg, #e99311, #8738b8);
@@ -103,7 +123,7 @@ export default {
   color: #5eaade;
 }
 
-#email {
+#mailto {
   color: #696969;
 }
 

src/main.js

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

src/router/index.js

@@ -1,14 +1,10 @@
-import Vue from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
-import VueRouter from 'vue-router'
+import Home from '@/views/HomeView'
-import Home from '../views/Home'
+import About from '@/views/AboutView'
-import About from '../views/About'
+import Projects from '@/views/ProjectsView'
-import Projects from '../views/Projects'
+import Project from '@/views/ProjectView'
-import Project from '../views/Project'
+import Contact from '@/views/ContactView'
-import Contact from '../views/Contact'
+import NotFound from '@/views/NotFound'
-import KamilCraftInfo from '../views/KamilCraftInfo'
-import NotFound from '../views/NotFound'
-
-Vue.use(VueRouter)
 
 const mainTitle = 'kamilcraft.com'
 
@@ -54,34 +50,31 @@ const routes = [
     component: Contact
   },
   {
-    path: '/info',
+    path: '/:catchAll(.*)',
-    name: 'KamilCraftProject',
-    meta: {
-      title: 'KamilCraft Project'
-    },
-    component: KamilCraftInfo
-  },
-  {
-    path: '*',
     name: '404',
+    meta: {
+      title: 'Błąd 404'
+    },
     component: NotFound
   }
 ]
 
-const router = new VueRouter({
+const router = createRouter({
-  mode: 'history',
+  history: createWebHistory('/'),
-  base: process.env.BASE_URL ?? '/',
   routes,
   scrollBehavior(to, from, savedPosition) {
     if (savedPosition) {
       return savedPosition
     } else if (to.hash) {
-      return {
+      return new Promise(resolve => {
-        selector: to.hash,
+        setTimeout(() => {
-        behavior: 'smooth'
+          resolve({
-      }
+            selector: to.hash
+          }, 1000)
+        })
+      })
     } else {
-      return { x: 0, y: 0 }
+      return { left: 0, top: 0 }
     }
   }
 })

src/store/index.js

@@ -1,9 +1,6 @@
-import Vue from 'vue'
+import { createStore } from 'vuex'
-import Vuex from 'vuex'
 
-Vue.use(Vuex)
+export const store = createStore({
-
-const moduleSettings = {
   state: {
     header: {
       title: null,
@@ -25,7 +22,7 @@ const moduleSettings = {
   },
   actions: {
     fetchProjects (store) {
-      return fetch('https://api.kamilcraft.com/projects')
+      return fetch(process.env.VUE_APP_API_URL + '/projects')
         .then(response => response.json())
         .then(data => {
           store.commit('setProjects', data)
@@ -33,7 +30,7 @@ const moduleSettings = {
         })
     },
     fetchCategories (store) {
-      return fetch('https://api.kamilcraft.com/categories')
+      return fetch(process.env.VUE_APP_API_URL + '/categories')
         .then(response => response.json())
         .then(data => {
           store.commit('setCategories', data)
@@ -64,10 +61,4 @@ const moduleSettings = {
       state.header.description = null
     }
   }
-}
-
-export default new Vuex.Store({
-  modules: {
-    settings: moduleSettings
-  }
 })

src/views/About.vue

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

src/views/AboutView.vue

@@ -0,0 +1,68 @@
+<template>
+  <section class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
+    <p class="font-bold">
+      Nazywam się Kamil Niemczycki. Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
+      W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.
+    </p>
+    <h2 class="text-[2rem]">
+      Studia
+    </h2>
+    <p>
+      Jestem absolwentem Państwowej Wyższej Szkoły Zawodowej im. Witelona w Legnicy. Studiowałem na kierunku <em>Informatyka</em> o specjalności <em>Programowanie Aplikacji Mobilnych i Internetowych.</em>
+    </p>
+    <p>
+      Podczas studiów zdobyłem niezbędną wiedzę z zakresu projektowania, wdrażania i rozwoju aplikacji internetowych, mobilnych i desktopowych.
+      Zdobyłem także umiejętności pracy w zespole, które owocują tworzeniem merytorycznej dyskusji na temat części lub całości projektu.
+    </p>
+    <h3 class="text-[1.5rem]">
+      Kursy
+    </h3>
+    <p>
+      W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
+      <a
+        :href="publicPath + '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>

src/views/Contact.vue

@@ -1,63 +0,0 @@
-<template>
-  <section class="contact">
-    <div class="container">
-      <MailContact />
-      <OtherContact />
-    </div>
-  </section>
-</template>
-
-<script>
-import MailContact from '../components/sections/contacts/MailContact'
-import OtherContact from '../components/sections/contacts/OtherContact'
-
-export default {
-  name: 'Contact',
-  mounted () {
-    const header = {
-      title: this.$route.meta.title,
-      description: 'Chcesz o coś zapytać? Chciałbyś współpracować? Napisz!'
-    }
-    this.$store.commit('setHeader', header)
-  },
-  components: {
-    MailContact,
-    OtherContact
-  }
-}
-</script>
-
-<style lang="scss">
-  .contact {
-    padding: 25px 0;
-
-    .container {
-      display: flex;
-      align-items: flex-start;
-      justify-content: center;
-    }
-
-    @media screen and (max-width: 940px) {
-      .container {
-        display: block;
-        margin: 0 auto;
-
-        .contact-container {
-          margin: 0 auto 25px;
-          &:last-child {
-            margin-bottom: 0;
-          }
-        }
-      }
-    }
-    @media screen and (max-width: 640px) {
-      .container {
-        padding: 0 10px;
-
-        .contact-container {
-          max-width: unset;
-        }
-      }
-    }
-  }
-</style>

src/views/ContactView.vue

@@ -0,0 +1,25 @@
+<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>
+
+<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)
+})
+</script>

src/views/Home.vue

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

src/views/HomeView.vue

@@ -0,0 +1,35 @@
+<template>
+  <section class="home">
+    <About />
+    <ExperiencesSection />
+    <FavoriteProjects />
+  </section>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+import { useStore } from 'vuex'
+import { useRoute } from 'vue-router'
+import About from '@/components/sections/AboutSection'
+import ExperiencesSection from '@/components/sections/ExperiencesSection'
+import FavoriteProjects from '@/components/sections/FavoriteProjects'
+
+const store = useStore()
+const route = useRoute()
+
+onMounted(() => {
+  const header = {
+    title: route.meta.title,
+    description: [
+      'Chciałbym Państwa powitać na mojej stronie!',
+      'Przedstawiam tutaj część swojego życia związaną z programowaniem i projektowaniem aplikacji internetowych.'
+    ]
+  }
+  store.commit('setHeader', header)
+})
+
+onUnmounted(() => {
+  store.commit('resetHeaderTitle')
+  store.commit('resetHeaderDescription')
+})
+</script>

src/views/KamilCraftInfo.vue

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

src/views/NotFound.vue

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

src/views/Project.vue

@@ -1,163 +0,0 @@
-<template>
-  <section class="project" v-if="project">
-    <header class="project-header">
-      <h1>{{ project.title }}</h1>
-      <ul class="project-info">
-        <li class="info-text">
-          <font-awesome-icon class="icon" :icon="['far', 'clock']"/>
-          <span>{{ project.release_data }}</span>
-        </li>
-        <li class="info-text">
-          <font-awesome-icon class="icon" :icon="['far', 'user']"/>
-          <span>{{ project.author }}</span>
-        </li>
-        <li class="info-text">
-          <font-awesome-icon class="icon" :icon="['far', 'folder']"/>
-          <span>{{ getCategoryName(project.categories)[0] }}</span>
-        </li>
-        <li class="info-text">
-          <font-awesome-icon class="icon" :icon="['fas', 'code-branch']"/>
-          <span>{{ project.version }}</span>
-        </li>
-      </ul>
-    </header>
-    <div class="container">
-      <component :is="`figure`" class="project-photo">
-        <img :src="`${publicPath}${project.image}`" :alt="project.title">
-      </component>
-      <div class="content">
-        <p v-for="(description, key) in project.description.split('\n')" :key="key">
-          {{ description }}
-        </p>
-      </div>
-    </div>
-  </section>
-  <div v-else class="loading">
-    <div class="loading-animation"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Project',
-  data () {
-    return {
-      publicPath: process.env.BASE_URL,
-      project: null
-    }
-  },
-  mounted () {
-    if (this.getCategories.length === 0) {
-      this.$store.dispatch('fetchCategories')
-    }
-    this.loadProject(this.$route.params.id)
-  },
-  computed: {
-    getCategories () {
-      return this.$store.getters.getCategories
-    }
-  },
-  methods: {
-    getCategoryName (categories) {
-      const categoriesText = []
-      categories.forEach(categoryElement => {
-        const cat = this.getCategories.find(category => category.slug === categoryElement)
-        if (cat) {
-          categoriesText.push(cat.name)
-        }
-      })
-      return categoriesText
-    },
-    loadProject (id) {
-      fetch('https://api.kamilcraft.com/projects/' + id)
-        .then(response => response.json())
-        .then(data => {
-          this.project = data
-        })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "scss/default";
-
-.project {
-  .project-header {
-    @extend .container;
-    text-align: center;
-    margin-bottom: 25px;
-
-    h1 {
-      font-size: 2.2em;
-      font-weight: lighter;
-      line-height: 2.4em;
-    }
-
-    .project-info {
-      display: flex;
-      list-style: none;
-      justify-content: center;
-
-      .info-text {
-        display: flex;
-        align-items: center;
-
-        .icon {
-          width: 2em;
-        }
-
-        span {
-          font-weight: lighter;
-        }
-
-        &:not(&:last-child) {
-          margin-right: 15px;
-        }
-      }
-      @media screen and (max-width: 560px) {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        row-gap: 15px;
-
-        .info-text {
-          &:not(&:last-child) {
-            margin-right: 0;
-          }
-        }
-      }
-    }
-  }
-
-  .container {
-    .project-photo {
-      box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
-    }
-
-    .project-photo, .project-photo img {
-      width: 100%;
-    }
-
-    .project-photo img {
-      display: block;
-      object-fit: cover;
-      max-height: 500px;
-    }
-
-    .content {
-      margin: 35px 0;
-
-      p {
-        text-align: justify;
-        text-indent: 1.5em;
-        line-height: 1.8em;
-
-        @media screen and (max-width: 600px) {
-          font-size: 1em;
-          line-height: 1.5em;
-        }
-      }
-    }
-  }
-}
-</style>

src/views/ProjectView.vue

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

src/views/Projects.vue

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

src/views/ProjectsView.vue

@@ -0,0 +1,110 @@
+<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>
+
+<script setup>
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
+import { useStore } from 'vuex'
+import SelectedProjects from '@/components/SelectedProjects'
+
+const store = useStore()
+
+const activeCategory = ref('all')
+const projects = reactive([])
+
+const getCategories = computed(() => store.getters.getCategories)
+
+onMounted(() => {
+  loadAllData()
+})
+
+onUnmounted(() => {
+  store.commit('resetHeaderTitle')
+  store.commit('resetHeaderDescription')
+})
+
+function loadAllData () {
+  store.dispatch('fetchCategories')
+  store.dispatch('fetchProjects').then(loadedProjects => {
+    loadedProjects.forEach(project => {
+      projects.push(project)
+    })
+  })
+}
+
+function loadListWhereCategory(category) {
+  projects.splice(0)
+  setTimeout(() => {
+    if (category !== 'all') {
+      const storedProjects = store.getters.getProjects.filter(project => project.categories.includes(category))
+      storedProjects.forEach(project => {
+        projects.push(project)
+      })
+    } else {
+      store.getters.getProjects.forEach(project => {
+        projects.push(project)
+      })
+    }
+  }, 500)
+}
+
+function changeCategory(category) {
+  activeCategory.value = category
+  loadListWhereCategory(category)
+}
+
+function selectedCategory(categorySlug) {
+  return activeCategory.value === categorySlug
+}
+</script>
+
+<style lang="scss">
+@import "scss/media";
+
+.category-active::after {
+  @apply absolute mx-auto left-0 right-0 bottom-0 h-0.5;
+  background-color: #A2CF00;
+  animation: load-underline 300ms forwards;
+}
+
+@keyframes loading-animation {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes load-underline {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+</style>

src/vue-meta/index.js

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

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: [],
+}

vue.config.js

@@ -1,5 +1,14 @@
-module.exports = {
+const path = require("path")
-  publicPath: process.env.NODE_ENV === 'production'
+const { defineConfig } = require('@vue/cli-service')
-    ? '/beta/'
+
-    : '/'
+module.exports = defineConfig({
+  publicPath: '/',
+  transpileDependencies: true,
+  configureWebpack: {
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src/'),
       }
+    }
+  },
+})