updated contact

css/index.css

@@ -1,9 +0,0 @@
-@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.1.0",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -8,31 +8,28 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-brands-svg-icons": "^6.2.0",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
-    "@fortawesome/free-regular-svg-icons": "^6.2.0",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/vue-fontawesome": "^3.0.1",
-    "core-js": "^3.25.0",
+    "core-js": "^3.8.3",
-    "marked": "^4.1.0",
+    "marked": "^4.0.18",
-    "vue": "^3.2.38",
+    "vue": "^3.2.37",
     "vue-meta": "^2.4.0",
-    "vue-router": "^4.1.5",
+    "vue-router": "^4.1.2",
     "vuex": "^4.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.13",
+    "@babel/core": "^7.12.16",
-    "@babel/eslint-parser": "^7.18.9",
+    "@babel/eslint-parser": "^7.12.16",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
-    "autoprefixer": "^10.4.7",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.7.1",
+    "eslint-plugin-vue": "^8.0.3",
-    "postcss": "^8.4.14",
     "sass": "^1.53.0",
-    "sass-loader": "^13.0.2",
+    "sass-loader": "^13.0.2"
-    "tailwindcss": "^3.1.6"
   },
   "eslintConfig": {
     "root": true,

postcss.config.js

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

scss/_btn.scss

@@ -20,7 +20,8 @@ $btn-colors: (
   min-width: 270px;
   padding: 8px 10px;
 
-  @apply border-4 rounded-md;
+  border-radius: 3px;
+  border-width: 3px;
   border-style: solid;
   border-color: $default-color;
 

src/App.vue

@@ -1,16 +1,16 @@
 <template>
-  <SiteHeader />
   <main
     rel="main"
   >
+    <SiteHeader />
     <RouterView />
-  </main>
     <FooterComponent />
+  </main>
 </template>
 
 <script setup>
-import SiteHeader from '@/components/SiteHeader'
+import SiteHeader from './components/SiteHeader'
-import FooterComponent from '@/components/FooterComponent'
+import FooterComponent from './components/FooterComponent'
 </script>
 
 <style lang="scss">

src/components/FooterComponent.vue

@@ -1,53 +1,122 @@
 <template>
-  <footer class="bg-neutral-800 py-8">
+  <footer class="footer">
-    <div class="flex items-center justify-between max-w-screen-xl mx-auto">
+    <div class="footer_container">
-      <div class="bg-neutral-600 text-white pl-10 pr-5 py-2.5 text-logo-size leading-normal font-thasadith">
+      <div class="container_logo">
-        Kamil<span class="text-kamilcraft-green">Craft</span>
+        Kamil<span class="logo_element">Craft</span>
       </div>
-      <ul class="flex gap-5 pr-3 text-lg">
+      <ul class="socials">
         <li
           v-for="link in socialLinks"
           :key="link.title.slug"
+          class="social_link"
         >
           <a
-            class="text-neutral-400 hover:text-neutral-500"
+            class="link"
             :href="link.link"
             :title="link.title"
             target="_blank"
             rel="noopener nofollow noreferrer"
           >
-            <FontAwesomeIcon
+            <font-awesome-icon
-              class="mr-1"
+              class="icon"
               :icon="['fab', link.icon]"
             />
-            <span class="hidden lg:inline-block">{{ link.title }}</span>
+            <span class="social_title">{{ link.title }}</span>
-            <span class="hidden sm:inline-block lg:hidden">{{ link.shortcut }}</span>
+            <span class="social_shortcut">{{ link.shortcut }}</span>
           </a>
         </li>
       </ul>
     </div>
+    <div class="container" />
   </footer>
 </template>
 
 <script setup>
 const socialLinks = [
-  {
+  { link: 'https://www.youtube.com/user/kamilniemczycki', icon: 'youtube', title: 'Oglądaj mnie na YouTube', shortcut: 'YouTube' },
-    link: 'https://www.youtube.com/user/kamilniemczycki',
+  { link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku', shortcut: 'Facebook' }
-    icon: 'youtube',
-    title: 'Oglądaj mnie na YouTube',
-    shortcut: 'YouTube'
-  },
-  {
-    link: 'https://www.facebook.com/nikcamii',
-    icon: 'facebook',
-    title: 'Znajdź mnie na Facebooku',
-    shortcut: 'Facebook'
-  },
-  {
-    link: 'https://github.com/kamilniemczycki/kamilcraft.com',
-    icon: 'github',
-    title: 'Kod na GitHub',
-    shortcut: 'GitHub'
-  }
 ]
 </script>
+
+<style lang="scss" scoped>
+@import "scss/default";
+
+.footer {
+  background-color: #323232;
+  padding: 35px 0;
+
+  &_container {
+    @extend .container;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .container_logo {
+      padding: 14px 20px 14px 40px;
+      font-family: 'Thasadith', sans-serif;
+      font-size: 2.5em;
+      color: #D4D4D4;
+      background-color: #5B5B5B;
+
+      .logo_element {
+        color: #A2CF00;
+      }
+    }
+
+    .socials {
+      display: flex;
+      list-style: none;
+
+      .social_link {
+        margin-right: 25px;
+        padding-right: 15px;
+        font-size: 1.1em;
+
+        a {
+          color: #A3A3A3;
+
+          .icon {
+            margin-right: 5px;
+          }
+
+          .social_shortcut {
+            display: none;
+          }
+
+          @include media-tablet {
+            .social_title {
+              display: none;
+            }
+
+            .social_shortcut {
+              display: inline-block;
+            }
+          }
+
+          @include media-mobile {
+            .social_shortcut {
+              display: none;
+            }
+          }
+        }
+
+        @include media-mobile {
+          padding-right: 0;
+        }
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+
+    @include media-tablet {
+      padding: 0;
+    }
+  }
+
+  @include media-mobile {
+    padding: 15px 0;
+  }
+}
+</style>

src/components/HomePageElement.vue

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

src/components/NavigationHeader.vue

@@ -1,22 +1,19 @@
 <template>
   <div
-    class="flex relative items-center justify-between md:justify-start max-w-screen-xl mx-auto gap-5"
+    class="container"
-    :class="{ 'clicked-menu': isClicked }"
+    :class="{ 'container-menu-active': isClicked }"
   >
-    <RouterLink to="/">
+    <router-link to="/">
       <div
-        class="bg-white text-gray-800 pl-10 pr-5 py-2.5 text-logo-size leading-normal font-thasadith"
+        class="logo"
-        :class="{ 'clicked-logo': isClicked }"
         @click="linkClicked"
       >
-        Kamil<span class="text-kamilcraft-green">Craft</span>
+        Kamil<span class="logo-element">Craft</span>
       </div>
-    </RouterLink>
+    </router-link>
-    <nav>
+    <nav class="nav">
       <button
-        class="md:hidden text-3xl mx-5"
+        class="nav-btn"
-        :class="[ (isHomePage && !isClicked) ? 'text-white' : 'text-gray-600' ]"
-        title="Menu"
         @click="clickMenu"
       >
         <font-awesome-icon
@@ -29,27 +26,17 @@
         />
       </button>
       <ul
-        :class="[ isClicked ? 'absolute top-20 left-0 w-full z-10 text-3xl text-right bg-white shadow-lg' : 'hidden md:flex md:flex-row md:gap-9' ]"
+        class="site-menu"
+        :class="{ 'menu-clicked': isClicked }"
       >
         <li
           v-for="menuItem in menuItems"
           :key="menuItem.slug"
-          :class="{ 'py-5 px-3 leading-6': isClicked }"
+          class="menu-element"
           @click="linkClicked"
         >
-          <RouterLink
+          <RouterLink :to="menuItem.uri">
-            v-slot="{ href, navigate, isActive }"
-            :to="menuItem.uri"
-            custom
-          >
-            <a
-              :href="href"
-              class="hover:text-kamilcraft-green"
-              :class="[ (!isActive && isHomePage && !isClicked) ? 'text-white' : (isActive ? 'text-kamilcraft-green' : 'text-gray-500') ]"
-              @click="navigate"
-            >
             {{ menuItem.title }}
-            </a>
           </RouterLink>
         </li>
       </ul>
@@ -58,14 +45,7 @@
 </template>
 
 <script setup>
-import { defineProps, ref, computed } from 'vue'
+import { ref, computed } from 'vue'
-
-defineProps({
-  isHomePage: {
-    type: Boolean,
-    default: false
-  }
-})
 
 const menuItems = [
   {
@@ -108,16 +88,127 @@ function linkClicked() {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-.clicked-menu {
+@import "scss/media";
-  animation: bg-menu-animation 500ms forwards ease-in-out;
-}
 
-.clicked-logo {
+.sub-page > .container {
-  animation: bg-logo-animation 500ms forwards ease-in-out;
+  .nav-btn {
-}
+    color: #8D8D8D;
+  }
 
-@keyframes bg-menu-animation {
+  .nav .site-menu .menu-element {
+    a:not([class|=router-link]) {
+      color: #8D8D8D;
+
+      &:hover {
+        color: #A2CF00;
+      }
+    }
+  }
+}
+.container {
+  display: flex;
+  height: 80px;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0;
+
+  div.logo {
+    padding: 14px 20px 14px 40px;
+    font-family: 'Thasadith', sans-serif;
+    font-size: 2.5em;
+    color: #5C5C5C;
+    background-color: white;
+
+    .logo-element {
+      color: #A2CF00;
+    }
+  }
+
+  &-menu-active {
+    color: #8D8D8D;
+    animation: container-active-menu 500ms forwards ease-in-out;
+
+    div.logo {
+      animation: logo-active-menu 500ms forwards ease-in-out;
+    }
+    .nav {
+      .nav-btn {
+        color: #8D8D8D;
+      }
+      .site-menu .menu-element a {
+        color: #8D8D8D;
+      }
+    }
+  }
+}
+.nav {
+  margin-left: 20px;
+  z-index: 10;
+  .nav-btn {
+    display: none;
+    margin: 10px 25px;
+    font-size: 2em;
+    color: white;
+    background: transparent !important;
+    border: none;
+  }
+  .site-menu {
+    display: flex;
+    list-style: none;
+
+    .menu-element {
+      margin-right: 30px;
+
+      a {
+        color: #EBEBEB;
+
+        &.router-link-exact-active, &:hover {
+          color: #A2CF00;
+        }
+      }
+
+      &:last-child {
+        margin-right: unset;
+      }
+    }
+  }
+  @include media-tablet {
+    margin-left: 0;
+
+    .nav-btn {
+      display: block;
+    }
+
+    .site-menu {
+      display: none;
+      width: 100%;
+      position: absolute;
+      top: 80px;
+      left: 0;
+      background-color: white;
+      box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
+
+      .menu-element {
+        width: 100%;
+        padding: 5px 20px;
+        text-align: right;
+        font-size: 1.8em;
+        line-height: 2em;
+      }
+    }
+
+    .menu-clicked {
+      display: block;
+    }
+  }
+}
+@include media-tablet {
+  .container {
+    justify-content: space-between;
+  }
+}
+@keyframes container-active-menu {
   0% {
     background-color: transparent;
   }
@@ -125,7 +216,7 @@ function linkClicked() {
     background-color: #EFEFEF;
   }
 }
-@keyframes bg-logo-animation {
+@keyframes logo-active-menu {
   0% {
     background-color: white;
   }

src/components/SelectedProjects.vue

@@ -1,50 +1,42 @@
 <template>
-  <section
+  <div class="projects">
-    id="projects"
-    class="max-w-screen-xl mx-auto px-6 xl:px-2 py-10"
-  >
     <slot />
-    <div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-5">
+    <div class="container">
       <div
         v-for="project in projects"
         :key="project.title.slug"
-        class="flex flex-col lg:grid grid-project relative bg-neutral-100 border border-gray-200 rounded-md"
+        class="project"
       >
         <img
           v-if="project.images.small"
-          class="project-image w-full h-[16rem] lg:w-[12.5rem] lg:h-[12.5rem] object-cover object-top rounded-t-md lg:rounded-bl-md lg:rounded-tr-none"
+          class="project_image"
           :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"
+          class="project_image"
           :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">
+        <div class="project_content">
-          <header class="pb-2">
+          <h3 class="project_title">
-            <h3 class="text-lg font-bold">
             {{ project.title }}
           </h3>
-            <p class="text-sm">
+          <div class="project_release">
-              {{ project.project_version }}
+            {{ project.version }}
-            </p>
+          </div>
-          </header>
+          <div
-          <p
+            class="project_description"
-            class="text-sm"
             v-html="markdownToText(project)"
           />
         </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"
-        >
           <BaseButton
             has-icon
             icon="eye"
             is-reverse
-            class="w-full lg:w-80 rounded-t-none lg:rounded-t-md"
+            class="btn"
-            title="Pokaż więcej"
             @click="router.push({ name: 'Project', params: { id: project.id } })"
           >
             O projekcie
@@ -52,14 +44,14 @@
         </div>
       </div>
     </div>
-  </section>
+  </div>
 </template>
 
 <script setup>
 import { defineProps, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useStore } from 'vuex'
-import BaseButton from '@/components/buttons/BaseButton'
+import BaseButton from './buttons/BaseButton'
 import { marked } from 'marked'
 
 defineProps({
@@ -91,47 +83,133 @@ function markdownToText (project) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
-@import 'scss/media';
+@import "scss/media";
 
-.grid-project {
+.projects {
+  padding-top: 45px;
+  padding-bottom: 45px;
+
+  .container {
+    display: grid;
+    align-items: flex-start;
+    grid-template-columns: 1fr 1fr;
+    grid-auto-rows: minmax(80px, auto);
+    column-gap: 25px;
+    row-gap: 20px;
+
+    .project {
+      display: grid;
+      position: relative;
+      grid-template-areas: 'image content';
+      grid-template-columns: 200px 1fr;
+      background-color: #fafafa;
+      border: 1px solid rgba(0, 0, 0, .025);
+      border-radius: 5px;
       animation: load-project 2s forwards;
 
-  .project-image, .project-content {
+      .project_image {
+        grid-area: image;
+        width: 200px;
+        height: 200px;
+        object-fit: cover;
         object-position: top center;
       }
 
-  .project-image {
+      .project_content {
-    grid-area: image;
+        grid-area: content;
+        padding: 10px 15px;
+        height: 200px;
+        overflow-y: hidden;
+        position: relative;
+
+        .project_title {
+          font-size: 1.3em;
+          font-weight: normal;
+          line-height: 1.5em;
         }
 
-  .project-content {
+        .project_release {
-    grid-area: content;
+          font-size: .9em;
+          font-weight: bold;
+          padding: 5px 0;
+        }
 
         &::after {
-      background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 60%, #fafafa);
+          content: "";
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #fafafa 100%);
         }
       }
-}
 
-@screen lg {
+      p {
-  .grid-project {
+        font-size: .9em;
-    grid-template-areas: 'image content';
+      }
-    grid-template-columns: 200px 1fr;
+    }
+
+    @include media-tablet(true) {
+      .project {
+        .more-button {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
 
-    .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: rgba(255, 255, 255, .9);
+                background-color: #385c8a;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    @include media-small {
+      .project {
+        display: block;
+
+        .project_image {
+          width: 100%;
+          height: 250px;
+        }
+
+        .project_content {
+          height: 125px;
+        }
+
+        .more-button {
+          display: block;
+          position: unset;
+          margin-top: 8px;
+          height: auto;
+          left: unset;
+          top: unset;
+
+          .btn {
+            display: flex;
+            width: 100%;
+            border-radius: 0;
+            border-style: solid;
           }
         }
       }
@@ -149,4 +227,13 @@ function markdownToText (project) {
     opacity: 1;
   }
 }
+
+@include media-tablet {
+  .projects .container {
+    grid-template-columns: 1fr;
+    padding: 25px;
+    column-gap: 0;
+    row-gap: 20px;
+  }
+}
 </style>

src/components/SiteHeader.vue

@@ -1,14 +1,12 @@
 <template>
   <header :class="thisClass">
-    <Navigation :is-home-page="isHome" />
+    <navigation />
     <div
       v-if="isTitle"
-      class="max-w-screen-header-content mx-auto text-center px-2.5 py-10"
+      class="header-info"
-      :class="{ 'text-white': isHome }"
+      :class="{ 'header-info-home': isHome }"
     >
-      <h1 class="mb-6 relative font-light text-[2.5rem] leading-[3.5rem] after:block after:absolute after:w-24 after:h-0.5 after:bg-kamilcraft-green after:left-1/2 after:-ml-12">
+      <h1>{{ getTitle }}</h1>
-        {{ getTitle }}
-      </h1>
       <p v-if="isDescription && descriptionType === 'string'">
         {{ getDescription }}
       </p>
@@ -27,7 +25,7 @@
 import { computed } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
-import Navigation from '@/components/NavigationHeader'
+import Navigation from './NavigationHeader'
 
 const store = useStore()
 const route = useRoute()
@@ -44,11 +42,38 @@ const descriptionType = computed(() => {
 })
 </script>
 
-<style scoped>
+<style lang="scss">
 .home-page {
   background: linear-gradient(237.74deg, #1199A5 0%, #436DA7 83%);
 }
 .sub-page {
   background-color: #EFEFEF;
 }
+.header-info {
+  text-align: center;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 40px 10px;
+  h1 {
+    position: relative;
+    font-weight: lighter;
+    font-size: 2.5em;
+    line-height: 1.5em;
+    margin-bottom: 25px;
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      width: 100px;
+      height: 2px;
+      background-color: #A2CF00;
+      left: 50%;
+      margin-left: -50px;
+    }
+  }
+  &-home {
+    color: white;
+  }
+}
 </style>

src/components/buttons/BaseButton.vue

@@ -32,8 +32,8 @@ defineProps({
 })
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-@import 'scss/btn';
+@import "../../../scss/btn";
 
 .btn {
   @include button($has-icon: true);

src/components/buttons/GhostButton.vue

@@ -25,7 +25,7 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
-@import 'scss/btn';
+@import "../../../scss/btn";
 
 .btn {
   @include ghost-button();

src/components/sections/AboutSection.vue

@@ -1,27 +1,24 @@
 <template>
-  <div class="bg-neutral-50">
+  <div class="about">
-    <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
+    <div class="container">
-      <div
+      <div id="grid">
-        id="grid-columns"
+        <div id="grid-text">
-        class="flex flex-col md:grid items-center"
+          <h2 class="name">
-      >
-        <div id="grid-content">
-          <h2 class="text-[2rem]">
             Kamil Niemczycki
           </h2>
-          <div class="mb-2 text-[1.5rem]">
+          <div class="tagline">
             Web Developer
           </div>
           <p>
             Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
             W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.
           </p>
-          <div class="flex flex-col sm:flex-row justify-center md:justify-start py-6 gap-5">
+          <div class="buttons">
             <BaseButton
               has-icon
               icon="portrait"
               is-reverse
-              @click="scrollTo('#projects')"
+              @click="scrollTo('.selected-projects')"
             >
               Wybrane projekty
             </BaseButton>
@@ -35,10 +32,9 @@
           </div>
         </div>
         <div id="grid-photo">
-          <figure>
+          <figure id="about-photo">
             <img
               :src="`${publicPath}assets/me.jpg`"
-              class="mx-auto rounded-full object-cover w-[12.5rem] h-[12.5rem]"
               alt="Moje zdjęcie"
             >
           </figure>
@@ -49,7 +45,7 @@
 </template>
 
 <script setup>
-import BaseButton from '@/components/buttons/BaseButton'
+import BaseButton from '../buttons/BaseButton'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
@@ -63,17 +59,97 @@ function scrollTo(id) {
 </script>
 
 <style lang="scss">
-#grid-columns {
+@import "scss/media";
+
+.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-content {
+     #grid-text {
        grid-area: text;
-}
+       text-align: left;
 
-#grid-photo {
+       .buttons {
+         display: flex;
+         justify-content: flex-start;
+         padding: 25px 0;
+
+         .btn {
+           margin-right: 20px;
+
+           &:last-child {
+             margin-right: 0;
+           }
+
+           @include media-tablet {
+             margin: 0 auto 15px;
+
+             &:last-child {
+               margin: 0 auto;
+             }
+           }
+         }
+
+         @include media-small {
+           justify-content: center;
+           margin-bottom: 25px;
+         }
+
+         @include media-tablet {
+           display: block;
+           margin-bottom: 25px;
+         }
+       }
+
+       @include media-mobile() {
+         .buttons .btn,
+         .buttons a {
+           min-width: unset;
+           width: 100%;
+         }
+       }
+     }
+     #grid-photo {
        grid-area: photo;
+
+       #about-photo img {
+         border-radius: 50%;
+       }
+     }
+     figure {
+       text-align: center;
+       img {
+         object-fit: cover;
+         width: 200px;
+         height: 200px;
+       }
+     }
+  }
+  @include media-small {
+    #grid {
+      grid-template-columns: 1fr 1fr;
+      grid-template-areas:
+    'text text'
+    'photo photo';
+    }
+  }
 }
 </style>

src/components/sections/ExperiencesSection.vue

@@ -1,22 +1,20 @@
 <template>
-  <div>
+  <div class="experiences">
-    <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
+    <div class="container">
-      <h2 class="text-[2rem] mb-2">
+      <h2>Wykorzystywane technologie</h2>
-        Wykorzystywane technologie
+      <p>
-      </h2>
-      <p class="mb-5">
         Programowaniem stron internetowych zajmuję się najmłodszych lat, czyli od 2011 roku. Pierwsze projekty były
         proste i najczęściej na użytek własny. Jednakże, doświadczenie zebrane przez lata pomogło mi wyselekcjonować
         technologie, które wspomagają pisanie i rozwijanie oprogramowania.
       </p>
-      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
+      <div class="skills">
         <div
           v-for="(skill, skillKey) in list"
           :key="skillKey"
-          class="p-4 bg-neutral-50 rounded-lg"
+          class="skill-group"
         >
-          <header>
+          <header class="skill-header">
-            <div class="flex gap-2 text-3xl mb-2">
+            <div class="tech-icons">
               <font-awesome-icon
                 v-for="(icon, iconKey) in skill.icons"
                 :key="iconKey"
@@ -26,25 +24,13 @@
                 :title="icon.title"
               />
             </div>
-            <h3 class="text-lg font-bold">
+            <h3>{{ skill.header }}</h3>
-              {{ skill.header }}
-            </h3>
           </header>
-          <p
+          <p v-if="skill.showMore.value || skill.description.length < 200">
-            v-if="skill.showMore.value || skill.description.length < 200"
-            class="text-sm"
-          >
             {{ skill.description }}
           </p>
-          <p
+          <p v-else>
-            v-else
+            {{ parseText(skill.description) }}... <a @click="changeMoreStatus(skill)">Więcej</a>
-            class="text-sm"
-          >
-            {{ parseText(skill.description) }}...
-            <a
-              class="text-neutral-500 hover:text-neutral-700 hover:underline cursor-pointer"
-              @click="changeMoreStatus(skill)"
-            >Więcej</a>
           </p>
         </div>
       </div>
@@ -174,7 +160,74 @@ function changeMoreStatus(skill) {
 }
 </script>
 
-<style scoped>
+<style lang="scss">
+@import "scss/media";
+
+.experiences {
+  .container {
+    padding-top: 45px;
+    padding-bottom: 45px;
+
+    .skills {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      column-gap: 20px;
+      row-gap: 20px;
+      margin-top: 15px;
+
+      .skill-group {
+        background-color: #fafafa;
+        padding: 15px;
+        border-radius: 5px;
+
+        .tech-icons {
+          font-size: 1.8em;
+          margin-bottom: 3px;
+
+          & > svg[class*='icon'] {
+            margin-right: 10px;
+
+            &:last-child {
+              margin-right: 0;
+            }
+          }
+        }
+        h3 {
+          font-size: 1.2em;
+          line-height: 1.6em;
+          font-weight: bold;
+        }
+        .skill-list {
+          margin-block: auto;
+          padding-inline: inherit;
+          margin-left: 5px;
+          list-style-type: initial;
+        }
+        p {
+          font-size: .9em;
+
+          a {
+            color: #8D8D8D;
+            cursor: pointer;
+          }
+        }
+        &:hover {
+          background-color: rgba(0, 0, 0, .03);
+        }
+      }
+
+      @include media-small {
+        grid-template-columns: repeat(3, 1fr);
+      }
+      @include media-tablet {
+        grid-template-columns: repeat(2, 1fr);
+      }
+      @include media-mobile {
+        grid-template-columns: repeat(1, 1fr);
+      }
+    }
+  }
+}
 .icon-js {
   color: #F1DE4F;
 }

src/components/sections/FavoriteProjects.vue

@@ -1,20 +1,13 @@
 <template>
-  <section class="bg-neutral-50">
+  <section class="selected-projects">
     <projects :projects="select_projects">
-      <header>
+      <div class="header-container">
-        <h2 class="text-[2rem] mb-2">
+        <h2>Wybrane projekty</h2>
-          Wybrane projekty
+        <p>Poniżej przedstawiam Państwu, wybraną przeze mnie, listę projektów.</p>
-        </h2>
+      </div>
-        <p class="mb-5">
-          Poniżej przedstawiam Państwu, wybraną przeze mnie, listę projektów.
-        </p>
-      </header>
     </projects>
-    <div class="w-full -translate-y-5 pb-5 more-button">
+    <div class="more-button">
-      <GhostButton
+      <GhostButton @click="router.push('projects')">
-        class="mx-auto"
-        @click="router.push('projects')"
-      >
         ZOBACZ WIĘCEJ
       </GhostButton>
     </div>
@@ -24,8 +17,8 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import Projects from '@/components/SelectedProjects'
+import Projects from '../SelectedProjects'
-import GhostButton from '@/components/buttons/GhostButton'
+import GhostButton from '../buttons/GhostButton'
 
 const router = useRouter()
 

src/components/sections/contacts/MailContact.vue

@@ -1,99 +1,91 @@
 <template>
-  <div
+  <div class="contact_container">
-    id="contact-form"
-    class="contact_container w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[500px] p-2 shadow"
-  >
-    <header class="mb-1.5">
-      <h3 class="text-xl">
-        Formularz kontaktowy
-      </h3>
-    </header>
-    <form
-      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"
+      class="message message_error"
     >
       {{ messageError }}
     </div>
     <div
-        v-else-if="hasMessageOkStatus"
+      v-if="hasMessageOkStatus"
-        class="w-full p-2 bg-[#27ae60] text-white text-sm border border-lime-600 rounded-md shadow"
+      class="message message_ok"
     >
       {{ messageOk }}
     </div>
-      <div class="flex flex-col gap-1 w-full">
+    <header class="container_head">
+      Formularz kontaktowy:
+    </header>
+    <form
+      id="form-point"
+      @submit="formSubmit"
+    >
       <label
-          class="text-gray-500"
+        class="label-info"
+        :class="{ 'label-error': isEmailError }"
+        for="email"
+      >
+        E-mail:
+      </label>
+      <input
+        id="email"
+        v-model="emailValue"
+        class="contact_input"
+        :class="{ 'contact_input-error': isEmailError }"
+        type="text"
+        name="email"
+        placeholder="przemek.kowalski@gmail.com"
+      >
+      <span
+        v-if="isEmailError"
+        class="error-message"
+      >
+        E-mail musi być poprawny, np. przemek.kowalski@gmail.com
+      </span>
+      <label
+        class="label-info"
+        :class="{ 'label-error': isMessageError }"
         for="message"
       >
-          W czym mogę pomóc?
+        Wiadomość:
       </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="contact_input"
-          :class="[ isMessageError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
+        :class="{ 'contact_input-error': isMessageError }"
         name="message"
         placeholder="Chciałbym zlecić wykonanie strony..."
       />
       <span
         v-if="isMessageError"
-          class="text-red-400"
+        class="error-message"
       >
         Wiadomość musi zawierać przynajmniej 3 znaki!
       </span>
-      </div>
-      <div class="flex flex-col gap-1 w-full">
       <label
-          class="text-gray-500"
+        class="label-info"
-          for="email"
+        :class="{ 'label-error': isSenderError }"
-        >
-          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
+        Podpis nadawcy:
       </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="contact_input"
-          :class="[ isSenderError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
+        :class="{ 'contact_input-error': isSenderError }"
         type="text"
         name="sender"
+        placeholder="np. Przemek Kowalski"
       >
       <span
         v-if="isSenderError"
-          class="text-red-400"
+        class="error-message"
       >
         Podpis musi zawierać przynajmniej 3 znaki!
       </span>
-      </div>
       <BaseButton
         is-reverse
-        class="py-1 w-full"
         :disabled="isButtonDisabled"
       >
         Wyślij
@@ -103,7 +95,7 @@
 </template>
 
 <script setup>
-import BaseButton from '@/components/buttons/BaseButton'
+import BaseButton from '../../buttons/BaseButton'
 import { ref, reactive, watch, computed } from 'vue'
 
 function emailValidate (mailObj) {
@@ -207,21 +199,112 @@ function formSubmit(event) {
       buttonDisabled.value = false
     })
   }
-
-  scrollTo('#contact-form')
-}
-
-function scrollTo(id) {
-  document.querySelector(id).scrollIntoView({
-    behavior: 'smooth'
-  })
 }
 </script>
 
 <style lang="scss" scoped>
-@screen md {
+@import "scss/media";
-  .contact_container {
+
+.contact_container {
   flex-basis: 500px;
+
+  #form-point {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .btn {
+    width: 97%;
+    margin: 0 20px 5px;
   }
 }
+
+.container_head {
+  padding: 10px;
+  line-height: 1.6em;
+  font-size: 1.3em;
+  font-weight: bold;
+}
+
+.contact_container {
+  .label-info {
+    width: 97%;
+    padding-bottom: 5px;
+    color: #7a7a7a;
+  }
+
+  .error-message {
+    width: 97%;
+    padding: 5px 0 10px;
+    color: #d44950;
+  }
+
+  input, textarea {
+    width: 97%;
+    max-width: 97%;
+    border: 0;
+    border-bottom: 2px solid #c9c9c9;
+    padding: 10px 10px 8px;
+    font-size: 1em;
+    font-family: var(--font-family);
+    line-height: 1.3em;
+    margin-bottom: 15px;
+    border-radius: 5px;
+  }
+}
+
+.contact_input::placeholder {
+  color: #bdbdbd;
+}
+
+.contact_input:focus, .contact_input:focus {
+  outline: none;
+  border-color: black;
+}
+
+textarea.contact_input {
+  max-width: 97%;
+  min-width: 97%;
+  min-height: 150px;
+}
+
+input.contact_input-error, textarea.contact_input-error {
+  border-color: #d44950;
+  color: #d44950;
+  margin-bottom: 0;
+}
+
+.contact_input-error::placeholder, .contact_input-error::placeholder {
+  color: #d7626a;
+}
+
+input[disabled].contact_input {
+  background-color: #cdcdcd;
+  border-color: gray;
+  color: black;
+}
+
+.message {
+  display: none;
+  margin: 5px;
+  padding: 8px;
+  border-radius: 5px;
+}
+
+.message_ok, .message_error {
+  display: block;
+}
+
+.message_ok {
+  background-color: #4CAF50;
+  border: 1px solid #387d3b;
+  color: white;
+}
+
+.message_error {
+  background-color: #f8d7da;
+  border: 1px solid #f5c6cb;
+  color: #721c24;
+}
 </style>

src/components/sections/contacts/OtherContact.vue

@@ -1,111 +1,134 @@
 <template>
-  <div class="contact_info w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[410px] p-2 shadow">
+  <div class="contact_info">
-    <header class="mb-1.5">
+    <header class="info_head">
-      <h3 class="text-xl">
       Inne formy kontaktu:
-      </h3>
     </header>
-    <div class="flex flex-col gap-2.5 justify-start items-start">
+    <div class="contact_element">
-      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
       <img
-          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+        class="contact_element_icon"
         src="/assets/img/instagram.jpg"
         alt="Instagram"
       >
       <span
         id="instagram"
-          class="font-bold"
+        class="contact_element_text"
       >
         <a
           href="https://www.instagram.com/nikcamii/"
           target="_blank"
           rel="noopener nofollow noreferrer"
-            class="hover:underline"
         >Instagram: @NiKCamii</a>
       </span>
     </div>
-      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+    <div class="contact_element">
       <img
-          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+        class="contact_element_icon"
         src="/assets/img/facebook.jpg"
         alt="Facebook"
       >
       <span
         id="facebook"
-          class="font-bold"
+        class="contact_element_text"
       >
         <a
           href="https://www.facebook.com/nikcamii/"
           target="_blank"
           rel="noopener nofollow noreferrer"
-            class="hover:text-gray-700 hover:underline"
         >Facebook: @NiKCamii</a>
       </span>
     </div>
-      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+    <div class="contact_element">
       <img
-          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+        class="contact_element_icon"
         src="/assets/img/twitter.jpg"
         alt="Twitter"
       >
       <span
         id="twitter"
-          class="font-bold"
+        class="contact_element_text"
       >
         <a
           href="https://twitter.com/nikcamii"
           target="_blank"
           rel="noopener nofollow noreferrer"
-            class="hover:text-gray-700 hover:underline"
         >Twitter: @NiKCamii</a>
       </span>
     </div>
-      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+    <div class="contact_element">
       <img
-          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+        class="contact_element_icon"
         src="/assets/img/gg.png"
         alt="Gadu-Gadu"
       >
       <span
         id="gg"
-          class="font-bold"
+        class="contact_element_text"
       >GG: 38429969</span>
     </div>
-      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+    <div class="contact_element">
       <img
-          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+        class="contact_element_icon"
         src="/assets/img/user.jpg"
         alt="E-mail"
       >
       <span
         id="mailto"
-          class="font-bold"
+        class="contact_element_text"
       >
-          <a
+        <a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a>
-            href="mailto:contact@kamilcraft.com"
-            class="hover:text-gray-700 hover:underline"
-          >Email: contact@kamilcraft.com</a>
       </span>
     </div>
   </div>
-  </div>
 </template>
 
 <style lang="scss" scoped>
 @import "scss/media";
 
-@screen md {
+.contact_info {
-  .contact_info {
   flex-basis: 410px;
-  }
 }
 
-a {
+.info_head {
+  padding: 10px;
+  line-height: 1.6em;
+  font-size: 1.3em;
+  font-weight: bold;
+}
+
+.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: #374151;
+      -webkit-text-fill-color: #444444;
-    color: #374151;
+      color: #444444;
+      text-decoration: underline;
+    }
+  }
+
+  &_icon {
+    border-radius: 50%;
+    border: 1px solid #e2e2e2;
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+    object-fit: contain;
+  }
+
+  &_text{
+    padding-top: 2px;
+    line-height: 1.6em;
+    font-size: 1.1em;
+    font-weight: bold;
   }
 }
 
@@ -130,4 +153,11 @@ a {
 #gg {
   color: #ffa214;
 }
+
+@include media-tablet {
+  #instagram, #facebook, #twitter, #mailto, #gg {
+    font-size: 1em;
+    line-height: 1.2em;
+  }
+}
 </style>

src/main.js

@@ -1,11 +1,10 @@
 import { createApp } from 'vue'
-import App from '@/App.vue'
+import App from './App.vue'
-import router from '@/router'
+import router from './router'
-import { store } from '@/store'
+import { store } from './store'
 // import VueMeta from 'vue-meta'
 
 import '../scss/default.scss'
-import '../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'

src/router/index.js

@@ -1,10 +1,10 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import Home from '@/views/HomeView'
+import Home from '../views/HomeView'
-import About from '@/views/AboutView'
+import About from '../views/AboutView'
-import Projects from '@/views/ProjectsView'
+import Projects from '../views/ProjectsView'
-import Project from '@/views/ProjectView'
+import Project from '../views/ProjectView'
-import Contact from '@/views/ContactView'
+import Contact from '../views/ContactView'
-import NotFound from '@/views/NotFound'
+import NotFound from '../views/NotFound'
 
 const mainTitle = 'kamilcraft.com'
 
@@ -77,6 +77,21 @@ const router = createRouter({
       return { left: 0, top: 0 }
     }
   }
+  /*scrollBehavior (to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition
+    } else if (to.hash) {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve({
+            selector: to.hash
+          }, 1000)
+        })
+      })
+    } else {
+      return { x: 0, y: 0 }
+    }
+  }*/
 })
 
 const title = ' :: ' + mainTitle

src/views/AboutView.vue

@@ -1,12 +1,11 @@
 <template>
-  <section class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
+  <section id="about">
-    <p class="font-bold">
+    <div class="container">
-      Nazywam się Kamil Niemczycki. Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
+      <p>
-      W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.
+        <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 class="text-[2rem]">
+      <h2>Studia</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>
@@ -14,32 +13,27 @@
         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]">
+      <h3>Kursy</h3>
-      Kursy
-    </h3>
       <p>
         W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
-      <a
+        <strong><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
+          Architektura aplikacji internetowych opartych o framework Laravel</a></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 class="text-[2rem]">
+      <h2>Moje zainteresowania</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>
 
@@ -66,3 +60,32 @@ onUnmounted(() => {
   store.commit('resetHeaderDescription')
 })
 </script>
+
+<style lang="scss">
+section#about {
+  padding: 45px 0;
+  background-color: #fafafa !important;
+
+  h2 {
+    margin-top: 25px;
+
+    &:first-of-type {
+      margin-top: 10px;
+    }
+  }
+
+  h3 {
+    font-size: 1.3em;
+    margin-top: 8px;
+    margin-bottom: 10px;
+  }
+
+  a {
+    color: #8D8D8D;
+
+    &:hover {
+      color: #A2CF00;
+    }
+  }
+}
+</style>

src/views/ContactView.vue

@@ -1,7 +1,9 @@
 <template>
-  <section class="flex flex-col px-3 py-6 md:flex-row items-start justify-center mx-auto gap-5">
+  <section class="contact">
+    <div class="container">
       <MailContact />
       <OtherContact />
+    </div>
   </section>
 </template>
 
@@ -9,8 +11,8 @@
 import { onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
-import MailContact from '@/components/sections/contacts/MailContact'
+import MailContact from '../components/sections/contacts/MailContact'
-import OtherContact from '@/components/sections/contacts/OtherContact'
+import OtherContact from '../components/sections/contacts/OtherContact'
 
 const route = useRoute()
 const store = useStore()
@@ -23,3 +25,49 @@ onMounted(() => {
   store.commit('setHeader', header)
 })
 </script>
+
+<style lang="scss">
+@import "scss/media";
+
+.contact {
+  padding: 25px 0;
+
+  .container {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+  }
+
+  .contact_container, .contact_info {
+    margin: 10px;
+    max-width: 500px;
+    background-color: #eaeaea;
+    border: 2px solid #dadada;
+    border-radius: 2px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
+  }
+
+  @include media-tablet {
+    .container {
+      display: block;
+      margin: 0 auto;
+
+      .contact_container, .contact_info {
+        margin: 0 auto 25px;
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+  @include media-mobile {
+    .container {
+      padding: 0 10px;
+
+      .contact_container {
+        max-width: unset;
+      }
+    }
+  }
+}
+</style>

src/views/HomeView.vue

@@ -10,9 +10,9 @@
 import { onMounted, onUnmounted } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
-import About from '@/components/sections/AboutSection'
+import About from '../components/sections/AboutSection'
-import ExperiencesSection from '@/components/sections/ExperiencesSection'
+import ExperiencesSection from '../components/sections/ExperiencesSection'
-import FavoriteProjects from '@/components/sections/FavoriteProjects'
+import FavoriteProjects from '../components/sections/FavoriteProjects'
 
 const store = useStore()
 const route = useRoute()

src/views/ProjectView.vue

@@ -1,78 +1,74 @@
 <template>
   <section
     v-if="isLoaded"
-    class="max-w-screen-xl mx-auto px-6 xl:px-2 py-8"
+    class="project"
   >
-    <header class="text-neutral-800 font-roboto">
+    <header class="project_header">
-      <h1 class="text-center text-4xl font-light pb-5">
+      <h1>{{ project.title }}</h1>
-        {{ project.title }}
+      <ul class="project_info">
-      </h1>
+        <li class="info_text">
-      <ul class="grid grid-cols-2 gap-3 md:flex md:gap-5 justify-center list-none">
+          <font-awesome-icon
-        <li class="flex items-center gap-2">
+            class="icon"
-          <FontAwesomeIcon
-            class="w-4"
             :icon="['far', 'clock']"
           />
           <span>{{ project.release_date }}</span>
         </li>
-        <li class="flex items-center gap-2">
+        <li class="info_text">
-          <FontAwesomeIcon
+          <font-awesome-icon
-            class="w-4"
+            class="icon"
             :icon="['far', 'user']"
           />
           <span>{{ project.author }}</span>
         </li>
-        <li class="flex items-center gap-2">
+        <li class="info_text">
-          <FontAwesomeIcon
+          <font-awesome-icon
-            class="w-4"
+            class="icon"
             :icon="['far', 'folder']"
           />
           <span>{{ getCategoryName(project.categories) }}</span>
         </li>
-        <li class="flex items-center gap-2">
+        <li class="info_text">
-          <FontAwesomeIcon
+          <font-awesome-icon
-            class="w-4"
+            class="icon"
             :icon="['fas', 'code-branch']"
           />
           <span>{{ project.project_version }}</span>
         </li>
         <li
           v-if="project.project_url"
-          class="flex items-center gap-2"
+          class="info_text"
         >
-          <FontAwesomeIcon
+          <font-awesome-icon
-            class="w-4"
+            class="icon"
             :icon="['fas', 'link']"
           />
-          <span>
+          <span><a
-            <a
             :href="project.project_url"
             target="_blank"
             rel="noopener nofollow noreferrer"
-            >
+          >Link</a></span>
-              Link
-            </a>
-          </span>
         </li>
       </ul>
     </header>
-    <div class="pt-5">
+    <div class="container">
-      <figure class="w-full shadow-xl">
+      <component
+        :is="`figure`"
+        class="project-photo"
+      >
         <img
-          class="block max-h-[31.25rem] object-cover"
+          :src="`${project.images.large}`"
-          :src="project.images.large"
           :alt="project.title"
         >
-      </figure>
+      </component>
       <div
-        class="markdown mt-9"
+        class="content"
         v-html="markdownToHtml"
       />
     </div>
   </section>
   <div
     v-else
-    class="flex items-center"
+    class="loading"
   >
     <div class="loading_animation" />
   </div>
@@ -131,58 +127,144 @@ function loadProject(id) {
 <style lang="scss">
 @import "scss/default";
 
-a {
+.loading {
-  @apply text-neutral-800 hover:text-kamilcraft-green;
+  display: flex;
+  align-items: center;
 }
 
-.markdown {
+.project {
+  .project_header {
+    @extend .container;
+    text-align: center;
+    margin-bottom: 25px;
+
     h1 {
-    @apply text-4xl;
+      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;
+          white-space: nowrap;
+        }
+
+        &:not(&:last-child) {
+          margin-right: 15px;
+        }
+      }
+      @include media-tablet {
+        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;
+
+      a {
+        color: #8D8D8D;
+
+        &:hover {
+          color: #A2CF00;
+        }
+      }
+
+      h2, h3 {
+        margin-top: 15px;
+        margin-bottom: 5px;
+      }
+
+      h2:first-of-type {
+        margin-top: 0;
       }
 
       h2 {
-    @apply text-[2rem];
+        font-size: 1.6em;
       }
 
       h3 {
-    @apply text-[1.5rem];
+        font-size: 1.4em;
       }
 
       p, ol li, ul li {
-    @apply text-lg;
+        line-height: 1.8em;
+        font-size: 1.1em;
+
+        @include media-tablet {
+          font-size: 1.2em;
+          line-height: 1.5em;
+        }
       }
 
       p + ol, p + ul, p + blockquote {
-    @apply -mb-2.5;
+        margin-top: -10px;
-  }
-
-  ol {
-    @apply list-decimal;
-  }
-
-  ul {
-    @apply list-disc;
       }
 
       ol, ul {
-    @apply mb-2.5;
+        margin-bottom: 10px;
-    padding-inline-start: 1.75rem;
+        padding-inline-start: 2.1em;
 
         li img {
-      @apply block w-full pr-1 pb-1 mt-3.5;
+          display: block;
+          width: 100%;
+          padding: 0 5px 5px;
+          margin-top: .9em;
         }
       }
 
       p {
-    @apply mb-2.5 text-justify;
+        margin-bottom: 10px;
+        text-align: justify;
+        /* text-indent: 1.5em; */
       }
 
       blockquote {
-    @apply pl-6 ml-5 border-neutral-400;
+        padding-left: 25px;
+        margin-left: 1.3em;
+        border-left: 1px solid rgb(116, 116, 116);
 
         p {
           text-indent: unset;
         }
       }
+    }
+  }
 }
 </style>

src/views/ProjectsView.vue

@@ -1,38 +1,38 @@
 <template>
-  <SelectedProjects :projects="projects">
+  <div>
-    <div class="pb-9">
+    <div class="project_categories">
-      <ul class="flex justify-center list-none">
+      <ul class="categories">
         <li
           v-for="category in getCategories"
           :key="category.slug"
-          class="relative cursor-pointer mr-3 md:mr-5 last:mr-0 after:translate-y-2"
+          class="categories_element"
-          :class="{ 'category-active': selectedCategory(category.slug) }"
+          :class="{ 'categories_element-active': categories.active === category.slug }"
           @click="changeCategory(category.slug)"
         >
-          <a
+          <a :title="`Kategoria ${category.name}`">{{ category.name }}</a>
-            class="text-gray-500 hover:text-black"
-            :title="`Kategoria ${category.name}`"
-          >{{ category.name }}</a>
         </li>
       </ul>
     </div>
-  </SelectedProjects>
+    <SelectedProjects :projects="projects" />
     <div
       v-if="projects.length === 0"
       class="loading"
     >
       <div class="loading_animation" />
     </div>
+  </div>
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
+import { reactive, computed, onMounted, onUnmounted } from 'vue'
 import { useStore } from 'vuex'
-import SelectedProjects from '@/components/SelectedProjects'
+import SelectedProjects from '../components/SelectedProjects'
 
 const store = useStore()
 
-const activeCategory = ref('all')
+const categories = reactive({
+  active: 'all'
+})
 const projects = reactive([])
 
 const getCategories = computed(() => store.getters.getCategories)
@@ -72,22 +72,64 @@ function loadListWhereCategory(category) {
 }
 
 function changeCategory(category) {
-  activeCategory.value = category
+  categories.active = category
   loadListWhereCategory(category)
 }
-
-function selectedCategory(categorySlug) {
-  return activeCategory.value === categorySlug
-}
 </script>
 
 <style lang="scss">
 @import "scss/media";
 
-.category-active::after {
+.project_categories {
-  @apply absolute mx-auto left-0 right-0 bottom-0 h-0.5;
+  padding-top: 45px;
+
+  .categories {
+    display: flex;
+    justify-content: center;
+    list-style: none;
+
+    .categories_element {
+      position: relative;
+      cursor: pointer;
+      margin-right: 25px;
+
+      a {
+        color: var(--text-color);
+        &:hover {
+          color: black;
+        }
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      &-active {
+        &::after {
+          content: '';
+          position: absolute;
+          margin: 0 auto;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          width: 0;
+          height: 2px;
           background-color: #A2CF00;
+          transform: translateY(8px);
           animation: load-underline 300ms forwards;
+        }
+      }
+
+      @include media-mobile {
+        margin-right: 15px;
+      }
+    }
+  }
+}
+
+.projects {
+  padding-top: 25px;
+  padding-bottom: 25px;
 }
 
 @keyframes loading-animation {

tailwind.config.js

@@ -1,26 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./src/**/*.{vue,js}",
-  ],
-  darkMode: true,
-  theme: {
-    extend: {
-      fontFamily: {
-        'arial': ['Arial', 'sans-serif'],
-        'roboto': ['Roboto', 'sans-serif'],
-        'thasadith': ['Thasadith', 'sans-serif']
-      },
-      fontSize: {
-        'logo-size': '2.5rem',
-      },
-      screens: {
-        'header-content': '900px'
-      },
-      colors: {
-        'kamilcraft-green': 'rgb(var(--color-kamilcraft-green) / <alpha-value>)'
-      }
-    },
-  },
-  plugins: [],
-}

vue.config.js

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