Merge pull request #2 from soujvnunes/feat/v2.0.1

Feat/v2.0.1
soujvnunes · Mar 30, 2024 · 8b1bee4 · 8b1bee4
2 parents f566593 + 13f4fce
commit 8b1bee4
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -65,27 +65,26 @@
       <div class="flex h-dvh">
         <span class="m-auto text-center">
           <h1>
-            <strong class="text-2xl">
-              sou
+            <strong class="m-auto animate-pulse text-2xl"
+              >sou
               <strong>
                 <span class="tracking-[-0.2em]">
                   <span class="text-red-600 dark:text-red-400">j</span>
                   <span class="text-amber-600 dark:text-amber-400">v</span>
                 </span>
-                <span class="text-blue-600 dark:text-blue-400">n</span>
-              </strong>
-              unes
+                <span class="text-blue-600 dark:text-blue-400">n</span> </strong
+              >unes
             </strong>
           </h1>
           <p class="mb-4">victor nunes - design engineer</p>
           <ul class="space-x-2">
             <li class="inline-block">
               <a
-                class="flex h-10 min-w-10 items-center justify-center rounded-lg pl-2 pr-2 text-xs font-bold uppercase tracking-wide text-black/80 hover:bg-black/10 motion-safe:transition-colors dark:text-white dark:hover:bg-white/10"
+                class="flex h-10 min-w-10 items-center justify-center rounded-lg pl-2 pr-2 text-xs font-bold uppercase tracking-wide text-amber-600 hover:bg-amber-500/10 motion-safe:transition-colors dark:text-amber-400"
                 target="_blank"
                 rel="noreferrer"
-                aria-label="Medium"
                 href="https://medium.com/@soujvnunes"
+                title="Visite meu perfil do Medium"
               >
                 <svg
                   focusable="false"
@@ -101,11 +100,11 @@ <h1>
             </li>
             <li class="inline-block">
               <a
-                class="flex h-10 min-w-10 items-center justify-center rounded-lg pl-2 pr-2 text-xs font-bold uppercase tracking-wide text-black/80 hover:bg-black/10 motion-safe:transition-colors dark:text-white dark:hover:bg-white/10"
+                class="flex h-10 min-w-10 items-center justify-center rounded-lg pl-2 pr-2 text-xs font-bold uppercase tracking-wide text-amber-600 hover:bg-amber-500/10 motion-safe:transition-colors dark:text-amber-400"
                 target="_blank"
                 rel="noreferrer"
-                aria-label="GitHub"
-                href="https://github.com/soujvnunes"
+                href="https://www.linkedin.com/in/soujvnunes/"
+                title="Visite meu perfil do LinkedIn"
               >
                 <svg
                   focusable="false"
@@ -114,18 +113,18 @@ <h1>
                   class="inline-flex h-6 w-6 fill-current"
                 >
                   <path
-                    d="M11.94,2C6.47,2,2,6.5,2,12c0,4.37,2.86,8.12,6.83,9.5.5.12.62-.25.62-.5v-1.75c-2.73.62-3.35-1.25-3.35-1.25-.5-1.12-1.12-1.5-1.12-1.5-.87-.62.12-.62.12-.62.99.12,1.49,1,1.49,1,.87,1.62,2.36,1.12,2.86.87.12-.62.37-1.12.62-1.37-2.24-.25-4.47-1.12-4.47-5,0-1.12.37-2,.99-2.62-.12-.25-.5-1.25.12-2.62,0,0,.87-.25,2.73,1,.75-.25,1.61-.37,2.48-.37s1.74.12,2.48.37c1.86-1.25,2.73-1,2.73-1,.5,1.37.25,2.37.12,2.62.62.75.99,1.62.99,2.62,0,3.87-2.36,4.62-4.6,4.87.37.5.75,1.12.75,2v2.75c0,.25.12.62.75.5,3.98-1.37,6.83-5.12,6.83-9.5-.12-5.5-4.6-10-10.06-10Z"
+                    d="M20.11,3H3.78c-.45,0-.78.34-.78.79v16.54c0,.34.34.68.78.68h16.43c.45,0,.78-.34.78-.79V3.79c-.11-.45-.45-.79-.89-.79ZM8.25,18.3h-2.57v-8.55h2.68v8.55h-.11ZM7.02,8.62c-.89,0-1.57-.79-1.57-1.58,0-.9.67-1.57,1.57-1.57s1.57.67,1.57,1.57c-.11.79-.78,1.58-1.57,1.58ZM18.2,18.3h-2.68v-4.16c0-1.01,0-2.25-1.34-2.25s-1.57,1.12-1.57,2.25v4.28h-2.68v-8.66h2.57v1.12c.34-.67,1.23-1.35,2.46-1.35,2.68,0,3.13,1.8,3.13,4.05v4.73h.11Z"
                   ></path>
                 </svg>
               </a>
             </li>
             <li class="inline-block">
               <a
