chore - update styles

components/main/Main.js

@@ -1,7 +1,7 @@
 import mainStyles from './main.module.css';
 
 const Main = ({ children }) => {
-  return <main className={mainStyles.site__main}>{children}</main>;
+  return <main className={mainStyles.hero}>{children}</main>;
 };
 
 export default Main;

components/main/main.module.css

@@ -1,4 +1,10 @@
-.site__main {
+.hero {
   display: flex;
   justify-content: space-between;
 }
+
+.hero__greeting {
+  font-weight: 300;
+  font-size: 2.5em;
+  margin-bottom: 20px;
+}

components/navigation/NavBar.js

@@ -7,7 +7,7 @@ const NavBar = () => {
         <p>__init__</p>
         <ul>
           <li>blog</li>
-          <li>about</li>
+          <li>resume</li>
         </ul>
       </nav>
     </>

components/navigation/navigation.module.css

@@ -13,5 +13,5 @@
 }
 
 .site__navbar li:not(:last-child) {
-  margin-right: 30px;
+  margin-right: 25px;
 }

pages/index.js

@@ -1,32 +1,41 @@
 import Head from 'next/head';
-import Image from 'next/image';
 import Header from '../components/navigation/Header';
-import Main from '../components/main/Main';
 import NavBar from '../components/navigation/NavBar';
+import navStyles from '../components/navigation/navigation.module.css';
+import mainStyles from '../components/main/main.module.css';
 
 export default function Home() {
   return (
     <div className="container">
       <Head>
-        <title>Jesse Egbosionu</title>
+        <title>Home - Jesse Egbosionu</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Header>
+      <header className={navStyles.site__header}>
-        <NavBar />
+        <nav className={navStyles.site__navbar}>
-      </Header>
+          <p>__init__</p>
-      <Main>
+          <ul>
+            <li>blog</li>
+            <li>resume</li>
+          </ul>
+        </nav>
+      </header>
+      <main>
+        <section className={mainStyles.hero}>
           <aside>
-          <h2 style={{ fontWeight: 300 }}>Hi I'm Jesse</h2>
+            <h2 className={mainStyles.hero__greeting}>I'm Jesse</h2>
-          <p>I'm a software engineer from Lagos, Nigeria</p>
+            <p className={mainStyles.hero__description}>
+              I'm a software engineer from Lagos, Nigeria
+            </p>
           </aside>
           <aside>
-          <Image
+            <img
               src="https://res.cloudinary.com/dqfjoblug/image/upload/v1619192037/site__hero_rg5gzv.jpg"
-            width={468}
+              className="hero__image"
-            height={468}
             />
           </aside>
-      </Main>
+        </section>
+      </main>
     </div>
   );
 }