Modification: button and navigation bar, static

src/Components/NavBar/NavBar.tsx

@@ -0,0 +1,32 @@
+import { AppBar, MenuItem, Toolbar, styled} from "@mui/material"
+
+
+
+const NavBar = () =>{
+
+  const StyledToolbar = styled(Toolbar) (() => ({
+
+
+    display: "flex",
+    justifyContent: "space-evenly",
+
+
+
+    }))
+
+
+    return (
+      <>
+        <AppBar position="absolute">
+          <StyledToolbar>
+          <MenuItem>About</MenuItem>
+          <MenuItem>Skills</MenuItem>
+          <MenuItem>Projects</MenuItem>
+          </StyledToolbar>
+        </AppBar>      
+      </>
+    )
+  }
+
+  export default NavBar
+

src/Components/StyledButton/StyledButton.tsx

@@ -0,0 +1,36 @@
+import { styled } from '@mui/system';
+
+interface StyledButtonProps {
+    children: React.ReactNode;
+}
+
+
+const StyledButton: React.FC<StyledButtonProps> = ({children}) =>{
+
+    const StyledButton = styled("button") (({ theme}) => ({
+        backgroundColor: "transparent",
+        border: '1px solid white',
+        borderRadius: "3px",
+        padding: "5px 10px" ,
+        display: "inline-flex",
+        justifyContent: "center",
+        alignItems: "center",
+        fontSize: "1rem",
+        width: "100%",
+        color: "white", 
+        '&:hover': {
+            backgroundColor: theme.palette.secondary.main,
+            cursor: "pointer",
+        },
+
+        }))
+    return (
+      <>
+        <StyledButton>{children}
+        </StyledButton>
+      </>
+    )
+  }
+
+  export default StyledButton
+