tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Tben
2023-07-19 15:49:15 +01:00
parent b18cbba53d
commit 550d54fdd7
67 changed files with 3098 additions and 2397 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/about/(components)/Hero.tsx
+35
View File
@@ -0,0 +1,35 @@
"use client";
import React from "react";
import TextShuffler from "../../../components/actions/TextShuffler";
import { appear, genericScroll } from "../../(utils)/animate";
export default function Hero() {
React.useEffect(genericScroll, []);
React.useEffect(appear, []);
return (
<div className="-mt-10 appear">
<div
className="flex flex-col items-start gap-0 max-w-6xl w-full relative generic-scroll"
// id="hero-text-section"
>
<span className="text-primary-light text-lg">
<TextShuffler textInput="About Me" />
</span>
<h1
className="text-5xl leading-snug"
id="hero-text"
>
<TextShuffler textInput="Ben of All Trade, Master of All" />
</h1>
<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={1000}
/>
</span>
</div>
</div>
);
}
app/about/(components)/MoreAboutMe.tsx
+97
View File
@@ -0,0 +1,97 @@
"use client";
import React from "react";
import TextShuffler from "../../../components/actions/TextShuffler";
import { appear, genericScroll } from "../../(utils)/animate";
export default function MoreAboutMe() {
React.useEffect(genericScroll, []);
React.useEffect(appear, []);
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 generic-scroll">
<div className="h-20"></div>
<div
className="flex flex-col w-full gap-8 appear"
data-delay={2}
>
<div className="w-full">
<h2>
<TextShuffler textInput="More About Me" />
</h2>
<div className="flex flex-col items-start gap-4">
<div className="flex w-full gap-4">
<div
className={"p-4 cursor-pointer hover:opacity-60 grow" + (targetStack.match(/dev/i) ? " bg-[#343680]" : " border border-solid border-white/10")}
onClick={() => {
setTargetStack("dev");
}}
>
<div>Web Dev Stack</div>
</div>
<div
className={"p-4 cursor-pointer hover:opacity-60 grow" + (targetStack.match(/design/i) ? " bg-[#343680]" : " border border-solid border-white/10")}
onClick={() => {
setTargetStack("design");
}}
>
<div>UI/UX Stack</div>
</div>
</div>
</div>
</div>
<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"} />
</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>
);
}
app/about/page.tsx
+12
View File
@@ -0,0 +1,12 @@
import React from "react";
import MoreAboutMe from "./(components)/MoreAboutMe";
import Hero from "./(components)/Hero";
export default function AboutPage() {
return (
<React.Fragment>
<Hero />
<MoreAboutMe />
</React.Fragment>
);
}