personal-site/app/(components)/MySkillsSection.tsx
Benjamin Toby b9364a702c Updates
2023-10-24 18:59:00 +01:00

92 lines
4.3 KiB
TypeScript

"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">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>
<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>
);
}