ref: separate footer to improve maintainability

src/App.tsx

@@ -9,6 +9,7 @@ import Projects from './pages/projects';
 import { HashRouter } from 'react-router-dom';
 import '@fontsource-variable/red-hat-display';
 import Skills from './pages/skills';
+import Footer from './components/Footer';
 
 function App() {
   return (
@@ -35,10 +36,7 @@ function App() {
           <Projects />
         </section>
       </HashRouter>
-      <footer>
+      <Footer />
-        <p>© 2025 GivFNZ</p>
-        <p>Version: 1.1.10</p>
-      </footer>
     </ThemeProvider>
   );
 }

src/components/Footer/index.tsx

@@ -0,0 +1,8 @@
+export default function Footer() {
+    return (
+        <footer>
+            <p>© 2025 GivFNZ</p>
+            <p>Version: 1.1.12</p>
+        </footer>
+    )
+}

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<HTMLSelectElement>) => {
     i18n.changeLanguage(event.target.value);
     localStorage.setItem("language", event.target.value);

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('');
 

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 (
     <MainContainer>

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<Repo[]>([]);
 
   useEffect(() => {

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 (
         <MainContainer>
             <h1>{t("skills")}</h1>