about & global changes

src/components/styles/About.styled.ts

@@ -49,6 +49,11 @@ export const StyledAbout = styled.section`
 
     h1 {
       margin: 0;
+      vertical-align: middle;
+    }
+
+    p {
+      font-size: 1.2em;
     }
   }
 `;

src/components/styles/Global.styled.ts

@@ -63,7 +63,7 @@ export const GlobalStyles = createGlobalStyle`
       }
    }
 
-   img {
+   img, svg {
       max-width: 100%;
       vertical-align: middle;
    }

src/sections/AboutSection.tsx

@@ -1,7 +1,8 @@
-import { FaBriefcase, FaHeart, FaStar, FaUserGraduate } from 'react-icons/fa';
+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 { SiNestjs } from 'react-icons/si';
 
 function AboutSection() {
   return (
@@ -54,18 +55,25 @@ function AboutSection() {
 
         <div className="stat-item">
           <h1>
-            <FaHeart />
+            <FaBriefcase />
-            <div>Ulubione technologie</div>
+            <div>Zaawansowanie zawodowe</div>
           </h1>
-          <p>Vue.js, Typescript</p>
+          <p>
+            początkujący <br />
+            junior
+          </p>
         </div>
 
         <div className="stat-item">
           <h1>
-            <FaBriefcase />
+            <FaHeart />
-            <div>Zaawansowanie zawodowe</div>
+            <div>Ulubione technologie</div>
           </h1>
-          <p>junior</p>
+          <p>
+            <FaVuejs /> Vue
+            <br />
+            <SiNestjs /> NestJS
+          </p>
         </div>
       </div>
     </StyledAbout>