diff --git a/src/components/Avatar/avatar.ts b/src/components/Avatar/avatar.ts new file mode 100644 index 0000000..cd9720f --- /dev/null +++ b/src/components/Avatar/avatar.ts @@ -0,0 +1,13 @@ +import styled from "styled-components"; + +export const Avatar = styled.img` +border-radius: 50%; +width: 5rem; +height: 5rem; +` +export const AvatarHeader = styled.img` +border-radius: 50%; +width: 2rem; +height: 2rem; +margin-right: 10px; +` \ No newline at end of file diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 76f80cb..d4449c2 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,17 +1,21 @@ import { HashRouter } from "react-router-dom"; import { HeaderContainer, NavLink, HomeLink } from "./styles"; +import { AvatarHeader } from "../Avatar/avatar"; -export default function Header(){ - return( +export default function Header() { + return ( - - Giv's Website + + + + Giv's Website + - + ) } \ No newline at end of file diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts index 0c89382..75c3a0f 100644 --- a/src/components/Header/styles.ts +++ b/src/components/Header/styles.ts @@ -1,6 +1,8 @@ import styled from "styled-components"; export const HomeLink = styled.a` + display: flex; + align-items: center; font-size: 1.5rem; font-weight: bold; color: ${props => props.theme.white}; @@ -24,7 +26,10 @@ export const NavLink = styled.a` `; export const HeaderContainer = styled.div` + position: fixed; display: flex; + top: 0; + left: 0; justify-content: space-between; align-items: center; padding: 0 2rem; diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index cf4fea0..55c8587 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -2,8 +2,9 @@ import Typed from 'typed.js'; import { useEffect, useRef } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faTelegram, faGithub } from '@fortawesome/free-brands-svg-icons'; -import { IconContainer, IconLink, HomeLabel } from './styles'; +import { IconContainer, IconLink, HomeLabel, TopSection } from './styles'; import { MainContainer } from '../../components/MainContent/styles'; +import { Avatar } from '../../components/Avatar/avatar'; export default function Home() { const typedElement = useRef(null); @@ -23,9 +24,12 @@ export default function Home() { return ( -

- -

+ + + + + + Hey, check My social links! diff --git a/src/pages/home/styles.ts b/src/pages/home/styles.ts index fb547cb..c8496d5 100644 --- a/src/pages/home/styles.ts +++ b/src/pages/home/styles.ts @@ -17,4 +17,13 @@ export const IconLink = styled.a` export const HomeLabel = styled.p` margin-top: 1rem; -`; \ No newline at end of file +`; + +export const TopSection = styled.div` +display: flex; +align-items: center; +gap: 1rem; +span{ + font-size: 2.3rem; +} +` \ No newline at end of file