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