partial translation

src/sections/LandingSection.tsx

@@ -12,6 +12,7 @@ import {
 import { useEffect, useRef } from 'react';
 import { useGSAP } from '@gsap/react';
 import gsap from 'gsap';
+import { useTranslation } from 'react-i18next';
 
 export default function LandingSection() {
   const container = useRef<HTMLElement>(null);
@@ -25,11 +26,12 @@ export default function LandingSection() {
   });
 
   useEffect(() => {
-    const splittedDesc = container.current!.querySelector('.description');
-
-    console.log(splittedDesc?.textContent);
+    // const splittedDesc = container.current!.querySelector('.description');
+    // console.log(splittedDesc?.textContent);
   }, []);
 
+  const { t } = useTranslation();
+
   return (
     <StyledLanding id="landing" ref={container}>
       <StyledLandingWrapper>
@@ -38,13 +40,13 @@ export default function LandingSection() {
             <Logo />
           </div>
           <StyledLandingRight>
-            <b className="greeting">Hello, I'm</b>
+            <b className="greeting">{t('landing.greeting')}</b>
 
             <StyledBrandName>
               <b className="text--gradient">SPYTHERE://</b>
             </StyledBrandName>
 
-            <div className="description">an amatour and self-taught front-end and back-end developer from Poland!</div>
+            <div className="description">{t('landing.sub')}</div>
 
             <StyledLinkIcons className="icons">
               <StyledLinkIcon href="https://github.com/Spythere" target="_blank">
@@ -58,7 +60,7 @@ export default function LandingSection() {
         </div>
 
         <div className="landing_tech">
-          <h3>Tech I Use</h3>
+          <h3>{t('landing.tech-title')}</h3>
           <hr />
 
           <TechScroller />