Merge pull request #5 from hfidelis/@hfidelis/fixes

@hfidelis/fixes

Author: hfidelis

public/robots.txt

@@ -0,0 +1,3 @@
+User-agent: *
+Disallow:
+Allow: /

src/App.vue

@@ -37,5 +37,4 @@ import AppFooter from '@/components/Footer/AppFooter.vue'
 .fade-leave-to {
   opacity: 0;
 }
-</style>
-./components/Header/Header.vue
+</style>

src/components/AvatarBox/AvatarBox.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import avatar from '@/assets/images/me.png'
-
 import { useDark } from '@vueuse/core'
+import avatar from '@/assets/images/me.png'
 
 const isDark = useDark()
 
@@ -32,6 +31,8 @@ const props = defineProps({
     <img
       :src="props.source"
       :alt="props.alt"
+      height="244"
+      width="270"
       class="avatar__content"
       v-tooltip="props.tooltip"
     >
@@ -43,8 +44,8 @@ const props = defineProps({
 
 .avatar__wrapper {
   @include flex(row, center, center);
-  height: 100%;
-  width: fit-content;
+  height: 15.505rem;
+  width: 16.875rem;
 
   overflow: hidden;
 
@@ -53,13 +54,22 @@ const props = defineProps({
 
   &:hover {
     .avatar__content {
-      animation: headBalance 0.675s ease;
+      transform: rotate(5deg) scale(1.1);
+    }
+  }
+
+  @media screen {
+    @media (max-width: 768px) {
+      height: 11.485rem;
+      width: 12.5rem;
     }
   }
 }
 
 .avatar__content {
-  max-width: 250px;
+  max-width: 100%;
+  max-height: 100%;
+  transition: all 0.45s ease;
 }
 
 .dark__avatar {
@@ -79,16 +89,4 @@ const props = defineProps({
 
   background: radial-gradient(circle, $cyan, $darker-cyan 65%, $black 95%);
 }
-
-@keyframes headBalance {
-  0% {
-    transform: rotate(0deg);
-  }
-  50% {
-    transform: rotate(5deg) scale(1.075) rotateZ(-5deg);
-  }
-  100% {
-    transform: rotate(0deg);
-  }
-}
 </style>

src/components/Footer/AppFooter.vue

@@ -1,12 +1,11 @@
 <script lang="ts" setup>
 import { useDark } from '@vueuse/core'
 
-import IconVue from '../Icons/IconVue.vue'
-import IconGmail from '../Icons/IconGmail.vue'
+import IconVue from '@/components/Icons/IconVue.vue'
+import IconGmail from '@/components/Icons/IconGmail.vue'
 import IconGithub from '@/components/Icons/IconGithub.vue'
-import IconLinkedin from '../Icons/IconLinkedin.vue'
-import FooterLinkIcon from '../FooterLinkIcon/FooterLinkIcon.vue'
-
+import IconLinkedin from '@/components/Icons/IconLinkedin.vue'
+import FooterLinkIcon from '@/components/FooterLinkIcon/FooterLinkIcon.vue'
 import FooterLink from '@/types/components/FooterLink/FooterLink'
 
 const isDark = useDark()
@@ -41,9 +40,9 @@ const footerLinks: Array<FooterLink> = [
       <section
         class="footer__title"
       >
-        <h3>
+        <h1>
           {{ $t('components.footer.title') }}
-        </h3>
+        </h1>
       </section>
       <section
         class="footer__links"

src/components/FooterLinkIcon/FooterLinkIcon.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import FooterLink from '@/types/components/FooterLink/FooterLink'
 import { useDark } from '@vueuse/core'
+import FooterLink from '@/types/components/FooterLink/FooterLink'
 
 const props = defineProps<FooterLink>()
 const isDark = useDark()
@@ -15,7 +15,7 @@ const resolveLink = (link: string) => {
     role="link"
     class="footer__link__icon"
     :class="isDark ? 'dark__footer__link' : 'light__footer__link'"
-    :aria-label="$t('components.footerLinkIcon.ariaLabel')"    
+    :aria-label="`${$t('components.footerLinkIcon.ariaLabel')} ${props.label}`"
     @click="resolveLink(`${props.link}`)"
   >
     <component
@@ -26,7 +26,7 @@ const resolveLink = (link: string) => {
     <span
       class="footer__link__label"
     >
-      {{ label }}
+      {{ props.label }}
     </span>
   </button>
 </template>

src/components/Header/AppHeader.vue

@@ -1,17 +1,8 @@
 <script setup lang="ts">
-import {
-  ref,
-  watch,
-} from 'vue'
-
-import {
-  mdiMenuOpen,
-  mdiWindowClose,
-} from '@mdi/js'
-
+import { ref, watch } from 'vue'
 import { useDark } from '@vueuse/core'
-
 import { RouterLink } from 'vue-router'
+import { mdiMenuOpen, mdiWindowClose } from '@mdi/js'
 
 import isMobile from '@/helpers/isMobile'
 import LocaleSelect from '@/components/LocaleSelect/LocaleSelect.vue'
@@ -64,8 +55,13 @@ watch(
       class="app__header__actions"
     >
       <button
-        class="menu__button"
         v-if="isMobile"
+        class="menu__button"
+        :aria-label="
+            isOpen ?
+            $t('components.header.menuButton.actions.close') :
+            $t('components.header.menuButton.actions.open')
+        "
       >
         <SvgIcon
           :path="isOpen ? mdiWindowClose : mdiMenuOpen"

src/components/LocaleSelect/LocaleSelect.vue

@@ -1,15 +1,16 @@
 <script lang="ts">
+import { ref } from 'vue'
 import { useDark } from '@vueuse/core'
 
-import VueMultiselect from 'vue-multiselect'
-
 import Locale from '@/types/i18n/Locale'
 import LocaleOption from '@/components/LocaleSelect/LocaleOption/LocaleOption.vue'
 import LocaleValueType from '@/types/components/LocaleSelect/LocaleValueType'
 
 import ptBRFlag from '@/assets/flags/pt-BR.png'
 import enUSFlag from '@/assets/flags/en-US.png'
 
+import VueMultiselect from 'vue-multiselect'
+
 export default {
   components: {
     VueMultiselect,
@@ -23,10 +24,10 @@ export default {
       'en-US': enUSFlag,
     } as const;
 
-    const selectedLocale: LocaleValueType = {
+    const selectedLocale = ref<LocaleValueType>({
       value: this.$i18n.locale as Locale,
       flag: countryFlags[this.$i18n.locale as Locale],
-    } as const;
+    })
 
     const locales = this.$i18n.availableLocales.map((k): LocaleValueType => {      
       return {
@@ -35,19 +36,37 @@ export default {
       }
     })
 
+    const updateLocale = (locale: LocaleValueType): void => {
+      selectedLocale.value = locale
+      this.$i18n.locale = locale.value
+
+      localStorage.setItem('i18nLocale', locale.value)      
+    }
+
+    const checkStorageLocale = (): void => {
+      const storageLocale = localStorage.getItem('i18nLocale')
+
+      if (storageLocale) {
+        selectedLocale.value = {
+          value: storageLocale as Locale,
+          flag: countryFlags[storageLocale as Locale],
+        }
+        this.$i18n.locale = storageLocale as Locale
+      }
+    }
+
     return {
       isDark,
       locales,
+      updateLocale,
       countryFlags,
       selectedLocale,
+      checkStorageLocale,
     }
   },
-  methods: {
-    updateLocale(locale: LocaleValueType): void {
-      this.selectedLocale = locale
-      this.$i18n.locale = locale.value
-    }
-  },
+  created() {
+    this.checkStorageLocale()
+  }
 }
 
 </script>

src/layout/Layout.vue

@@ -2,8 +2,4 @@
   <main class="view__container">
     <slot />
   </main>
-</template>
-
-<style lang="scss" scoped>
-@import '@/styles/app.scss';
-</style>
+</template>

src/locales/pt-BR.json

@@ -16,6 +16,14 @@
         },
         "footerLinkIcon": {
             "ariaLabel": "Abrir link de contato"
+        },
+        "header": {
+            "menuButton": {
+                "actions": {
+                    "open": "Abrir menu",
+                    "close": "Fechar menu"
+                }
+            }
         }
     },
     "views": {

src/views/HomeView/HomeView.vue

@@ -25,12 +25,12 @@ main {
   text-align: center;
   
   > h1 {
-    font-size: $text-xxl;
+    font-size: $text-xl;
     font-weight: 700;
   }
 
   > p {
-    font-size: $text-md;
+    font-size: $text-sm;
     font-weight: 500;
     text-wrap: pretty;
     max-width: 30rem;

src/views/NotFoundView/NotFound.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import Layout from '@/layout/Layout.vue';
-import notFound from '@/assets/images/404.svg'
-
 import { RouterLink } from 'vue-router'
+
+import Layout from '@/layout/Layout.vue'
+import notFound from '@/assets/images/404.svg'
 </script>
 
 <template>