style: Avatar for header and main section. Also fixed header

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;
+`

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 (
     <HashRouter>
-    <HeaderContainer>
-      <HomeLink href="/">Giv's Website</HomeLink>
+      <HeaderContainer>
+        <HomeLink href="/">
+          <AvatarHeader src="https://avatars.githubusercontent.com/u/53719063?v=4" alt="Giv's Gh picture" />
+          Giv's Website
+        </HomeLink>
         <nav>
           <NavLink href="#about">About Me</NavLink>
           <NavLink href="#contact">Contact</NavLink>
           <NavLink href="#projects">Projects</NavLink>
         </nav>
-    </HeaderContainer>
+      </HeaderContainer>
     </HashRouter>
   )
 }

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;

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 (
     <MainContainer>
-      <h1>
-        <span ref={typedElement} />
-      </h1>
+      <TopSection>
+        <Avatar src="https://avatars.githubusercontent.com/u/53719063?v=4" alt="Giv's Gh picture" />
+        <strong>
+          <span ref={typedElement} />
+        </strong>
+      </TopSection>
       <HomeLabel>
         Hey, check My social links!
       </HomeLabel>

src/pages/home/styles.ts

@@ -17,4 +17,13 @@ export const IconLink = styled.a`
 
 export const HomeLabel = styled.p`
   margin-top: 1rem;
-`;
+`;
+
+export const TopSection = styled.div`
+display: flex;
+align-items: center;
+gap: 1rem;
+span{
+  font-size: 2.3rem;
+}
+`