personal-site/app/(components)/AboutSection.tsx
2023-07-19 15:49:15 +01:00

116 lines
5.5 KiB
TypeScript

"use client";
import React from "react";
import TextShuffler from "../../components/actions/TextShuffler";
import { about } from "../(utils)/animate";
export default function AboutSection() {
React.useEffect(about, []);
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-center pb-40"
id="about-section"
>
{/* <span
className="text-[300px] uppercase absolute whitespace-nowrap opacity-5 -mt-64 z-[-1]"
id="about-me-label"
>
About Me
</span> */}
<div className="h-44"></div>
<div className="flex flex-col xl:flex-row w-full gap-8">
<div className="w-full xl:w-[40%]">
<h2>
<TextShuffler textInput="About Me" />
</h2>
<div className="flex flex-col-reverse xl:flex-col items-start gap-4">
<div className="flex flex-col w-full gap-2">
<div
className={"p-4 cursor-pointer hover:opacity-60" + (targetStack.match(/dev/i) ? " bg-[#343680] w-full xl:w-[120%]" : " w-full border border-solid border-white/10")}
onClick={() => {
setTargetStack("dev");
}}
>
<div>Web Dev Stack</div>
</div>
<div
className={"p-4 cursor-pointer hover:opacity-60" + (targetStack.match(/design/i) ? " bg-[#343680] w-full xl:w-[120%]" : " w-full border border-solid border-white/10")}
onClick={() => {
setTargetStack("design");
}}
>
<div>UI/UX Stack</div>
</div>
</div>
<span className="hero-sub-text">
<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
href="/about"
className="button"
>
Learn More About Me
</a>
</div>
</div>
<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"} />
</h3>
<hr />
<ul style={{ maxWidth: "800px" }}>
{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">
<TextShuffler textInput={item.title} />
</h4>
<span className="opacity-80">
<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">
<TextShuffler textInput={item.title} />
</h4>
<span className="opacity-80">
<TextShuffler textInput={item.description} />
</span>
</li>
))}
</React.Fragment>
)}
</ul>
</section>
</div>
</div>
</div>
);
}