diff --git a/src/components/styles/About.styled.ts b/src/components/styles/About.styled.ts
index 9dd09d8..61dd138 100644
--- a/src/components/styles/About.styled.ts
+++ b/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;
}
diff --git a/src/locales/en.json b/src/locales/en.json
index f5b147d..4fd466b 100644
--- a/src/locales/en.json
+++ b/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, 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",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 3215019..328cf5b 100644
--- a/src/locales/pl.json
+++ b/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, 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",
diff --git a/src/sections/AboutSection.tsx b/src/sections/AboutSection.tsx
index 708608a..6aafc4a 100644
--- a/src/sections/AboutSection.tsx
+++ b/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() {