-                class="flex h-10 min-w-10 items-center justify-center rounded-lg pl-2 pr-2 text-xs font-bold uppercase tracking-wide text-black/80 hover:bg-black/10 motion-safe:transition-colors dark:text-white dark:hover:bg-white/10"
+                class="flex h-10 min-w-10 items-center justify-center rounded-lg pl-2 pr-2 text-xs font-bold uppercase tracking-wide text-amber-600 hover:bg-amber-500/10 motion-safe:transition-colors dark:text-amber-400"
                 target="_blank"
                 rel="noreferrer"
-                aria-label="LinkedIn"
-                href="https://www.linkedin.com/in/soujvnunes/"
+                href="https://www.behance.net/soujvnunes"
+                title="Visite meu perfil do Behance"
               >
                 <svg
                   focusable="false"
@@ -134,18 +133,18 @@ <h1>
                   class="inline-flex h-6 w-6 fill-current"
                 >
                   <path
-                    d="M20.11,3H3.78c-.45,0-.78.34-.78.79v16.54c0,.34.34.68.78.68h16.43c.45,0,.78-.34.78-.79V3.79c-.11-.45-.45-.79-.89-.79ZM8.25,18.3h-2.57v-8.55h2.68v8.55h-.11ZM7.02,8.62c-.89,0-1.57-.79-1.57-1.58,0-.9.67-1.57,1.57-1.57s1.57.67,1.57,1.57c-.11.79-.78,1.58-1.57,1.58ZM18.2,18.3h-2.68v-4.16c0-1.01,0-2.25-1.34-2.25s-1.57,1.12-1.57,2.25v4.28h-2.68v-8.66h2.57v1.12c.34-.67,1.23-1.35,2.46-1.35,2.68,0,3.13,1.8,3.13,4.05v4.73h.11Z"
+                    d="M10.49,13.49c0,.78-.56,1.02-1.25,1.02h-1.81v-2.13h1.85c.75,0,1.22.31,1.22,1.1h0ZM10.18,10.18c0-.71-.55-.88-1.16-.88h-1.59v1.8h1.72c.61,0,1.04-.27,1.04-.92h0ZM15.5,11.11c-.74,0-1.23.46-1.27,1.19h2.5c-.07-.74-.45-1.19-1.23-1.19h0ZM21,4.93v14.14c0,1.06-.86,1.93-1.93,1.93H4.93c-1.06,0-1.93-.86-1.93-1.93V4.93c0-1.06.86-1.93,1.93-1.93h14.14c1.06,0,1.93.86,1.93,1.93ZM13.92,9.15h3.13v-.76h-3.13v.76ZM12.19,13.58c0-.97-.46-1.8-1.41-2.07.69-.33,1.05-.71,1.05-1.49,0-1.53-1.15-1.91-2.47-1.91h-3.64v7.71h3.74c1.4,0,2.72-.68,2.72-2.25ZM18.27,12.98c0-1.65-.97-3.03-2.72-3.03s-2.86,1.28-2.86,2.96,1.1,2.93,2.86,2.93c1.33,0,2.2-.6,2.62-1.88h-1.35c-.15.48-.75.73-1.21.73-.9,0-1.37-.53-1.37-1.42h4.03c0-.09.01-.19.01-.29h0Z"
                   ></path>
                 </svg>
               </a>
             </li>
             <li class="inline-block">
               <a
-                class="flex h-10 min-w-10 items-center justify-center rounded-lg pl-2 pr-2 text-xs font-bold uppercase tracking-wide text-black/80 hover:bg-black/10 motion-safe:transition-colors dark:text-white dark:hover:bg-white/10"
+                class="flex h-10 min-w-10 items-center justify-center rounded-lg pl-2 pr-2 text-xs font-bold uppercase tracking-wide text-amber-600 hover:bg-amber-500/10 motion-safe:transition-colors dark:text-amber-400"
                 target="_blank"
                 rel="noreferrer"
-                aria-label="Behance"
-                href="https://www.behance.net/soujvnunes"
+                href="https://github.com/soujvnunes"
+                title="Visite meu perfil do GitHub"
               >
                 <svg
                   focusable="false"
@@ -154,7 +153,7 @@ <h1>
                   class="inline-flex h-6 w-6 fill-current"
                 >
                   <path
