From 425b93acb99cd93f6c661801cb1325c40889c6e4 Mon Sep 17 00:00:00 2001
From: Tben <benoti.san@gmail.com>
Date: Wed, 19 Jul 2023 16:00:48 +0100
Subject: [PATCH] updates

---
 app/(components)/AboutSection.tsx      | 25 ++++++++++++++++---------
 app/(components)/Hero.tsx              | 20 ++++++++++----------
 app/about/(components)/Hero.tsx        | 13 ++++++++-----
 app/about/(components)/MoreAboutMe.tsx | 20 +++++++++++++-------
 styles/tw_main.css                     | 22 ++++++++++++++++++++++
 5 files changed, 69 insertions(+), 31 deletions(-)

diff --git a/app/(components)/AboutSection.tsx b/app/(components)/AboutSection.tsx
index de4d9d7..d55137f 100644
--- a/app/(components)/AboutSection.tsx
+++ b/app/(components)/AboutSection.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import TextShuffler from "../../components/actions/TextShuffler";
+// import TextShuffler from "../../components/actions/TextShuffler";
 import { about, genericScroll } from "../(utils)/animate";
 
 export default function AboutSection() {
@@ -29,7 +29,8 @@ export default function AboutSection() {
             <div className="flex flex-col xl:flex-row w-full gap-8">
                 <div className="w-full xl:w-[40%]">
                     <h2>
-                        <TextShuffler textInput="About Me" />
+                        About Me
+                        {/* <TextShuffler textInput="About Me" /> */}
                     </h2>
 
                     <div className="flex flex-col-reverse xl:flex-col items-start gap-4">
@@ -52,10 +53,11 @@ export default function AboutSection() {
                             </div>
                         </div>
                         <span className="hero-sub-text">
-                            <TextShuffler
+                            Quick learner, adaptable, problem solver, curious. I strive to know the system, rather than the status quo. My credo is: no problem too great, no knowledge too vast, no logic too complex. I thrive in difficult situations and complex hurdles: problem solving is now second nature to me: if you can think it, it can be done.
+                            {/* <TextShuffler
                                 textInput="Quick learner, adaptable, problem solver, curious. I strive to know the system, rather than the status quo. My credo is: no problem too great, no knowledge too vast, no logic too complex. I thrive in difficult situations and complex hurdles: problem solving is now second nature to me: if you can think it, it can be done."
                                 delay={500}
-                            />
+                            /> */}
                         </span>
 
                         <a
@@ -70,7 +72,8 @@ export default function AboutSection() {
                 <div className="w-full xl:w-[60%] bg-[#343680] px-4 md:px-6 py-2">
                     <section>
                         <h3>
-                            <TextShuffler textInput={targetStack?.match(/dev/i) ? "Web Dev Tech Stack" : "UI/UX tech stack"} />
+                            {targetStack?.match(/dev/i) ? "Web Dev Tech Stack" : "UI/UX tech stack"}
+                            {/* <TextShuffler textInput={targetStack?.match(/dev/i) ? "Web Dev Tech Stack" : "UI/UX tech stack"} /> */}
                         </h3>
                         <hr />
                         <ul style={{ maxWidth: "800px" }}>
@@ -82,10 +85,12 @@ export default function AboutSection() {
                                             className="mb-4"
                                         >
                                             <h4 className="m-0">
-                                                <TextShuffler textInput={item.title} />
+                                                {item.title}
+                                                {/* <TextShuffler textInput={item.title} /> */}
                                             </h4>
                                             <span className="opacity-80">
-                                                <TextShuffler textInput={item.description} />
+                                                {item.description}
+                                                {/* <TextShuffler textInput={item.description} /> */}
                                             </span>
                                         </li>
                                     ))}
@@ -98,10 +103,12 @@ export default function AboutSection() {
                                             className="mb-4"
                                         >
                                             <h4 className="m-0">
-                                                <TextShuffler textInput={item.title} />
+                                                {item.title}
+                                                {/* <TextShuffler textInput={item.title} /> */}
                                             </h4>
                                             <span className="opacity-80">
-                                                <TextShuffler textInput={item.description} />
+                                                {item.description}
+                                                {/* <TextShuffler textInput={item.description} /> */}
                                             </span>
                                         </li>
                                     ))}
