chore - more clean up

components/main/Main.js

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

components/main/main.module.css

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

components/navigation/Header.js

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

components/navigation/NavBar.js

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

components/navigation/navigation.module.css

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

package.json

@@ -10,6 +10,12 @@
   "dependencies": {
     "next": "10.1.3",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "sass": "^1.32.12"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.2.5",
+    "postcss": "^8.2.13",
+    "tailwindcss": "^2.1.2"
   }
 }

pages/_app.js

@@ -1,7 +1,7 @@
-import '../styles/globals.css'
+import '../styles/globals.scss';
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;

pages/index.js

@@ -1,8 +1,4 @@
 import Head from 'next/head';
-import Header from '../components/navigation/Header';
-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 (
@@ -11,24 +7,22 @@ export default function Home() {
         <title>Home - Jesse Egbosionu</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <header className={navStyles.site__header}>
+      <header className="header">
-        <nav className={navStyles.site__navbar}>
+        <nav className="header__navbar">
-          <p>__init__</p>
+          <p className="header__logo">__init__</p>
-          <ul>
+          <ul className="header__nav">
-            <li>blog</li>
+            {/* <li className="header__nav__item">blog</li>
-            <li>resume</li>
+            <li className="header__nav__item">resume</li> */}
           </ul>
         </nav>
       </header>
       <main>
-        <section className={mainStyles.hero}>
+        <section className="hero">
-          <aside>
+          <aside className="hero__aside">
-            <h2 className={mainStyles.hero__greeting}>I'm Jesse</h2>
+            <h2 className="hero__greeting">Hi I'm Jesse</h2>
-            <p className={mainStyles.hero__description}>
+            <p className="hero__description">I'm a software engineer from Lagos, Nigeria</p>
-              I'm a software engineer from Lagos, Nigeria
-            </p>
           </aside>
-          <aside>
+          <aside className="hero__aside">
             <img
               src="https://res.cloudinary.com/dqfjoblug/image/upload/v1619192037/site__hero_rg5gzv.jpg"
               className="hero__image"

styles/Home.module.css

@@ -1,3 +0,0 @@
-.hero__img {
-  border-radius: 5%;
-}

styles/globals.css

@@ -1,30 +0,0 @@
-@font-face {
-  font-family: 'inter';
-  src: url('/fonts/inter_font.ttf');
-  font-weight: 300;
-  font-style: normal;
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: inter, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.container {
-  min-height: 100vh;
-  max-width: 960px;
-  margin: 0 auto;
-}

styles/globals.scss

@@ -0,0 +1,79 @@
+@font-face {
+  font-family: 'inter';
+  src: url('/fonts/inter_font.ttf');
+  font-weight: 300;
+  font-style: normal;
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: inter, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.container {
+  min-height: 100vh;
+  max-width: 960px;
+  min-width: 360px;
+  padding: 0 20px;
+  margin: 0 auto;
+}
+
+// Page Styles
+
+// HEADER AREA
+.header {
+  margin: 30px 0;
+
+  &__navbar {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__navbar ul {
+    display: flex;
+    list-style: none;
+  }
+
+  &__navbar li:not(:last-child) {
+    margin-right: 25px;
+  }
+}
+
+// HERO AREA
+.hero {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column-reverse;
+  padding: 30px 0;
+
+  &__aside > img {
+    text-align: center;
+  }
+
+  &__greeting {
+    font-weight: 300;
+    font-size: 1.5em;
+    margin: 20px 0 10px;
+  }
+
+  &__description {
+    font-size: 0.9em;
+  }
+
+  &__image {
+    width: 50%;
+  }
+}