From 5b0ba8c286afa32553991459eee5c24e7216c1b0 Mon Sep 17 00:00:00 2001 From: Spythere Date: Fri, 1 Sep 2023 15:19:35 +0200 Subject: [PATCH] about me section --- index.html | 2 +- public/question.svg | 4 ++ src/App.tsx | 2 + src/components/AboutSection.tsx | 27 ++++++++++++++ src/components/Navbar.tsx | 2 +- src/components/styles/About.styled.ts | 37 +++++++++++++++++++ src/components/styles/Cursor.styled.ts | 13 +++++++ src/components/styles/Global.styled.ts | 20 ++++++---- src/components/styles/Landing.styled.ts | 2 +- src/components/styles/SectionHeader.styled.ts | 19 ++++++++++ src/theme.ts | 4 ++ 11 files changed, 122 insertions(+), 10 deletions(-) create mode 100644 public/question.svg create mode 100644 src/components/AboutSection.tsx create mode 100644 src/components/styles/About.styled.ts create mode 100644 src/components/styles/Cursor.styled.ts create mode 100644 src/components/styles/SectionHeader.styled.ts 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', + }, };