diff --git a/app/(components)/Hero.tsx b/app/(components)/Hero.tsx
index fc2fd67..f0c9ed5 100644
--- a/app/(components)/Hero.tsx
+++ b/app/(components)/Hero.tsx
@@ -2,7 +2,7 @@
 
 import React from "react";
 import Image from "next/image";
-import TextShuffler from "../../components/actions/TextShuffler";
+// import TextShuffler from "../../components/actions/TextShuffler";
 import { hero } from "../(utils)/animate";
 
 export default function Hero() {
@@ -10,7 +10,7 @@ export default function Hero() {
 
     return (
         <div>
-            <div className="flex flex-col xl:flex-row items-center gap-0 justify-center -mt-[120px] xl:-mt-[160px] w-full relative pt-[450px] md:pt-0">
+            <div className="flex flex-col xl:flex-row items-center gap-0 justify-center -mt-[80px] xl:-mt-[160px] w-full relative pt-[500px] md:pt-0">
                 <div
                     className="rounded-full max-w-[450px] absolute md:relative top-0 flex items-center md:items-start justify-center mr-0 xl:-mr-14 bg-[#3e3f9c] overflow-hidden"
                     id="main-image"
@@ -31,29 +31,29 @@ export default function Hero() {
                     id="hero-text-section"
                 >
                     <h1
-                        className="text-5xl leading-snug"
+                        className="text-4xl md:text-5xl leading-snug"
                         id="hero-text"
                     >
-                        {/* Hi */}
+                        I'm Benjamin Toby, a Software Engineer and UI/UX expert
                         {/* Fullstack developer, UI/UX designer, Software Engineer, welcome */}
-                        <TextShuffler
+                        {/* <TextShuffler
                             textInput="I'm Benjamin Toby, a Software Engineer and UI/UX expert"
                             delay={500}
-                        />
+                        /> */}
                     </h1>
 
-                    <div className="gap-4 flex items-center">
+                    <div className="gap-4 flex items-center flex-wrap">
                         <a
                             href="/documents/Resume-Benjamin-Toby-Linkedin.pdf"
                             download={true}
-                            className="button"
+                            className="button grow"
                         >
                             See my resume
                         </a>
                         <a
                             href="https://www.linkedin.com/in/benjamin-toby/"
                             target="_blank"
-                            className="button"
+                            className="button grow"
                         >
                             Linkedin
                         </a>
@@ -64,7 +64,7 @@ export default function Hero() {
                                 color: "white",
                                 border: "2px solid white",
                             }}
-                            className="button"
+                            className="button grow"
                         >
                             Contact Me
                         </a>
diff --git a/app/about/(components)/Hero.tsx b/app/about/(components)/Hero.tsx
index d0f63b0..75a19e0 100644
--- a/app/about/(components)/Hero.tsx
+++ b/app/about/(components)/Hero.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import TextShuffler from "../../../components/actions/TextShuffler";
+// import TextShuffler from "../../../components/actions/TextShuffler";
 import { appear, genericScroll } from "../../(utils)/animate";
 
 export default function Hero() {
@@ -15,19 +15,22 @@ export default function Hero() {
                 // id="hero-text-section"
             >
                 <span className="text-primary-light text-lg">
-                    <TextShuffler textInput="About Me" />
+                    About Me
+                    {/* <TextShuffler textInput="About Me" /> */}
                 </span>
                 <h1
                     className="text-5xl leading-snug"
                     id="hero-text"
                 >
-                    <TextShuffler textInput="Ben of All Trade, Master of All" />
+                    Ben of All Trade, Master of All
+                    {/* <TextShuffler textInput="Ben of All Trade, Master of All" /> */}
                 </h1>
                 <span className="hero-sub-text">
-                    <TextShuffler
+                    Quick learner, adaptable, problem solver, curious. I strive to know the system, rather than the status quo. My credo is: no problem too great, no knowledge too vast, no logic too complex. I thrive in difficult situations and complex hurdles: problem solving is now second nature to me: if you can think it, it can be done.
+                    {/* <TextShuffler
                         textInput="Quick learner, adaptable, problem solver, curious. I strive to know the system, rather than the status quo. My credo is: no problem too great, no knowledge too vast, no logic too complex. I thrive in difficult situations and complex hurdles: problem solving is now second nature to me: if you can think it, it can be done."
                         delay={1000}
-                    />
+                    /> */}
                 </span>
             </div>
         </div>
diff --git a/app/about/(components)/MoreAboutMe.tsx b/app/about/(components)/MoreAboutMe.tsx
index 4edf0a6..3be63e6 100644
--- a/app/about/(components)/MoreAboutMe.tsx
+++ b/app/about/(components)/MoreAboutMe.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import TextShuffler from "../../../components/actions/TextShuffler";
+// import TextShuffler from "../../../components/actions/TextShuffler";
 import { appear, genericScroll } from "../../(utils)/animate";
 
 export default function MoreAboutMe() {
@@ -23,7 +23,8 @@ export default function MoreAboutMe() {
             >
                 <div className="w-full">
                     <h2>
-                        <TextShuffler textInput="More About Me" />
+                        More About Me
+                        {/* <TextShuffler textInput="More About Me" /> */}
                     </h2>
 
                     <div className="flex flex-col items-start gap-4">
@@ -51,7 +52,8 @@ export default function MoreAboutMe() {
                 <div className="w-full bg-[#343680] px-4 md:px-6 py-2">
                     <section>
                         <h3>
-                            <TextShuffler textInput={targetStack?.match(/dev/i) ? "Web Dev Tech Stack" : "UI/UX tech stack"} />
+                            {targetStack?.match(/dev/i) ? "Web Dev Tech Stack" : "UI/UX tech stack"}
+                            {/* <TextShuffler textInput={targetStack?.match(/dev/i) ? "Web Dev Tech Stack" : "UI/UX tech stack"} /> */}
                         </h3>
                         <hr />
                         <ul style={{ maxWidth: "800px" }}>
@@ -63,10 +65,12 @@ export default function MoreAboutMe() {
                                             className="mb-4"
                                         >
                                             <h4 className="m-0">
-                                                <TextShuffler textInput={item.title} />
+                                                {item.title}
+                                                {/* <TextShuffler textInput={item.title} /> */}
                                             </h4>
                                             <span className="opacity-80">
-                                                <TextShuffler textInput={item.description} />
+                                                {item.description}
+                                                {/* <TextShuffler textInput={item.description} /> */}
                                             </span>
                                         </li>
                                     ))}
@@ -79,10 +83,12 @@ export default function MoreAboutMe() {
                                             className="mb-4"
                                         >
                                             <h4 className="m-0">
-                                                <TextShuffler textInput={item.title} />
+                                                {item.title}
+                                                {/* <TextShuffler textInput={item.title} /> */}
                                             </h4>
                                             <span className="opacity-80">
-                                                <TextShuffler textInput={item.description} />
+                                                {item.description}
+                                                {/* <TextShuffler textInput={item.description} /> */}
                                             </span>
                                         </li>
                                     ))}
diff --git a/styles/tw_main.css b/styles/tw_main.css
index 2455d0c..83839cf 100644
--- a/styles/tw_main.css
+++ b/styles/tw_main.css
@@ -178,6 +178,10 @@
   margin-top: 1rem
 }
 
+.-mt-\[80px\] {
+  margin-top: -80px
+}
+
 .flex {
   display: flex
 }
@@ -365,6 +369,14 @@
   padding-top: 450px
 }
 
+.pt-\[480px\] {
+  padding-top: 480px
+}
+
+.pt-\[500px\] {
+  padding-top: 500px
+}
+
 .text-5xl {
   font-size: 3rem;
   line-height: 1
@@ -398,6 +410,11 @@
   line-height: 1.75rem
 }
 
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem
+}
+
 .uppercase {
   text-transform: uppercase
 }
@@ -492,6 +509,11 @@
   .md\:pt-0 {
     padding-top: 0px
   }
+
+  .md\:text-5xl {
+    font-size: 3rem;
+    line-height: 1
+  }
 }
 
 @media (min-width: 1200px) {