personal-site/app/(components)/MySkillsSection.tsx

"use client";

import React from "react";

export default function MySkillsSection() {
    const webDevStack = require("../(utils)/web-dev-stack.json");
    const uiStack = require("../(utils)/ui-ux-stack.json");

    const [targetStack, setTargetStack] = React.useState("dev");

    return (
        <div className="max-w-6xl w-full flex flex-col items-start pb-40 page-section">
            <div className="h-[200px]"></div>

            <div className="flex flex-col items-start gap-6 w-full xl:w-[50%]">
                <h2 className="mb-0">Some of My Skills</h2>

                <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>

                <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 ")
                            }
                            onClick={() => {
                                setTargetStack("dev");
                            }}
                        >
                            <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 ")
                            }
                            onClick={() => {
                                setTargetStack("design");
                            }}
                        >
                            <div>UI/UX Stack</div>
                        </div>
                    </div>
                </div>

                <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>
                                )
                            )}
                        </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>
                                )
                            )}
                        </React.Fragment>
                    )}
                </ul>
            </div>
        </div>
    );
}