about me section

src/components/AboutSection.tsx

@@ -0,0 +1,27 @@
+import { StyledAbout, StyledAboutItem } from './styles/About.styled';
+import { StyledCursor } from './styles/Cursor.styled';
+import { StyledSectionHeader } from './styles/SectionHeader.styled';
+
+function AboutSection() {
+  return (
+    <StyledAbout id="about">
+      <StyledSectionHeader>
+        ABOUT{' '}
+        <span className="text--accent" style={{ position: 'relative' }}>
+          ME
+          <StyledCursor />
+        </span>
+      </StyledSectionHeader>
+
+      <div style={{ display: 'flex' }}>
+        <StyledAboutItem>
+          <img src="question.svg" alt="" />
+          <h2>MYSELF</h2>
+        </StyledAboutItem>
+      </div>
+      <p>test</p>
+    </StyledAbout>
+  );
+}
+
+export default AboutSection;

src/components/Navbar.tsx

@@ -51,7 +51,7 @@ const navlinks = [
   // },
   {
     title: 'about',
-    href: '#',
+    href: '#about',
   },
   {
     title: 'projects',

src/components/styles/About.styled.ts

@@ -0,0 +1,37 @@
+import { styled } from 'styled-components';
+
+export const StyledAbout = styled.section`
+  img {
+    max-width: 120px;
+  }
+`;
+
+export const StyledAboutItem = styled.div`
+  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);
+    }
+  }
+`;

src/components/styles/Cursor.styled.ts

@@ -0,0 +1,13 @@
+import { styled } from 'styled-components';
+
+export const StyledCursor = styled.span`
+  position: absolute;
+  top: 0;
+  left: 120%;
+
+  width: 15px;
+  height: 100%;
+  background-color: ${({theme}) => theme.colors.primary};
+
+  animation: blinking 1s infinite;
+`;

src/components/styles/Global.styled.ts

@@ -2,7 +2,7 @@ import { createGlobalStyle } from 'styled-components';
 
 export const GlobalStyles = createGlobalStyle`
    :root {
-      font-family: Inter, system-ui, Arial, sans-serif;
+      font-family: ${({ theme }) => theme.fonts.primary};
       font-weight: 400;
       font-size: 16px;
 
@@ -24,6 +24,17 @@ export const GlobalStyles = createGlobalStyle`
       width: 100%;
    }
 
+   .text {
+      &--accent {
+         color: ${({ theme }) => theme.colors.primary};
+      }
+   }
+
+   section {
+      min-height: 100vh;
+      padding: 1em 2em;
+   }
+
    a {
       color: white;
       text-decoration: none;
@@ -40,13 +51,9 @@ export const GlobalStyles = createGlobalStyle`
       vertical-align: middle;
    }
 
-   .text {
-      &--accent {
-         color: ${({ theme }) => theme.colors.primary};
-      }
-   }
 
    button {
+      font-family: ${({ theme }) => theme.fonts.primary};
       border: none;
    }
 
@@ -58,6 +65,5 @@ export const GlobalStyles = createGlobalStyle`
       0% { opacity: 0 }
       50% { opacity: 1 }
       100% { opacity: 0 }
-
    }
 `;

src/components/styles/Landing.styled.ts

@@ -7,7 +7,7 @@ export const StyledLanding = styled.section`
   justify-content: center;
   align-items: center;
 
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: ${({ theme }) => theme.fonts.monospace};
   letter-spacing: 5px;
 
   text-align: center;

src/components/styles/SectionHeader.styled.ts

@@ -0,0 +1,19 @@
+import { styled } from 'styled-components';
+
+export const StyledSectionHeader = styled.h1`
+  position: relative;
+  font-size: 2.5em;
+  font-family: ${({ theme }) => theme.fonts.monospace};
+  font-weight: bold;
+
+  // bottom line
+  &::after {
+    content: '';
+    position: absolute;
+    top: 110%;
+    left: 0;
+    width: 15em;
+    height: 3px;
+    background-color: #fff;
+  }
+`;