Merge branch 'dev'

Author: hfidelis

.eslintrc.cjs

@@ -13,6 +13,7 @@ module.exports = {
     "vue/multi-word-component-names": ["error", {
       "ignores": [
         "Layout",
+        "Container",
       ]
     }]
   },

package-lock.json

@@ -25,7 +25,8 @@
     "vue": "^3.4.15",
     "vue-i18n": "^9.9.1",
     "vue-multiselect": "^3.0.0-beta.3",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vue3-marquee": "^4.2.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",

package.json

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import AvatarBox from '@/components/AvatarBox/AvatarBox.vue'
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: false,
+    default: () => {
+      const { t } = useI18n()
+
+      return t('views.home.author.name')
+    }
+  },
+  role: {
+    type: String,
+    required: false,
+    default: () => {
+      const { t } = useI18n()
+
+      return t('views.home.author.role')
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="author__info">
+    <div class="author__info__text">
+      <h1>
+        {{ props.name }}
+      </h1>
+      <p>
+        {{ props.role }}
+      </p>
+    </div>
+    <AvatarBox />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@/styles/app.scss';
+
+.author__info {
+  @include flex(row, center, center, 2rem);
+  width: 100%;
+
+  @media (max-width: 768px) {
+    @include flex(column-reverse, center, center, 1rem);
+  }
+
+  .author__info__text {
+    text-align: justify;
+
+    > h1 {
+      font-size: $text-3xl;
+    }
+
+    > p {
+      font-size: $text-sm;
+      font-weight: 500;
+    }
+
+    @media (max-width: 768px) {
+      > h1 {
+        font-size: $text-2xl;
+      }
+    }
+  }
+}
+</style>

src/assets/fonts/MonaspaceKrypton.ttf renamed to src/assets/fonts/monaspace_krypton.ttf

@@ -6,7 +6,7 @@ import IconGmail from '@/components/Icons/IconGmail.vue'
 import IconGithub from '@/components/Icons/IconGithub.vue'
 import IconLinkedin from '@/components/Icons/IconLinkedin.vue'
 import FooterLinkIcon from '@/components/FooterLinkIcon/FooterLinkIcon.vue'
-import FooterLink from '@/types/components/FooterLink/FooterLink'
+import FooterLink from '@/types/components/FooterLink/FooterLink.type'
 
 const isDark = useDark()
 

src/assets/images/technologies/angular.png

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useDark } from '@vueuse/core'
-import FooterLink from '@/types/components/FooterLink/FooterLink'
+import FooterLink from '@/types/components/FooterLink/FooterLink.type'
 
 const props = defineProps<FooterLink>()
 const isDark = useDark()
@@ -12,6 +12,7 @@ const resolveLink = (link: string) => {
 
 <template>
   <button
+    type="button"
     role="link"
     class="footer__link__icon"
     :class="isDark ? 'dark__footer__link' : 'light__footer__link'"

src/assets/images/technologies/bootstrap.png

@@ -228,7 +228,7 @@ watch(
   position: absolute;
   top: $header-height;
   left: 0;
-  z-index: 2;
+  z-index: 99;
 
   background-color: rgb(0 0 0 / 85%);
   animation: enter 0.5s ease;

src/assets/images/technologies/bootstrapvue.png

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import LocaleValueType from '@/types/components/LocaleSelect/LocaleValueType'
+import LocaleValue from '@/types/components/LocaleSelect/LocaleValue.type'
 
 const props = defineProps({
   option: {
-    type: Object as () => LocaleValueType,
+    type: Object as () => LocaleValue,
     required: true,
   },
 })

src/assets/images/technologies/django.png

@@ -4,7 +4,7 @@ import { useDark } from '@vueuse/core'
 
 import Locale from '@/types/i18n/Locale'
 import LocaleOption from '@/components/LocaleSelect/LocaleOption/LocaleOption.vue'
-import LocaleValueType from '@/types/components/LocaleSelect/LocaleValueType'
+import LocaleValue from '@/types/components/LocaleSelect/LocaleValue.type'
 
 import ptBRFlag from '@/assets/flags/pt-BR.png'
 import enUSFlag from '@/assets/flags/en-US.png'
@@ -24,19 +24,19 @@ export default {
       'en-US': enUSFlag,
     } as const;
 
-    const selectedLocale = ref<LocaleValueType>({
+    const selectedLocale = ref<LocaleValue>({
       value: this.$i18n.locale as Locale,
       flag: countryFlags[this.$i18n.locale as Locale],
     })
 
-    const locales = this.$i18n.availableLocales.map((k): LocaleValueType => {      
+    const locales = this.$i18n.availableLocales.map((k): LocaleValue => {      
       return {
         value: k as Locale,
         flag: countryFlags[k as Locale],
       }
     })
 
-    const updateLocale = (locale: LocaleValueType): void => {
+    const updateLocale = (locale: LocaleValue): void => {
       selectedLocale.value = locale
       this.$i18n.locale = locale.value
 

src/assets/images/technologies/docker.png

@@ -0,0 +1,151 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import { useDark } from '@vueuse/core'
+import { mdiTools } from '@mdi/js'
+
+import technologies from '@/components/TechStack/technologies'
+import Technology from '@/types/components/TechStack/Technology.type'
+
+const props = defineProps({
+  stack: {
+    type: Array<Technology>,
+    required: false,
+    default: technologies
+  },
+  gradientDark: {
+    type: Array<Number>,
+    required: false,
+    default: () => [18, 18, 18]
+  },
+  gradientLight: {
+    type: Array<Number>,
+    required: false,
+    default: () => [227, 224, 226]
+  },
+  gradientLength: {
+    type: String,
+    required: false,
+    default: '30%'
+  },
+  pauseOnHover: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  title: {
+    type: String,
+    default: () => {
+      const { t } = useI18n()
+
+      return t('components.techStack.title')
+    }
+  }
+})
+
+const isDark = useDark()
+</script>
+
+<template>
+  <div class="author__stack">
+    <div class="stack__title">
+      <SvgIcon
+        size="40"
+        type="mdi"
+        :path="mdiTools"
+      />
+      <h2>
+        {{ props.title }}
+      </h2>
+    </div>
+    <Marquee
+      :gradient="true"
+      :gradient-color="isDark ? props.gradientDark : props.gradientLight"
+      :gradient-length="props.gradientLength"
+      :pause-on-hover="props.pauseOnHover"
+    >
+      <div
+        v-for="(technology, index) in props.stack"
+        v-tooltip="technology.name"
+        class="marquee__item"
+        :key="`MarqueeItem[${index}:${technology.name}]`"
+      >
+        <img
+          :src="technology.image"
+          :alt="technology.name"
+          class="marquee__img"
+          :class="isDark ? 'dark' : 'light'"
+        />
+      </div>
+    </Marquee>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@/styles/app.scss';
+
+.author__stack {
+  @include flex(column, flex-start, center, 1rem);
+  padding: 0rem 2dvw;
+  width: 100%;
+
+  &:has(.marquee__img:hover) .marquee__img:not(:hover) {
+    filter: grayscale(100%);
+  }
+
+  > .stack__title {
+    @include flex(row, center, center, 0.8rem);
+    width: 100%;
+
+    > h2 {
+      font-size: $text-md;
+      font-weight: 500;
+      text-wrap: pretty;
+      width: fit-content;
+    }
+
+    @media screen {
+      @media (max-width: 768px) {
+        @include flex(column, center, center, 0.8rem);
+        text-align: center;
+
+        > h2 {
+          font-size: $text-sm;
+        }
+      }
+    }
+  }
+
+  .marquee__item {
+    padding: 0.8rem;
+    margin-left: 1rem;
+
+   > .marquee__img {
+      max-width: 5rem;
+      max-height: 5rem;
+      transition: all 450ms cubic-bezier(0.23, 1, 0.320, 1);
+
+      &:hover {
+        transform: scale(1.1);
+      }
+
+      &.light {
+        filter: drop-shadow(0 0.2rem 0.4rem rgb(0 0 0 / 0.3))
+      }
+
+      &.dark {
+        filter: drop-shadow(0 0.2rem 0.4rem rgb(255 255 255 / 0.3))
+      }
+    }
+  }
+
+  @media screen {
+    @media (max-width: 1024px) {      
+      padding: 0rem 1dvw;
+    }
+
+    @media (max-width: 768px) {
+      padding: 0rem 0rem;
+    }
+  }
+}
+</style>

src/assets/images/technologies/js.png

@@ -0,0 +1,41 @@
+import Technology from '@/types/components/TechStack/Technology.type'
+
+import javascript from '@/assets/images/technologies/js.png'
+import typescript from '@/assets/images/technologies/ts.png'
+import python from '@/assets/images/technologies/python.png'
+import node from '@/assets/images/technologies/nodejs.png'
+import django from '@/assets/images/technologies/django.png'
+import vue from '@/assets/images/technologies/vue.png'
+import nuxt from '@/assets/images/technologies/nuxt.png'
+import angular from '@/assets/images/technologies/angular.png'
+import bootstrap from '@/assets/images/technologies/bootstrap.png'
+import bootstrapvue from '@/assets/images/technologies/bootstrapvue.png'
+import materialui from '@/assets/images/technologies/materialui.png'
+import sass from '@/assets/images/technologies/sass.png'
+import mysql from '@/assets/images/technologies/mysql.png'
+import postgres from '@/assets/images/technologies/postgres.png'
+import mongo from '@/assets/images/technologies/mongodb.png'
+import redis from '@/assets/images/technologies/redis.png'
+import docker from '@/assets/images/technologies/docker.png'
+
+const technologies: Array<Technology> = [
+    { name: 'JavaScript', image: javascript },
+    { name: 'TypeScript', image: typescript },
+    { name: 'NodeJS', image: node },
+    { name: 'Python', image: python },
+    { name: 'Django', image: django },
+    { name: 'Vue', image: vue },
+    { name: 'NuxtJS', image: nuxt },
+    { name: 'Angular', image: angular },
+    { name: 'Sass/Scss', image: sass },
+    { name: 'Bootstrap', image: bootstrap },
+    { name: 'BootstrapVue', image: bootstrapvue },
+    { name: 'Material UI', image: materialui },
+    { name: 'Docker', image: docker },
+    { name: 'Redis', image: redis },
+    { name: 'MySQL', image: mysql },
+    { name: 'PostgreSQL', image: postgres },
+    { name: 'MongoDB', image: mongo }
+]
+
+export default technologies

src/assets/images/technologies/materialui.png

@@ -0,0 +1,5 @@
+<template>
+  <div class="adaptable__container">
+    <slot />
+  </div>
+</template>