From c9bd5c9332eb3abe13dd34462a40e21dbbd9c0c7 Mon Sep 17 00:00:00 2001
From: Tben <52448020+BenjaminToby@users.noreply.github.com>
Date: Fri, 11 Mar 2022 13:36:23 +0100
Subject: [PATCH] updates

---
 layouts/general_layout/GeneralLayout.jsx |   6 +-
 pages/about.jsx                          | 197 ++++++++++++-----------
 pages/index.jsx                          |   5 +
 styles/main.css                          |   1 -
 styles/tw_main.css                       | 102 ++++--------
 tailwind.config.js                       |   2 +-
 6 files changed, 143 insertions(+), 170 deletions(-)

diff --git a/layouts/general_layout/GeneralLayout.jsx b/layouts/general_layout/GeneralLayout.jsx
index e52c914..2d59c68 100644
--- a/layouts/general_layout/GeneralLayout.jsx
+++ b/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>
     )
 }
diff --git a/pages/about.jsx b/pages/about.jsx
index f843a21..d472206 100644
--- a/pages/about.jsx
+++ b/pages/about.jsx
@@ -22,103 +22,108 @@ const about = () => {
 
             <div className='w-full h-6'></div>
 
-            <h2><TextShuffler textInput="My Web Dev Stack" /></h2>
-            <ul style={ { maxWidth: "800px" } }>
-                <li>
-                    <h3 className="tech-stack-header"><TextShuffler textInput="HTML, CSS, Javascript" /></h3>
-                    <span className='opacity-50'>
-                        <TextShuffler textInput="The basics, the bedrock of all websites." />
-                    </span>
-                </li>
-                <li>
-                    <h3 className="tech-stack-header"><TextShuffler textInput="React JS" /></h3>
-                    <span className='opacity-50'>
-                        <TextShuffler textInput=" JavaScript library for high-performance web applications" />
-                    </span>
-                </li>
-                <li>
-                    <h3 className="tech-stack-header"><TextShuffler textInput="Next JS" /></h3>
-                    <span className='opacity-50'>
-                        <TextShuffler textInput="High performance React and Node js web framework for building blazing flast and performant web applications" />
-                    </span>
-                </li>
-                <li>
-                    <h3 className="tech-stack-header"><TextShuffler textInput="Tailwind CSS" /></h3>
-                    <span className='opacity-50'>
-                        <TextShuffler textInput="Lighting fast mobile first styling" />
-                    </span>
-                </li>
-                <li>
-                    <h3 className="tech-stack-header"><TextShuffler textInput="Node JS" /></h3>
-                    <span className='opacity-50'>
-                        <TextShuffler textInput="JavaScript runtime for the server. For creating backend architectures and APIs" />
-                    </span>
-                </li>
-                <li>
-                    <h3 className="tech-stack-header"><TextShuffler textInput="Ubuntu Linux" /></h3>
-                    <span className='opacity-50'>
-                        <TextShuffler textInput="Secure server management with ubuntu and Linux" />
-                    </span>
-                </li>
-                <li>
-                    <h3 className="tech-stack-header"><TextShuffler textInput="Nginx" /></h3>
-                    <span className='opacity-50'>
-                        <TextShuffler textInput="Super secure web server, reverse proxy and load balancer" />
-                    </span>
-                </li>
-                <li>
-                    <h3 className="tech-stack-header"><TextShuffler textInput="MySQL" /></h3>
-                    <span className='opacity-50'>
-                        <TextShuffler textInput="Tried and tested data storage, querying, and management." />
-                    </span>
-                </li>
-            </ul>
+            <article>
+                <h2><TextShuffler textInput="My Web Dev Stack" /></h2>
+                <ul style={ { maxWidth: "800px" } }>
+                    <li>
+                        <h3 className="tech-stack-header"><TextShuffler textInput="HTML, CSS, Javascript" /></h3>
+                        <span className='opacity-50'>
+                            <TextShuffler textInput="The basics, the bedrock of all websites." />
+                        </span>
+                    </li>
+                    <li>
+                        <h3 className="tech-stack-header"><TextShuffler textInput="React JS" /></h3>
+                        <span className='opacity-50'>
+                            <TextShuffler textInput=" JavaScript library for high-performance web applications" />
+                        </span>
+                    </li>
+                    <li>
+                        <h3 className="tech-stack-header"><TextShuffler textInput="Next JS" /></h3>
+                        <span className='opacity-50'>
+                            <TextShuffler textInput="High performance React and Node js web framework for building blazing flast and performant web applications" />
+                        </span>
+                    </li>
+                    <li>
+                        <h3 className="tech-stack-header"><TextShuffler textInput="Tailwind CSS" /></h3>
+                        <span className='opacity-50'>
+                            <TextShuffler textInput="Lighting fast mobile first styling" />
+                        </span>
+                    </li>
+                    <li>
+                        <h3 className="tech-stack-header"><TextShuffler textInput="Node JS" /></h3>
+                        <span className='opacity-50'>
+                            <TextShuffler textInput="JavaScript runtime for the server. For creating backend architectures and APIs" />
+                        </span>
+                    </li>
+                    <li>
+                        <h3 className="tech-stack-header"><TextShuffler textInput="Ubuntu Linux" /></h3>
+                        <span className='opacity-50'>
+                            <TextShuffler textInput="Secure server management with ubuntu and Linux" />
+                        </span>
+                    </li>
+                    <li>
+                        <h3 className="tech-stack-header"><TextShuffler textInput="Nginx" /></h3>
+                        <span className='opacity-50'>
+                            <TextShuffler textInput="Super secure web server, reverse proxy and load balancer" />
+                        </span>
+                    </li>
+                    <li>
+                        <h3 className="tech-stack-header"><TextShuffler textInput="MySQL" /></h3>
+                        <span className='opacity-50'>
+                            <TextShuffler textInput="Tried and tested data storage, querying, and management." />
+                        </span>
+                    </li>
+                </ul>
+            </article>
+
+            <article>
+                <h2><TextShuffler textInput="My UI/UX Stack" /></h2>
+                <ul style={ { maxWidth: "800px" } }>
+                    <li>
+                        <h3 className="tech-stack-header"><TextShuffler textInput="Adobe Photoshop" /></h3>
+                        <span className='opacity-50'>
+                            <TextShuffler textInput="Web design, image manipulation, image compositing, and more" />
+                        </span>
+                    </li>
+                    <li>
+                        <h3 className="tech-stack-header"><TextShuffler textInput="Adobe Illustrator" /></h3>
+                        <span className='opacity-50'>
+                            <TextShuffler textInput="Vector graphic of all types" />
+                        </span>
+                    </li>
+                    <li>
+                        <h3 className="tech-stack-header"><TextShuffler textInput="Figma" /></h3>
+                        <span className='opacity-50'>
+                            <TextShuffler textInput="Web, UI, UX design." />
+                        </span>
+                    </li>
+                    <li>
+                        <h3 className="tech-stack-header"><TextShuffler textInput="Affinity Designer" /></h3>
+                        <span className='opacity-50'>
+                            <TextShuffler textInput="Vector graphics." />
+                        </span>
+                    </li>
+                    <li>
+                        <h3 className="tech-stack-header"><TextShuffler textInput="After Effects" /></h3>
+                        <span className='opacity-50'>
+                            <TextShuffler textInput="Motion graphics and animation" />
+                        </span>
+                    </li>
+                    <li>
+                        <h3 className="tech-stack-header"><TextShuffler textInput="Adobe XD" /></h3>
+                        <span className='opacity-50'>
+                            <TextShuffler textInput="UI/UX design" />
+                        </span>
+                    </li>
+                    <li>
+                        <h3 className="tech-stack-header"><TextShuffler textInput="Webflow" /></h3>
+                        <span className='opacity-50'>
+                            <TextShuffler textInput="Visual Web coding" />
+                        </span>
+                    </li>
+                </ul>
+            </article>
 
-            <h2><TextShuffler textInput="My UI/UX Stack" /></h2>
-            <ul style={ { maxWidth: "800px" } }>
-                <li>
-                    <h3 className="tech-stack-header"><TextShuffler textInput="Adobe Photoshop" /></h3>
-                    <span className='opacity-50'>
-                        <TextShuffler textInput="Web design, image manipulation, image compositing, and more" />
-                    </span>
-                </li>
-                <li>
-                    <h3 className="tech-stack-header"><TextShuffler textInput="Adobe Illustrator" /></h3>
-                    <span className='opacity-50'>
-                        <TextShuffler textInput="Vector graphic of all types" />
-                    </span>
-                </li>
-                <li>
-                    <h3 className="tech-stack-header"><TextShuffler textInput="Figma" /></h3>
-                    <span className='opacity-50'>
-                        <TextShuffler textInput="Web, UI, UX design." />
-                    </span>
-                </li>
-                <li>
-                    <h3 className="tech-stack-header"><TextShuffler textInput="Affinity Designer" /></h3>
-                    <span className='opacity-50'>
-                        <TextShuffler textInput="Vector graphics." />
-                    </span>
-                </li>
-                <li>
-                    <h3 className="tech-stack-header"><TextShuffler textInput="After Effects" /></h3>
-                    <span className='opacity-50'>
-                        <TextShuffler textInput="Motion graphics and animation" />
-                    </span>
-                </li>
-                <li>
-                    <h3 className="tech-stack-header"><TextShuffler textInput="Adobe XD" /></h3>
-                    <span className='opacity-50'>
-                        <TextShuffler textInput="UI/UX design" />
-                    </span>
-                </li>
-                <li>
-                    <h3 className="tech-stack-header"><TextShuffler textInput="Webflow" /></h3>
-                    <span className='opacity-50'>
-                        <TextShuffler textInput="Visual Web coding" />
-                    </span>
-                </li>
-            </ul>
 
             <div className="hero-ctas-section">
                 <a href='/documents/Benjamin_Toby_CV.pdf' download={ true }>See my resume</a>
diff --git a/pages/index.jsx b/pages/index.jsx
index 68124f4..1ed3a97 100644
--- a/pages/index.jsx
+++ b/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>
diff --git a/styles/main.css b/styles/main.css
index 6b030e9..a1c88e4 100644
--- a/styles/main.css
+++ b/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);
diff --git a/styles/tw_main.css b/styles/tw_main.css
index 35f2ba9..b90dd74 100644
--- a/styles/tw_main.css
+++ b/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 {
-  margin-bottom: 0px
+.mt-10 {
+  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 {
-  height: 2.5rem
-}
-
-.h-28 {
-  height: 7rem
-}
-
-.h-96 {
-  height: 24rem
-}
-
-.h-full {
-  height: 100%
-}
-
-.h-8 {
-  height: 2rem
-}
-
-.h-4 {
-  height: 1rem
+.flex {
+  display: flex
 }
 
 .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 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(71 85 105 / var(--tw-bg-opacity))
+.flex-col {
+  flex-direction: column
 }
 
-.bg-red-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(220 38 38 / var(--tw-bg-opacity))
+.border {
+  border-width: 1px
 }
 
-.text-slate-600 {
-  --tw-text-opacity: 1;
-  color: rgb(71 85 105 / var(--tw-text-opacity))
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem
 }
 
-.text-blue-600 {
-  --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity))
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem
 }
 
-.opacity-25 {
-  opacity: 0.25
+.font-bold {
+  font-weight: 700
 }
 
 .opacity-50 {
   opacity: 0.5
 }
+
+.opacity-20 {
+  opacity: 0.2
+}
+
+.opacity-40 {
+  opacity: 0.4
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 48cf9ed..16100d9 100644
--- a/tailwind.config.js
+++ b/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",