From d13bd5d3bbe67a8562db068b1d1a7e207389d297 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 24 Feb 2024 15:49:56 +0100
Subject: [PATCH] about section

---
 src/components/styles/About.styled.ts | 29 +++++++++++++++++++---
 src/sections/AboutSection.tsx         | 35 +++++++++++++++++++++++++++
 2 files changed, 60 insertions(+), 4 deletions(-)

diff --git a/src/components/styles/About.styled.ts b/src/components/styles/About.styled.ts
index 675cce8..87b5bb9 100644
--- a/src/components/styles/About.styled.ts
+++ b/src/components/styles/About.styled.ts
@@ -1,10 +1,6 @@
 import { styled } from 'styled-components';
 
 export const StyledAbout = styled.section`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
   .about-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
@@ -30,4 +26,29 @@ export const StyledAbout = styled.section`
       }
     }
   }
+
+  .about-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2em;
+    margin-top: 4em;
+  }
+
+  .stat-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 2.5em;
+
+    text-align: center;
+    padding: 2em 1em;
+    min-height: 250px;
+
+    border-radius: 1em;
+    background-color: ${({ theme }) => theme.colors['600']};
+
+    h1 {
+      margin: 0;
+    }
+  }
 `;
diff --git a/src/sections/AboutSection.tsx b/src/sections/AboutSection.tsx
index ae3c97c..d04c7d9 100644
--- a/src/sections/AboutSection.tsx
+++ b/src/sections/AboutSection.tsx
@@ -1,3 +1,4 @@
+import { FaBriefcase, FaHeart, FaStar, FaUserGraduate } 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';
@@ -33,6 +34,40 @@ function AboutSection() {
           </p>
         </div>
       </div>
+
+      <div className="about-stats">
+        <div className="stat-item">
+          <h1>
+            <FaStar />
+            <div>Pasjonat programowania</div>
+          </h1>
+          <p>od 9 lat</p>
+        </div>
+
+        <div className="stat-item">
+          <h1>
+            <FaUserGraduate />
+            <div>Wykształcenie</div>
+          </h1>
+          <p>wyższe - absolwent informatyki</p>
+        </div>
+
+        <div className="stat-item">
+          <h1>
+            <FaHeart />
+            <div>Ulubione technologie</div>
+          </h1>
+          <p>Vue.js, Typescript</p>
+        </div>
+
+        <div className="stat-item">
+          <h1>
+            <FaBriefcase />
+            <div>Zaawansowanie zawodowe</div>
+          </h1>
+          <p>junior</p>
+        </div>
+      </div>
     </StyledAbout>
   );
 }