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() {

+ +
+
+

+ +
Pasjonat programowania
+

+

od 9 lat

+
+ +
+

+ +
Wykształcenie
+

+

wyższe - absolwent informatyki

+
+ +
+

+ +
Ulubione technologie
+

+

Vue.js, Typescript

+
+ +
+

+ +
Zaawansowanie zawodowe
+

+

junior

+
+
); }