adding header

package.json

@@ -10,6 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
+    "@mui/icons-material": "^6.4.2",
+    "@mui/material": "^6.4.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "7.1.4"

src/components/SocialMediaButton/SocialMediaButton.tsx

@@ -0,0 +1,42 @@
+import { colors, SvgIcon, SvgIconProps } from "@material-ui/core";
+
+type SocialMediaButtonProps = {
+	href: string;
+	icon: string | React.ElementType<SvgIconProps>;
+	label: string;
+	alt?: string;
+	download?: string;
+};
+
+const link = {
+	color: '#2D4160',
+}
+
+const iconStyle = {
+	fontSize: '250%',
+}
+
+const SocialMediaButton: React.FC<SocialMediaButtonProps> = ({
+	href,
+	icon,
+	alt,
+	download,
+}) => {
+	return (
+		<a
+			href={href}
+			target="_blank"
+			rel="noopener noreferrer"
+            download={download ? download : undefined}
+			style={link}
+		>
+			{typeof icon === "string" ? (
+				<img src={icon} alt={alt} />
+			) : (
+				<SvgIcon component={icon} style={iconStyle}/>
+			)}
+		</a>
+	);
+};
+
+export default SocialMediaButton;

src/containers/App/App.tsx

@@ -2,8 +2,7 @@ import Routing from '../Routing/Routing';
 import './App.css'
 
 function App() {
-
-
+
   return (
     <Routing/>
   );

src/containers/Header/Header.tsx

@@ -1,2 +1,58 @@
-export default function Header() {
-}
+import { FC,memo } from "react";
+import LinkedInIcon from "@material-ui/icons/LinkedIn";
+import GitHubIcon from "@material-ui/icons/GitHub";
+import DescriptionIcon from '@material-ui/icons/Description';
+import SocialMediaButton from "../../components/SocialMediaButton/SocialMediaButton";
+import logoImg from "../../images/logo.png"
+import cvPDF from "../../assets/CV_SARA_VIEIRA.pdf"
+
+const Header: FC = memo(() => {
+    const style = {
+        backgroundColor: '#FFFBF0',
+        color: '#2D4160',
+        margin: '0.5%',
+        padding: '1%',
+        font: '',
+        borderRadius: '10px',
+        position: 'relative',
+	    display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    } as const
+    const leftCorner = {
+        display: 'flex',
+	    flexDirection: 'row',
+        alignItems: 'center',
+    } as const
+    const rightCorner = {
+	    position: 'relative',
+	    display: 'flex',
+        right: 0,
+    } as const
+    return (
+        <div style={style}>
+            <div style={leftCorner}>
+                <img src={logoImg}/>
+            </div>
+            <div style={rightCorner}>
+            <SocialMediaButton
+							href={cvPDF}
+							icon = {DescriptionIcon}
+							label="CV"
+						/>
+                <SocialMediaButton
+							href="https://github.com/spgvieira"
+							icon = {GitHubIcon}
+							label="Github"
+						/>
+                <SocialMediaButton
+							href="https://www.linkedin.com/in/sarapvieira/"
+							icon = {LinkedInIcon}
+							label="LinkedIn"
+						/>
+            </div>
+        </div>
+    )
+});
+
+export default Header;

src/containers/Routing/Routing.tsx

@@ -1,11 +1,15 @@
 import { Route, Routes } from 'react-router-dom'
 import UnderConstruction from '../UnderConstruction/UnderConstruction'
+import Header from '../Header/Header'
 
 function Routing() {
   return (
-    <Routes>
-        <Route path="/" element={<UnderConstruction/>}></Route>
-    </Routes>
+      <div>
+        <Header></Header>
+        <Routes> 
+          <Route path="/" element={<UnderConstruction/>}></Route>
+        </Routes>
+      </div>
   )
 }
 

src/containers/UnderConstruction/UnderConstruction.css

@@ -5,11 +5,12 @@
 } 
 
 html{
-    background: url("../../images/UnderConstruction.png") no-repeat center center fixed;
+    background-color: #313c52;
+    /* background: url("../../images/UnderConstruction.png") no-repeat center center fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover; 
-    background-size: 100% 100%;
+    background-size: 100% 100%; */
 
 }

src/containers/UnderConstruction/UnderConstruction.tsx

@@ -1,9 +1,31 @@
 import { FC, memo } from "react";
 import './UnderConstruction.css'
+import underConstructionImg from '../../images/UnderConstruction.png'
 
 const UnderConstruction: FC = memo(() => {
+	const myStyle = {
+        backgroundColor: '#FFFBF0',
+        color: '#2D4160',
+		textAlign: 'center',
+		fontSize: '400%',
+		fontFamily: 'sans-serif',
+		position: 'fixed',
+		width: '100%',
+		height: '100%',
+    } as const
+	const imgStyle = {
+		margin: "5%",
+		marginBottom: "5%",
+		marginLeft: "0",
+		width: "100%"
+	}
 	return (
-        <div></div>
+        <div style={myStyle}>
+			<img src={underConstructionImg} style={imgStyle}/>
+			<header> MUCH LIKE ME, THIS WEBSITE IS A WORK IN PROGRESS </header>
+			<body> IMPROVING STEP BY STEP </body>
+			<img src={underConstructionImg} style={imgStyle}/>
+		</div>
 	);
 });
 

src/index.css

@@ -1,68 +1 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}