Feat - Add footer and other updates

pages/index.js

@@ -9,7 +9,9 @@ export default function Home() {
       </Head>
       <header className="header">
         <nav className="header__navbar">
-          <p className="header__logo">__init__</p>
+          <p className="header__logo">
+            <a href="https://twitter.com/jesseinit">__init__</a>
+          </p>
           <ul className="header__nav">
             {/* <li className="header__nav__item">blog</li>
             <li className="header__nav__item">resume</li> */}
@@ -19,10 +21,30 @@ export default function Home() {
       <main>
         <section className="hero">
           <aside className="hero__aside">
-            <h2 className="hero__greeting">Hi I'm Jesse</h2>
-            <p className="hero__description">I'm a software engineer from Lagos, Nigeria</p>
+            <h2 className="hero__author_name">Jesse Egbosionu</h2>
+            <p className="hero__description">
+              I'm a fullstack (backend focused) software engineer from Lagos, Nigeria, still living
+              in Nigeria. The vast majority of my career have been spent understanding and
+              proactively leveraging technology to impact lives positively far beyond the shores of
+              my environment.
+            </p>
+
+            <p className="hero__description">
+              In the last 3 years I've been building services and products in the finance, ecommerce
+              and health space, enriching lifes using technologies like Python(Django, Flask,
+              FastAPI), Javascript(React, Node.js), PostgreSQL, Docker, Redis etc.
+            </p>
+
+            <p className="hero__description">
+              I'm constantly looking for challenging and impactful opportunities so can always shoot
+              me an{' '}
+              <a className="text-underline" href="mailto:jesse.egbosionu@gmail.com">
+                email
+              </a>
+              .
+            </p>
           </aside>
-          <aside className="hero__aside">
+          <aside className="hero__aside text-align-center">
             <img
               src="https://res.cloudinary.com/dqfjoblug/image/upload/v1619192037/site__hero_rg5gzv.jpg"
               className="hero__image"
@@ -30,6 +52,9 @@ export default function Home() {
           </aside>
         </section>
       </main>
+      <footer className="footer">
+        <p className="text-align-center">Made with Awesomeness and ❤️</p>
+      </footer>
     </div>
   );
 }

styles/globals.scss

@@ -24,6 +24,7 @@ a {
 }
 
 .container {
+  position: relative;
   min-height: 100vh;
   max-width: 960px;
   min-width: 360px;
@@ -33,6 +34,15 @@ a {
 
 // Page Styles
 
+// UTILS
+.text-align-center {
+  text-align: center;
+}
+
+.text-underline {
+  text-decoration: underline;
+}
+
 // HEADER AREA
 .header {
   margin: 30px 0;
@@ -59,21 +69,32 @@ a {
   flex-direction: column-reverse;
   padding: 30px 0;
 
-  &__aside > img {
+  &__aside {
     text-align: center;
   }
 
-  &__greeting {
-    font-weight: 300;
-    font-size: 1.5em;
-    margin: 20px 0 10px;
+  &__author_name {
+    font-weight: 500;
+    font-size: 1.2em;
+    margin: 5px 0 30px;
   }
 
   &__description {
-    font-size: 0.9em;
+    font-size: 1em;
+    margin-bottom: 40px;
+    line-height: 1.5;
   }
 
   &__image {
-    width: 50%;
+    width: 30%;
+    border-radius: 50%;
   }
 }
+
+.footer {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  font-size: 0.9em;
+  margin-bottom: 50px;
+}