Merge pull request #2 from goismurilo/develop

Internalization - i18n

.vscode/settings.json

@@ -3,7 +3,10 @@
     "Gois",
     "goismurilo",
     "headlessui",
+    "Hebbo",
     "heroicons",
+    "instagram",
+    "Kalam",
     "Linkedin",
     "Roboto",
     "whatsapp",

components/AboutMe/index.tsx → app/[locale]/components/AboutMe/index.tsx

@@ -1,13 +1,16 @@
 import Image from "next/image";
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+
+import { ClipboardDocumentCheckIcon } from "@heroicons/react/24/outline";
 
 import ExampleImageGirl from "../../assets/images/example-image-girl.svg";
 import { Button } from "../Button";
-import { ClipboardDocumentCheckIcon } from "@heroicons/react/24/outline";
-import { mainStacks } from "../../utils/stacks";
-import Link from "next/link";
 import { profile } from "../../utils/profile";
+import { mainStacks } from "../../utils/stacks";
 
 export default function AboutMe() {
+  const t = useTranslations("AboutMe");
   return (
     <div
       id="about"
@@ -33,23 +36,34 @@ export default function AboutMe() {
             })}
           </div>
           <div className="flex flex-col gap-4">
-            <span className="section-table text-secondary-color">About me</span>
+            <span className="section-table text-secondary-color">
+              {
+                //? i18n: About me
+                t("section")
+              }
+            </span>
             <h2>
-              I’m a passionate software developer looking for my first
-              international opportunity
+              {
+                //? i18n: I’m a passionate software developer looking for my first international opportunity
+                t("title")
+              }
             </h2>
             <p className="text-text-secondary">
-              {`Beyond coding, I'm a coffee enthusiast, a cat lover, and a
-              self-taught artist who enjoys spending my free time doodling. I am
-              currently seeking opportunities to bring my skills and enthusiasm
-              to a tech company in the United States or Europe and am excited
-              about the prospect of relocating to pursue new challenges.`}
+              {
+                //? i18n: Beyond coding, I'm a coffee enthusiast, a cat lover, and a self-taught artist who enjoys spending my free time doodling. I am currently seeking opportunities to bring my skills and enthusiasm to a tech company in the United States or Europe and am excited about the prospect of relocating to pursue new challenges.
+                t("subtitle")
+              }
             </p>
           </div>
           <Link href={profile.cv}>
-            <Button className="w-44">
+            <Button className="w-48">
               <ClipboardDocumentCheckIcon className="w-6 h-6" />
-              <p className="font-bold">My Resume</p>
+              <p className="font-bold">
+                {
+                  //? i18n: About me
+                  t("button")
+                }
+              </p>
             </Button>
           </Link>
         </div>

components/Contact/index.tsx → app/[locale]/components/Contact/index.tsx

@@ -1,10 +1,14 @@
+"use client";
+
 import Image from "next/image";
 
 import AvatarImage from "../../assets/images/avatar.svg";
 import { FaWhatsapp, FaGithub, FaLinkedin, FaInstagram } from "react-icons/fa";
 import { profile } from "../../utils/profile";
 import { Button } from "../Button";
 import { ArrowRightIcon } from "@heroicons/react/24/outline";
