diff --git a/components/CardPost/__snapshots__/index.test.ts.snap b/components/CardPost/__snapshots__/index.test.ts.snap
index 0c34ff5..96050f5 100644
--- a/components/CardPost/__snapshots__/index.test.ts.snap
+++ b/components/CardPost/__snapshots__/index.test.ts.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CardPost > should render CardPost 1`] = `
 VueWrapper {
@@ -15,29 +15,30 @@ VueWrapper {
         to="/what-are-micro-frontends"
       >
         <div
-          class="flex flex-col md:flex-row gap-4"
+          class="flex flex-col gap-4 bg-white/10 w-full rounded-md hover:scale-105 transition-transform"
         >
           <nuxtimg
             alt="O que são micro frontends"
-            class="w-100 md:min-w-[300px] md:w-[300px] h-[150px] bg-neutral-500 rounded-md object-cover"
+            class="bg-neutral-500 h-[170px] rounded-t-md"
+            fit="cover"
+            format="webp"
+            height="170px"
+            loading="lazy"
             provider="cloudinary"
+            quality="80"
             src="https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/example-microfrontends.png"
+            width="100%"
           />
           <div
-            class="flex flex-col"
+            class="flex flex-col px-2 pb-6 text-center"
           >
             <span
-              class="text-red-400"
-            >
-              Post
-            </span>
-            <span
-              class="text-xl font-medium mb-2"
+              class="text-xl font-medium mb-2 line-clamp-1"
             >
               O que são micro frontends
             </span>
             <p
-              class="text-neutral-400"
+              class="text-neutral-400 line-clamp-4"
             >
               O termo Micro Frontends surgiu pela primeira vez no ThoughtWorks Technology Radar no final de 2016. Ele estende os conceitos de microsserviços para o mundo do frontend.
             </p>
@@ -113,6 +114,7 @@ VueWrapper {
       "asyncDep": null,
       "asyncResolved": false,
       "attrs": {},
+      "attrsProxy": null,
       "bc": null,
       "bm": null,
       "bu": null,
@@ -136,36 +138,41 @@ VueWrapper {
       "directives": null,
       "ec": null,
       "effect": ReactiveEffect {
+        "_depsLength": 7,
+        "_dirtyLevel": 0,
+        "_runnings": 0,
+        "_shouldSchedule": false,
+        "_trackId": 1,
         "active": true,
         "allowRecurse": true,
         "deps": [
-          Set {
-            [Circular],
+          Map {
+            [Circular] => 1,
           },
-          Set {
-            [Circular],
+          Map {
+            [Circular] => 1,
           },
-          Set {
-            [Circular],
+          Map {
+            [Circular] => 1,
           },
-          Set {
-            [Circular],
+          Map {
+            [Circular] => 1,
           },
-          Set {
-            [Circular],
+          Map {
+            [Circular] => 1,
           },
-          Set {
-            [Circular],
+          Map {
+            [Circular] => 1,
           },
-          Set {
-            [Circular],
+          Map {
+            [Circular] => 1,
           },
         ],
         "fn": [Function],
         "onTrack": undefined,
         "onTrigger": undefined,
-        "parent": undefined,
         "scheduler": [Function],
+        "trigger": [Function],
       },
       "emit": [Function],
       "emitsOptions": null,
@@ -198,41 +205,46 @@ VueWrapper {
       "rtc": null,
       "rtg": null,
       "scope": EffectScope {
-        "active": true,
+        "_active": true,
         "cleanups": [],
         "detached": true,
         "effects": [
           ReactiveEffect {
+            "_depsLength": 7,
+            "_dirtyLevel": 0,
+            "_runnings": 0,
+            "_shouldSchedule": false,
+            "_trackId": 1,
             "active": true,
             "allowRecurse": true,
             "deps": [
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
             ],
             "fn": [Function],
             "onTrack": undefined,
             "onTrigger": undefined,
-            "parent": undefined,
             "scheduler": [Function],
+            "trigger": [Function],
           },
         ],
         "parent": undefined,
@@ -242,6 +254,7 @@ VueWrapper {
         "VTU_COMPONENT": {},
       },
       "slots": {},
+      "slotsProxy": null,
       "sp": null,
       "subTree": {
         "__v_isVNode": true,
@@ -286,6 +299,7 @@ VueWrapper {
           "asyncDep": null,
           "asyncResolved": false,
           "attrs": {},
+          "attrsProxy": null,
           "bc": null,
           "bm": null,
           "bu": null,
@@ -311,27 +325,32 @@ VueWrapper {
           "directives": null,
           "ec": null,
           "effect": ReactiveEffect {
+            "_depsLength": 4,
+            "_dirtyLevel": 0,
+            "_runnings": 0,
+            "_shouldSchedule": false,
+            "_trackId": 1,
             "active": true,
             "allowRecurse": true,
             "deps": [
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
             ],
             "fn": [Function],
             "onTrack": undefined,
             "onTrigger": undefined,
-            "parent": undefined,
             "scheduler": [Function],
+            "trigger": [Function],
           },
           "emit": [Function],
           "emitsOptions": null,
@@ -395,32 +414,37 @@ VueWrapper {
           "rtc": null,
           "rtg": null,
           "scope": EffectScope {
-            "active": true,
+            "_active": true,
             "cleanups": [],
             "detached": true,
             "effects": [
               ReactiveEffect {
+                "_depsLength": 4,
+                "_dirtyLevel": 0,
+                "_runnings": 0,
+                "_shouldSchedule": false,
+                "_trackId": 1,
                 "active": true,
                 "allowRecurse": true,
                 "deps": [
-                  Set {
-                    [Circular],
+                  Map {
+                    [Circular] => 1,
                   },
-                  Set {
-                    [Circular],
+                  Map {
+                    [Circular] => 1,
                   },
-                  Set {
-                    [Circular],
+                  Map {
+                    [Circular] => 1,
                   },
-                  Set {
-                    [Circular],
+                  Map {
+                    [Circular] => 1,
                   },
                 ],
                 "fn": [Function],
                 "onTrack": undefined,
                 "onTrigger": undefined,
-                "parent": undefined,
                 "scheduler": [Function],
+                "trigger": [Function],
               },
             ],
             "parent": undefined,
@@ -440,6 +464,7 @@ VueWrapper {
             },
           },
           "slots": {},
+          "slotsProxy": {},
           "sp": null,
           "subTree": {
             "__v_isVNode": true,
@@ -469,17 +494,29 @@ VueWrapper {
                     ],
                     "el": <nuxtimg
                       alt="O que são micro frontends"
-                      class="w-100 md:min-w-[300px] md:w-[300px] h-[150px] bg-neutral-500 rounded-md object-cover"
+                      class="bg-neutral-500 h-[170px] rounded-t-md"
+                      fit="cover"
+                      format="webp"
+                      height="170px"
+                      loading="lazy"
                       provider="cloudinary"
+                      quality="80"
                       src="https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/example-microfrontends.png"
+                      width="100%"
                     />,
                     "key": null,
                     "patchFlag": 8,
                     "props": {
                       "alt": "O que são micro frontends",
-                      "class": "w-100 md:min-w-[300px] md:w-[300px] h-[150px] bg-neutral-500 rounded-md object-cover",
+                      "class": "bg-neutral-500 h-[170px] rounded-t-md",
+                      "fit": "cover",
+                      "format": "webp",
+                      "height": "170px",
+                      "loading": "lazy",
                       "provider": "cloudinary",
+                      "quality": "80",
                       "src": "https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/example-microfrontends.png",
+                      "width": "100%",
                     },
                     "ref": null,
                     "scopeId": null,
@@ -500,40 +537,6 @@ VueWrapper {
                     "anchor": null,
                     "appContext": null,
                     "children": [
-                      {
-                        "__v_isVNode": true,
-                        "__v_skip": true,
-                        "anchor": null,
-                        "appContext": null,
-                        "children": "Post",
-                        "component": null,
-                        "ctx": null,
-                        "dirs": null,
-                        "dynamicChildren": null,
-                        "dynamicProps": null,
-                        "el": <span
-                          class="text-red-400"
-                        >
-                          Post
-                        </span>,
-                        "key": null,
-                        "patchFlag": -1,
-                        "props": {
-                          "class": "text-red-400",
-                        },
-                        "ref": null,
-                        "scopeId": null,
-                        "shapeFlag": 9,
-                        "slotScopeIds": null,
-                        "ssContent": null,
-                        "ssFallback": null,
-                        "staticCount": 0,
-                        "suspense": null,
-                        "target": null,
-                        "targetAnchor": null,
-                        "transition": null,
-                        "type": "span",
-                      },
                       {
                         "__v_isVNode": true,
                         "__v_skip": true,
@@ -546,14 +549,14 @@ VueWrapper {
                         "dynamicChildren": null,
                         "dynamicProps": null,
                         "el": <span
-                          class="text-xl font-medium mb-2"
+                          class="text-xl font-medium mb-2 line-clamp-1"
                         >
                           O que são micro frontends
                         </span>,
                         "key": null,
                         "patchFlag": 1,
                         "props": {
-                          "class": "text-xl font-medium mb-2",
+                          "class": "text-xl font-medium mb-2 line-clamp-1",
                         },
                         "ref": null,
                         "scopeId": null,
@@ -580,14 +583,14 @@ VueWrapper {
                         "dynamicChildren": null,
                         "dynamicProps": null,
                         "el": <p
-                          class="text-neutral-400"
+                          class="text-neutral-400 line-clamp-4"
                         >
                           O termo Micro Frontends surgiu pela primeira vez no ThoughtWorks Technology Radar no final de 2016. Ele estende os conceitos de microsserviços para o mundo do frontend.
                         </p>,
                         "key": null,
                         "patchFlag": 1,
                         "props": {
-                          "class": "text-neutral-400",
+                          "class": "text-neutral-400 line-clamp-4",
                         },
                         "ref": null,
                         "scopeId": null,
@@ -609,20 +612,15 @@ VueWrapper {
                     "dynamicChildren": null,
                     "dynamicProps": null,
                     "el": <div
-                      class="flex flex-col"
+                      class="flex flex-col px-2 pb-6 text-center"
                     >
                       <span
-                        class="text-red-400"
-                      >
-                        Post
-                      </span>
-                      <span
-                        class="text-xl font-medium mb-2"
+                        class="text-xl font-medium mb-2 line-clamp-1"
                       >
                         O que são micro frontends
                       </span>
                       <p
-                        class="text-neutral-400"
+                        class="text-neutral-400 line-clamp-4"
                       >
                         O termo Micro Frontends surgiu pela primeira vez no ThoughtWorks Technology Radar no final de 2016. Ele estende os conceitos de microsserviços para o mundo do frontend.
                       </p>
@@ -630,7 +628,7 @@ VueWrapper {
                     "key": null,
                     "patchFlag": 0,
                     "props": {
-                      "class": "flex flex-col",
+                      "class": "flex flex-col px-2 pb-6 text-center",
                     },
                     "ref": null,
                     "scopeId": null,
@@ -652,29 +650,30 @@ VueWrapper {
                 "dynamicChildren": null,
                 "dynamicProps": null,
                 "el": <div
-                  class="flex flex-col md:flex-row gap-4"
+                  class="flex flex-col gap-4 bg-white/10 w-full rounded-md hover:scale-105 transition-transform"
                 >
                   <nuxtimg
                     alt="O que são micro frontends"
-                    class="w-100 md:min-w-[300px] md:w-[300px] h-[150px] bg-neutral-500 rounded-md object-cover"
+                    class="bg-neutral-500 h-[170px] rounded-t-md"
+                    fit="cover"
+                    format="webp"
+                    height="170px"
+                    loading="lazy"
                     provider="cloudinary"
+                    quality="80"
                     src="https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/example-microfrontends.png"
+                    width="100%"
                   />
                   <div
-                    class="flex flex-col"
+                    class="flex flex-col px-2 pb-6 text-center"
                   >
                     <span
-                      class="text-red-400"
-                    >
-                      Post
-                    </span>
-                    <span
-                      class="text-xl font-medium mb-2"
+                      class="text-xl font-medium mb-2 line-clamp-1"
                     >
                       O que são micro frontends
                     </span>
                     <p
-                      class="text-neutral-400"
+                      class="text-neutral-400 line-clamp-4"
                     >
                       O termo Micro Frontends surgiu pela primeira vez no ThoughtWorks Technology Radar no final de 2016. Ele estende os conceitos de microsserviços para o mundo do frontend.
                     </p>
@@ -683,7 +682,7 @@ VueWrapper {
                 "key": null,
                 "patchFlag": 0,
                 "props": {
-                  "class": "flex flex-col md:flex-row gap-4",
+                  "class": "flex flex-col gap-4 bg-white/10 w-full rounded-md hover:scale-105 transition-transform",
                 },
                 "ref": null,
                 "scopeId": null,
@@ -719,17 +718,29 @@ VueWrapper {
                 ],
                 "el": <nuxtimg
                   alt="O que são micro frontends"
-                  class="w-100 md:min-w-[300px] md:w-[300px] h-[150px] bg-neutral-500 rounded-md object-cover"
+                  class="bg-neutral-500 h-[170px] rounded-t-md"
+                  fit="cover"
+                  format="webp"
+                  height="170px"
+                  loading="lazy"
                   provider="cloudinary"
+                  quality="80"
                   src="https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/example-microfrontends.png"
+                  width="100%"
                 />,
                 "key": null,
                 "patchFlag": 8,
                 "props": {
                   "alt": "O que são micro frontends",
-                  "class": "w-100 md:min-w-[300px] md:w-[300px] h-[150px] bg-neutral-500 rounded-md object-cover",
+                  "class": "bg-neutral-500 h-[170px] rounded-t-md",
+                  "fit": "cover",
+                  "format": "webp",
+                  "height": "170px",
+                  "loading": "lazy",
                   "provider": "cloudinary",
+                  "quality": "80",
                   "src": "https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/example-microfrontends.png",
+                  "width": "100%",
                 },
                 "ref": null,
                 "scopeId": null,
@@ -756,14 +767,14 @@ VueWrapper {
                 "dynamicChildren": null,
                 "dynamicProps": null,
                 "el": <span
-                  class="text-xl font-medium mb-2"
+                  class="text-xl font-medium mb-2 line-clamp-1"
                 >
                   O que são micro frontends
                 </span>,
                 "key": null,
                 "patchFlag": 1,
                 "props": {
-                  "class": "text-xl font-medium mb-2",
+                  "class": "text-xl font-medium mb-2 line-clamp-1",
                 },
                 "ref": null,
                 "scopeId": null,
@@ -790,14 +801,14 @@ VueWrapper {
                 "dynamicChildren": null,
                 "dynamicProps": null,
                 "el": <p
-                  class="text-neutral-400"
+                  class="text-neutral-400 line-clamp-4"
                 >
                   O termo Micro Frontends surgiu pela primeira vez no ThoughtWorks Technology Radar no final de 2016. Ele estende os conceitos de microsserviços para o mundo do frontend.
                 </p>,
                 "key": null,
                 "patchFlag": 1,
                 "props": {
-                  "class": "text-neutral-400",
+                  "class": "text-neutral-400 line-clamp-4",
                 },
                 "ref": null,
                 "scopeId": null,
@@ -820,29 +831,30 @@ VueWrapper {
               to="/what-are-micro-frontends"
             >
               <div
-                class="flex flex-col md:flex-row gap-4"
+                class="flex flex-col gap-4 bg-white/10 w-full rounded-md hover:scale-105 transition-transform"
               >
                 <nuxtimg
                   alt="O que são micro frontends"
-                  class="w-100 md:min-w-[300px] md:w-[300px] h-[150px] bg-neutral-500 rounded-md object-cover"
+                  class="bg-neutral-500 h-[170px] rounded-t-md"
+                  fit="cover"
+                  format="webp"
+                  height="170px"
+                  loading="lazy"
                   provider="cloudinary"
+                  quality="80"
                   src="https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/example-microfrontends.png"
+                  width="100%"
                 />
                 <div
-                  class="flex flex-col"
+                  class="flex flex-col px-2 pb-6 text-center"
                 >
                   <span
-                    class="text-red-400"
-                  >
-                    Post
-                  </span>
-                  <span
-                    class="text-xl font-medium mb-2"
+                    class="text-xl font-medium mb-2 line-clamp-1"
                   >
                     O que são micro frontends
                   </span>
                   <p
-                    class="text-neutral-400"
+                    class="text-neutral-400 line-clamp-4"
                   >
                     O termo Micro Frontends surgiu pela primeira vez no ThoughtWorks Technology Radar no final de 2016. Ele estende os conceitos de microsserviços para o mundo do frontend.
                   </p>
@@ -870,7 +882,7 @@ VueWrapper {
           "suspense": null,
           "suspenseId": 0,
           "type": {
-            "__file": "/Users/gabrielcaiana/www/Frontend/nuxt3/website/components/CardPost/index.vue",
+            "__file": "/Users/gabrielcaiana/www/projects/website/components/CardPost/index.vue",
             "__name": "index",
             "components": {},
             "props": {
@@ -915,29 +927,30 @@ VueWrapper {
           to="/what-are-micro-frontends"
         >
           <div
-            class="flex flex-col md:flex-row gap-4"
+            class="flex flex-col gap-4 bg-white/10 w-full rounded-md hover:scale-105 transition-transform"
           >
             <nuxtimg
               alt="O que são micro frontends"
-              class="w-100 md:min-w-[300px] md:w-[300px] h-[150px] bg-neutral-500 rounded-md object-cover"
+              class="bg-neutral-500 h-[170px] rounded-t-md"
+              fit="cover"
+              format="webp"
+              height="170px"
+              loading="lazy"
               provider="cloudinary"
+              quality="80"
               src="https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/example-microfrontends.png"
+              width="100%"
             />
             <div
-              class="flex flex-col"
+              class="flex flex-col px-2 pb-6 text-center"
             >
               <span
-                class="text-red-400"
-              >
-                Post
-              </span>
-              <span
-                class="text-xl font-medium mb-2"
+                class="text-xl font-medium mb-2 line-clamp-1"
               >
                 O que são micro frontends
               </span>
               <p
-                class="text-neutral-400"
+                class="text-neutral-400 line-clamp-4"
               >
                 O termo Micro Frontends surgiu pela primeira vez no ThoughtWorks Technology Radar no final de 2016. Ele estende os conceitos de microsserviços para o mundo do frontend.
               </p>
@@ -970,7 +983,7 @@ VueWrapper {
         "targetAnchor": null,
         "transition": null,
         "type": {
-          "__file": "/Users/gabrielcaiana/www/Frontend/nuxt3/website/components/CardPost/index.vue",
+          "__file": "/Users/gabrielcaiana/www/projects/website/components/CardPost/index.vue",
           "__name": "index",
           "components": {},
           "props": {
@@ -1057,29 +1070,30 @@ VueWrapper {
           to="/what-are-micro-frontends"
         >
           <div
-            class="flex flex-col md:flex-row gap-4"
+            class="flex flex-col gap-4 bg-white/10 w-full rounded-md hover:scale-105 transition-transform"
           >
             <nuxtimg
               alt="O que são micro frontends"
-              class="w-100 md:min-w-[300px] md:w-[300px] h-[150px] bg-neutral-500 rounded-md object-cover"
+              class="bg-neutral-500 h-[170px] rounded-t-md"
+              fit="cover"
+              format="webp"
+              height="170px"
+              loading="lazy"
               provider="cloudinary"
+              quality="80"
               src="https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/example-microfrontends.png"
+              width="100%"
             />
             <div
-              class="flex flex-col"
+              class="flex flex-col px-2 pb-6 text-center"
             >
               <span
-                class="text-red-400"
-              >
-                Post
-              </span>
-              <span
-                class="text-xl font-medium mb-2"
+                class="text-xl font-medium mb-2 line-clamp-1"
               >
                 O que são micro frontends
               </span>
               <p
-                class="text-neutral-400"
+                class="text-neutral-400 line-clamp-4"
               >
                 O termo Micro Frontends surgiu pela primeira vez no ThoughtWorks Technology Radar no final de 2016. Ele estende os conceitos de microsserviços para o mundo do frontend.
               </p>
@@ -1124,9 +1138,10 @@ VueWrapper {
     "mixin": [Function],
     "mount": [Function],
     "provide": [Function],
+    "runWithContext": [Function],
     "unmount": [Function],
     "use": [Function],
-    "version": "3.2.45",
+    "version": "3.4.14",
   },
   "__setProps": [Function],
   "cleanUpCallbacks": [
@@ -1312,29 +1327,30 @@ VueWrapper {
     to="/what-are-micro-frontends"
   >
     <div
-      class="flex flex-col md:flex-row gap-4"
+      class="flex flex-col gap-4 bg-white/10 w-full rounded-md hover:scale-105 transition-transform"
     >
       <nuxtimg
         alt="O que são micro frontends"
-        class="w-100 md:min-w-[300px] md:w-[300px] h-[150px] bg-neutral-500 rounded-md object-cover"
+        class="bg-neutral-500 h-[170px] rounded-t-md"
+        fit="cover"
+        format="webp"
+        height="170px"
+        loading="lazy"
         provider="cloudinary"
+        quality="80"
         src="https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/example-microfrontends.png"
+        width="100%"
       />
       <div
-        class="flex flex-col"
+        class="flex flex-col px-2 pb-6 text-center"
       >
         <span
-          class="text-red-400"
-        >
-          Post
-        </span>
-        <span
-          class="text-xl font-medium mb-2"
+          class="text-xl font-medium mb-2 line-clamp-1"
         >
           O que são micro frontends
         </span>
         <p
-          class="text-neutral-400"
+          class="text-neutral-400 line-clamp-4"
         >
           O termo Micro Frontends surgiu pela primeira vez no ThoughtWorks Technology Radar no final de 2016. Ele estende os conceitos de microsserviços para o mundo do frontend.
         </p>
diff --git a/components/CardProject/__snapshots__/index.test.ts.snap b/components/CardProject/__snapshots__/index.test.ts.snap
index 6456646..47608b5 100644
--- a/components/CardProject/__snapshots__/index.test.ts.snap
+++ b/components/CardProject/__snapshots__/index.test.ts.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CardProject > should render CardProject 1`] = `
 VueWrapper {
@@ -13,33 +13,33 @@ VueWrapper {
     >
       <a
         href="https://github.com/gabrielcaiana/nuxt-finance"
+        image="https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png"
         target="_blank"
+        type="Frontend"
       >
         <div
-          class="flex flex-col md:flex-row gap-4"
+          class="flex flex-col md:flex-row gap-4 bg-white/10 p-4 md:p-10 rounded-md hover:scale-105 transition-transform"
         >
-          <nuxtimg
-            alt="Nuxt Finance"
-            class="w-100 md:min-w-[300px] md:w-[300px] h-[150px] bg-neutral-500 rounded-md"
-            loading="lazy"
-            provider="cloudinary"
-            src="https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png"
-          />
           <div
             class="flex flex-col"
           >
-            <span
-              class="text-red-400"
-            >
-              Frontend
-            </span>
-            <span
-              class="text-xl font-medium mb-2"
+            <div
+              class="flex flex-col items-start gap-2 mb-3"
             >
-              Nuxt Finance
-            </span>
+              <span
+                class="text-xl text-center md:text-left font-bold"
+              >
+                Nuxt Finance
+              </span>
+              <ul
+                class="flex flex-wrap justify-center gap-2"
+              >
+                
+                
+              </ul>
+            </div>
             <p
-              class="text-neutral-400"
+              class="text-neutral"
             >
               Sistema de gerenciamento de finanças pessoais.
             </p>
@@ -115,6 +115,7 @@ VueWrapper {
       "asyncDep": null,
       "asyncResolved": false,
       "attrs": {},
+      "attrsProxy": null,
       "bc": null,
       "bm": null,
       "bu": null,
@@ -138,39 +139,44 @@ VueWrapper {
       "directives": null,
       "ec": null,
       "effect": ReactiveEffect {
+        "_depsLength": 8,
+        "_dirtyLevel": 0,
+        "_runnings": 0,
+        "_shouldSchedule": false,
+        "_trackId": 1,
         "active": true,
         "allowRecurse": true,
         "deps": [
-          Set {
-            [Circular],
+          Map {
+            [Circular] => 1,
           },
-          Set {
-            [Circular],
+          Map {
+            [Circular] => 1,
           },
-          Set {
-            [Circular],
+          Map {
+            [Circular] => 1,
           },
-          Set {
-            [Circular],
+          Map {
+            [Circular] => 1,
           },
-          Set {
-            [Circular],
+          Map {
+            [Circular] => 1,
           },
-          Set {
-            [Circular],
+          Map {
+            [Circular] => 1,
           },
-          Set {
-            [Circular],
+          Map {
+            [Circular] => 1,
           },
-          Set {
-            [Circular],
+          Map {
+            [Circular] => 1,
           },
         ],
         "fn": [Function],
         "onTrack": undefined,
         "onTrigger": undefined,
-        "parent": undefined,
         "scheduler": [Function],
+        "trigger": [Function],
       },
       "emit": [Function],
       "emitsOptions": null,
@@ -203,44 +209,49 @@ VueWrapper {
       "rtc": null,
       "rtg": null,
       "scope": EffectScope {
-        "active": true,
+        "_active": true,
         "cleanups": [],
         "detached": true,
         "effects": [
           ReactiveEffect {
+            "_depsLength": 8,
+            "_dirtyLevel": 0,
+            "_runnings": 0,
+            "_shouldSchedule": false,
+            "_trackId": 1,
             "active": true,
             "allowRecurse": true,
             "deps": [
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
             ],
             "fn": [Function],
             "onTrack": undefined,
             "onTrigger": undefined,
-            "parent": undefined,
             "scheduler": [Function],
+            "trigger": [Function],
           },
         ],
         "parent": undefined,
@@ -250,6 +261,7 @@ VueWrapper {
         "VTU_COMPONENT": {},
       },
       "slots": {},
+      "slotsProxy": null,
       "sp": null,
       "subTree": {
         "__v_isVNode": true,
@@ -293,7 +305,11 @@ VueWrapper {
           },
           "asyncDep": null,
           "asyncResolved": false,
-          "attrs": {},
+          "attrs": {
+            "image": "https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png",
+            "type": "Frontend",
+          },
+          "attrsProxy": null,
           "bc": null,
           "bm": null,
           "bu": null,
@@ -302,9 +318,8 @@ VueWrapper {
           "components": {},
           "ctx": {
             "description": "Sistema de gerenciamento de finanças pessoais.",
-            "image": "https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png",
+            "stack": undefined,
             "title": "Nuxt Finance",
-            "type": "Frontend",
             "url": "https://github.com/gabrielcaiana/nuxt-finance",
           },
           "da": null,
@@ -312,39 +327,41 @@ VueWrapper {
           "devtoolsRawSetupState": {
             "props": {
               "description": "Sistema de gerenciamento de finanças pessoais.",
-              "image": "https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png",
+              "stack": undefined,
               "title": "Nuxt Finance",
-              "type": "Frontend",
               "url": "https://github.com/gabrielcaiana/nuxt-finance",
             },
+            "randomTailwindColor": [Function],
           },
           "directives": null,
           "ec": null,
           "effect": ReactiveEffect {
+            "_depsLength": 4,
+            "_dirtyLevel": 0,
+            "_runnings": 0,
+            "_shouldSchedule": false,
+            "_trackId": 1,
             "active": true,
             "allowRecurse": true,
             "deps": [
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
-              Set {
-                [Circular],
-              },
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
             ],
             "fn": [Function],
             "onTrack": undefined,
             "onTrigger": undefined,
-            "parent": undefined,
             "scheduler": [Function],
+            "trigger": [Function],
           },
           "emit": [Function],
           "emitsOptions": null,
@@ -360,9 +377,8 @@ VueWrapper {
           "parent": [Circular],
           "props": {
             "description": "Sistema de gerenciamento de finanças pessoais.",
-            "image": "https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png",
+            "stack": undefined,
             "title": "Nuxt Finance",
-            "type": "Frontend",
             "url": "https://github.com/gabrielcaiana/nuxt-finance",
           },
           "propsDefaults": {},
@@ -374,7 +390,7 @@ VueWrapper {
                 "required": true,
                 "type": [Function],
               },
-              "image": {
+              "stack": {
                 "0": false,
                 "1": true,
                 "required": true,
@@ -386,12 +402,6 @@ VueWrapper {
                 "required": true,
                 "type": [Function],
               },
-              "type": {
-                "0": false,
-                "1": true,
-                "required": true,
-                "type": [Function],
-              },
               "url": {
                 "0": false,
                 "1": true,
@@ -404,9 +414,8 @@ VueWrapper {
           "provides": {},
           "proxy": {
             "description": "Sistema de gerenciamento de finanças pessoais.",
-            "image": "https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png",
+            "stack": undefined,
             "title": "Nuxt Finance",
-            "type": "Frontend",
             "url": "https://github.com/gabrielcaiana/nuxt-finance",
           },
           "refs": {},
@@ -416,41 +425,46 @@ VueWrapper {
           "rtc": null,
           "rtg": null,
           "scope": EffectScope {
-            "active": true,
+            "_active": true,
             "cleanups": [],
             "detached": true,
             "effects": [
               ReactiveEffect {
+                "_depsLength": 4,
+                "_dirtyLevel": 0,
+                "_runnings": 0,
+                "_shouldSchedule": false,
+                "_trackId": 1,
                 "active": true,
                 "allowRecurse": true,
                 "deps": [
-                  Set {
-                    [Circular],
+                  Map {
+                    [Circular] => 1,
                   },
-                  Set {
-                    [Circular],
+                  Map {
+                    [Circular] => 1,
                   },
-                  Set {
-                    [Circular],
+                  Map {
+                    [Circular] => 1,
                   },
-                  Set {
-                    [Circular],
-                  },
-                  Set {
-                    [Circular],
+                  Map {
+                    [Circular] => 1,
                   },
                 ],
                 "fn": [Function],
                 "onTrack": undefined,
                 "onTrigger": undefined,
-                "parent": undefined,
                 "scheduler": [Function],
+                "trigger": [Function],
               },
             ],
             "parent": undefined,
           },
           "setupContext": {
-            "attrs": {},
+            "attrs": {
+              "image": "https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png",
+              "type": "Frontend",
+            },
             "emit": [Function],
             "expose": [Function],
             "slots": {},
@@ -458,19 +472,21 @@ VueWrapper {
           "setupState": {
             "props": {
               "description": "Sistema de gerenciamento de finanças pessoais.",
-              "image": "https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png",
+              "stack": undefined,
               "title": "Nuxt Finance",
-              "type": "Frontend",
               "url": "https://github.com/gabrielcaiana/nuxt-finance",
             },
+            "randomTailwindColor": [Function],
           },
           "slots": {},
+          "slotsProxy": {},
           "sp": null,
           "subTree": {
             "__v_isVNode": true,
             "__v_skip": true,
             "anchor": null,
             "appContext": null,
+            "ce": undefined,
             "children": [
               {
                 "__v_isVNode": true,
@@ -478,49 +494,6 @@ VueWrapper {
                 "anchor": null,
                 "appContext": null,
                 "children": [
-                  {
-                    "__v_isVNode": true,
-                    "__v_skip": true,
-                    "anchor": null,
-                    "appContext": null,
-                    "children": null,
-                    "component": null,
-                    "ctx": [Circular],
-                    "dirs": null,
-                    "dynamicChildren": null,
-                    "dynamicProps": [
-                      "src",
-                      "alt",
-                    ],
-                    "el": <nuxtimg
-                      alt="Nuxt Finance"
-                      class="w-100 md:min-w-[300px] md:w-[300px] h-[150px] bg-neutral-500 rounded-md"
-                      loading="lazy"
-                      provider="cloudinary"
-                      src="https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png"
-                    />,
-                    "key": null,
-                    "patchFlag": 8,
-                    "props": {
-                      "alt": "Nuxt Finance",
-                      "class": "w-100 md:min-w-[300px] md:w-[300px] h-[150px] bg-neutral-500 rounded-md",
-                      "loading": "lazy",
-                      "provider": "cloudinary",
-                      "src": "https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png",
-                    },
-                    "ref": null,
-                    "scopeId": null,
-                    "shapeFlag": 1,
-                    "slotScopeIds": null,
-                    "ssContent": null,
-                    "ssFallback": null,
-                    "staticCount": 0,
-                    "suspense": null,
-                    "target": null,
-                    "targetAnchor": null,
-                    "transition": null,
-                    "type": "NuxtImg",
-                  },
                   {
                     "__v_isVNode": true,
                     "__v_skip": true,
@@ -532,59 +505,134 @@ VueWrapper {
                         "__v_skip": true,
                         "anchor": null,
                         "appContext": null,
-                        "children": "Frontend",
-                        "component": null,
-                        "ctx": [Circular],
-                        "dirs": null,
-                        "dynamicChildren": null,
-                        "dynamicProps": null,
-                        "el": <span
-                          class="text-red-400"
-                        >
-                          Frontend
-                        </span>,
-                        "key": null,
-                        "patchFlag": 1,
-                        "props": {
-                          "class": "text-red-400",
-                        },
-                        "ref": null,
-                        "scopeId": null,
-                        "shapeFlag": 9,
-                        "slotScopeIds": null,
-                        "ssContent": null,
-                        "ssFallback": null,
-                        "staticCount": 0,
-                        "suspense": null,
-                        "target": null,
-                        "targetAnchor": null,
-                        "transition": null,
-                        "type": "span",
-                      },
-                      {
-                        "__v_isVNode": true,
-                        "__v_skip": true,
-                        "anchor": null,
-                        "appContext": null,
-                        "children": "Nuxt Finance",
+                        "children": [
+                          {
+                            "__v_isVNode": true,
+                            "__v_skip": true,
+                            "anchor": null,
+                            "appContext": null,
+                            "children": "Nuxt Finance",
+                            "component": null,
+                            "ctx": [Circular],
+                            "dirs": null,
+                            "dynamicChildren": null,
+                            "dynamicProps": null,
+                            "el": <span
+                              class="text-xl text-center md:text-left font-bold"
+                            >
+                              Nuxt Finance
+                            </span>,
+                            "key": null,
+                            "patchFlag": 1,
+                            "props": {
+                              "class": "text-xl text-center md:text-left font-bold",
+                            },
+                            "ref": null,
+                            "scopeId": null,
+                            "shapeFlag": 9,
+                            "slotScopeIds": null,
+                            "ssContent": null,
+                            "ssFallback": null,
+                            "staticCount": 0,
+                            "suspense": null,
+                            "target": null,
+                            "targetAnchor": null,
+                            "transition": null,
+                            "type": "span",
+                          },
+                          {
+                            "__v_isVNode": true,
+                            "__v_skip": true,
+                            "anchor": null,
+                            "appContext": null,
+                            "children": [
+                              {
+                                "__v_isVNode": true,
+                                "__v_skip": true,
+                                "anchor": ,
+                                "appContext": null,
+                                "children": [],
+                                "component": null,
+                                "ctx": [Circular],
+                                "dirs": null,
+                                "dynamicChildren": [],
+                                "dynamicProps": null,
+                                "el": ,
+                                "key": null,
+                                "patchFlag": 128,
+                                "props": null,
+                                "ref": null,
+                                "scopeId": null,
+                                "shapeFlag": 16,
+                                "slotScopeIds": null,
+                                "ssContent": null,
+                                "ssFallback": null,
+                                "staticCount": 0,
+                                "suspense": null,
+                                "target": null,
+                                "targetAnchor": null,
+                                "transition": null,
+                                "type": Symbol(v-fgt),
+                              },
+                            ],
+                            "component": null,
+                            "ctx": [Circular],
+                            "dirs": null,
+                            "dynamicChildren": null,
+                            "dynamicProps": null,
+                            "el": <ul
+                              class="flex flex-wrap justify-center gap-2"
+                            >
+                              
+                              
+                            </ul>,
+                            "key": null,
+                            "patchFlag": 0,
+                            "props": {
+                              "class": "flex flex-wrap justify-center gap-2",
+                            },
+                            "ref": null,
+                            "scopeId": null,
+                            "shapeFlag": 17,
+                            "slotScopeIds": null,
+                            "ssContent": null,
+                            "ssFallback": null,
+                            "staticCount": 0,
+                            "suspense": null,
+                            "target": null,
+                            "targetAnchor": null,
+                            "transition": null,
+                            "type": "ul",
+                          },
+                        ],
                         "component": null,
                         "ctx": [Circular],
                         "dirs": null,
                         "dynamicChildren": null,
                         "dynamicProps": null,
-                        "el": <span
-                          class="text-xl font-medium mb-2"
+                        "el": <div
+                          class="flex flex-col items-start gap-2 mb-3"
                         >
-                          Nuxt Finance
-                        </span>,
+                          <span
+                            class="text-xl text-center md:text-left font-bold"
+                          >
+                            Nuxt Finance
+                          </span>
+                          <ul
+                            class="flex flex-wrap justify-center gap-2"
+                          >
+                            
+                            
+                          </ul>
+                        </div>,
                         "key": null,
-                        "patchFlag": 1,
+                        "patchFlag": 0,
                         "props": {
-                          "class": "text-xl font-medium mb-2",
+                          "class": "flex flex-col items-start gap-2 mb-3",
                         },
                         "ref": null,
                         "scopeId": null,
-                        "shapeFlag": 9,
+                        "shapeFlag": 17,
                         "slotScopeIds": null,
                         "ssContent": null,
                         "ssFallback": null,
@@ -593,7 +641,7 @@ VueWrapper {
                         "target": null,
                         "targetAnchor": null,
                         "transition": null,
-                        "type": "span",
+                        "type": "div",
                       },
                       {
                         "__v_isVNode": true,
@@ -607,14 +655,14 @@ VueWrapper {
                         "dynamicChildren": null,
                         "dynamicProps": null,
                         "el": <p
-                          class="text-neutral-400"
+                          class="text-neutral"
                         >
                           Sistema de gerenciamento de finanças pessoais.
                         </p>,
                         "key": null,
                         "patchFlag": 1,
                         "props": {
-                          "class": "text-neutral-400",
+                          "class": "text-neutral",
                         },
                         "ref": null,
                         "scopeId": null,
@@ -638,18 +686,23 @@ VueWrapper {
                     "el": <div
                       class="flex flex-col"
                     >
-                      <span
-                        class="text-red-400"
-                      >
-                        Frontend
-                      </span>
-                      <span
-                        class="text-xl font-medium mb-2"
+                      <div
+                        class="flex flex-col items-start gap-2 mb-3"
                       >
-                        Nuxt Finance
-                      </span>
+                        <span
+                          class="text-xl text-center md:text-left font-bold"
+                        >
+                          Nuxt Finance
+                        </span>
+                        <ul
+                          class="flex flex-wrap justify-center gap-2"
+                        >
+                          
+                          
+                        </ul>
+                      </div>
                       <p
-                        class="text-neutral-400"
+                        class="text-neutral"
                       >
                         Sistema de gerenciamento de finanças pessoais.
                       </p>
@@ -679,30 +732,28 @@ VueWrapper {
                 "dynamicChildren": null,
                 "dynamicProps": null,
                 "el": <div
-                  class="flex flex-col md:flex-row gap-4"
+                  class="flex flex-col md:flex-row gap-4 bg-white/10 p-4 md:p-10 rounded-md hover:scale-105 transition-transform"
                 >
-                  <nuxtimg
-                    alt="Nuxt Finance"
-                    class="w-100 md:min-w-[300px] md:w-[300px] h-[150px] bg-neutral-500 rounded-md"
-                    loading="lazy"
-                    provider="cloudinary"
-                    src="https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png"
-                  />
                   <div
                     class="flex flex-col"
                   >
-                    <span
-                      class="text-red-400"
-                    >
-                      Frontend
-                    </span>
-                    <span
-                      class="text-xl font-medium mb-2"
+                    <div
+                      class="flex flex-col items-start gap-2 mb-3"
                     >
-                      Nuxt Finance
-                    </span>
+                      <span
+                        class="text-xl text-center md:text-left font-bold"
+                      >
+                        Nuxt Finance
+                      </span>
+                      <ul
+                        class="flex flex-wrap justify-center gap-2"
+                      >
+                        
+                        
+                      </ul>
+                    </div>
                     <p
-                      class="text-neutral-400"
+                      class="text-neutral"
                     >
                       Sistema de gerenciamento de finanças pessoais.
                     </p>
@@ -711,7 +762,7 @@ VueWrapper {
                 "key": null,
                 "patchFlag": 0,
                 "props": {
-                  "class": "flex flex-col md:flex-row gap-4",
+                  "class": "flex flex-col md:flex-row gap-4 bg-white/10 p-4 md:p-10 rounded-md hover:scale-105 transition-transform",
                 },
                 "ref": null,
                 "scopeId": null,
@@ -736,64 +787,21 @@ VueWrapper {
                 "__v_skip": true,
                 "anchor": null,
                 "appContext": null,
-                "children": null,
-                "component": null,
-                "ctx": [Circular],
-                "dirs": null,
-                "dynamicChildren": null,
-                "dynamicProps": [
-                  "src",
-                  "alt",
-                ],
-                "el": <nuxtimg
-                  alt="Nuxt Finance"
-                  class="w-100 md:min-w-[300px] md:w-[300px] h-[150px] bg-neutral-500 rounded-md"
-                  loading="lazy"
-                  provider="cloudinary"
-                  src="https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png"
-                />,
-                "key": null,
-                "patchFlag": 8,
-                "props": {
-                  "alt": "Nuxt Finance",
-                  "class": "w-100 md:min-w-[300px] md:w-[300px] h-[150px] bg-neutral-500 rounded-md",
-                  "loading": "lazy",
-                  "provider": "cloudinary",
-                  "src": "https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png",
-                },
-                "ref": null,
-                "scopeId": null,
-                "shapeFlag": 1,
-                "slotScopeIds": null,
-                "ssContent": null,
-                "ssFallback": null,
-                "staticCount": 0,
-                "suspense": null,
-                "target": null,
-                "targetAnchor": null,
-                "transition": null,
-                "type": "NuxtImg",
-              },
-              {
-                "__v_isVNode": true,
-                "__v_skip": true,
-                "anchor": null,
-                "appContext": null,
-                "children": "Frontend",
+                "children": "Nuxt Finance",
                 "component": null,
                 "ctx": [Circular],
                 "dirs": null,
                 "dynamicChildren": null,
                 "dynamicProps": null,
                 "el": <span
-                  class="text-red-400"
+                  class="text-xl text-center md:text-left font-bold"
                 >
-                  Frontend
+                  Nuxt Finance
                 </span>,
                 "key": null,
                 "patchFlag": 1,
                 "props": {
-                  "class": "text-red-400",
+                  "class": "text-xl text-center md:text-left font-bold",
                 },
                 "ref": null,
                 "scopeId": null,
@@ -811,27 +819,21 @@ VueWrapper {
               {
                 "__v_isVNode": true,
                 "__v_skip": true,
-                "anchor": null,
+                "anchor": ,
                 "appContext": null,
-                "children": "Nuxt Finance",
+                "children": [],
                 "component": null,
                 "ctx": [Circular],
                 "dirs": null,
-                "dynamicChildren": null,
+                "dynamicChildren": [],
                 "dynamicProps": null,
-                "el": <span
-                  class="text-xl font-medium mb-2"
-                >
-                  Nuxt Finance
-                </span>,
+                "el": ,
                 "key": null,
-                "patchFlag": 1,
-                "props": {
-                  "class": "text-xl font-medium mb-2",
-                },
+                "patchFlag": 128,
+                "props": null,
                 "ref": null,
                 "scopeId": null,
-                "shapeFlag": 9,
+                "shapeFlag": 16,
                 "slotScopeIds": null,
                 "ssContent": null,
                 "ssFallback": null,
@@ -840,7 +842,7 @@ VueWrapper {
                 "target": null,
                 "targetAnchor": null,
                 "transition": null,
-                "type": "span",
+                "type": Symbol(v-fgt),
               },
               {
                 "__v_isVNode": true,
@@ -854,14 +856,14 @@ VueWrapper {
                 "dynamicChildren": null,
                 "dynamicProps": null,
                 "el": <p
-                  class="text-neutral-400"
+                  class="text-neutral"
                 >
                   Sistema de gerenciamento de finanças pessoais.
                 </p>,
                 "key": null,
                 "patchFlag": 1,
                 "props": {
-                  "class": "text-neutral-400",
+                  "class": "text-neutral",
                 },
                 "ref": null,
                 "scopeId": null,
@@ -882,33 +884,33 @@ VueWrapper {
             ],
             "el": <a
               href="https://github.com/gabrielcaiana/nuxt-finance"
+              image="https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png"
               target="_blank"
+              type="Frontend"
             >
               <div
-                class="flex flex-col md:flex-row gap-4"
+                class="flex flex-col md:flex-row gap-4 bg-white/10 p-4 md:p-10 rounded-md hover:scale-105 transition-transform"
               >
-                <nuxtimg
-                  alt="Nuxt Finance"
-                  class="w-100 md:min-w-[300px] md:w-[300px] h-[150px] bg-neutral-500 rounded-md"
-                  loading="lazy"
-                  provider="cloudinary"
-                  src="https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png"
-                />
                 <div
                   class="flex flex-col"
                 >
-                  <span
-                    class="text-red-400"
-                  >
-                    Frontend
-                  </span>
-                  <span
-                    class="text-xl font-medium mb-2"
+                  <div
+                    class="flex flex-col items-start gap-2 mb-3"
                   >
-                    Nuxt Finance
-                  </span>
+                    <span
+                      class="text-xl text-center md:text-left font-bold"
+                    >
+                      Nuxt Finance
+                    </span>
+                    <ul
+                      class="flex flex-wrap justify-center gap-2"
+                    >
+                      
+                      
+                    </ul>
+                  </div>
                   <p
-                    class="text-neutral-400"
+                    class="text-neutral"
                   >
                     Sistema de gerenciamento de finanças pessoais.
                   </p>
@@ -916,10 +918,12 @@ VueWrapper {
               </div>
             </a>,
             "key": null,
-            "patchFlag": 8,
+            "patchFlag": 24,
             "props": {
               "href": "https://github.com/gabrielcaiana/nuxt-finance",
+              "image": "https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png",
               "target": "_blank",
+              "type": "Frontend",
             },
             "ref": null,
             "scopeId": null,
@@ -937,7 +941,7 @@ VueWrapper {
           "suspense": null,
           "suspenseId": 0,
           "type": {
-            "__file": "/Users/gabrielcaiana/www/Frontend/nuxt3/website/components/CardProject/index.vue",
+            "__file": "/Users/gabrielcaiana/www/projects/website/components/CardProject/index.vue",
             "__name": "index",
             "components": {},
             "props": {
@@ -945,7 +949,7 @@ VueWrapper {
                 "required": true,
                 "type": [Function],
               },
-              "image": {
+              "stack": {
                 "required": true,
                 "type": [Function],
               },
@@ -953,10 +957,6 @@ VueWrapper {
                 "required": true,
                 "type": [Function],
               },
-              "type": {
-                "required": true,
-                "type": [Function],
-              },
               "url": {
                 "required": true,
                 "type": [Function],
@@ -985,33 +985,33 @@ VueWrapper {
         "dynamicProps": null,
         "el": <a
           href="https://github.com/gabrielcaiana/nuxt-finance"
+          image="https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png"
           target="_blank"
+          type="Frontend"
         >
           <div
-            class="flex flex-col md:flex-row gap-4"
+            class="flex flex-col md:flex-row gap-4 bg-white/10 p-4 md:p-10 rounded-md hover:scale-105 transition-transform"
           >
-            <nuxtimg
-              alt="Nuxt Finance"
-              class="w-100 md:min-w-[300px] md:w-[300px] h-[150px] bg-neutral-500 rounded-md"
-              loading="lazy"
-              provider="cloudinary"
-              src="https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png"
-            />
             <div
               class="flex flex-col"
             >
-              <span
-                class="text-red-400"
-              >
-                Frontend
-              </span>
-              <span
-                class="text-xl font-medium mb-2"
+              <div
+                class="flex flex-col items-start gap-2 mb-3"
               >
-                Nuxt Finance
-              </span>
+                <span
+                  class="text-xl text-center md:text-left font-bold"
+                >
+                  Nuxt Finance
+                </span>
+                <ul
+                  class="flex flex-wrap justify-center gap-2"
+                >
+                  
+                  
+                </ul>
+              </div>
               <p
-                class="text-neutral-400"
+                class="text-neutral"
               >
                 Sistema de gerenciamento de finanças pessoais.
               </p>
@@ -1045,7 +1045,7 @@ VueWrapper {
         "targetAnchor": null,
         "transition": null,
         "type": {
-          "__file": "/Users/gabrielcaiana/www/Frontend/nuxt3/website/components/CardProject/index.vue",
+          "__file": "/Users/gabrielcaiana/www/projects/website/components/CardProject/index.vue",
           "__name": "index",
           "components": {},
           "props": {
@@ -1053,7 +1053,7 @@ VueWrapper {
               "required": true,
               "type": [Function],
             },
-            "image": {
+            "stack": {
               "required": true,
               "type": [Function],
             },
@@ -1061,10 +1061,6 @@ VueWrapper {
               "required": true,
               "type": [Function],
             },
-            "type": {
-              "required": true,
-              "type": [Function],
-            },
             "url": {
               "required": true,
               "type": [Function],
@@ -1135,33 +1131,33 @@ VueWrapper {
         "dynamicProps": null,
         "el": <a
           href="https://github.com/gabrielcaiana/nuxt-finance"
+          image="https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png"
           target="_blank"
+          type="Frontend"
         >
           <div
-            class="flex flex-col md:flex-row gap-4"
+            class="flex flex-col md:flex-row gap-4 bg-white/10 p-4 md:p-10 rounded-md hover:scale-105 transition-transform"
           >
-            <nuxtimg
-              alt="Nuxt Finance"
-              class="w-100 md:min-w-[300px] md:w-[300px] h-[150px] bg-neutral-500 rounded-md"
-              loading="lazy"
-              provider="cloudinary"
-              src="https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png"
-            />
             <div
               class="flex flex-col"
             >
-              <span
-                class="text-red-400"
-              >
-                Frontend
-              </span>
-              <span
-                class="text-xl font-medium mb-2"
+              <div
+                class="flex flex-col items-start gap-2 mb-3"
               >
-                Nuxt Finance
-              </span>
+                <span
+                  class="text-xl text-center md:text-left font-bold"
+                >
+                  Nuxt Finance
+                </span>
+                <ul
+                  class="flex flex-wrap justify-center gap-2"
+                >
+                  
+                  
+                </ul>
+              </div>
               <p
-                class="text-neutral-400"
+                class="text-neutral"
               >
                 Sistema de gerenciamento de finanças pessoais.
               </p>
@@ -1206,9 +1202,10 @@ VueWrapper {
     "mixin": [Function],
     "mount": [Function],
     "provide": [Function],
+    "runWithContext": [Function],
     "unmount": [Function],
     "use": [Function],
-    "version": "3.2.45",
+    "version": "3.4.14",
   },
   "__setProps": [Function],
   "cleanUpCallbacks": [
@@ -1392,33 +1389,33 @@ VueWrapper {
   },
   "wrapperElement": <a
     href="https://github.com/gabrielcaiana/nuxt-finance"
+    image="https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png"
     target="_blank"
+    type="Frontend"
   >
     <div
-      class="flex flex-col md:flex-row gap-4"
+      class="flex flex-col md:flex-row gap-4 bg-white/10 p-4 md:p-10 rounded-md hover:scale-105 transition-transform"
     >
-      <nuxtimg
-        alt="Nuxt Finance"
-        class="w-100 md:min-w-[300px] md:w-[300px] h-[150px] bg-neutral-500 rounded-md"
-        loading="lazy"
-        provider="cloudinary"
-        src="https://res.cloudinary.com/gabrielcaiana/image/upload/f_auto,q_auto/gabrielcaiana-site/nuxt-finance.png"
-      />
       <div
         class="flex flex-col"
       >
-        <span
-          class="text-red-400"
-        >
-          Frontend
-        </span>
-        <span
-          class="text-xl font-medium mb-2"
+        <div
+          class="flex flex-col items-start gap-2 mb-3"
         >
-          Nuxt Finance
-        </span>
+          <span
+            class="text-xl text-center md:text-left font-bold"
+          >
+            Nuxt Finance
+          </span>
+          <ul
+            class="flex flex-wrap justify-center gap-2"
+          >
+            
+            
+          </ul>
+        </div>
         <p
-          class="text-neutral-400"
+          class="text-neutral"
         >
           Sistema de gerenciamento de finanças pessoais.
         </p>
diff --git a/components/header/__snapshots__/index.test.ts.snap b/components/header/__snapshots__/index.test.ts.snap
index d3ed594..981b597 100644
--- a/components/header/__snapshots__/index.test.ts.snap
+++ b/components/header/__snapshots__/index.test.ts.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Header > should render Header 1`] = `
 VueWrapper {
@@ -12,44 +12,32 @@ VueWrapper {
       data-v-app=""
     >
       <header
-        class="pt-8 pb-4 px-6 text-white border-b border-neutral-800 flex justify-between items-center"
+        class="container mx-auto pt-8 pb-4 px-6 md:px-0 text-white flex justify-between items-center"
       >
         <nuxt-link
-          class="font-medium"
+          class="font-bold text-xl gradient-text"
           to="/"
         >
           Gabriel Caiana
         </nuxt-link>
         <div
-          class="flex gap-3"
+          class="flex gap-4"
         >
-          <a
-            href="https://github.com/gabrielcaiana"
-            target="_blank"
+          <nuxt-link
+            to="/"
           >
-            <icon
-              name="ph:github-logo-fill"
-              size="24"
-            />
-          </a>
-          <a
-            href="https://twitter.com/gabriel_caiana"
-            target="_blank"
+            Início
+          </nuxt-link>
+          <nuxt-link
+            to="/blog"
           >
-            <icon
-              name="ph:twitter-logo-fill"
-              size="24"
-            />
-          </a>
-          <a
-            href="https://www.linkedin.com/in/gabrielcaiana/"
-            target="_blank"
+            Blog
+          </nuxt-link>
+          <nuxt-link
+            to="/about"
           >
-            <icon
-              name="ph:linkedin-logo-fill"
-              size="24"
-            />
-          </a>
+            Sobre mim
+          </nuxt-link>
         </div>
       </header>
     </div>,
@@ -121,6 +109,7 @@ VueWrapper {
       "asyncDep": null,
       "asyncResolved": false,
       "attrs": {},
+      "attrsProxy": null,
       "bc": null,
       "bm": null,
       "bu": null,
@@ -144,24 +133,29 @@ VueWrapper {
       "directives": null,
       "ec": null,
       "effect": ReactiveEffect {
+        "_depsLength": 3,
+        "_dirtyLevel": 0,
+        "_runnings": 0,
+        "_shouldSchedule": false,
+        "_trackId": 1,
         "active": true,
         "allowRecurse": true,
         "deps": [
-          Set {
-            [Circular],
+          Map {
+            [Circular] => 1,
           },
-          Set {
-            [Circular],
+          Map {
+            [Circular] => 1,
           },
-          Set {
-            [Circular],
+          Map {
+            [Circular] => 1,
           },
         ],
         "fn": [Function],
         "onTrack": undefined,
         "onTrigger": undefined,
-        "parent": undefined,
         "scheduler": [Function],
+        "trigger": [Function],
       },
       "emit": [Function],
       "emitsOptions": null,
@@ -194,29 +188,34 @@ VueWrapper {
       "rtc": null,
       "rtg": null,
       "scope": EffectScope {
-        "active": true,
+        "_active": true,
         "cleanups": [],
         "detached": true,
         "effects": [
           ReactiveEffect {
+            "_depsLength": 3,
+            "_dirtyLevel": 0,
+            "_runnings": 0,
+            "_shouldSchedule": false,
+            "_trackId": 1,
             "active": true,
             "allowRecurse": true,
             "deps": [
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
-              Set {
-                [Circular],
+              Map {
+                [Circular] => 1,
               },
             ],
             "fn": [Function],
             "onTrack": undefined,
             "onTrigger": undefined,
-            "parent": undefined,
             "scheduler": [Function],
+            "trigger": [Function],
           },
         ],
         "parent": undefined,
@@ -226,6 +225,7 @@ VueWrapper {
         "VTU_COMPONENT": {},
       },
       "slots": {},
+      "slotsProxy": null,
       "sp": null,
       "subTree": {
         "__v_isVNode": true,
@@ -282,6 +282,7 @@ VueWrapper {
           "asyncDep": null,
           "asyncResolved": false,
           "attrs": {},
+          "attrsProxy": null,
           "bc": null,
           "bm": null,
           "bu": null,
@@ -294,14 +295,19 @@ VueWrapper {
           "directives": null,
           "ec": null,
           "effect": ReactiveEffect {
+            "_depsLength": 0,
+            "_dirtyLevel": 0,
+            "_runnings": 0,
+            "_shouldSchedule": false,
+            "_trackId": 1,
             "active": true,
             "allowRecurse": true,
             "deps": [],
             "fn": [Function],
             "onTrack": undefined,
             "onTrigger": undefined,
-            "parent": undefined,
             "scheduler": [Function],
+            "trigger": [Function],
           },
           "emit": [Function],
           "emitsOptions": null,
@@ -330,19 +336,24 @@ VueWrapper {
           "rtc": null,
           "rtg": null,
           "scope": EffectScope {
-            "active": true,
+            "_active": true,
             "cleanups": [],
             "detached": true,
             "effects": [
               ReactiveEffect {
+                "_depsLength": 0,
+                "_dirtyLevel": 0,
+                "_runnings": 0,
+                "_shouldSchedule": false,
+                "_trackId": 1,
                 "active": true,
                 "allowRecurse": true,
                 "deps": [],
                 "fn": [Function],
                 "onTrack": undefined,
                 "onTrigger": undefined,
-                "parent": undefined,
                 "scheduler": [Function],
+                "trigger": [Function],
               },
             ],
             "parent": undefined,
@@ -350,6 +361,7 @@ VueWrapper {
           "setupContext": null,
           "setupState": {},
           "slots": {},
+          "slotsProxy": null,
           "sp": null,
           "subTree": {
             "__v_isVNode": true,
@@ -389,7 +401,7 @@ VueWrapper {
                     "target": null,
                     "targetAnchor": null,
                     "transition": null,
-                    "type": Symbol(Text),
+                    "type": Symbol(v-txt),
                   },
                 ],
                 "component": null,
@@ -398,7 +410,7 @@ VueWrapper {
                 "dynamicChildren": null,
                 "dynamicProps": null,
                 "el": <nuxt-link
-                  class="font-medium"
+                  class="font-bold text-xl gradient-text"
                   to="/"
                 >
                   Gabriel Caiana
@@ -406,7 +418,7 @@ VueWrapper {
                 "key": null,
                 "patchFlag": 0,
                 "props": {
-                  "class": "font-medium",
+                  "class": "font-bold text-xl gradient-text",
                   "to": "/",
                 },
                 "ref": null,
@@ -439,25 +451,19 @@ VueWrapper {
                         "__v_skip": true,
                         "anchor": null,
                         "appContext": null,
-                        "children": null,
+                        "children": "Início",
                         "component": null,
                         "ctx": [Circular],
                         "dirs": null,
                         "dynamicChildren": null,
                         "dynamicProps": null,
-                        "el": <icon
-                          name="ph:github-logo-fill"
-                          size="24"
-                        />,
+                        "el": Início,
                         "key": null,
                         "patchFlag": 0,
-                        "props": {
-                          "name": "ph:github-logo-fill",
-                          "size": "24",
-                        },
+                        "props": null,
                         "ref": null,
                         "scopeId": null,
-                        "shapeFlag": 1,
+                        "shapeFlag": 8,
                         "slotScopeIds": null,
                         "ssContent": null,
                         "ssFallback": null,
@@ -466,7 +472,7 @@ VueWrapper {
                         "target": null,
                         "targetAnchor": null,
                         "transition": null,
-                        "type": "Icon",
+                        "type": Symbol(v-txt),
                       },
                     ],
                     "component": null,
@@ -474,20 +480,15 @@ VueWrapper {
                     "dirs": null,
                     "dynamicChildren": null,
                     "dynamicProps": null,
-                    "el": <a
-                      href="https://github.com/gabrielcaiana"
-                      target="_blank"
+                    "el": <nuxt-link
+                      to="/"
                     >
-                      <icon
-                        name="ph:github-logo-fill"
-                        size="24"
-                      />
-                    </a>,
+                      Início
+                    </nuxt-link>,
                     "key": null,
                     "patchFlag": 0,
                     "props": {
-                      "href": "https://github.com/gabrielcaiana",
-                      "target": "_blank",
+                      "to": "/",
                     },
                     "ref": null,
                     "scopeId": null,
@@ -500,7 +501,7 @@ VueWrapper {
                     "target": null,
                     "targetAnchor": null,
                     "transition": null,
-                    "type": "a",
+                    "type": "nuxt-link",
                   },
                   {
                     "__v_isVNode": true,
@@ -513,25 +514,19 @@ VueWrapper {
                         "__v_skip": true,
                         "anchor": null,
                         "appContext": null,
-                        "children": null,
+                        "children": "Blog",
                         "component": null,
                         "ctx": [Circular],
                         "dirs": null,
                         "dynamicChildren": null,
                         "dynamicProps": null,
-                        "el": <icon
-                          name="ph:twitter-logo-fill"
-                          size="24"
-                        />,
+                        "el": Blog,
                         "key": null,
                         "patchFlag": 0,
-                        "props": {
-                          "name": "ph:twitter-logo-fill",
-                          "size": "24",
-                        },
+                        "props": null,
                         "ref": null,
                         "scopeId": null,
-                        "shapeFlag": 1,
+                        "shapeFlag": 8,
                         "slotScopeIds": null,
                         "ssContent": null,
                         "ssFallback": null,
@@ -540,7 +535,7 @@ VueWrapper {
                         "target": null,
                         "targetAnchor": null,
                         "transition": null,
-                        "type": "Icon",
+                        "type": Symbol(v-txt),
                       },
                     ],
                     "component": null,
@@ -548,20 +543,15 @@ VueWrapper {
                     "dirs": null,
                     "dynamicChildren": null,
                     "dynamicProps": null,
-                    "el": <a
-                      href="https://twitter.com/gabriel_caiana"
-                      target="_blank"
+                    "el": <nuxt-link
+                      to="/blog"
                     >
-                      <icon
-                        name="ph:twitter-logo-fill"
-                        size="24"
-                      />
-                    </a>,
+                      Blog
+                    </nuxt-link>,
                     "key": null,
                     "patchFlag": 0,
                     "props": {
-                      "href": "https://twitter.com/gabriel_caiana",
-                      "target": "_blank",
+                      "to": "/blog",
                     },
                     "ref": null,
                     "scopeId": null,
@@ -574,7 +564,7 @@ VueWrapper {
                     "target": null,
                     "targetAnchor": null,
                     "transition": null,
-                    "type": "a",
+                    "type": "nuxt-link",
                   },
                   {
                     "__v_isVNode": true,
@@ -587,25 +577,19 @@ VueWrapper {
                         "__v_skip": true,
                         "anchor": null,
                         "appContext": null,
-                        "children": null,
+                        "children": "Sobre mim",
                         "component": null,
                         "ctx": [Circular],
                         "dirs": null,
                         "dynamicChildren": null,
                         "dynamicProps": null,
-                        "el": <icon
-                          name="ph:linkedin-logo-fill"
-                          size="24"
-                        />,
+                        "el": Sobre mim,
                         "key": null,
                         "patchFlag": 0,
-                        "props": {
-                          "name": "ph:linkedin-logo-fill",
-                          "size": "24",
-                        },
+                        "props": null,
                         "ref": null,
                         "scopeId": null,
-                        "shapeFlag": 1,
+                        "shapeFlag": 8,
                         "slotScopeIds": null,
                         "ssContent": null,
                         "ssFallback": null,
@@ -614,7 +598,7 @@ VueWrapper {
                         "target": null,
                         "targetAnchor": null,
                         "transition": null,
-                        "type": "Icon",
+                        "type": Symbol(v-txt),
                       },
                     ],
                     "component": null,
@@ -622,20 +606,15 @@ VueWrapper {
                     "dirs": null,
                     "dynamicChildren": null,
                     "dynamicProps": null,
-                    "el": <a
-                      href="https://www.linkedin.com/in/gabrielcaiana/"
-                      target="_blank"
+                    "el": <nuxt-link
+                      to="/about"
                     >
-                      <icon
-                        name="ph:linkedin-logo-fill"
-                        size="24"
-                      />
-                    </a>,
+                      Sobre mim
+                    </nuxt-link>,
                     "key": null,
                     "patchFlag": 0,
                     "props": {
-                      "href": "https://www.linkedin.com/in/gabrielcaiana/",
-                      "target": "_blank",
+                      "to": "/about",
                     },
                     "ref": null,
                     "scopeId": null,
@@ -648,7 +627,7 @@ VueWrapper {
                     "target": null,
                     "targetAnchor": null,
                     "transition": null,
-                    "type": "a",
+                    "type": "nuxt-link",
                   },
                 ],
                 "component": null,
@@ -657,40 +636,28 @@ VueWrapper {
                 "dynamicChildren": null,
                 "dynamicProps": null,
                 "el": <div
-                  class="flex gap-3"
+                  class="flex gap-4"
                 >
-                  <a
-                    href="https://github.com/gabrielcaiana"
-                    target="_blank"
+                  <nuxt-link
+                    to="/"
                   >
-                    <icon
-                      name="ph:github-logo-fill"
-                      size="24"
-                    />
-                  </a>
-                  <a
-                    href="https://twitter.com/gabriel_caiana"
-                    target="_blank"
+                    Início
+                  </nuxt-link>
+                  <nuxt-link
+                    to="/blog"
                   >
-                    <icon
-                      name="ph:twitter-logo-fill"
-                      size="24"
-                    />
-                  </a>
-                  <a
-                    href="https://www.linkedin.com/in/gabrielcaiana/"
-                    target="_blank"
+                    Blog
+                  </nuxt-link>
+                  <nuxt-link
+                    to="/about"
                   >
-                    <icon
-                      name="ph:linkedin-logo-fill"
-                      size="24"
-                    />
-                  </a>
+                    Sobre mim
+                  </nuxt-link>
                 </div>,
                 "key": null,
                 "patchFlag": 0,
                 "props": {
-                  "class": "flex gap-3",
+                  "class": "flex gap-4",
                 },
                 "ref": null,
                 "scopeId": null,
@@ -712,50 +679,38 @@ VueWrapper {
             "dynamicChildren": [],
             "dynamicProps": null,
             "el": <header
-              class="pt-8 pb-4 px-6 text-white border-b border-neutral-800 flex justify-between items-center"
+              class="container mx-auto pt-8 pb-4 px-6 md:px-0 text-white flex justify-between items-center"
             >
               <nuxt-link
-                class="font-medium"
+                class="font-bold text-xl gradient-text"
                 to="/"
               >
                 Gabriel Caiana
               </nuxt-link>
               <div
-                class="flex gap-3"
+                class="flex gap-4"
               >
-                <a
-                  href="https://github.com/gabrielcaiana"
-                  target="_blank"
+                <nuxt-link
+                  to="/"
                 >
-                  <icon
-                    name="ph:github-logo-fill"
-                    size="24"
-                  />
-                </a>
-                <a
-                  href="https://twitter.com/gabriel_caiana"
-                  target="_blank"
+                  Início
+                </nuxt-link>
+                <nuxt-link
+                  to="/blog"
                 >
-                  <icon
-                    name="ph:twitter-logo-fill"
-                    size="24"
-                  />
-                </a>
-                <a
-                  href="https://www.linkedin.com/in/gabrielcaiana/"
-                  target="_blank"
+                  Blog
+                </nuxt-link>
+                <nuxt-link
+                  to="/about"
                 >
-                  <icon
-                    name="ph:linkedin-logo-fill"
-                    size="24"
-                  />
-                </a>
+                  Sobre mim
+                </nuxt-link>
               </div>
             </header>,
             "key": null,
             "patchFlag": 0,
             "props": {
-              "class": "pt-8 pb-4 px-6 text-white border-b border-neutral-800 flex justify-between items-center",
+              "class": "container mx-auto pt-8 pb-4 px-6 md:px-0 text-white flex justify-between items-center",
             },
             "ref": null,
             "scopeId": null,
@@ -773,7 +728,7 @@ VueWrapper {
           "suspense": null,
           "suspenseId": 0,
           "type": {
-            "__file": "/Users/gabrielcaiana/www/Frontend/nuxt3/website/components/header/index.vue",
+            "__file": "/Users/gabrielcaiana/www/projects/website/components/header/index.vue",
             "components": {},
             "render": [Function],
           },
@@ -789,44 +744,32 @@ VueWrapper {
         "dynamicChildren": null,
         "dynamicProps": null,
         "el": <header
-          class="pt-8 pb-4 px-6 text-white border-b border-neutral-800 flex justify-between items-center"
+          class="container mx-auto pt-8 pb-4 px-6 md:px-0 text-white flex justify-between items-center"
         >
           <nuxt-link
-            class="font-medium"
+            class="font-bold text-xl gradient-text"
             to="/"
           >
             Gabriel Caiana
           </nuxt-link>
           <div
-            class="flex gap-3"
+            class="flex gap-4"
           >
-            <a
-              href="https://github.com/gabrielcaiana"
-              target="_blank"
+            <nuxt-link
+              to="/"
             >
-              <icon
-                name="ph:github-logo-fill"
-                size="24"
-              />
-            </a>
-            <a
-              href="https://twitter.com/gabriel_caiana"
-              target="_blank"
+              Início
+            </nuxt-link>
+            <nuxt-link
+              to="/blog"
             >
-              <icon
-                name="ph:twitter-logo-fill"
-                size="24"
-              />
-            </a>
-            <a
-              href="https://www.linkedin.com/in/gabrielcaiana/"
-              target="_blank"
+              Blog
+            </nuxt-link>
+            <nuxt-link
+              to="/about"
             >
-              <icon
-                name="ph:linkedin-logo-fill"
-                size="24"
-              />
-            </a>
+              Sobre mim
+            </nuxt-link>
           </div>
         </header>,
         "key": null,
@@ -851,7 +794,7 @@ VueWrapper {
         "targetAnchor": null,
         "transition": null,
         "type": {
-          "__file": "/Users/gabrielcaiana/www/Frontend/nuxt3/website/components/header/index.vue",
+          "__file": "/Users/gabrielcaiana/www/projects/website/components/header/index.vue",
           "components": {},
           "render": [Function],
         },
@@ -909,44 +852,32 @@ VueWrapper {
         "dynamicChildren": null,
         "dynamicProps": null,
         "el": <header
-          class="pt-8 pb-4 px-6 text-white border-b border-neutral-800 flex justify-between items-center"
+          class="container mx-auto pt-8 pb-4 px-6 md:px-0 text-white flex justify-between items-center"
         >
           <nuxt-link
-            class="font-medium"
+            class="font-bold text-xl gradient-text"
             to="/"
           >
             Gabriel Caiana
           </nuxt-link>
           <div
-            class="flex gap-3"
+            class="flex gap-4"
           >
-            <a
-              href="https://github.com/gabrielcaiana"
-              target="_blank"
+            <nuxt-link
+              to="/"
             >
-              <icon
-                name="ph:github-logo-fill"
-                size="24"
-              />
-            </a>
-            <a
-              href="https://twitter.com/gabriel_caiana"
-              target="_blank"
+              Início
+            </nuxt-link>
+            <nuxt-link
+              to="/blog"
             >
-              <icon
-                name="ph:twitter-logo-fill"
-                size="24"
-              />
-            </a>
-            <a
-              href="https://www.linkedin.com/in/gabrielcaiana/"
-              target="_blank"
+              Blog
+            </nuxt-link>
+            <nuxt-link
+              to="/about"
             >
-              <icon
-                name="ph:linkedin-logo-fill"
-                size="24"
-              />
-            </a>
+              Sobre mim
+            </nuxt-link>
           </div>
         </header>,
         "key": null,
@@ -987,9 +918,10 @@ VueWrapper {
     "mixin": [Function],
     "mount": [Function],
     "provide": [Function],
+    "runWithContext": [Function],
     "unmount": [Function],
     "use": [Function],
-    "version": "3.2.45",
+    "version": "3.4.14",
   },
   "__setProps": [Function],
   "cleanUpCallbacks": [
@@ -1172,44 +1104,32 @@ VueWrapper {
     "VTU_COMPONENT": {},
   },
   "wrapperElement": <header
-    class="pt-8 pb-4 px-6 text-white border-b border-neutral-800 flex justify-between items-center"
+    class="container mx-auto pt-8 pb-4 px-6 md:px-0 text-white flex justify-between items-center"
   >
     <nuxt-link
-      class="font-medium"
+      class="font-bold text-xl gradient-text"
       to="/"
     >
       Gabriel Caiana
     </nuxt-link>
     <div
-      class="flex gap-3"
+      class="flex gap-4"
     >
-      <a
-        href="https://github.com/gabrielcaiana"
-        target="_blank"
+      <nuxt-link
+        to="/"
       >
-        <icon
-          name="ph:github-logo-fill"
-          size="24"
-        />
-      </a>
-      <a
-        href="https://twitter.com/gabriel_caiana"
-        target="_blank"
+        Início
+      </nuxt-link>
+      <nuxt-link
+        to="/blog"
       >
-        <icon
-          name="ph:twitter-logo-fill"
-          size="24"
-        />
-      </a>
-      <a
-        href="https://www.linkedin.com/in/gabrielcaiana/"
-        target="_blank"
+        Blog
+      </nuxt-link>
+      <nuxt-link
+        to="/about"
       >
-        <icon
-          name="ph:linkedin-logo-fill"
-          size="24"
-        />
-      </a>
+        Sobre mim
+      </nuxt-link>
     </div>
   </header>,
 }