chore: updated projects & about sections

src/sections/AboutSection.tsx

@@ -1,13 +1,16 @@
 import { FaBriefcase, FaHeart, FaStar, FaUserGraduate, FaVuejs } from 'react-icons/fa';
 import { StyledAbout } from '../components/styles/About.styled';
-import { StyledCursor } from '../components/styles/Cursor.styled';
 import { StyledSectionHeader } from '../components/styles/SectionHeader.styled';
+import { StyledCursor } from '../components/styles/Cursor.styled';
 import { SiNestjs } from 'react-icons/si';
 
 import { useGSAP } from '@gsap/react';
 import { gsap } from 'gsap';
+import { useTranslation } from 'react-i18next';
 
 function AboutSection() {
+  const { t } = useTranslation();
+
   useGSAP(() => {
     const tl = gsap.timeline({
       scrollTrigger: {
@@ -36,24 +39,22 @@ function AboutSection() {
 
         <div className="about-content">
           <StyledSectionHeader>
-            ABOUT{' '}
-            <span className="text--accent" style={{ position: 'relative' }}>
-              ME
-              <StyledCursor />
-            </span>
+            <div>
+              {t('about.title-1') + ' '}
+              <span className="text--accent" style={{ position: 'relative' }}>
+                {t('about.title-2')}
+                <StyledCursor />
+              </span>
+            </div>
           </StyledSectionHeader>
 
-          <h2>A coder with a pinch of explorer</h2>
+          <h2>{t('about.subtitle')}</h2>
 
           <p>
-            I am a self-taught programmer who excels in working with web technologies. I spend most of my free time creating and expanding
-            applications for the Polish train simulator,{' '}
-            <a href="https://td2.info.pl/" target="_blank">
+            {t('about.content')}
+            {/* <a href="https://td2.info.pl/" target="_blank">
               Train Driver 2
-            </a>
-            , where I actively participate as a developer. In my projects, I value simplicity and functionality. I aim for my tools to be
-            user-friendly and accessible to everyone. I often stick to solutions I am used to work with, but I'm not afraid to change them in order to
-            make my projects better and more efficient. I enjoy exploring and testing new technologies and I have no trouble adapting to them.
+            </a> */}
           </p>
         </div>
       </div>
@@ -62,34 +63,31 @@ function AboutSection() {
         <div className="stat-item">
           <h1>
             <FaStar />
-            <div>Pasjonat programowania</div>
+            <div>{t('about.brief-1-title')}</div>
           </h1>
-          <p>od 9 lat</p>
+          <p>{t('about.brief-1-content')}</p>
         </div>
 
         <div className="stat-item">
           <h1>
             <FaUserGraduate />
-            <div>Wykształcenie</div>
+            <div>{t('about.brief-2-title')}</div>
           </h1>
-          <p>wyższe - absolwent informatyki</p>
+          <p>{t('about.brief-2-content')}</p>
         </div>
 
         <div className="stat-item">
           <h1>
             <FaBriefcase />
-            <div>Zaawansowanie zawodowe</div>
+            <div>{t('about.brief-3-title')}</div>
           </h1>
-          <p>
-            początkujący <br />
-            junior
-          </p>
+          <p>{t('about.brief-3-content')}</p>
         </div>
 
         <div className="stat-item">
           <h1>
             <FaHeart />
-            <div>Ulubione technologie</div>
+            <div>{t('about.brief-4-title')}</div>
           </h1>
           <p>
             <FaVuejs /> Vue