From 31104a4138d73dc21e4a4de8f9861bc4980552d5 Mon Sep 17 00:00:00 2001
From: Benjamin Toby <benoti.san@gmail.com>
Date: Mon, 8 Jan 2024 19:06:05 +0100
Subject: [PATCH] Update About me

---
 app/(components)/AboutSection.tsx    |   9 +--
 app/(components)/MySkillsSection.tsx | 103 +++++++++++++++++----------
 2 files changed, 69 insertions(+), 43 deletions(-)

diff --git a/app/(components)/AboutSection.tsx b/app/(components)/AboutSection.tsx
index 45d8124..f21b4a0 100644
--- a/app/(components)/AboutSection.tsx
+++ b/app/(components)/AboutSection.tsx
@@ -27,10 +27,11 @@ export default function AboutSection() {
                         <span className="text-[24px]">
                             To explain the full extent of my skills and
                             abilities is now impractical. I've delved into the
-                            deep waters of tech and racked up multiple skills
-                            and abilities. To keep it simple, whichever stack is
-                            at hand, I've either had some experience with it, or
-                            I'll pick it up in a few weeks.
+                            deep waters of software and tech and racked up
+                            multiple skills and abilities. To keep it simple,
+                            whichever stack is at hand, I've either had some
+                            experience with it, or I'll pick it up in a few
+                            weeks.
                         </span>
 
                         <hr className="w-full my-8" />
diff --git a/app/(components)/MySkillsSection.tsx b/app/(components)/MySkillsSection.tsx
index 7ae54c0..71f1a86 100644
--- a/app/(components)/MySkillsSection.tsx
+++ b/app/(components)/MySkillsSection.tsx
@@ -13,19 +13,32 @@ export default function MySkillsSection() {
             <div className="h-[200px]"></div>
 
             <div className="flex flex-col items-start gap-6 w-full xl:w-[50%]">
-                <h2 className="mb-0">My Skills</h2>
+                <h2 className="mb-0">Some of My Skills</h2>
 
-                <span className="text-[24px]">I am well-versed in the full spectrum of design and development. While I started out as a designer, I have focused more on development in the last few years.</span>
+                <span className="text-[24px]">
+                    An inexhaustive list of my skills and abilities. I'm always
+                    learning new things and picking up new skills so this list
+                    is always growing.
+                </span>
 
                 <hr className="w-full" />
 
-                <h3 className="m-0">{targetStack?.match(/dev/i) ? "Web Dev Tech Stack" : "UI/UX tech stack"}</h3>
+                <h3 className="m-0">
+                    {targetStack?.match(/dev/i)
+                        ? "Web Dev Tech Stack"
+                        : "UI/UX tech stack"}
+                </h3>
 
                 <div className="flex flex-col xl:flex-col items-start gap-4 w-full">
                     {/* <h3>My Tech Stack</h3> */}
                     <div className="flex flex-wrap w-full gap-2">
                         <div
-                            className={"p-4 text-lg cursor-pointer grow" + (targetStack.match(/dev/i) ? " bg-[white] text-[black] font-bold" : " border border-solid border-white/10 hover:opacity-60 ")}
+                            className={
+                                "p-4 text-lg cursor-pointer grow" +
+                                (targetStack.match(/dev/i)
+                                    ? " bg-[white] text-[black] font-bold"
+                                    : " border border-solid border-white/10 hover:opacity-60 ")
+                            }
                             onClick={() => {
                                 setTargetStack("dev");
                             }}
@@ -33,7 +46,12 @@ export default function MySkillsSection() {
                             <div>Web Dev Stack</div>
                         </div>
                         <div
-                            className={"p-4 text-lg cursor-pointer grow" + (targetStack.match(/design/i) ? " bg-[white] text-[black] font-bold" : " border border-solid border-white/10 hover:opacity-60 ")}
+                            className={
+                                "p-4 text-lg cursor-pointer grow" +
+                                (targetStack.match(/design/i)
+                                    ? " bg-[white] text-[black] font-bold"
+                                    : " border border-solid border-white/10 hover:opacity-60 ")
+                            }
                             onClick={() => {
                                 setTargetStack("design");
                             }}
@@ -43,45 +61,52 @@ export default function MySkillsSection() {
                     </div>
                 </div>
 
-                <ul
-                    style={{ maxWidth: "800px" }}
-                    className="pl-6"
-                >
+                <ul style={{ maxWidth: "800px" }} className="pl-6">
                     {targetStack?.match(/dev/i) ? (
                         <React.Fragment>
-                            {webDevStack.map((item: { title: string; description: string }, index: number) => (
-                                <li
-                                    key={index}
-                                    className="mb-4"
-                                >
-                                    <h4 className="m-0 text-[#BBE572]">
-                                        {item.title}
-                                        {/* <TextShuffler textInput={item.title} /> */}
-                                    </h4>
-                                    <span className="opacity-80">
-                                        {item.description}
-                                        {/* <TextShuffler textInput={item.description} /> */}
-                                    </span>
-                                </li>
-                            ))}
+                            {webDevStack.map(
+                                (
+                                    item: {
+                                        title: string;
+                                        description: string;
+                                    },
+                                    index: number
+                                ) => (
+                                    <li key={index} className="mb-4">
+                                        <h4 className="m-0 text-[#BBE572]">
+                                            {item.title}
+                                            {/* <TextShuffler textInput={item.title} /> */}
+                                        </h4>
+                                        <span className="opacity-80">
+                                            {item.description}
+                                            {/* <TextShuffler textInput={item.description} /> */}
+                                        </span>
+                                    </li>
+                                )
+                            )}
                         </React.Fragment>
                     ) : (
                         <React.Fragment>
-                            {uiStack.map((item: { title: string; description: string }, index: number) => (
-                                <li
-                                    key={index}
-                                    className="mb-4"
-                                >
-                                    <h4 className="m-0 text-[#BBE572]">
-                                        {item.title}
-                                        {/* <TextShuffler textInput={item.title} /> */}
-                                    </h4>
-                                    <span className="opacity-80">
-                                        {item.description}
-                                        {/* <TextShuffler textInput={item.description} /> */}
-                                    </span>
-                                </li>
-                            ))}
+                            {uiStack.map(
+                                (
+                                    item: {
+                                        title: string;
+                                        description: string;
+                                    },
+                                    index: number
+                                ) => (
+                                    <li key={index} className="mb-4">
+                                        <h4 className="m-0 text-[#BBE572]">
+                                            {item.title}
+                                            {/* <TextShuffler textInput={item.title} /> */}
+                                        </h4>
+                                        <span className="opacity-80">
+                                            {item.description}
+                                            {/* <TextShuffler textInput={item.description} /> */}
+                                        </span>
+                                    </li>
+                                )
+                            )}
                         </React.Fragment>
                     )}
                 </ul>