DevdouglasGfs · DevdouglasGfs · Aug 21, 2025 · Aug 21, 2025 · Aug 21, 2025 · Aug 21, 2025
diff --git a/@types/projects.ts b/@types/projects.ts
@@ -0,0 +1,5 @@
+export enum ProjectStatus {
+  FINISHED = "Finalizado",
+  IN_PROGRESS = "Em andamento",
+  UNDER_MAINTENANCE = "Em manutenção",
+}
diff --git a/README.md b/README.md
@@ -1,21 +1,22 @@
 # Douglas S. Silva - Portfólio
-It is the repository of my portfolio website and contains information about its structure, features and information.
-<hr/>
 
-[![Netlify Status](https://api.netlify.com/api/v1/badges/b55ca4e7-5a23-4911-b116-54b37689e68a/deploy-status)](https://devdouglasportfolio.netlify.app/)
+It is the repository of my portfolio website and contains information about its structure, features and information.
 
+<hr/>
 
 ## 🚀 Technologies and Tools
+
 I used the following technologies and tools:
+
 - Nuxt.js;
 - Vue;
 - Tailwind;
 - TypeScript;
 - Figma(design);
 - Netlify(for deploy)
 
-
 ## 🔖 Contents
+
 - About Me;
 - Projects;
 - Certifications;

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
@@ -3,49 +3,49 @@
 @tailwind utilities;
 
 @layer base {
-    body {
-        @apply max-w-full overflow-x-hidden min-h-screen bg-ntl-900 text-ntl-0 font-secundary;
-    }
+  body {
+    @apply max-w-full overflow-x-hidden min-h-screen bg-ntl-900 text-ntl-0 font-secondary;
+  }
 }
 
 @layer components {
-    .button {
-        @apply px-6 pt-4 pb-2 rounded-sd capitalize text-base lg:text-md leading-tight cursor-pointer
-    }
+  .button {
+    @apply px-6 pt-4 pb-2 rounded-sd capitalize text-base lg:text-md leading-tight cursor-pointer;
+  }
 
-    .portfolio-section {
-        @apply px-6 lg:px-16;
-    }
+  .portfolio-section {
+    @apply px-6 lg:px-16;
+  }
 
-    .section-with-observer {
-        @apply transition-transform duration-500 ease-in translate-y-16;
-    }
+  .section-with-observer {
+    @apply transition-transform duration-500 ease-in translate-y-16;
+  }
 }
 
 @layer utilities {
-    .title {
-        @apply font-primary text-2xl capitalize leading-tight;
-    }
-
-    .merge-edges-with-body {
-        --direction: right;
-        background-image: linear-gradient(to var(--direction), var(--tw-gradient-stops));
-        @apply absolute inset-y-0 w-10 from-ntl-900 to-ntl-900/0;
-    }
+  .title {
+    @apply font-primary text-2xl capitalize leading-tight;
+  }
+
+  .merge-edges-with-body {
+    --direction: right;
+    background-image: linear-gradient(to var(--direction), var(--tw-gradient-stops));
+    @apply absolute inset-y-0 w-10 from-ntl-900 to-ntl-900/0;
+  }
 }
 
 p a {
-    @apply italic font-semibold text-primary-400 hover:active:underline hover:active:underline-offset-4 decoration-dashed tracking-wide;
+  @apply italic font-semibold text-primary-400 hover:active:underline hover:active:underline-offset-4 decoration-dashed tracking-wide;
 }
 
 .hide-scrollbar {
-    overflow: auto;
-    -ms-overflow-style: none;
-    /* for Internet Explorer, Edge */
-    scrollbar-width: none;
-    -webkit-overflow-scrolling: touch;
-
-    &::-webkit-scrollbar {
-        display: none;
-    }
-}
+  overflow: auto;
+  -ms-overflow-style: none;
+  /* for Internet Explorer, Edge */
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
diff --git a/bun.lockb b/bun.lockb
diff --git a/components/about-me.vue b/components/about-me.vue
@@ -97,17 +97,27 @@ watch(sectionVisible, (v) => {
       <div class="flex flex-col gap-3 md:landscape:col-span-1">
         <h2 class="title lg:text-4xl max-sm:text-lg">Quem sou eu</h2>
         <p class="text-base max-sm:text-sm max-w-prose leading-relaxed">
-          Eu sou um programador Front-End com cerca de 4 anos de experiências prática realizadas com e sem um time e
-          atualmente atuo como estágiario no
-          <NuxtLink to="https://instituto.taqtile.com.br/">instituto Taqtile</NuxtLink> . Já trabalhei com diversas
-          tecnologias e sou experiente em <NuxtLink to="https://vuejs.org/">Vue.js</NuxtLink>. O meu foco desde que
-          comecei é me tornar um programador Full-Stack e, posteriormente, explorar outros campos da programação.
+          Eu sou um programador Front-End com cerca de 4 anos de experiências prática realizadas com e sem um time. Já
+          trabalhei com diversas tecnologias e sou experiente com
+          <NuxtLink
+            target="_blank"
+            to="https://react.dev/"
+            >React.js</NuxtLink
+          >
+          e
+          <NuxtLink
+            target="_blank"
+            to="https://vuejs.org/"
+            >Vue.js</NuxtLink
+          >. O meu foco desde que comecei é me tornar um programador Full-Stack e, posteriormente, explorar outros
+          campos da programação.
         </p>
         <NuxtImg
           class="self-stretch h-[300px] lg:h-[400px] object-scale-down w-full"
           src="/assets/images/characters/pondering.png"
           alt=""
-          placeholder />
+          placeholder
+          loading="lazy" />
       </div>
       <div class="self-stretch flex flex-col gap-3 basis-1/2">
         <h3 class="font-bold leading-tight text-md">Resumo</h3>

diff --git a/components/common/card-info.vue b/components/common/card-info.vue
@@ -15,11 +15,11 @@ export type CardProps = {
     <Icon
       v-if="icon && iconLg"
       :name="icon"
-      class="text-secundary-400 text-3xl transition-colors duration-200 group-hover/button:text-secundary-300" />
+      class="text-secondary-400 text-3xl transition-colors duration-200 group-hover/button:text-secondary-300" />
     <Icon
       v-else-if="icon"
       :name="icon"
-      class="text-lg text-secundary-400 transition-colors duration-200 group-hover/button:text-secundary-300" />
+      class="text-lg text-secondary-400 transition-colors duration-200 group-hover/button:text-secondary-300" />
     {{ title }}
   </div>
   <div
@@ -28,11 +28,11 @@ export type CardProps = {
     <Icon
       v-if="icon && iconLg"
       :name="icon"
-      class="text-secundary-400 text-3xl transition-colors duration-200 group-hover/button:text-secundary-300" />
+      class="text-secondary-400 text-3xl transition-colors duration-200 group-hover/button:text-secondary-300" />
     <Icon
       v-else-if="icon"
       :name="icon"
-      class="text-lg text-secundary-400 transition-colors duration-200 group-hover/button:text-secundary-300" />
+      class="text-lg text-secondary-400 transition-colors duration-200 group-hover/button:text-secondary-300" />
     <span class="-mb-1">{{ title }}</span>
   </div>
 </template>
diff --git a/components/common/certification-block.vue b/components/common/certification-block.vue
@@ -4,7 +4,8 @@ import type { CertificationDTO } from "../certifications-section.vue"
 defineProps<CertificationDTO>()
 </script>
 <template>
-  <article class="flex flex-col w-full md:landscape:grid lg:grid md:landscape:grid-cols-2 lg:grid-cols-2 gap-6 lg:gap-16">
+  <article
+    class="flex flex-col w-full md:landscape:grid lg:grid md:landscape:grid-cols-2 lg:grid-cols-2 gap-6 lg:gap-16">
     <div class="flex flex-col self-stretch gap-3 md:landscape:col-span-1">
       <div class="flex flex-wrap items-center gap-1 justify-between self-stretch">
         <h3 class="text-md lg:text-2xl capitalize font-bold leading-normal">{{ title }}</h3>
@@ -21,7 +22,7 @@ defineProps<CertificationDTO>()
           <span v-else>Até o momento</span>
         </div>
       </div>
-      <div class="relative isolate self-stretch rounded-xl overflow-hidden ring-1 ring-secundary-400">
+      <div class="relative isolate self-stretch rounded-xl overflow-hidden ring-1 ring-secondary-400">
         <NuxtImg
           v-if="image"
           class="!aspect-[16/9] object-cover w-full rounded-xl"

diff --git a/components/common/project-info.vue b/components/common/project-info.vue
@@ -7,7 +7,8 @@ const showTechnicalDetails = ref(true)
 const toggleDetails = useToggle(showTechnicalDetails)
 </script>
 <template>
-  <article class="flex flex-col w-full max-w-full md:landscape:grid lg:grid md:landscape:grid-cols-2 lg:grid-cols-2 gap-6 lg:gap-16 group">
+  <article
+    class="flex flex-col w-full max-w-full md:landscape:grid lg:grid md:landscape:grid-cols-2 lg:grid-cols-2 gap-6 lg:gap-16 group">
     <div class="flex flex-col self-stretch gap-3 md:landscape:col-span-1">
       <div class="flex flex-wrap items-center gap-1 justify-between self-stretch">
         <h3 class="text-md lg:text-2xl capitalize font-bold leading-normal">
@@ -28,12 +29,13 @@ const toggleDetails = useToggle(showTechnicalDetails)
       </div>
       <div
         class="relative isolate self-stretch rounded-xl overflow-hidden ring-1"
-        :class="deployUrl ? 'ring-secundary-400' : 'ring-ntl-700'">
+        :class="deployUrl ? 'ring-secondary-400' : 'ring-ntl-700'">
         <NuxtImg
           v-if="image"
-          class="!aspect-[16/9] object-cover w-full rounded-xl transition-[filter] duration-300 delay-300 ease-in-out brightness-50 hover:active:brightness-100 group-hover:brightness-100 group-active:brightness-100"
+          class="!aspect-[16/9] object-cover w-full rounded-xl transition-[filter] duration-200 delay-200 ease-in-out brightness-50 hover:active:brightness-100 group-hover:brightness-100 group-active:brightness-100"
           :src="image"
-          :alt="`Imagem do projeto: ${title}`" />
+          :alt="title"
+          loading="lazy" />
         <div
           v-else
           class="!aspect-[16/9] object-cover w-full rounded-xl bg-ntl-800">
@@ -74,7 +76,7 @@ const toggleDetails = useToggle(showTechnicalDetails)
               v-show="showTechnicalDetails"
               class="w-full flex flex-wrap max-w-full items-center gap-3 max-h-60 snap-mandatory p-1 hide-scrollbar rounded-xl">
               <li
-                v-for="skill in tecnologies"
+                v-for="skill in technologies"
                 :key="skill.icon"
                 class="flex w-full flex-auto basis-3/12 snap-center">
                 <common-card-info
@@ -90,7 +92,7 @@ const toggleDetails = useToggle(showTechnicalDetails)
         <div class="flex flex-col self-stretch gap-3">
           <p class="max-sm:text-sm text-base uppercase font-primary font-normal tracking-wide">
             Status:
-            <span class="text-primary-200 font-secundary font-normal capitalize">
+            <span class="text-primary-200 font-secondary font-normal capitalize">
               {{ status.trim() }}
             </span>
           </p>
@@ -107,16 +109,17 @@ const toggleDetails = useToggle(showTechnicalDetails)
                   v-if="github"
                   :to="github"
                   target="_blank"
-                  class="inline-flex grow gap-3 justify-between items-center text-base font-medium px-6 pt-2 pb-[2px] rounded-sd bg-gradient-to-r from-secundary-400/80 to-secundary-500 hover:outline hover:outline-secundary-400 backdrop-blur-md transition-[outline] duration-300 ease-in">
+                  class="inline-flex grow gap-3 justify-between items-center text-base font-medium px-6 pt-2 pb-[2px] rounded-sd bg-gradient-to-r from-secondary-400/80 to-secondary-500 hover:outline hover:outline-secondary-400 backdrop-blur-md transition-[outline] duration-300 ease-in">
                   Github do projeto
                   <Icon
-                    class="!text-secundary-100 mb-1 text-lg"
+                    class="!text-secondary-100 mb-1 text-lg"
                     name="uil:github" />
                 </NuxtLink>
                 <NuxtLink
                   v-if="deployUrl"
                   :to="deployUrl"
-                  class="inline-flex grow gap-3 justify-between items-center text-base font-medium hover:text-ntl-0 hover:outline hover:outline-secundary-400 transition-[outline] duration-300 ease-in px-6 pt-2 pb-[2px] rounded-sd">
+                  target="_blank"
+                  class="inline-flex grow gap-3 justify-between items-center text-base font-medium hover:text-ntl-0 hover:outline hover:outline-secondary-400 transition-[outline] duration-300 ease-in px-6 pt-2 pb-[2px] rounded-sd">
                   Visitar
                   <Icon
                     class="text-ntl-100 mb-1 text-lg"

diff --git a/components/contact-button.vue b/components/contact-button.vue
@@ -0,0 +1,15 @@
+<template>
+  <NuxtLink
+    class="button font-medium transition-colors ease-in-out duration-200 lg:duration-300 tracking-wide bg-gradient-to-r from-secondary-600 to-secondary-700 hover:active:from-secondary-700 hover:active:to-secondary-800"
+    target="_blank"
+    :to="redirectUrl">
+    <span class="sr-only">Mandar mensagem no whatsapp</span>
+    Contrate-Me!
+  </NuxtLink>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  redirectUrl: string
+}>()
+</script>
diff --git a/components/footer-section.vue b/components/footer-section.vue
@@ -11,12 +11,12 @@ const platforms = platformsForConnection.concat([
 </script>
 <template>
   <footer
-    class="flex flex-col gap-8 w-full max-w-full md:landscape:grid lg:grid md:landscape:grid-cols-2 lg:grid-cols-2 bg-secundary-500 px-16 py-6">
+    class="flex flex-col gap-8 w-full max-w-full md:landscape:grid lg:grid md:landscape:grid-cols-2 lg:grid-cols-2 bg-secondary-500 px-16 py-6">
     <div class="flex flex-col gap-6 md:landscape:col-span-1">
       <hgroup class="flex flex-col gap-2">
         <h6 class="title lg:text-4xl max-sm:text-lg leading-relaxed">Douglas S. Silva - Portfólio</h6>
         <p class="text-sm lg:text-base capitalize leading-relaxed">
-          Copyright © 2024<br>Todos os direitos autorais reservados
+          Copyright © 2024<br />Todos os direitos autorais reservados
         </p>
       </hgroup>
       <div class="flex flex-col">

diff --git a/components/github-button.vue b/components/github-button.vue
@@ -0,0 +1,11 @@
+<template>
+  <NuxtLink
+    to="https://github.com/DevDouglasGfs"
+    target="_blank"
+    class="flex items-center gap-2 button max-sm:text-sm ring-1 ring-ntl-0/15 transition-[box-shadow,transform] duration-200 ease-in-out shadow-[0px_4px_8px_#7A40FF] hover:shadow-[0px_8px_12px_#7A40FF] hover:-translate-y-2">
+    <icon
+      class="text-lg max-sm:text-md -mt-2"
+      name="uil:github" />
+    Github
+  </NuxtLink>
+</template>
diff --git a/components/hero-section.vue b/components/hero-section.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { CardProps } from "./common/card-info.vue"
+import ContactButton from "./contact-button.vue";
+import GithubButton from "./github-button.vue";
 
 const topics: Array<CardProps & { to: string }> = [
   {
@@ -150,7 +152,7 @@ const stacks: Array<{ icon: string; name: string }> = [
             </div>
           </hgroup>
           <p class="text-base max-sm:text-sm tracking-wide max-w-prose leading-loose">
-            Olá, seja bem-vindo(a) ao meu portfólio.<br >
+            Olá, seja bem-vindo(a) ao meu portfólio.<br />
             Separei alguns tópicos para você conhecer a mim, o meu trabalho e minhas qualificações para estar atuando na
             área e na sua empresa
           </p>
@@ -161,59 +163,37 @@ const stacks: Array<{ icon: string; name: string }> = [
 
           <ul class="inline-flex p-1 overflow-x-auto hide-scrollbar sm:flex-wrap max-[420px]:flex-nowrap gap-6">
             <li
-            v-for="topic in topics"
-            :key="topic.to"
-            class="block flex-initial">
-            <common-card-info
-            :title="topic.title"
-            :icon="topic.icon"
-            class="md:landscape:items-center lg:!items-start min-w-max max-lg:flex-wrap hover:active:-translate-y-3.5 hover:active:shadow-lg hover:active:shadow-secundary-600/25"
-            @click="navigateTo(topic.to)" />
-          </li>
-        </ul>
-      </div>
+              v-for="topic in topics"
+              :key="topic.to"
+              class="block flex-initial">
+              <common-card-info
+                :title="topic.title"
+                :icon="topic.icon"
+                class="md:landscape:items-center lg:!items-start min-w-max max-lg:flex-wrap hover:active:-translate-y-3.5 hover:active:shadow-lg hover:active:shadow-secondary-600/25"
+                @click="navigateTo(topic.to)" />
+            </li>
+          </ul>
+        </div>
       </div>
       <div class="flex items-center gap-2 self-stretch">
-        <!-- <NuxtLink -->
-        <!-- to="https://wa.me/+55038999392757" -->
-        <!-- target="_blank" -->
-        <!-- class="button font-medium transition-colors ease-in-out duration-200 lg:duration-300 tracking-wide bg-gradient-to-r from-secundary-600 to-secundary-700 hover:active:from-secundary-700 hover:active:to-secundary-800"> -->
-        <!-- <span class="sr-only">Mandar mensagem no whatsapp</span> -->
-        <!-- Contrate-Me! -->
-        <!-- </NuxtLink> -->
-        <NuxtLink
-          to="https://github.com/DevDouglasGfs"
-          class="flex items-center gap-2 button max-sm:text-sm ring-1 ring-ntl-0/15 transition-[box-shadow,transform] duration-200 ease-in-out shadow-[0px_4px_8px_#7A40FF] hover:shadow-[0px_8px_12px_#7A40FF] hover:-translate-y-2">
-          <icon
-            class="text-lg max-sm:text-md -mt-2"
-            name="uil:github" />
-          Github
-        </NuxtLink>
+        <ContactButton redirect-url="https://wa.me/+55038999392757" />
+        <GithubButton />
       </div>
     </div>
-    <div class="relative contents lg:flex flex-col col-span-1 max-[1080px]:lg:col-span-2 h-full max-h-full pb-6 gap-6 lg:max-h-[75%]">
-      <div
-        class="max-md:inset-x-0 max-md:rounded-none max-lg:absolute max-lg:top-0 max-lg:right-0 flex flex-wrap items-center justify-center gap-2 p-6 md:landscape:p-4 lg:px-14 lg:py-6 bg-ntl-900 ring-1 ring-[#11FAC0]/30 backdrop-filter:blur-md text-ntl-0 uppercase font-primary max-sm:text-sm text-base lg:text-xl rounded-bl-sd lg:rounded-b-xl">
-        Working at
-        <NuxtLink
-          class="text-[#11FAC0] min-w-fit border-b-2 border-dashed border-spacing-4 border-ntl-0/40 hover:active:border-ntl-0/80 hover:active:text-[#5EFA11] transition-colors duration-200 ease-in"
-          to="https://instituto.taqtile.com.br">
-          Instaq
-          <span class="text-current animate-[pulse_1500ms_infinite] font-bold">|</span>
-        </NuxtLink>
-      </div>
+    <div
+      class="relative contents lg:flex flex-col col-span-1 max-[1080px]:lg:col-span-2 h-full max-h-full pb-6 gap-6 lg:max-h-[75%]">
       <div
         class="hidden lg:flex justify-evenly p-2 gap-6 flex-wrap h-max max-h-full xl:justify-start relative overflow-hidden rounded-3xl *:isolate *:border *:border-ntl-700 *:transition-colors *:duration-300 *:ease-in *:size-max *:flex-initial overflow-y-auto hide-scrollbar overscroll-contain">
         <div
           v-for="stack in stacks"
           :key="stack.icon"
           :title="stack.name"
-          class="relative p-8 rounded-lg group bg-ntl-800 hover:active:bg-primary-600 hover:bg-gradient-to-br hover:from-ntl-600 hover:via-secundary-500 hover:via-10% hover:to-secundary-800">
+          class="relative p-8 rounded-lg group bg-ntl-800 hover:active:bg-primary-600 hover:bg-gradient-to-br hover:from-ntl-600 hover:via-secondary-500 hover:via-10% hover:to-secondary-800">
           <icon
             class="size-6 text-ntl-100 group-hover:!text-ntl-0"
             :name="stack.icon" />
           <div
-            class="absolute opacity-0 bottom-0 pt-1 inset-x-0 group-hover:bg-ntl-800 group-hover:flex group-hover:items-center group-hover:justify-center group-hover:opacity-100 text-ntl-50 capitalize border-t border-secundary-500 transition-[opacity,background-color] duration-100 w-full text-center">
+            class="absolute opacity-0 bottom-0 pt-1 inset-x-0 group-hover:bg-ntl-800 group-hover:flex group-hover:items-center group-hover:justify-center group-hover:opacity-100 text-ntl-50 capitalize border-t border-secondary-500 transition-[opacity,background-color] duration-100 w-full text-center">
             {{ stack.name }}
           </div>
         </div>