Feat - Add header

components/navigation/Header.js

@@ -0,0 +1,7 @@
+import navStyles from './navigation.module.css';
+
+const Header = ({ children }) => {
+  return <header className={navStyles.site__header}>{children}</header>;
+};
+
+export default Header;

components/navigation/NavBar.js

@@ -0,0 +1,17 @@
+import navStyles from './navigation.module.css';
+
+const NavBar = () => {
+  return (
+    <>
+      <nav className={navStyles.site__navbar}>
+        <p>__init__</p>
+        <ul>
+          <li>blog</li>
+          <li>about</li>
+        </ul>
+      </nav>
+    </>
+  );
+};
+
+export default NavBar;

components/navigation/navigation.module.css

@@ -0,0 +1,17 @@
+.site__header {
+  padding: 20px 0;
+}
+
+.site__navbar {
+  display: flex;
+  justify-content: space-between;
+}
+
+.site__navbar ul {
+  display: flex;
+  list-style: none;
+}
+
+.site__navbar li:not(:last-child) {
+  padding-right: 10px;
+}

pages/index.js

@@ -1,21 +1,24 @@
 import Head from 'next/head';
-import styles from '../styles/Home.module.css';
 import Image from 'next/image';
-
+import Header from '../components/navigation/Header';
+import NavBar from '../components/navigation/NavBar';
 export default function Home() {
   return (
-    <div className={styles.container}>
+    <div className="container">
       <Head>
         <title>Jesse Egbosionu</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main className={styles.main}>
+      <Header>
-        <h1>Hi I'm Jesse</h1>
+        <NavBar />
+      </Header>
+      <main>
+        <h2>Hi I'm Jesse</h2>
         <Image
           src="https://res.cloudinary.com/dqfjoblug/image/upload/v1619192037/site__hero_rg5gzv.jpg"
           width={468}
           height={468}
-          className={styles.hero__img}
+          // className={styles.hero__img}
         />
         <p>I'm a software engineer from Lagos, Nigeria</p>
       </main>

styles/Home.module.css

@@ -1,30 +1,3 @@
-.container {
-  min-height: 100vh;
-  padding: 0 0.5rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.main {
-  padding: 5rem 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer {
-  width: 100%;
-  height: 100px;
-  border-top: 1px solid #eaeaea;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 .hero__img {
   border-radius: 5%;
 }

styles/globals.css

@@ -1,17 +1,21 @@
 @font-face {
   font-family: 'inter';
   src: url('/fonts/inter_font.ttf');
-  /* src: url('ItalianNo1-Black.eot?#iefix') format('embedded-opentype'), url('ItalianNo1-Black.woff2') format('woff2'), url('ItalianNo1-Black.woff') format('woff'); */
   font-weight: 300;
   font-style: normal;
 }
 
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
 html,
 body {
   padding: 0;
   margin: 0;
-  font-family: inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
+  font-family: inter, sans-serif;
-    Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
 
 a {
@@ -19,6 +23,8 @@ a {
   text-decoration: none;
 }
 
-* {
+.container {
-  box-sizing: border-box;
+  min-height: 100vh;
+  max-width: 960px;
+  margin: 0 auto;
 }