Merge branch 'dev'

Author: hfidelis

index.html

@@ -9,6 +9,7 @@
     <link rel="preload" href="src/assets/fonts/MonaspaceKrypton.ttf" as="font" type="font/ttf" crossorigin>
     <link rel="manifest" href="/site.webmanifest">
     <link rel="canonical" href="https://hfidelis.github.io">
+    <meta name="theme-color" content="#2b3439" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="author" content="Heitor Fidelis">
     <meta name="description" content="Personal portfolio website from Heitor Fidelis a.k.a hfidelis">

package-lock.json

@@ -20,6 +20,7 @@
     "@jamescoyle/vue-icon": "^0.1.2",
     "@mdi/js": "^7.4.47",
     "@vueuse/core": "^10.8.0",
+    "floating-vue": "^5.2.2",
     "sass": "^1.71.0",
     "vue": "^3.4.15",
     "vue-i18n": "^9.9.1",

package.json

@@ -4,6 +4,8 @@
     "description": "Portfolio website from Heitor Fidelis a.k.a hfidelis",
     "start_url": "/",
     "display": "standalone",
+    "background_color": "#2b3439",
+    "theme_color": "#2b3439",
     "icons": [
         {
             "src": "/android-chrome-192x192.png",

public/site.webmanifest

@@ -11,6 +11,8 @@ import {
 
 import { useDark } from '@vueuse/core'
 
+import { RouterLink } from 'vue-router'
+
 import isMobile from '@/helpers/isMobile'
 import LocaleSelect from '@/components/LocaleSelect/LocaleSelect.vue'
 import ThemeToggle from '@/components/ThemeToggle/ThemeToggle.vue'
@@ -45,12 +47,11 @@ watch(
       >
         ~/
       </span>
-      <a
-        href="https://github.com/hfidelis"
-        target="_blank"
+      <RouterLink
+        to="/"
       >
         hfidelis
-      </a>
+      </RouterLink>
       <span
         class="logo__thick"
       >
@@ -162,7 +163,7 @@ watch(
 }
 
 .logo__prefix {
-  background-image: linear-gradient(90deg,$green,$dark-green);
+  background-image: linear-gradient(90deg,$cyan,$dark-cyan);
   background-clip: text;
   -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;
@@ -201,7 +202,7 @@ watch(
     position: absolute;
     width: 100%;
     height: 100%;
-    background-color: $dark-green;
+    background-color: $dark-cyan;
     animation: fadeInOut 1.2s infinite ease;
   }
 }

src/assets/flags/en-US.png

@@ -13,9 +13,11 @@ const props = defineProps({
 
 <template>
   <div class="locale__option">
-    <span class="locale__flag">
-      {{ props.option.flag }}
-    </span>
+    <img
+      :src="props.option.flag"
+      :alt="`${props.option.value} flag image`"
+      class="locale__flag"
+    />
     <span class="locale__value">
       {{ props.option.value }}
     </span>
@@ -27,5 +29,10 @@ const props = defineProps({
 .locale__option {
   @include flex(row, center, start, 0.4rem, nowrap);
   font-weight: 600;
+
+  > .locale__flag {
+    width: 1rem;
+    height: 0.8rem;
+  }
 }
 </style>

src/assets/flags/pt-BR.png

@@ -7,6 +7,9 @@ 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'
+
 export default {
   components: {
     VueMultiselect,
@@ -15,14 +18,14 @@ export default {
   data() {
     const isDark = useDark()
 
-    const selectedLocale: LocaleValueType = {
-      value: this.$i18n.locale as Locale,
-      flag: '🇧🇷',
+    const countryFlags: { [key in Locale]: string } = {
+      'pt-BR': ptBRFlag,
+      'en-US': enUSFlag,
     } as const;
 
-    const countryFlags: { [key in Locale]: string } = {
-      'pt-BR': '🇧🇷',
-      'en-US': '🇺🇸',
+    const selectedLocale: LocaleValueType = {
+      value: this.$i18n.locale as Locale,
+      flag: countryFlags[this.$i18n.locale as Locale],
     } as const;
 
     const locales = this.$i18n.availableLocales.map((k): LocaleValueType => {      
@@ -55,7 +58,6 @@ export default {
     :class="isDark ? 'dark__select' : 'light__select'"
   >
     <VueMultiselect
-      :aria-hidden="true"
       :aria-label="$t('components.localeSelect.ariaLabel')"
       :options="locales"
       :selectLabel="''"

src/assets/images/404.svg

@@ -33,28 +33,11 @@ const toggleDark = useToggle(isDark)
     >
       {{ $t('components.themeToggle.label') }}
     </span>
-    <Transition name="toggle__transition">
-      <template
-        v-if="isDark"
-      >
-        <SvgIcon
-          :aria-hidden="true"
-          :path="mdiWeatherSunny"
-          type="mdi"
-          size="30"
-        />
-      </template>
-      <template
-        v-else
-      >
-        <SvgIcon
-          :aria-hidden="true"
-          :path="mdiWeatherNight"
-          type="mdi"
-          size="30"
-        />
-      </template>
-    </Transition>
+    <SvgIcon
+      :path="isDark ? mdiWeatherSunny : mdiWeatherNight"
+      type="mdi"
+      size="30"
+    />
   </button>
 </template>
 
@@ -95,14 +78,4 @@ const toggleDark = useToggle(isDark)
     color: $primary-dark;
   }
 }
-
-.toggle__transition-enter-active {
-  transition: all 0.5s ease-out;
-}
-
-.toggle__transition-enter-from,
-.toggle__transition-leave-to {
-  transform: translateX(1.2rem);
-  opacity: 0;
-}
 </style>

src/components/Header/HeaderComponent.vue

@@ -1,17 +1,17 @@
 import { ref, watch, readonly } from 'vue'
 
-const isMobile = ref(false)
-
-const windowWidth = ref(window.innerWidth)
+const windowWidth = ref<number>(window.innerWidth)
 
 window.addEventListener('resize', () => {
   windowWidth.value = window.innerWidth
 })
 
+const isMobile = ref<boolean>(windowWidth.value < 768)
+
 watch(
   () => windowWidth.value,
   () => {
-    isMobile.value = windowWidth.value < 768
+    isMobile.value = (windowWidth.value < 768)
   },
 )
 

src/components/LocaleSelect/LocaleOption/LocaleOption.vue

@@ -14,6 +14,11 @@
         "home": {
             "title": "Under construction...",
             "subtitle": "Soon you will be able to find here some info about me and possibly some posts."
+        },
+        "notFound": {
+            "title": "Oops! It looks like this page doesn't exists...",
+            "subtitle": "Maybe you typed the wrong address or the page has been removed.",
+            "back": "Back to home page"
         }
     }
 }

src/components/LocaleSelect/LocaleSelect.vue

@@ -14,6 +14,11 @@
         "home": {
             "title": "Em construção...",
             "subtitle": "Em breve você poderá encontrar por aqui informações sobre mim e possivelmente algumas postagens."
+        },
+        "notFound": {
+            "title": "Ops! Parece que esta página não existe...",
+            "subtitle": "Talvez você tenha digitado o endereço errado ou a página foi removida.",
+            "back": "Voltar para a página inicial"
         }
     }
 }

src/components/ThemeToggle/ThemeToggle.vue

@@ -1,6 +1,9 @@
 import '@/styles/app.scss'
 
+import 'floating-vue/dist/style.css'
+
 import SvgIcon from '@jamescoyle/vue-icon'
+import FloatingVue from 'floating-vue'
 
 import { createApp } from 'vue'
 import App from '@/App.vue'
@@ -10,5 +13,6 @@ import i18n from '@/i18n'
 createApp(App)
   .use(router)
   .use(i18n)
+  .use(FloatingVue)
   .component('SvgIcon', SvgIcon)
   .mount('#app')

src/helpers/isMobile.ts

@@ -8,6 +8,11 @@ const router = createRouter({
       name: 'Home',
       component: () => import('@/views/HomeView/HomeView.vue')
     },
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'ErrorView',
+      component: () => import('@/views/NotFoundView/NotFound.vue'),
+  }
   ]
 })
 

src/locales/en-US.json

@@ -8,7 +8,7 @@
 @font-face {
     font-family: 'Monaspace Krypton', monospace;
     src: url('../assets/fonts/MonaspaceKrypton.ttf') format('truetype');
-    font-display: optional;
+    font-display: block;
 }
 
 * {
@@ -19,4 +19,8 @@
 
 html, body {
     min-height: 100dvh;
+}
+
+body {
+    overflow-x: hidden;
 }

src/locales/pt-BR.json

@@ -20,8 +20,9 @@ $text-lg: 1.50rem;
 $text-xl: 1.75rem;
 $text-xxl: 2rem;
 
-$green: #10d910;
-$dark-green: #1c8c1c;
+$cyan: #27debf;
+$dark-cyan: #21ac95;
+$darker-cyan: #166e60;
 
 $header-height: 10vh;
 $header-item-width: 8.3rem;