-                    d="M10.49,13.49c0,.78-.56,1.02-1.25,1.02h-1.81v-2.13h1.85c.75,0,1.22.31,1.22,1.1h0ZM10.18,10.18c0-.71-.55-.88-1.16-.88h-1.59v1.8h1.72c.61,0,1.04-.27,1.04-.92h0ZM15.5,11.11c-.74,0-1.23.46-1.27,1.19h2.5c-.07-.74-.45-1.19-1.23-1.19h0ZM21,4.93v14.14c0,1.06-.86,1.93-1.93,1.93H4.93c-1.06,0-1.93-.86-1.93-1.93V4.93c0-1.06.86-1.93,1.93-1.93h14.14c1.06,0,1.93.86,1.93,1.93ZM13.92,9.15h3.13v-.76h-3.13v.76ZM12.19,13.58c0-.97-.46-1.8-1.41-2.07.69-.33,1.05-.71,1.05-1.49,0-1.53-1.15-1.91-2.47-1.91h-3.64v7.71h3.74c1.4,0,2.72-.68,2.72-2.25ZM18.27,12.98c0-1.65-.97-3.03-2.72-3.03s-2.86,1.28-2.86,2.96,1.1,2.93,2.86,2.93c1.33,0,2.2-.6,2.62-1.88h-1.35c-.15.48-.75.73-1.21.73-.9,0-1.37-.53-1.37-1.42h4.03c0-.09.01-.19.01-.29h0Z"
+                    d="M11.94,2C6.47,2,2,6.5,2,12c0,4.37,2.86,8.12,6.83,9.5.5.12.62-.25.62-.5v-1.75c-2.73.62-3.35-1.25-3.35-1.25-.5-1.12-1.12-1.5-1.12-1.5-.87-.62.12-.62.12-.62.99.12,1.49,1,1.49,1,.87,1.62,2.36,1.12,2.86.87.12-.62.37-1.12.62-1.37-2.24-.25-4.47-1.12-4.47-5,0-1.12.37-2,.99-2.62-.12-.25-.5-1.25.12-2.62,0,0,.87-.25,2.73,1,.75-.25,1.61-.37,2.48-.37s1.74.12,2.48.37c1.86-1.25,2.73-1,2.73-1,.5,1.37.25,2.37.12,2.62.62.75.99,1.62.99,2.62,0,3.87-2.36,4.62-4.6,4.87.37.5.75,1.12.75,2v2.75c0,.25.12.62.75.5,3.98-1.37,6.83-5.12,6.83-9.5-.12-5.5-4.6-10-10.06-10Z"
                   ></path>
                 </svg>
               </a>

diff --git a/src/config/i18n/locales/en/translation.json b/src/config/i18n/locales/en/translation.json
@@ -43,6 +43,7 @@
       "company": "Bepro Network"
     }
   },
-  "contributions_cta": "See live",
-  "socials_label": "Visit my profile on {{name}}"
+  "socials_label": "Visit my profile on {{name}}",
+  "footer_socials_caption": "Connect",
+  "footer_socials_title": "Let's keep people together!"
 }
diff --git a/src/config/i18n/locales/pt/translation.json b/src/config/i18n/locales/pt/translation.json
@@ -43,6 +43,7 @@
       "company": "Bepro Network"
     }
   },
-  "contributions_cta": "Veja no ar",
-  "socials_label": "Visite meu perfil do {{name}}"
+  "socials_label": "Visite meu perfil do {{name}}",
+  "footer_socials_caption": "Conecte-se",
+  "footer_socials_title": "Vamos manter as pessoas juntas!"
 }
diff --git a/src/containers/FooterSocials.tsx b/src/containers/FooterSocials.tsx
@@ -1,24 +1,27 @@
+import { useTranslation } from "react-i18next";
 import { twMerge } from "tailwind-merge";
 import classNames from "consts/classNames";
 import Socials from "./Socials";
 
 export default function FooterSocials() {
+  const [t] = useTranslation();
+
   return (
     <div className="mb-6 mt-10 max-md:space-y-4 md:flex md:flex-row-reverse md:items-center md:justify-center">
-      <div className="md:basis-4/12 md:text-left lg:basis-3/12">
+      <div className="basis-4/12 md:text-left">
         <p
           className={twMerge(
             classNames.text.variant.caption,
             "text-amber-600 md:pl-1 dark:text-amber-400",
           )}
         >
-          Connect
+          {t("footer_socials_caption")}
         </p>
         <h2 className="text-2xl font-bold md:pb-6 md:text-[2.75rem]/[2.75rem]">
-          Let&apos;s keep people together!
+          {t("footer_socials_title")}
         </h2>
       </div>
-      <div className="md:basis-4/12 md:text-right lg:basis-3/12">
+      <div className="basis-4/12 md:text-right">
         <Socials />
       </div>
     </div>