diff --git a/src/App.tsx b/src/App.tsx
index 03fbfbd..7668d8a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -37,7 +37,7 @@ function App() {
);
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 47d22e6..13bcd06 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -2,11 +2,12 @@ import { HashRouter } from "react-router-dom";
import { HeaderContainer, NavLink, HomeLink, LanguageSelector } from "./styles";
import { AvatarHeader } from "../Avatar/avatar";
import i18n from "../../utils/i18n";
-import { t } from "i18next";
import { Drawer, DrawerContainer, DrawerItem } from "../Drawer/styles";
import useDrawerVisible from "../../hooks/useDrawerVisible";
+import { useTranslation } from "react-i18next";
export default function Header() {
+ const { t } = useTranslation();
const changeLanguage = (event: React.ChangeEvent) => {
i18n.changeLanguage(event.target.value);
localStorage.setItem("language", event.target.value);
diff --git a/src/pages/contact/index.tsx b/src/pages/contact/index.tsx
index 3b16825..8532107 100644
--- a/src/pages/contact/index.tsx
+++ b/src/pages/contact/index.tsx
@@ -3,9 +3,10 @@ import { Button, TextArea } from './styles';
import { MainContainer } from '../../components/MainContent/styles';
import { Send } from 'lucide-react';
import { Paragraph } from '../../components/Paragraph/styles';
-import { t } from 'i18next';
+import { useTranslation } from 'react-i18next';
export default function Contact() {
+ const { t } = useTranslation();
const emailAddress = import.meta.env.VITE_GIV_EMAIL;
const [typedText, setTypedText] = useState('');
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 5c15056..7e95f23 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -5,10 +5,12 @@ import { faTelegram, faGithub } from '@fortawesome/free-brands-svg-icons';
import { IconContainer, IconLink, HomeLabel, TopSection } from './styles';
import { MainContainer } from '../../components/MainContent/styles';
import { Avatar } from '../../components/Avatar/avatar';
-import { t } from 'i18next';
import { Paragraph } from '../../components/Paragraph/styles';
+import { useTranslation } from 'react-i18next';
+import i18n from '../../utils/i18n';
export default function Home() {
+ const { t } = useTranslation();
const typedElement = useRef(null);
useEffect(() => {
@@ -22,7 +24,7 @@ export default function Home() {
return () => {
typed.destroy();
};
- }, []);
+ }, [i18n.language]);
return (
diff --git a/src/pages/projects/index.tsx b/src/pages/projects/index.tsx
index ce300ac..6cf9819 100644
--- a/src/pages/projects/index.tsx
+++ b/src/pages/projects/index.tsx
@@ -10,7 +10,7 @@ import {
ProjectStars,
} from './styles';
import { MainContainer } from '../../components/MainContent/styles';
-import { t } from 'i18next';
+import { useTranslation } from 'react-i18next';
interface Repo {
name: string;
@@ -21,6 +21,7 @@ interface Repo {
}
export default function Projects() {
+ const { t } = useTranslation();
const [projects, setProjects] = useState([]);
useEffect(() => {
diff --git a/src/pages/skills/index.tsx b/src/pages/skills/index.tsx
index 3ce3cd6..1852f4b 100644
--- a/src/pages/skills/index.tsx
+++ b/src/pages/skills/index.tsx
@@ -2,9 +2,10 @@ import { MainContainer } from "../../components/MainContent/styles";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAndroid, faAngular, faGit, faLinux, faNode, faReact, faWindows } from '@fortawesome/free-brands-svg-icons'
import { SkillsContainer } from "./styles";
-import { t } from "i18next";
+import { useTranslation } from "react-i18next";
export default function Skills() {
+ const { t } = useTranslation();
return (
{t("skills")}