chore: updated about styles

src/components/styles/About.styled.ts

@@ -38,25 +38,31 @@ export const StyledAbout = styled.section`
   .about-stats {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 2em;
+    gap: 3em 2em;
     margin-top: 4em;
   }
 
   .stat-item {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    gap: 2.5em;
+    display: grid;
+    grid-template-rows: 100px 100px;
+    align-items: center;
+
+    position: relative;
 
     text-align: center;
     padding: 2em 1em;
-    min-height: 250px;
 
     border-radius: 1em;
     background-color: ${({ theme }) => theme.colors['600']};
 
+    svg.stat-item-icon {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
     h1 {
-      margin: 0;
       vertical-align: middle;
     }
 

src/locales/en.json

@@ -15,7 +15,7 @@
     "title-1": "ABOUT",
     "title-2": "ME",
     "subtitle": "A coder with a pinch of explorer",
-    "content": "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, Train Driver 2, 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.",
+    "content": "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, <1>Train Driver 2</1>, 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.",
     "brief-1-title": "Programming passionate",
     "brief-1-content": "since 2015",
     "brief-2-title": "Education",

src/locales/pl.json

@@ -15,7 +15,7 @@
     "title-1": "O",
     "title-2": "MNIE",
     "subtitle": "Koder ze szczyptą odkrywcy",
-    "content": "Jestem programistą-samoukiem, który aktywnie uczy się i obcuje z technologiami webowymi. Większość wolnego czasu spędzam tworząc i rozwijając aplikacje dla polskiego symulatora kolejowego, Train Driver 2, gdzie aktywnie uczestniczę na stanowisku dewelopera. W moich projektach cenię prostotę i funkcjonalność. Dążę do tego, aby narzędzia, które tworzę, były przyjazne użytkownikowi i dostępne dla każdego. Często trzymam się sprawdzonych rozwiązań, lecz nie boję się zmienić ich, jeśli poprawi to moje aplikacje. Lubię odkrywać oraz testować nowe technologie i nie mam problemu z ich wdrożeniem.",
+    "content": "Jestem programistą-samoukiem, który aktywnie uczy się i obcuje z technologiami webowymi. Większość wolnego czasu spędzam tworząc i rozwijając aplikacje dla polskiego symulatora kolejowego, <0>Train Driver 2</0>, gdzie aktywnie uczestniczę na stanowisku dewelopera. W moich projektach cenię prostotę i funkcjonalność. Dążę do tego, aby narzędzia, które tworzę, były przyjazne użytkownikowi i dostępne dla każdego. Często trzymam się sprawdzonych rozwiązań, lecz nie boję się zmienić ich, jeśli poprawi to moje aplikacje. Lubię odkrywać oraz testować nowe technologie i nie mam problemu z ich wdrożeniem.",
     "brief-1-title": "Pasjonat programowania",
     "brief-1-content": "od 2015",
     "brief-2-title": "Wykształcenie",

src/sections/AboutSection.tsx

@@ -6,7 +6,7 @@ import { SiNestjs } from 'react-icons/si';
 
 import { useGSAP } from '@gsap/react';
 import { gsap } from 'gsap';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 function AboutSection() {
   const { t } = useTranslation();
@@ -51,44 +51,52 @@ function AboutSection() {
           <h2>{t('about.subtitle')}</h2>
 
           <p>
-            {t('about.content')}
-            {/* <a href="https://td2.info.pl/" target="_blank">
-              Train Driver 2
-            </a> */}
+            <Trans i18nKey="about.content">
+              <a href="https://web.td2.info.pl/pl" target="_blank"></a>
+              <a href="https://web.td2.info.pl/en" target="_blank"></a>
+            </Trans>
           </p>
         </div>
       </div>
 
       <div className="about-stats">
         <div className="stat-item">
+          <FaStar className="stat-item-icon" size={50} />
+
           <h1>
-            <FaStar />
             <div>{t('about.brief-1-title')}</div>
           </h1>
+
           <p>{t('about.brief-1-content')}</p>
         </div>
 
         <div className="stat-item">
+          <FaUserGraduate className="stat-item-icon" size={50} />
+
           <h1>
-            <FaUserGraduate />
             <div>{t('about.brief-2-title')}</div>
           </h1>
+
           <p>{t('about.brief-2-content')}</p>
         </div>
 
         <div className="stat-item">
+          <FaBriefcase className="stat-item-icon" size={50} />
+
           <h1>
-            <FaBriefcase />
             <div>{t('about.brief-3-title')}</div>
           </h1>
+
           <p>{t('about.brief-3-content')}</p>
         </div>
 
         <div className="stat-item">
+          <FaHeart className="stat-item-icon" size={50} />
+
           <h1>
-            <FaHeart />
             <div>{t('about.brief-4-title')}</div>
           </h1>
+
           <p>
             <FaVuejs /> Vue
             <br />