Merge pull request #1 from ilgarabdullazade/version_1.1.0

Version 1.1.0
ilgarabdullazade · Oct 13, 2024 · 2d410c9 · 2d410c9
2 parents de4a224 + 8ac6518
commit 2d410c9
Show file tree

Hide file tree

Showing 66 changed files with 8,921 additions and 11,086 deletions.
diff --git a/.npmrc b/.npmrc
diff --git a/.prettierrc b/.prettierrc
@@ -1,4 +1,5 @@
 {
+  "plugins": ["prettier-plugin-tailwindcss"],
   "semi": false,
   "singleQuote": true
 }
diff --git a/app.vue b/app.vue
@@ -28,7 +28,7 @@ const headers = useRequestHeaders([
   'user-agent',
 ])
 
-if (process.server) {
+if (import.meta.server) {
   await useMyFetch(ApiEndpoints.VISIT, {
     method: 'POST',
     params: {
@@ -48,14 +48,13 @@ useSeoMeta({
   ogDescription: seoInfo.value?.meta_description,
 })
 
-defineOgImage({
-  component: 'Main',
+defineOgImageComponent('Main', {
   description: seoInfo.value?.meta_description,
 })
 </script>
 
 <template>
-  <Html :lang="i18nHead.htmlAttrs!.lang" :dir="i18nHead.htmlAttrs!.dir">
+  <Html :lang="i18nHead.htmlAttrs?.lang" :dir="i18nHead.htmlAttrs?.dir">
     <Body>
       <div class="app">
         <LayoutsParallaxBackground class="app__parallax" />
@@ -103,6 +102,6 @@ defineOgImage({
 
 .slide-enter-from,
 .slide-leave-to {
-  @apply opacity-0 -translate-x-1/2;
+  @apply -translate-x-1/2 opacity-0;
 }
 </style>
diff --git a/assets/scss/modules/global/_base.scss b/assets/scss/modules/global/_base.scss
@@ -1,9 +1,9 @@
 html {
-  @apply relative w-full h-full min-h-full scroll-smooth;
+  @apply relative h-full min-h-full w-full scroll-smooth;
 }
 
 body {
-  @apply scrollbar-thumb-primary-300 scrollbar-thin scrollbar-track-background min-w-[360px] text-sm text-dark font-normal w-full min-h-full bg-primary max-lg:bg-background bg-repeat bg-fixed overflow-y-auto overflow-x-hidden;
+  @apply min-h-full w-full min-w-[360px] overflow-y-auto overflow-x-hidden bg-primary bg-fixed bg-repeat text-sm font-normal text-dark scrollbar-thin scrollbar-track-background scrollbar-thumb-primary-300 max-lg:bg-background;
 }
 
 img {

diff --git a/assets/scss/modules/vendors/_formkit.scss b/assets/scss/modules/vendors/_formkit.scss
@@ -6,11 +6,11 @@
   }
 
   &-label {
-    @apply inline-flex text-base font-semibold mb-0.5;
+    @apply mb-0.5 inline-flex text-base font-semibold;
   }
 
   &-input {
-    @apply resize-none h-full rounded-md text-base border-2 border-solid border-dark-200 py-2.5 px-4 w-full outline-none;
+    @apply h-full w-full resize-none rounded-md border-2 border-solid border-dark-200 px-4 py-2.5 text-base outline-none;
   }
 
   &-messages {

diff --git a/assets/scss/modules/vendors/_swiper.scss b/assets/scss/modules/vendors/_swiper.scss
@@ -1,16 +1,16 @@
 .swiper-pagination-line {
   .swiper-pagination-bullet {
-    @apply bg-dark-300 h-1 rounded w-5 transition-all #{!important};
+    @apply h-1 w-5 rounded bg-dark-300 transition-all #{!important};
   }
   .swiper-pagination-bullet-active {
-    @apply bg-primary w-8 #{!important};
+    @apply w-8 bg-primary #{!important};
   }
 }
 
 .swiper-pagination-portfolio {
   @apply pr-4 text-right #{!important};
   .swiper-pagination-bullet {
-    @apply bg-background opacity-100 h-4 rounded-full w-4 border-2 border-solid border-dark-300 #{!important};
+    @apply h-4 w-4 rounded-full border-2 border-solid border-dark-300 bg-background opacity-100 #{!important};
   }
   .swiper-pagination-bullet-active {
     @apply bg-primary #{!important};

diff --git a/assets/scss/tailwind.scss b/assets/scss/tailwind.scss
@@ -9,7 +9,7 @@
   h4,
   h5,
   h6 {
-    @apply text-dark-900 font-bold;
+    @apply font-bold text-dark-900;
   }
   h1 {
     @apply text-5xl leading-tight max-lg:text-4xl;

diff --git a/components/contact/Form/index.vue b/components/contact/Form/index.vue
@@ -2,7 +2,7 @@
 import type { PluginConfigs } from '@formkit/vue'
 import type { FormKitNode } from '@formkit/core'
 import { reset } from '@formkit/core'
-import { ApiEndpoints } from '~/utils/apiEndpoints'
+import { ApiEndpoints } from '@/utils/apiEndpoints'
 
 const submitted = ref(false)
 
@@ -19,27 +19,27 @@ const config = inject<PluginConfigs>(Symbol.for('FormKitConfig'))
 const { locale } = useI18n()
 
 const setFormLocale = () => {
-  if (config) config!.locale = locale.value
+  if (config) config.locale = locale.value
 }
 onMounted(() => {
   setFormLocale()
 })
 
 watch(
   () => locale.value,
-  () => setFormLocale()
+  () => setFormLocale(),
 )
 </script>
 
 <template>
   <div class="contact-form">
     <FormKit
+      id="contactForm"
       class="contact-form__form"
       type="form"
-      id="contactForm"
+      :actions="false"
       @submit="submitHandler"
       @input="submitted = false"
-      :actions="false"
     >
       <div class="contact-form__wrapper">
         <SiteTitle class="contact-form__title">{{
@@ -94,7 +94,7 @@ watch(
         >
       </div>
     </FormKit>
-    <div class="contact-form__alert" v-if="submitted">
+    <div v-if="submitted" class="contact-form__alert">
       {{ $t('contact.success') }}
     </div>
   </div>
@@ -120,13 +120,13 @@ watch(
   // .contact-form__body
 
   &__body {
-    @apply flex gap-5 mb-7 max-sm:flex-col max-sm:gap-2;
+    @apply mb-7 flex gap-5 max-sm:flex-col max-sm:gap-2;
   }
 
   // .contact-form__inputs
 
   &__inputs {
-    @apply flex-1 flex flex-col gap-1.5 max-sm:gap-2;
+    @apply flex flex-1 flex-col gap-1.5 max-sm:gap-2;
   }
 
   // .contact-form__textarea
@@ -151,7 +151,7 @@ watch(
   // .contact-form__alert
 
   &__alert {
-    @apply text-green-500 mt-2;
+    @apply mt-2 text-green-500;
   }
 }
 </style>
diff --git a/components/contact/Info/index.vue b/components/contact/Info/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { UserData } from '~/types'
+import type { UserData } from '@/types'
 
 const { data: userData } = await useMyFetch<UserData>(
-  ApiEndpoints.FREELANCER_INFO
+  ApiEndpoints.FREELANCER_INFO,
 )
 </script>
 
@@ -50,7 +50,7 @@ const { data: userData } = await useMyFetch<UserData>(
   // .contact-info__item
 
   &__item {
-    @apply flex gap-3 items-center;
+    @apply flex items-center gap-3;
   }
 
   // .contact-info__item--icon

diff --git a/components/home/About/Avatar/index.vue b/components/home/About/Avatar/index.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 interface Props {
-  avatar: string
+  avatar: string | undefined
 }
 
-const { public: publicEnv } = useRuntimeConfig()
-
 const { avatar } = defineProps<Props>()
 
+const { public: publicEnv } = useRuntimeConfig()
+
 const { parallaxStyle } = useParallaxBackground()
 
 const img = useImage()
@@ -21,7 +21,7 @@ const backgroundImageStyles = computed(() => {
       modifiers: {
         format: 'webp',
       },
-    }
+    },
   )
   return {
     backgroundImage: `url(${imgUrl})`,
@@ -32,10 +32,12 @@ const backgroundImageStyles = computed(() => {
 <template>
   <div class="about-avatar">
     <div class="about-avatar__wrapper">
-      <div
-        class="about-avatar__image"
-        :style="{ ...parallaxStyle, ...backgroundImageStyles }"
-      />
+      <ClientOnly>
+        <div
+          class="about-avatar__image"
+          :style="{ ...parallaxStyle, ...backgroundImageStyles }"
+        />
+      </ClientOnly>
     </div>
   </div>
 </template>
@@ -45,13 +47,13 @@ const backgroundImageStyles = computed(() => {
   // .about-avatar__wrapper
 
   &__wrapper {
-    @apply relative h-full aspect-square border-[1.125rem] rounded-full border-solid border-background overflow-hidden shadow-avatar;
+    @apply relative aspect-square h-full overflow-hidden rounded-full border-[1.125rem] border-solid border-background shadow-avatar;
   }
 
   // .about-avatar__image
 
   &__image {
-    @apply absolute w-auto h-auto -top-5 -left-5 -right-5 -bottom-5 transition-all duration-0 bg-cover bg-no-repeat;
+    @apply absolute -bottom-5 -left-5 -right-5 -top-5 h-auto w-auto bg-cover bg-no-repeat transition-all duration-0;
   }
 }
 </style>
diff --git a/components/home/About/Info/index.vue b/components/home/About/Info/index.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import type { AboutInfo } from '~/types'
-
-const { public: publicEnv } = useRuntimeConfig()
-
-const localePath = useLocalePath()
+import type { AboutInfo } from '@/types'
 
 interface Props {
   info: AboutInfo
 }
+
 const { info } = defineProps<Props>()
+
+const { public: publicEnv } = useRuntimeConfig()
+
+const localePath = useLocalePath()
 </script>
 
 <template>
@@ -25,7 +26,7 @@ const { info } = defineProps<Props>()
             disableOnInteraction: false,
           }"
         >
-          <SwiperSlide v-for="profession in info.profession" :key="profession">
+          <SwiperSlide v-for="profession of info.profession" :key="profession">
             <span>{{ profession }}</span>
           </SwiperSlide>
         </Swiper>
@@ -66,7 +67,7 @@ const { info } = defineProps<Props>()
   // .about-info__position
 
   &__position {
-    @apply text-base font-light text-dark-300 mb-0.5 max-w-full max-lg:mb-1.5;
+    @apply mb-0.5 max-w-full text-base font-light text-dark-300 max-lg:mb-1.5;
   }
 
   // .about-info__title

diff --git a/components/home/About/index.vue b/components/home/About/index.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { UserData, AboutInfo } from '~/types'
-import { ApiEndpoints } from '~/utils/apiEndpoints'
+import type { UserData, AboutInfo } from '@/types'
+import { ApiEndpoints } from '@/utils/apiEndpoints'
 
 const { data: userData } = await useMyFetch<UserData>(
-  ApiEndpoints.FREELANCER_INFO
+  ApiEndpoints.FREELANCER_INFO,
 )
 
 const aboutData: AboutInfo = {
@@ -17,7 +17,7 @@ const aboutData: AboutInfo = {
 <template>
   <section class="about">
     <div class="about__wrapper">
-      <HomeAboutAvatar :avatar="userData!.avatar" class="about__avatar" />
+      <HomeAboutAvatar :avatar="userData?.avatar" class="about__avatar" />
       <HomeAboutInfo :info="aboutData" class="about__info" />
     </div>
   </section>
@@ -28,19 +28,19 @@ const aboutData: AboutInfo = {
   // .about__wrapper
 
   &__wrapper {
-    @apply items-center lg:grid lg:grid-cols-12 lg:gap-7 my-4 lg:max-w-4xl lg:mx-auto;
+    @apply my-4 items-center lg:mx-auto lg:grid lg:max-w-4xl lg:grid-cols-12 lg:gap-7;
   }
 
   // .about__avatar
 
   &__avatar {
-    @apply lg:col-span-5 p-3 max-lg:max-w-sm max-lg:mx-auto max-lg:mb-5;
+    @apply p-3 max-lg:mx-auto max-lg:mb-5 max-lg:max-w-sm lg:col-span-5;
   }
 
   // .about__info
 
   &__info {
-    @apply lg:col-span-7 self-center lg:pl-4;
+    @apply self-center lg:col-span-7 lg:pl-4;
   }
 }
 </style>
diff --git a/components/home/Education/Item/index.vue b/components/home/Education/Item/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Occupation } from '~/types'
+import type { Occupation } from '@/types'
 
 interface Props {
   education: Occupation
@@ -34,14 +34,14 @@ const { education } = defineProps<Props>()
   // .education-item__wrapper
 
   &__wrapper {
-    @apply relative pl-10 py-8 border-b-2 border-solid border-dark-50;
+    @apply relative border-b-2 border-solid border-dark-50 py-8 pl-10;
     @apply before:absolute before:bottom-0 before:left-4 before:h-full before:w-0.5 before:bg-dark-50;
   }
 
   // .education-item__header
 
   &__header {
-    @apply relative flex gap-2 items-center mb-4;
+    @apply relative mb-4 flex items-center gap-2;
   }
 
   // .education-item__period

diff --git a/components/home/Education/index.vue b/components/home/Education/index.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import type { Occupation } from '~/types'
+import type { Occupation } from '@/types'
 
 const { data: educationList } = await useMyFetch<Occupation[]>(
-  ApiEndpoints.EDUCATION
+  ApiEndpoints.EDUCATION,
 )
 </script>
 
@@ -14,7 +14,7 @@ const { data: educationList } = await useMyFetch<Occupation[]>(
       }}</SiteTitle>
       <div class="education__body">
         <HomeEducationItem
-          v-for="education in educationList"
+          v-for="education of educationList"
           :key="education.title"
           :education="education"
           class="education__item"

diff --git a/components/home/Execute/Item/index.vue b/components/home/Execute/Item/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { WhatIDO } from '~/types'
+import type { WhatIDO } from '@/types'
 
 interface Props {
   execute: WhatIDO
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ @@
       h4,
       h5,
       h6 {
-        @apply text-dark-900 font-bold;
+        @apply font-bold text-dark-900;
       }
       h1 {
         @apply text-5xl leading-tight max-lg:text-4xl;
@@ Expand Down @@