unnecessary comment removed

src/App.vue

@@ -1,16 +1,16 @@
 <template>
+  <SiteHeader />
   <main
     rel="main"
   >
-    <SiteHeader />
     <RouterView />
-    <FooterComponent />
   </main>
+  <FooterComponent />
 </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/SelectedProjects.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-10">
+  <section
+    id="projects"
+    class="max-w-screen-xl mx-auto px-6 xl:px-2 py-10"
+  >
     <slot />
     <div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-5">
       <div
@@ -49,14 +52,14 @@
         </div>
       </div>
     </div>
-  </div>
+  </section>
 </template>
 
 <script setup>
 import { defineProps, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useStore } from 'vuex'
-import BaseButton from './buttons/BaseButton'
+import BaseButton from '@/components/buttons/BaseButton'
 import { marked } from 'marked'
 
 defineProps({
@@ -89,7 +92,7 @@ function markdownToText (project) {
 </script>
 
 <style lang="scss" scoped>
-@import "scss/media";
+@import 'scss/media';
 
 .grid-project {
   animation: load-project 2s forwards;
@@ -126,6 +129,10 @@ function markdownToText (project) {
 
         .btn {
           display: flex;
+
+          &:hover {
+            background-color: rgba(255, 255, 255, .9);
+          }
         }
       }
     }

src/components/SiteHeader.vue

@@ -27,7 +27,7 @@
 import { computed } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
-import Navigation from './NavigationHeader'
+import Navigation from '@/components/NavigationHeader'
 
 const store = useStore()
 const route = useRoute()

src/components/buttons/BaseButton.vue

@@ -33,7 +33,7 @@ defineProps({
 </script>
 
 <style lang="scss">
-@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

@@ -21,7 +21,7 @@
               has-icon
               icon="portrait"
               is-reverse
-              @click="scrollTo('.selected-projects')"
+              @click="scrollTo('#projects')"
             >
               Wybrane projekty
             </BaseButton>
@@ -49,7 +49,7 @@
 </template>
 
 <script setup>
-import BaseButton from '../buttons/BaseButton'
+import BaseButton from '@/components/buttons/BaseButton'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()

src/components/sections/FavoriteProjects.vue

@@ -24,8 +24,8 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import Projects from '../SelectedProjects'
+import Projects from '@/components/SelectedProjects'
-import GhostButton from '../buttons/GhostButton'
+import GhostButton from '@/components/buttons/GhostButton'
 
 const router = useRouter()
 

src/components/sections/contacts/MailContact.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="contact_container bg-neutral-100 rounded-md border border-gray-200 max-w-[500px] p-2 shadow">
+  <div
+    id="contact-form"
+    class="contact_container w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[500px] p-2 shadow"
+  >
     <header class="mb-1.5">
       <h3 class="text-xl">
         Formularz kontaktowy
@@ -38,6 +41,7 @@
         />
         <span
           v-if="isMessageError"
+          class="text-red-400"
         >
           Wiadomość musi zawierać przynajmniej 3 znaki!
         </span>
@@ -47,7 +51,7 @@
           class="text-gray-500"
           for="email"
         >
-          Jak mam się skontaktować?
+          Gdzie mam odesłać odpowiedź?
         </label>
         <input
           id="email"
@@ -60,7 +64,7 @@
         >
         <span
           v-if="isEmailError"
-          class="error-message"
+          class="text-red-400"
         >
           E-mail musi być poprawny, np. przemek.kowalski@gmail.com
         </span>
@@ -82,7 +86,7 @@
         >
         <span
           v-if="isSenderError"
-          class="error-message"
+          class="text-red-400"
         >
           Podpis musi zawierać przynajmniej 3 znaki!
         </span>
@@ -99,7 +103,7 @@
 </template>
 
 <script setup>
-import BaseButton from '../../buttons/BaseButton'
+import BaseButton from '@/components/buttons/BaseButton'
 import { ref, reactive, watch, computed } from 'vue'
 
 function emailValidate (mailObj) {
@@ -203,94 +207,21 @@ function formSubmit(event) {
       buttonDisabled.value = false
     })
   }
+
+  scrollTo('#contact-form')
+}
+
+function scrollTo(id) {
+  document.querySelector(id).scrollIntoView({
+    behavior: 'smooth'
+  })
 }
 </script>
 
 <style lang="scss" scoped>
-@import "scss/media";
+@screen md {
-
   .contact_container {
     flex-basis: 500px;
   }
-
-.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,134 +1,111 @@
 <template>
-  <div class="contact_info bg-neutral-100 rounded-md border border-gray-200 max-w-[500px] shadow">
+  <div class="contact_info w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[410px] p-2 shadow">
-    <header class="info_head">
+    <header class="mb-1.5">
+      <h3 class="text-xl">
         Inne formy kontaktu:
+      </h3>
     </header>
-    <div class="contact_element">
+    <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="contact_element_icon"
+          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
           src="/assets/img/instagram.jpg"
           alt="Instagram"
         >
         <span
           id="instagram"
-        class="contact_element_text"
+          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"
+          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
           src="/assets/img/facebook.jpg"
           alt="Facebook"
         >
         <span
           id="facebook"
-        class="contact_element_text"
+          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"
+          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
           src="/assets/img/twitter.jpg"
           alt="Twitter"
         >
         <span
           id="twitter"
-        class="contact_element_text"
+          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"
+          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="contact_element_text"
+          class="font-bold"
         >GG: 38429969</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"
+          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="contact_element_text"
+          class="font-bold"
         >
-        <a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a>
+          <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 {
     flex-basis: 410px;
   }
-
-.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: #444444;
+    -webkit-text-fill-color: #374151;
-      color: #444444;
+    color: #374151;
-      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;
   }
 }
 
@@ -153,11 +130,4 @@
 #gg {
   color: #ffa214;
 }
-
-@include media-tablet {
-  #instagram, #facebook, #twitter, #mailto, #gg {
-    font-size: 1em;
-    line-height: 1.2em;
-  }
-}
 </style>

src/main.js

@@ -1,7 +1,7 @@
 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'

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,21 +77,6 @@ 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/ContactView.vue

@@ -1,9 +1,7 @@
 <template>
-  <section class="py-6">
+  <section class="flex flex-col px-3 py-6 md:flex-row items-start justify-center mx-auto gap-5">
-    <div class="flex items-start justify-center mx-auto gap-5">
     <MailContact />
     <OtherContact />
-    </div>
   </section>
 </template>
 
@@ -11,8 +9,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()
@@ -25,46 +23,3 @@ 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;
-    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/ProjectsView.vue

@@ -28,7 +28,7 @@
 <script setup>
 import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import { useStore } from 'vuex'
-import SelectedProjects from '../components/SelectedProjects'
+import SelectedProjects from '@/components/SelectedProjects'
 
 const store = useStore()
 

vue.config.js

@@ -1,6 +1,14 @@
+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/'),
+      }
+    }
+  },
 })