diff --git a/index.html b/index.html
index 8c1903b..09e1697 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
diff --git a/public/question.svg b/public/question.svg
new file mode 100644
index 0000000..d6104e7
--- /dev/null
+++ b/public/question.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/App.tsx b/src/App.tsx
index 65f71ae..423d662 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,7 @@ import { GlobalStyles } from './components/styles/Global.styled';
import Navbar from './components/Navbar';
import LandingSection from './components/LandingSection';
import './i18n';
+import AboutSection from './components/AboutSection';
function App() {
return (
@@ -12,6 +13,7 @@ function App() {
+
);
diff --git a/src/components/AboutSection.tsx b/src/components/AboutSection.tsx
new file mode 100644
index 0000000..8813aed
--- /dev/null
+++ b/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 (
+
+
+ ABOUT{' '}
+
+ ME
+
+
+
+
+
+
+ 
+ MYSELF
+
+
test
+
+ );
+}
+
+export default AboutSection;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 2e75763..22248e0 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -51,7 +51,7 @@ const navlinks = [
// },
{
title: 'about',
- href: '#',
+ href: '#about',
},
{
title: 'projects',
diff --git a/src/components/styles/About.styled.ts b/src/components/styles/About.styled.ts
new file mode 100644
index 0000000..4344e90
--- /dev/null
+++ b/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);
+ }
+ }
+`;
diff --git a/src/components/styles/Cursor.styled.ts b/src/components/styles/Cursor.styled.ts
new file mode 100644
index 0000000..c175ed8
--- /dev/null
+++ b/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;
+`;
diff --git a/src/components/styles/Global.styled.ts b/src/components/styles/Global.styled.ts
index 961ffbc..35beced 100644
--- a/src/components/styles/Global.styled.ts
+++ b/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 }
-
}
`;
diff --git a/src/components/styles/Landing.styled.ts b/src/components/styles/Landing.styled.ts
index 6d6d8c2..2a8d7e5 100644
--- a/src/components/styles/Landing.styled.ts
+++ b/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;
diff --git a/src/components/styles/SectionHeader.styled.ts b/src/components/styles/SectionHeader.styled.ts
new file mode 100644
index 0000000..b691948
--- /dev/null
+++ b/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;
+ }
+`;
diff --git a/src/theme.ts b/src/theme.ts
index 4c13330..09cbcab 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -3,4 +3,8 @@ export const theme = {
primary: 'lightseagreen',
bg: '#242424',
},
+ fonts: {
+ primary: 'Inter, system-ui, Arial, sans-serif',
+ monospace: 'IBM Plex Mono, monospace',
+ },
};