diff --git a/public/icons/CSS3.svg b/public/icons/CSS3.svg
new file mode 100644
index 0000000..ff5b6ce
--- /dev/null
+++ b/public/icons/CSS3.svg
@@ -0,0 +1 @@
+
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
index d21ab0d..1046a96 100644
--- a/public/locales/en-US.json
+++ b/public/locales/en-US.json
@@ -22,7 +22,9 @@
"Details": "Your next Back-end Developer"
},
"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."
+ "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."
},
"Error": {
"Copy": "Copy",
diff --git a/public/locales/pt-BR.json b/public/locales/pt-BR.json
index ad9d196..38f580b 100644
--- a/public/locales/pt-BR.json
+++ b/public/locales/pt-BR.json
@@ -22,7 +22,11 @@
"Details": "Seu próximo Desenvolvedor Back-end"
},
"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."
+ "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.",
+ "Button": "Expandir...",
+ "Button2": "Recolher..."
},
"Error": {
"Copy": "Copiar",
diff --git a/public/next.svg b/public/next.svg
deleted file mode 100644
index 5174b28..0000000
--- a/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
-
-
{t("Text")}
-
- );
-}
diff --git a/src/components/about/about-text.tsx b/src/components/about/about-text.tsx
new file mode 100644
index 0000000..9a211d0
--- /dev/null
+++ b/src/components/about/about-text.tsx
@@ -0,0 +1,27 @@
+"use client"
+
+import { Button } from "@/components/ui";
+import { useTranslations } from "next-intl";
+import { useState, useEffect } from "react";
+
+export function AboutText() {
+ const t = useTranslations("About");
+ const [isExpanded, setIsExpanded] = useState(false);
+
+ useEffect(() => {
+ const element = document.getElementById("about_text");
+ if (element) {
+ element.textContent = isExpanded ? t("TextFull") : t("Text");
+ }
+ }, [isExpanded, t]);
+
+ function handleClick() {
+ setIsExpanded((isExpanded) => !isExpanded);
+ }
+
+ return (
+
+ {isExpanded ? t("Button2") : t("Button")}
+
+ );
+}
diff --git a/src/components/about/about.tsx b/src/components/about/about.tsx
new file mode 100644
index 0000000..ef940d7
--- /dev/null
+++ b/src/components/about/about.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import { useTranslations } from "next-intl";
+import { AboutText, Icon } from "@/components";
+
+export function About() {
+ const t = useTranslations("About");
+
+ return (
+
+ {t("Title")}
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/competencies.tsx b/src/components/competencies.tsx
deleted file mode 100644
index 158fab0..0000000
--- a/src/components/competencies.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export function Competencies() {
- return ;
-}
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 4b8236c..be6ec11 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -10,7 +10,6 @@ export function Header() {
diff --git a/src/components/icon.tsx b/src/components/icon.tsx
new file mode 100644
index 0000000..da64714
--- /dev/null
+++ b/src/components/icon.tsx
@@ -0,0 +1,9 @@
+import { ComponentProps } from "react";
+
+interface Props extends ComponentProps<"img"> {
+ name: string;
+}
+
+export function Icon({ name, className }: Readonly) {
+ return 
- 
+}
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
index d999515..2667a53 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,13 +1,14 @@
-export * from "./about";
+export * from "./about/about";
+export * from "./about/about-text"
export * from "./back-to-top";
export * from "./change-language";
-export * from "./competencies"
export * from "./contact"
export * from "./footer"
export * from "./header/header"
export * from "./header/header-anchor"
+export * from "./icon";
export * from "./main-container"
export * from "./projects"
export * from "./start"
export * from "./theme/theme-provider"
-export * from "./theme/toggle-theme"
\ No newline at end of file
+export * from "./theme/toggle-theme"