updated project view

css/index.css

@@ -6,4 +6,4 @@
     :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,27 +8,27 @@
     "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",

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,8 +1,5 @@
 <template>
-  <section
+  <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-10">
-    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
@@ -52,14 +49,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({
@@ -92,7 +89,7 @@ function markdownToText (project) {
 </script>
 
 <style lang="scss" scoped>
-@import 'scss/media';
+@import "scss/media";
 
 .grid-project {
   animation: load-project 2s forwards;
@@ -129,10 +126,6 @@ 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 '@/components/NavigationHeader'
+import Navigation from './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('#projects')"
+              @click="scrollTo('.selected-projects')"
             >
               Wybrane projekty
             </BaseButton>
@@ -49,7 +49,7 @@
 </template>
 
 <script setup>
-import BaseButton from '@/components/buttons/BaseButton'
+import BaseButton from '../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 '@/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"
+    <div
-    class="contact_container w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[500px] p-2 shadow"
+      v-if="hasMessageError"
-  >
+      class="message message_error"
-    <header class="mb-1.5">
+    >
-      <h3 class="text-xl">
+      {{ messageError }}
-        Formularz kontaktowy
+    </div>
-      </h3>
+    <div
+      v-if="hasMessageOkStatus"
+      class="message message_ok"
+    >
+      {{ messageOk }}
+    </div>
+    <header class="container_head">
+      Formularz kontaktowy:
     </header>
     <form
-      class="flex flex-col gap-3 justify-start items-start"
+      id="form-point"
       @submit="formSubmit"
     >
-      <div
+      <label
-        v-if="hasMessageError"
+        class="label-info"
-        class="w-full p-2 bg-red-200 text-red-500 text-sm border border-red-300 rounded-md"
+        :class="{ 'label-error': isEmailError }"
+        for="email"
       >
-        {{ messageError }}
+        E-mail:
-      </div>
+      </label>
-      <div
+      <input
-        v-else-if="hasMessageOkStatus"
+        id="email"
-        class="w-full p-2 bg-[#27ae60] text-white text-sm border border-lime-600 rounded-md shadow"
+        v-model="emailValue"
+        class="contact_input"
+        :class="{ 'contact_input-error': isEmailError }"
+        type="text"
+        name="email"
+        placeholder="przemek.kowalski@gmail.com"
       >
-        {{ messageOk }}
+      <span
-      </div>
+        v-if="isEmailError"
-      <div class="flex flex-col gap-1 w-full">
+        class="error-message"
-        <label
+      >
-          class="text-gray-500"
+        E-mail musi być poprawny, np. przemek.kowalski@gmail.com
-          for="message"
+      </span>
-        >
+      <label
-          W czym mogę pomóc?
+        class="label-info"
-        </label>
+        :class="{ 'label-error': isMessageError }"
-        <textarea
+        for="message"
-          id="message"
+      >
-          v-model="messageValue"
+        Wiadomość:
-          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"
+      </label>
-          :class="[ isMessageError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
+      <textarea
-          name="message"
+        id="message"
-          placeholder="Chciałbym zlecić wykonanie strony..."
+        v-model="messageValue"
-        />
+        class="contact_input"
-        <span
+        :class="{ 'contact_input-error': isMessageError }"
-          v-if="isMessageError"
+        name="message"
-          class="text-red-400"
+        placeholder="Chciałbym zlecić wykonanie strony..."
-        >
+      />
-          Wiadomość musi zawierać przynajmniej 3 znaki!
+      <span
-        </span>
+        v-if="isMessageError"
-      </div>
+        class="error-message"
-      <div class="flex flex-col gap-1 w-full">
+      >
-        <label
+        Wiadomość musi zawierać przynajmniej 3 znaki!
-          class="text-gray-500"
+      </span>
-          for="email"
+      <label
-        >
+        class="label-info"
-          Gdzie mam odesłać odpowiedź?
+        :class="{ 'label-error': isSenderError }"
-        </label>
+        for="sender"
-        <input
+      >
-          id="email"
+        Podpis nadawcy:
-          v-model="emailValue"
+      </label>
-          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"
+      <input
-          :class="[ isEmailError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
+        id="sender"
-          type="text"
+        v-model="senderValue"
-          name="email"
+        class="contact_input"
-          placeholder="Twój adres e-mail"
+        :class="{ 'contact_input-error': isSenderError }"
-        >
+        type="text"
-        <span
+        name="sender"
-          v-if="isEmailError"
+        placeholder="np. Przemek Kowalski"
-          class="text-red-400"
+      >
-        >
+      <span
-          E-mail musi być poprawny, np. przemek.kowalski@gmail.com
+        v-if="isSenderError"
-        </span>
+        class="error-message"
-      </div>
+      >
-      <div class="flex flex-col gap-1 w-full">
+        Podpis musi zawierać przynajmniej 3 znaki!
-        <label
+      </span>
-          class="text-gray-500"
-          for="sender"
-        >
-          Podpis
-        </label>
-        <input
-          id="sender"
-          v-model="senderValue"
-          class="w-full px-2.5 py-2 border-b-2 border-neutral-300 rounded-md focus:border-neutral-400 hover:border-neutral-500 outline-none"
-          :class="[ isSenderError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
-          type="text"
-          name="sender"
-        >
-        <span
-          v-if="isSenderError"
-          class="text-red-400"
-        >
-          Podpis musi zawierać przynajmniej 3 znaki!
-        </span>
-      </div>
       <BaseButton
         is-reverse
-        class="py-1 w-full"
         :disabled="isButtonDisabled"
       >
         Wyślij
@@ -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 {
+
-    flex-basis: 500px;
+.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,92 +1,82 @@
 <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:
-        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
-        <img
+        class="contact_element_icon"
-          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+        src="/assets/img/instagram.jpg"
-          src="/assets/img/instagram.jpg"
+        alt="Instagram"
-          alt="Instagram"
+      >
-        >
+      <span
-        <span
+        id="instagram"
-          id="instagram"
+        class="contact_element_text"
-          class="font-bold"
+      >
-        >
+        <a
-          <a
+          href="https://www.instagram.com/nikcamii/"
-            href="https://www.instagram.com/nikcamii/"
+          target="_blank"
-            target="_blank"
+          rel="noopener nofollow noreferrer"
-            rel="noopener nofollow noreferrer"
+        >Instagram: @NiKCamii</a>
-            class="hover:underline"
+      </span>
-          >Instagram: @NiKCamii</a>
+    </div>
-        </span>
+    <div class="contact_element">
-      </div>
+      <img
-      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+        class="contact_element_icon"
-        <img
+        src="/assets/img/facebook.jpg"
-          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+        alt="Facebook"
-          src="/assets/img/facebook.jpg"
+      >
-          alt="Facebook"
+      <span
-        >
+        id="facebook"
-        <span
+        class="contact_element_text"
-          id="facebook"
+      >
-          class="font-bold"
+        <a
-        >
+          href="https://www.facebook.com/nikcamii/"
-          <a
+          target="_blank"
-            href="https://www.facebook.com/nikcamii/"
+          rel="noopener nofollow noreferrer"
-            target="_blank"
+        >Facebook: @NiKCamii</a>
-            rel="noopener nofollow noreferrer"
+      </span>
-            class="hover:text-gray-700 hover:underline"
+    </div>
-          >Facebook: @NiKCamii</a>
+    <div class="contact_element">
-        </span>
+      <img
-      </div>
+        class="contact_element_icon"
-      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+        src="/assets/img/twitter.jpg"
-        <img
+        alt="Twitter"
-          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+      >
-          src="/assets/img/twitter.jpg"
+      <span
-          alt="Twitter"
+        id="twitter"
-        >
+        class="contact_element_text"
-        <span
+      >
-          id="twitter"
+        <a
-          class="font-bold"
+          href="https://twitter.com/nikcamii"
-        >
+          target="_blank"
-          <a
+          rel="noopener nofollow noreferrer"
-            href="https://twitter.com/nikcamii"
+        >Twitter: @NiKCamii</a>
-            target="_blank"
+      </span>
-            rel="noopener nofollow noreferrer"
+    </div>
-            class="hover:text-gray-700 hover:underline"
+    <div class="contact_element">
-          >Twitter: @NiKCamii</a>
+      <img
-        </span>
+        class="contact_element_icon"
-      </div>
+        src="/assets/img/gg.png"
-      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+        alt="Gadu-Gadu"
-        <img
+      >
-          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+      <span
-          src="/assets/img/gg.png"
+        id="gg"
-          alt="Gadu-Gadu"
+        class="contact_element_text"
-        >
+      >GG: 38429969</span>
-        <span
+    </div>
-          id="gg"
+    <div class="contact_element">
-          class="font-bold"
+      <img
-        >GG: 38429969</span>
+        class="contact_element_icon"
-      </div>
+        src="/assets/img/user.jpg"
-      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+        alt="E-mail"
-        <img
+      >
-          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+      <span
-          src="/assets/img/user.jpg"
+        id="mailto"
-          alt="E-mail"
+        class="contact_element_text"
-        >
+      >
-        <span
+        <a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a>
-          id="mailto"
+      </span>
-          class="font-bold"
-        >
-          <a
-            href="mailto:contact@kamilcraft.com"
-            class="hover:text-gray-700 hover:underline"
-          >Email: contact@kamilcraft.com</a>
-        </span>
-      </div>
     </div>
   </div>
 </template>
@@ -94,18 +84,51 @@
 <style lang="scss" scoped>
 @import "scss/media";
 
-@screen md {
+.contact_info {
-  .contact_info {
+  flex-basis: 410px;
-    flex-basis: 410px;
-  }
 }
 
-a {
+.info_head {
-  color: inherit;
+  padding: 10px;
+  line-height: 1.6em;
+  font-size: 1.3em;
+  font-weight: bold;
+}
 
-  &:hover {
+.contact_element {
-    -webkit-text-fill-color: #374151;
+  display: flex;
-    color: #374151;
+  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;
+      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,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,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/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">
-    <MailContact />
+    <div class="container">
-    <OtherContact />
+      <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/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,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/'),
-      }
-    }
-  },
 })