various changes

public/global.css

@@ -0,0 +1,26 @@
+html, body{
+    padding: 0px;
+    margin: 0px;
+    width: 100%;
+    height:100%;
+    min-height: 100%;
+    min-width: 100%;
+}
+
+#__next{
+    min-height: 100%;
+}
+
+html{
+    background-color: red;
+}
+
+.pp{
+    color: white;
+}
+.root{
+    display:flex;
+    flex-direction: column;
+    min-height: 100vh;
+    height:100vh;
+}

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

src/pages/test/index.tsx

@@ -1,11 +1,15 @@
 import Header from "@/components/header";
+import PageContainer from "@/components/page-container";
+import Navbar from "@/components/navbar";
 import ReactDOM from "react";
+import "public/global.css"
 
 export default function Test() {
-    return <div>
+    return <div className={`root`}>
-        <Header />
+        <Header/>
-        <div>
+        <Navbar/>
+        <PageContainer>
             Content Goes Here
-        </div>
+        </PageContainer>
     </div>;
 }