updates

layouts/general_layout/GeneralLayout.jsx

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 import GeneralHeader from './GeneralHeader';
 import Head from "next/head"
+import GeneralFooter from './GeneralFooter';
 
 const GeneralLayout = ({ children }) => {
     return (
@@ -9,9 +10,10 @@ const GeneralLayout = ({ children }) => {
                 <meta name="keywords" content="UI/UX designer, Full Stack Web Developer, Web/graphic/motion designer, React Developer, NextJS developer, Node JS developer, Javascript Developer, Linux Ubuntu, DevOps, Nginx, MySQL developer, Freelancer" />
             </Head>
             <GeneralHeader />
-            <article>
+            <main>
                 { children }
-            </article>
+            </main>
+            <GeneralFooter />
         </Fragment>
     )
 }

pages/about.jsx

@@ -22,6 +22,7 @@ const about = () => {
 
             <div className='w-full h-6'></div>
 
+            <article>
                 <h2><TextShuffler textInput="My Web Dev Stack" /></h2>
                 <ul style={ { maxWidth: "800px" } }>
                     <li>
@@ -73,7 +74,9 @@ const about = () => {
                         </span>
                     </li>
                 </ul>
+            </article>
 
+            <article>
                 <h2><TextShuffler textInput="My UI/UX Stack" /></h2>
                 <ul style={ { maxWidth: "800px" } }>
                     <li>
@@ -119,6 +122,8 @@ const about = () => {
                         </span>
                     </li>
                 </ul>
+            </article>
+
 
             <div className="hero-ctas-section">
                 <a href='/documents/Benjamin_Toby_CV.pdf' download={ true }>See my resume</a>

pages/index.jsx

@@ -21,6 +21,11 @@ const index = () => {
             <div className="hero-ctas-section">
                 <a href='/documents/Benjamin_Toby_CV.pdf' download={ true }>See my resume</a>
                 <a href='https://www.linkedin.com/in/benjamin-toby/' target="_blank">Linkedin</a>
+                <a href='/contact' style={ {
+                    backgroundColor: "transparent",
+                    color: "white",
+                    border: "2px solid white"
+                } }>Contact Me</a>
             </div>
             <div className='fixed top-0 left-0 -z-10' id='homepage-animation-wrapper'></div>
         </GeneralLayout>

styles/main.css

@@ -32,7 +32,6 @@ body {
     width: 100%;
     margin: 0px;
     padding: 40px;
-    padding-bottom: 100px;
     top: 0;
     justify-content: center;
     background-color: var(--dark-color);

styles/tw_main.css

@@ -47,30 +47,10 @@
   position: fixed
 }
 
-.absolute {
-  position: absolute
-}
-
-.top-4 {
-  top: 1rem
-}
-
-.left-4 {
-  left: 1rem
-}
-
-.right-4 {
-  right: 1rem
-}
-
 .top-0 {
   top: 0px
 }
 
-.right-0 {
-  right: 0px
-}
-
 .left-0 {
   left: 0px
 }
@@ -79,8 +59,16 @@
   z-index: -10
 }
 
-.mb-0 {
+.mt-10 {
-  margin-bottom: 0px
+  margin-top: 2.5rem
+}
+
+.mt-auto {
+  margin-top: auto
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem
 }
 
 .mb-1 {
@@ -91,74 +79,48 @@
   display: block
 }
 
-.h-10 {
+.flex {
-  height: 2.5rem
+  display: flex
-}
-
-.h-28 {
-  height: 7rem
-}
-
-.h-96 {
-  height: 24rem
-}
-
-.h-full {
-  height: 100%
-}
-
-.h-8 {
-  height: 2rem
-}
-
-.h-4 {
-  height: 1rem
 }
 
 .h-6 {
   height: 1.5rem
 }
 
-.w-10 {
-  width: 2.5rem
-}
-
-.w-28 {
-  width: 7rem
-}
-
-.w-96 {
-  width: 24rem
-}
-
 .w-full {
   width: 100%
 }
 
-.bg-slate-600 {
+.flex-col {
-  --tw-bg-opacity: 1;
+  flex-direction: column
-  background-color: rgb(71 85 105 / var(--tw-bg-opacity))
 }
 
-.bg-red-600 {
+.border {
-  --tw-bg-opacity: 1;
+  border-width: 1px
-  background-color: rgb(220 38 38 / var(--tw-bg-opacity))
 }
 
-.text-slate-600 {
+.text-sm {
-  --tw-text-opacity: 1;
+  font-size: 0.875rem;
-  color: rgb(71 85 105 / var(--tw-text-opacity))
+  line-height: 1.25rem
 }
 
-.text-blue-600 {
+.text-xl {
-  --tw-text-opacity: 1;
+  font-size: 1.25rem;
-  color: rgb(37 99 235 / var(--tw-text-opacity))
+  line-height: 1.75rem
 }
 
-.opacity-25 {
+.font-bold {
-  opacity: 0.25
+  font-weight: 700
 }
 
 .opacity-50 {
   opacity: 0.5
 }
+
+.opacity-20 {
+  opacity: 0.2
+}
+
+.opacity-40 {
+  opacity: 0.4
+}

tailwind.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-    content: ["./components/**/*.{html,js,jsx}", "./pages/**/*.jsx"],
+    content: ["./components/**/*.{html,js,jsx}", "./pages/**/*.jsx", , "./layouts/**/*.jsx"],
     theme: {
         screens: {
             xs: "350px",