chore: global theme & styles improvements

src/components/styles/About.styled.ts

@@ -55,19 +55,20 @@ export const StyledAbout = styled.section`
     border-radius: 1em;
     background-color: ${({ theme }) => theme.colors['600']};
 
-    svg.stat-item-icon {
+    .stat-item-icon {
       position: absolute;
       top: 0;
       left: 50%;
       transform: translate(-50%, -50%);
-    }
 
-    h1 {
-      vertical-align: middle;
+      padding: 1em;
+      background-color: ${({ theme }) => theme.colors['600']};
+      border-radius: 50%;
     }
 
     p {
-      font-size: 1.2em;
+      font-size: 1.25em;
+      line-height: 1.5em;
     }
   }
 

src/components/styles/Global.styled.ts

@@ -17,7 +17,6 @@ export const GlobalStyles = createGlobalStyle`
    }
 
 
-
    body {
       margin: 0;
       min-height: 100vh;

src/locales/en.json

@@ -18,7 +18,7 @@
     "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",
+    "brief-2-title": "My education",
     "brief-2-content": "Mechantronics Technician & Bachelor of Information Technology",
     "brief-3-title": "Job experience",
     "brief-3-content": "beginner junior",

src/locales/pl.json

@@ -17,8 +17,8 @@
     "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, <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",
+    "brief-1-content": "od 2015 roku",
+    "brief-2-title": "Moje\nwykształcenie",
     "brief-2-content": "technik mechatronik i inżynier informatyki",
     "brief-3-title": "Doświadczenie zawodowe",
     "brief-3-content": "początkujący\njunior",

src/sections/AboutSection.tsx

@@ -14,8 +14,8 @@ function AboutSection() {
   useGSAP(() => {
     const tl = gsap.timeline({
       scrollTrigger: {
-        trigger: '.about-grid',
-      },
+        trigger: '.about-grid'
+      }
     });
 
     tl.from('.about-gif', { opacity: 0 });
@@ -25,8 +25,8 @@ function AboutSection() {
       ease: 'power1.in',
       opacity: 0,
       stagger: {
-        each: 0.5,
-      },
+        each: 0.5
+      }
     });
   });
 
@@ -61,46 +61,49 @@ function AboutSection() {
 
       <div className="about-stats">
         <div className="stat-item">
-          <FaStar className="stat-item-icon" size={50} />
+          <div className="stat-item-icon">
+            <FaStar size={35} color="gold" />
+          </div>
 
-          <h1>
-            <div>{t('about.brief-1-title')}</div>
-          </h1>
+          <h2>{t('about.brief-1-title')}</h2>
 
           <p>{t('about.brief-1-content')}</p>
         </div>
 
         <div className="stat-item">
-          <FaUserGraduate className="stat-item-icon" size={50} />
+          <div className="stat-item-icon">
+            <FaUserGraduate size={35} color="#1e6dcc" />
+          </div>
 
-          <h1>
-            <div>{t('about.brief-2-title')}</div>
-          </h1>
+          <h2>{t('about.brief-2-title')}</h2>
 
           <p>{t('about.brief-2-content')}</p>
         </div>
 
         <div className="stat-item">
-          <FaBriefcase className="stat-item-icon" size={50} />
+          <div className="stat-item-icon">
+            <FaBriefcase size={35} color="gray" />
+          </div>
 
-          <h1>
-            <div>{t('about.brief-3-title')}</div>
-          </h1>
+          <h2>{t('about.brief-3-title')}</h2>
 
           <p>{t('about.brief-3-content')}</p>
         </div>
 
         <div className="stat-item">
-          <FaHeart className="stat-item-icon" size={50} />
+          <div className="stat-item-icon">
+            <FaHeart size={35} color="firebrick" />
+          </div>
 
-          <h1>
-            <div>{t('about.brief-4-title')}</div>
-          </h1>
+          <h2>{t('about.brief-4-title')}</h2>
 
           <p>
-            <FaVuejs /> Vue
-            <br />
-            <SiNestjs /> NestJS
+            <div>
+              <FaVuejs size={30} color="seagreen" /> Vue
+            </div>
+            <div>
+              <SiNestjs size={30} color="#fc466b" /> NestJS
+            </div>
           </p>
         </div>
       </div>

src/theme.ts

@@ -1,4 +1,4 @@
-import { DefaultTheme } from "styled-components";
+import { DefaultTheme } from 'styled-components';
 
 export const theme: DefaultTheme = {
   colors: {
@@ -6,12 +6,12 @@ export const theme: DefaultTheme = {
     300: '#bbc1c9',
     400: '#415a77',
     500: '#1b263b',
-    600: '#111',
-    bg: '#22252b',
-    accent: '#526fff',
+    600: '#1e2022',
+    bg: '#0d0d0d',
+    accent: '#526fff'
   },
   fonts: {
     primary: 'Manrope, system-ui, Arial, sans-serif',
-    monospace: 'IBM Plex Mono, monospace',
-  },
+    monospace: 'IBM Plex Mono, monospace'
+  }
 };