updated footer style

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/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>