feat(about): remove placeholder texts

.gitignore

@@ -29,6 +29,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

public/locales/en-US.json

@@ -23,8 +23,10 @@
 	},
 	"About": {
 		"Title": "About",
-		"Text": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, voluptatum culpa odio optio earum deserunt nulla alias sint eum accusamus commodi ipsum, eveniet sed similique explicabo nesciunt quo non! Provident.",
-		"TextFull": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, voluptatum culpa odio optio earum deserunt nulla alias sint eum accusamus commodi ipsum, eveniet sed similique explicabo nesciunt quo non! Provident. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, voluptatum culpa odio optio earum deserunt nulla alias sint eum accusamus commodi ipsum, eveniet sed similique explicabo nesciunt quo non! Provident."
+		"Text": "Hello! My name is Miguel, I am 19 years old, and I am a Backend developer.<br></br> I have experience in developing applications using NestJS, TypeScript, JavaScript, and NodeJS.",
+		"TextFull": "Hello! My name is Miguel, I am 19 years old, and I am a backend developer.<br></br> I have experience in developing applications using NestJS, TypeScript, JavaScript, and NodeJS.<br></br><br></br>My passion for technology and programming started early, as my father owned a computer store. This exposure led me to the field of programming, and since then, I have been specializing in creating efficient and scalable solutions. I enjoy tackling challenges and am always looking to learn and improve my skills.<br></br><br></br>I focus on delivering high-quality code, following best practices, and maintaining clear communication with the team. I believe that collaboration and continuous learning are essential for success in software development projects.<br></br><br></br>I am interested in expanding my skills and working with C# and Rust, exploring new languages and technologies.<br></br><br></br>If you are interested in learning more about my work or collaborating on a project, feel free to <contact>contact me!</contact>",
+		"Button": "Expand...",
+		"Button2": "Retract..."
 	},
 	"Error": {
 		"Copy": "Copy",

public/locales/pt-BR.json

@@ -23,8 +23,9 @@
 	},
 	"About": {
 		"Title": "Sobre",
-		"Text": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, voluptatum culpa odio optio earum deserunt nulla alias sint eum accusamus commodi ipsum, eveniet sed similique explicabo nesciunt quo non! Provident.",
-		"TextFull": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, voluptatum culpa odio optio earum deserunt nulla alias sint eum accusamus commodi ipsum, eveniet sed similique explicabo nesciunt quo non! Provident. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, voluptatum culpa odio optio earum deserunt nulla alias sint eum accusamus commodi ipsum, eveniet sed similique explicabo nesciunt quo non! Provident.",
+		"Text": "Olá! Meu nome é Miguel, tenho 19 anos e sou programador Backend.<br></br>Tenho experiência no desenvolvimento de aplicações utilizando NestJS, TypeScript, JavaScript e NodeJS.",
+		"TextFull": "Olá! Meu nome é Miguel, tenho 19 anos e sou programador backend.<br></br> Tenho experiência no desenvolvimento de aplicações utilizando NestJS, TypeScript, JavaScript e NodeJS.<br></br><br></br>Minha paixão por tecnologia e programação começou cedo, pois meu pai tinha uma loja de informática. Essa exposição me levou à área de programação, e desde então venho me especializando em criar soluções eficientes e escaláveis. Gosto de enfrentar desafios e estou sempre buscando aprender e aprimorar minhas habilidades.<br></br><br></br>Trabalho com foco em entregar código de alta qualidade, seguindo boas práticas e mantendo uma comunicação clara com a equipe. Acredito que a colaboração e o aprendizado contínuo são essenciais para o sucesso em projetos de desenvolvimento de software.<br></br><br></br>Tenho interesse em expandir minhas habilidades e trabalhar com C# e Rust, explorando novas linguagens e tecnologias.<br></br><br></br>Se você está interessado em saber mais sobre meu trabalho ou colaborar em algum projeto, sinta-se à vontade para <contact>entrar em contato!</contact>",
+
 		"Button": "Expandir...",
 		"Button2": "Recolher..."
 	},

src/components/about/about-text.tsx

@@ -2,26 +2,36 @@
 
 import { Button } from "@/components/ui";
 import { useTranslations } from "next-intl";
-import { useState, useEffect } from "react";
+import { useState } from "react";
+import { HeaderAnchor } from "../header/header-anchor";
 
 export function AboutText() {
   const t = useTranslations("About");
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
 
-  useEffect(() => {
-    const element = document.getElementById("about_text");
-    if (element) {
-      element.textContent = isExpanded ? t("TextFull") : t("Text");
-    }
-  }, [isExpanded, t]);
-
   function handleClick() {
-    setIsExpanded((isExpanded) => !isExpanded);
+    setIsExpanded((prev) => !prev);
   }
 
   return (
-    <Button className="text-blue-500" variant="link" onClick={handleClick}>
-      {isExpanded ? t("Button2") : t("Button")}
-    </Button>
+    <>
+      <div>
+        {isExpanded ? (
+          <>
+            {t.rich("TextFull", {
+              br: () => <br/>,
+              contact: (text) => <HeaderAnchor target="contact" text={text as string}/>
+            })}
+          </>
+        ) : (
+          t.rich("Text", {
+            br: () => <br/>
+          })
+        )}
+      </div>
+      <Button className="text-blue-500" variant="link" onClick={handleClick}>
+        {isExpanded ? t("Button2") : t("Button")}
+      </Button>
+    </>
   );
 }

src/components/about/about.tsx

@@ -16,9 +16,6 @@ export function About() {
 					className="size-80 mt-2 mr-8 inline-block rounded-xl"
 				/>
 				<div className="mt-8 max-w-xl">
-          <p id="about_text">
-            {t("Text")}
-          </p>
           <AboutText />
         </div>
 			</div>

src/components/header/header-anchor.tsx

@@ -6,10 +6,10 @@ import { ComponentProps, MouseEvent,  useEffect, useState } from "react"
 
 interface Props extends ComponentProps<"a"> {
   target: string
-  active?: boolean
+  text?: string
 }
 
-export function HeaderAnchor({ target }: Readonly<Props>) {
+export function HeaderAnchor({ target, text }: Readonly<Props>) {
   const t = useTranslations("Header");
 
   const [anchorTarget, setAnchorTarget] = useState<HTMLElement | null>(null);
@@ -23,5 +23,5 @@ export function HeaderAnchor({ target }: Readonly<Props>) {
     anchorTarget?.scrollIntoView({ behavior: "smooth", block: "start" })
   }
 
-  return <Link onClick={handleClick} href={`#${target}`}>{t(target)}</Link>
+  return <Link onClick={handleClick} href={`#${target}`}>{text ?? t(target)}</Link>
 }