+import { useTranslations } from "next-intl";
+import { useParams } from "next/navigation";
 
 export default function Contact() {
   const contacts = [
@@ -29,6 +33,10 @@ export default function Contact() {
       href: profile.whatsapp,
     },
   ];
+
+  const t = useTranslations("Contacts");
+  const params = useParams();
+
   return (
     <div
       id="contacts"
@@ -38,17 +46,45 @@ export default function Contact() {
         <Image src={AvatarImage} width={160} height={160} alt="Profile Image" />
         <div className="flex flex-col gap-4">
           <div>
-            <span className="font-cursive text-secondary-color">Contact</span>
-            <h2>Enjoyed my work? Let’s work together</h2>
+            <span className="font-cursive text-secondary-color">
+              {
+                //? i18n: Contact
+                t("section")
+              }
+            </span>
+            <h2>
+              {
+                //? i18n: Enjoyed my work? Let’s work together
+                t("title")
+              }
+            </h2>
           </div>
-          <p>
-            I’m always up for a chat. Pop me an email at
-            <span className="text-secondary-color underline">
-              {" "}
-              {profile.email}
-            </span>{" "}
-            or give me a shout on social media.
-          </p>
+          {/* !TODO: Add internalization */}
+          {/* {
+              //? i18n: I’m always up for a chat. Pop me an email at
+              t("paragraph", {
+                email: profile.email,
+              })
+            } */}
+          {params.locale === "en" ? (
+            <p>
+              Im always up for a chat. Pop me an email at
+              <span className="text-secondary-color underline">
+                {" "}
+                {profile.email}
+              </span>{" "}
+              or give me a shout on social media.
+            </p>
+          ) : (
+            <p>
+              Estou sempre pronto para bater um papo. Envie um e-mail para{" "}
+              <span className="text-secondary-color underline">
+                {" "}
+                {profile.email}
+              </span>{" "}
+              ou fale comigo em minhas redes sociais
+            </p>
+          )}
           <div className="flex gap-2">
             {contacts.map((contact, key) => {
               return (
@@ -69,7 +105,7 @@ export default function Contact() {
         <form className="flex flex-col gap-4 h-full" action="">
           <input
             type="text"
-            placeholder="Name"
+            placeholder={t("form.name")}
             className="px-4 py-3 rounded-lg accent-secondary-color caret-secondary-color focus:border-secondary-color bg-surface-background text-text-secondary"
           />
           <input
@@ -78,12 +114,17 @@ export default function Contact() {
             className="px-4 py-3 rounded-lg accent-secondary-color focus:border-secondary-color bg-surface-background text-text-secondary"
           />
           <textarea
-            placeholder="Your message"
+            placeholder={t("form.message")}
             className="min-h-40 h-full px-4 py-3 rounded-lg focus:border-secondary-color bg-surface-background text-text-secondary"
           />
         </form>
-        <Button className="flex gap-2 max-w-60">
-          <p className="font-bold">Send me a message</p>
+        <Button className="flex gap-2 max-w-[14.6rem]">
+          <p className="font-bold">
+            {
+              //? i18n: Send me a message
+              t("button")
+            }
+          </p>
           <ArrowRightIcon className="w-6 h-6" />
         </Button>
       </div>

components/Footer/index.tsx → app/[locale]/components/Footer/index.tsx

@@ -1,18 +1,21 @@
+import { useTranslations } from "next-intl";
 import Image from "next/image";
 
 export default function Footer() {
+  const t = useTranslations("Footer");
+
   return (
     <footer className="flex flex-col flex-wrap mx-auto max-w-7xl justify-center items-center p-10">
       <p className="text-center">
-        Copyright &copy; 2032 goisMurilo | All rights reserved.
+        Copyright &copy; 2032 goisMurilo | {t("rights")}
       </p>
       <a
         href="https://www.linkedin.com/in/goismurilo/"
         target="_blank"
         rel="noopener noreferrer"
         className="text-text-secondary hover:text-primary-color-400 flex items-center"
       >
-        <p>Desenvolvido por </p>
+        <p>{t("developer")}</p>
         <span>
           <Image
             src="/logo-with-name.svg"

components/Landing/index.tsx → app/[locale]/components/Landing/index.tsx

@@ -1,4 +1,7 @@
+"use client";
+
 import Image from "next/image";
+import { useTranslations } from "next-intl";
 
 import {
   ClipboardDocumentCheckIcon,
@@ -14,6 +17,8 @@ import Link from "next/link";
 import { profile } from "../../utils/profile";
 
 export default function Landing() {
+  const t = useTranslations("Landing");
+
   const [position, setPosition] = useState({ bottom: 0, left: 0 });
   const referenceElement = useRef(null);
   const targetElement = useRef(null);
@@ -59,36 +64,56 @@ export default function Landing() {
       />
       <div className="flex flex-col gap-6 md:gap-8">
         <h1 className="bg-gradient-to-r font-cursive from-[#9955E8]  to-secondary-color inline-block text-transparent bg-clip-text text-5xl">
-          {`Hi, I'm Murilo`}
+          {
+            //? i18n: Hi, I'm {username}
+            t("title", { username: profile.username })
+          }
         </h1>
         <div className="flex flex-col gap-6">
-          <h2>Full-stack developer and innovation enthusiast</h2>
+          <h2>
+            {
+              //? i18n: Full-stack developer and innovation enthusiast
+              t("subtitle")
+            }
+          </h2>
           <p>
-            Over 4 years of experience in the tech industry. I specialize in
-            building innovative web and mobile applications using technologies
-            such as React, React Native, and Node.js.
+            {
+              //? i18n: Over 3 years of experience in the tech industry. I specialize in building innovative web and mobile applications using technologies such as React, React Native e Angular.
+              t("paragraph")
+            }
           </p>
         </div>
         <div className="flex gap-2">
           <Link href={profile.cv}>
-            <Button buttonType="secondary" className="w-44 flex gap-2">
+            <Button buttonType="secondary" className="w-48 flex gap-2">
               <ClipboardDocumentCheckIcon className="w-6 h-6" />
-              <p className="font-bold">My Resume</p>
+              <p className="font-bold">
+                {
+                  //? i18n: My Resume
+                  t("button1")
+                }
+              </p>
             </Button>
           </Link>
 
           <div className="relative">
             <Button
-              className="w-44 flex gap-2"
+              className="w-48 flex gap-2"
               onClick={() => scrollToID("contacts")}
             >
-              <p className="font-bold">Get in touch</p>
+              <p className="font-bold">
+                {
+                  //? i18n: Get in touch
+                  t("button2")
+                }
+              </p>
               <ArrowRightIcon className="w-6 h-6" />
 
               <Image
                 src={ArrowCurved}
                 className="absolute -bottom-20 left-0 lg:hidden rotate-[130deg]"
-                alt="Pequeno gráfico de experiencias"
+                // TODO: Translate and add description
+                alt=""
               />
             </Button>
           </div>
@@ -98,16 +123,10 @@ export default function Landing() {
         src={ArrowCurved}
         ref={targetElement}
         className="hidden lg:flex absolute rotate-[130deg]"
-        alt="Pequeno gráfico de experiencias"
+        // TODO: Translate and add description
+        alt=""
         style={{ top: position.bottom, right: position.left }}
       />
     </div>
   );
 }
-
-{
-  /* Eu sou desenvolvedor FullStack, atualmente trabalho com C#
-principalmente e curso o último semestre da faculdade de ADS(IFBA).
-Seja muito bem-vindo e qualquer dúvida ou sugestão me mande mensagem
-nas minhas redes sociais. Abraços! */
-}