about section

src/components/AboutSection.tsx

@@ -1,7 +1,25 @@
-import { StyledAbout, StyledAboutItem } from './styles/About.styled';
+import {
+  StyledAbout,
+  StyledAboutContentWrapper,
+  StyledAboutDescription,
+  StyledAboutImageWrapper,
+  StyledAboutItem,
+  StyledAboutTitle,
+} from './styles/About.styled';
 import { StyledCursor } from './styles/Cursor.styled';
 import { StyledSectionHeader } from './styles/SectionHeader.styled';
 
+const aboutInfo = [
+  {
+    title: 'MYSELF',
+    desc: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis, modi!',
+  },
+  {
+    title: 'MY JOURNEY',
+    desc: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus autem id nostrum beatae distinctio porro, laudantium asperiores voluptatibus enim dignissimos consequatur excepturi quia iure cupiditate molestias in modi. Quo nisi nesciunt reprehenderit, odit, ad eveniet omnis nulla necessitatibus est incidunt numquam. Sapiente, harum! Repellat earum minus magnam praesentium voluptatibus! Pariatur.',
+  },
+];
+
 function AboutSection() {
   return (
     <StyledAbout id="about">
@@ -13,14 +31,18 @@ function AboutSection() {
         </span>
       </StyledSectionHeader>
 
-      <div>
+      {aboutInfo.map((about) => (
         <StyledAboutItem>
-          <img src="question.svg" alt="" />
-          <h2>MYSELF</h2>
-        </StyledAboutItem>
+          <StyledAboutImageWrapper>
+            <img src="question.svg" alt="question" />
+          </StyledAboutImageWrapper>
 
-        <div>test</div>
-      </div>
+          <StyledAboutContentWrapper>
+            <StyledAboutTitle>{about.title}</StyledAboutTitle>
+            <StyledAboutDescription>{about.desc}</StyledAboutDescription>
+          </StyledAboutContentWrapper>
+        </StyledAboutItem>
+      ))}
     </StyledAbout>
   );
 }

src/components/styles/About.styled.ts

@@ -2,36 +2,52 @@ import { styled } from 'styled-components';
 
 export const StyledAbout = styled.section`
   img {
-    max-width: 120px;
+    max-width: 90px;
   }
 `;
 
 export const StyledAboutItem = styled.div`
+  display: flex;
+  justify-content: flex-start;
+
+  gap: 1em;
+
+  margin-top: 50px;
   h2 {
-    position: relative;
-    display: inline-block;
-    transform: translate(20px, -15px);
     margin: 0;
-
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      height: 4px;
-      background-color: ${({ theme }) => theme.colors.primary};
-    }
-
-    &::before {
-      right: 100%;
-      transform: translate(0, 15px);
-      width: 30px;
-    }
-
-    &::after {
-      left: 0;
-      width: calc(100% + 5px);
-      transform: translate(-5px, 15px);
-    }
   }
 `;
+
+export const StyledAboutImageWrapper = styled.div`
+  display: inline-block;
+  position: relative;
+
+  &::before {
+    position: absolute;
+    content: '';
+    height: calc(100% + 100px);
+    width: 5px;
+    background-color: ${({ theme }) => theme.colors.primary};
+
+    top: 50px;
+    left: 50%;
+    z-index: -1;
+    transform: translateX(-50%);
+  }
+`;
+
+export const StyledAboutContentWrapper = styled.div``;
+
+export const StyledAboutTitle = styled.h2`
+  display: inline-block;
+  margin: 1em 0;
+  padding: 0.1em 2em 0.1em 0.5em;
+
+  background-color: ${({ theme }) => theme.colors.primary};
+`;
+
+export const StyledAboutDescription = styled.p`
+  margin: 0;
+  margin-top: 1em;
+  text-align: justify;
+`;

src/components/styles/Global.styled.ts

@@ -22,6 +22,7 @@ export const GlobalStyles = createGlobalStyle`
       margin: 0;
       min-height: 100vh;
       width: 100%;
+      overflow-x: hidden;
    }
 
    .text {

src/components/styles/Navbar.styled.ts

@@ -3,6 +3,7 @@ import { styled } from 'styled-components';
 export const StyledNavbar = styled.nav`
   position: sticky;
   top: 0;
+  z-index: 1000;
 
   display: flex;
   justify-content: space-between;