- wip changes to landing page

pages/index.tsx

@@ -50,26 +50,32 @@ export default function Home() {
 
   return (
     <div id="info-anchor" className='relative w-full flex-row justify-center'>
-      {!showModal && <div className='tablet:w-full h-full bg-cover'>
+      {!showModal && <div style={{height: '100vh', width: '100vw'}} className='tablet:w-full flex flex-row justify-center h-full bg-cover bg-black bg-opacity-30'>
         {/* <Image src={backgroundPic} alt="record background"/> */}
-        <div className='w-1/2 mt-24 flex flex-col justify-center text-center'>
+        <div className='w-1/2 flex flex-col justify-center text-center'>
           {/* <FontAwesomeIcon width={25} height={50} icon={faGem} className="fas fa-gem" style={{ color: "red" }} /> */}
-          <div className="py-20 flex flex-row text-white border-white border-y-2 border-solid">
-            <h2>Okechi Onyeje</h2>
-            <div>
+          <div className="py-20 flex flex-col text-white border-white border-y-2 border-solid">
+            <div className='text-2xl'><h2>Okechi Onyeje</h2></div>
+            <div className='flex flex-row justify-center space-x-2'>
               <span>Software Professional</span>
+              <span>|</span>
               <span>
                 Application Artisan
               </span>
+              <span>|</span>
               <span>
                 Creative & Technology Evangilist
               </span>
             </div>
           </div>
           <div className='flex flex-row justify-center'>
+            <div className='flex flex-col'>
+              <div className='flex flex-row'>
                 {renderNav(navigationContent)}
               </div>
             </div>
+          </div>
+        </div>
       </div>}
       {showModal && (
         <div style={{height: '100vh', width: '100vw'}} className='justify-center flex flex-row bg-black bg-opacity-40'>

styles/globals.css

@@ -64,3 +64,25 @@ body {
   justify-content: flex-end;
   font-size: 25px;
 }
+
+.content {
+  content: '';
+  display: block;
+  position: absolute;
+  top: calc(-3.5rem - 1px);
+  left: calc(50% - 1px);
+  width: 1px;
+  height: calc(3.5rem + 1px);
+  background: #ffffff;
+}
+
+.use-middle::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: calc(-3.5rem - 1px);
+  left: calc(50% - 1px);
+  width: 1px;
+  height: calc(3.5rem + 1px);
+  background: #ffffff;
+}