various changes

src/components/header.tsx

@@ -1,3 +1,12 @@
+import styles from "./styles.header.module.css"
+
 export default function Header() {
-    return <div>This will be the header</div>
+    return <div className={`${styles.header} pp`}>
+        
+        <img src="/logo.png" width="64px" height="auto" alt="" />
+        <div className={styles.headertitle}>
+            <div style={{flexGrow:1}}>Andreas<br/>Schaafsma</div>
+            <div>>Software Developer</div>
+        </div>
+    </div>
 }

src/components/navbar.tsx

@@ -0,0 +1,11 @@
+import styles from "./styles.navbar.module.css"
+
+const navItems = ["News", "Projects", "About Me"];
+
+export default function Navbar() {
+    return <div className={`${styles.navbar}`}>
+        {navItems.map((value, i) => {
+            return (<a className={styles.navItem}>{value}</a>)
+        })}
+    </div>
+}

src/components/page-container.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from "react"
+import styles from "./styles.page-container.module.css"
+
+interface Props {
+    children: ReactNode;
+}
+
+export default function PageContainer(props:Props) {
+    return <div className={`${styles.pagecontainer}`}>
+        {props.children}
+    </div>;
+}

src/components/styles.header.module.css

@@ -0,0 +1,10 @@
+.header{
+    display: flex;
+    background-color: green;
+    flex-direction: row;
+    flex-grow: 0;
+}
+.headertitle{
+    display:flex;
+    flex-direction: column;
+}

src/components/styles.navbar.module.css

@@ -0,0 +1,7 @@
+.navbar{
+    background-color: pink;
+    flex-grow: 0;
+}
+.navItem{
+    margin: 8px;
+}

src/components/styles.page-container.module.css

@@ -0,0 +1,4 @@
+.pagecontainer{
+    background-color: yellow;
+    flex-grow: 1;
+}