updated project view

src/components/FooterComponent.vue

@@ -21,7 +21,7 @@
               :icon="['fab', link.icon]"
             />
             <span class="hidden md:inline-block">{{ link.title }}</span>
-            <span class="md:hidden">{{ link.shortcut }}</span>
+            <span class="hidden sm:inline-block md:hidden">{{ link.shortcut }}</span>
           </a>
         </li>
       </ul>

src/components/SelectedProjects.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
+  <div 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

src/views/AboutView.vue

@@ -1,39 +1,45 @@
 <template>
-  <section id="about">
-    <div class="container">
-      <p>
-        <strong>Nazywam się Kamil Niemczycki. Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
-          W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.</strong>
-      </p>
-      <h2>Studia</h2>
-      <p>
-        Jestem absolwentem Państwowej Wyższej Szkoły Zawodowej im. Witelona w Legnicy. Studiowałem na kierunku <em>Informatyka</em> o specjalności <em>Programowanie Aplikacji Mobilnych i Internetowych.</em>
-      </p>
-      <p>
-        Podczas studiów zdobyłem niezbędną wiedzę z zakresu projektowania, wdrażania i rozwoju aplikacji internetowych, mobilnych i desktopowych.
-        Zdobyłem także umiejętności pracy w zespole, które owocują tworzeniem merytorycznej dyskusji na temat części lub całości projektu.
-      </p>
-      <h3>Kursy</h3>
-      <p>
-        W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
-        <strong><a
-          :href="publicPath + 'download/certyfikat-laravel.pdf'"
-          target="_blank"
-          rel="noopener nofollow noreferrer"
-        >
-          Architektura aplikacji internetowych opartych o framework Laravel</a></strong>.
-      </p>
-      <p>
-        Umożliwiło mi to szersze spojrzenie na możliwości jakie daje nam Laravel i wzbogaconie poprzednio zdobytej
-        wiedzy o nowe doświadczenia.
-      </p>
-      <h2>Moje zainteresowania</h2>
-      <p>
-        W wolnym czasie przyjmuje małe zlecenia na strony lub serwisy internetowe. Uczę się nowych języków
-        programowania lub frameworków w znanych mi już technologiach. Hobbistycznie, tworzę także rozwiązania do
-        problemów przy prywatnych projektach.
-      </p>
-    </div>
+  <section class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
+    <p class="font-bold">
+      Nazywam się Kamil Niemczycki. Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
+      W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.
+    </p>
+    <h2 class="text-[2rem]">
+      Studia
+    </h2>
+    <p>
+      Jestem absolwentem Państwowej Wyższej Szkoły Zawodowej im. Witelona w Legnicy. Studiowałem na kierunku <em>Informatyka</em> o specjalności <em>Programowanie Aplikacji Mobilnych i Internetowych.</em>
+    </p>
+    <p>
+      Podczas studiów zdobyłem niezbędną wiedzę z zakresu projektowania, wdrażania i rozwoju aplikacji internetowych, mobilnych i desktopowych.
+      Zdobyłem także umiejętności pracy w zespole, które owocują tworzeniem merytorycznej dyskusji na temat części lub całości projektu.
+    </p>
+    <h3 class="text-[1.5rem]">
+      Kursy
+    </h3>
+    <p>
+      W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
+      <a
+        :href="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>
 
@@ -60,32 +66,3 @@ 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/ProjectView.vue

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

src/views/ProjectsView.vue

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