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

Update About me

Browse Source
This commit is contained in:
Benjamin Toby 2024-01-08 19:06:05 +01:00
parent e68bdf5844
commit 31104a4138
2 changed files with 69 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/(components)/AboutSection.tsx
View File

@ -27,10 +27,11 @@ export default function AboutSection() {
<span className="text-[24px]"> <span className="text-[24px]">
To explain the full extent of my skills and To explain the full extent of my skills and
abilities is now impractical. I've delved into the abilities is now impractical. I've delved into the
deep waters of tech and racked up multiple skills deep waters of software and tech and racked up
and abilities. To keep it simple, whichever stack is multiple skills and abilities. To keep it simple,
at hand, I've either had some experience with it, or whichever stack is at hand, I've either had some
I'll pick it up in a few weeks. experience with it, or I'll pick it up in a few
weeks.
</span> </span>
<hr className="w-full my-8" /> <hr className="w-full my-8" />

103
app/(components)/MySkillsSection.tsx
View File

@ -13,19 +13,32 @@ export default function MySkillsSection() {
<div className="h-[200px]"></div> <div className="h-[200px]"></div>
<div className="flex flex-col items-start gap-6 w-full xl:w-[50%]"> <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" /> <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"> <div className="flex flex-col xl:flex-col items-start gap-4 w-full">
{/* <h3>My Tech Stack</h3> */} {/* <h3>My Tech Stack</h3> */}
<div className="flex flex-wrap w-full gap-2"> <div className="flex flex-wrap w-full gap-2">
<div <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={() => { onClick={() => {
setTargetStack("dev"); setTargetStack("dev");
}} }}
@ -33,7 +46,12 @@ export default function MySkillsSection() {
<div>Web Dev Stack</div> <div>Web Dev Stack</div>
</div> </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={() => { onClick={() => {
setTargetStack("design"); setTargetStack("design");
}} }}
@ -43,45 +61,52 @@ export default function MySkillsSection() {
</div> </div>
</div> </div>
<ul <ul style={{ maxWidth: "800px" }} className="pl-6">
style={{ maxWidth: "800px" }}
className="pl-6"
>
{targetStack?.match(/dev/i) ? ( {targetStack?.match(/dev/i) ? (
<React.Fragment> <React.Fragment>
{webDevStack.map((item: { title: string; description: string }, index: number) => ( {webDevStack.map(
<li (
key={index} item: {
className="mb-4" title: string;
> description: string;
<h4 className="m-0 text-[#BBE572]"> },
{item.title} index: number
{/* <TextShuffler textInput={item.title} /> */} ) => (
</h4> <li key={index} className="mb-4">
<span className="opacity-80"> <h4 className="m-0 text-[#BBE572]">
{item.description} {item.title}
{/* <TextShuffler textInput={item.description} /> */} {/* <TextShuffler textInput={item.title} /> */}
</span> </h4>
</li> <span className="opacity-80">
))} {item.description}
{/* <TextShuffler textInput={item.description} /> */}
</span>
</li>
)
)}
</React.Fragment> </React.Fragment>
) : ( ) : (
<React.Fragment> <React.Fragment>
{uiStack.map((item: { title: string; description: string }, index: number) => ( {uiStack.map(
<li (
key={index} item: {
className="mb-4" title: string;
> description: string;
<h4 className="m-0 text-[#BBE572]"> },
{item.title} index: number
{/* <TextShuffler textInput={item.title} /> */} ) => (
</h4> <li key={index} className="mb-4">
<span className="opacity-80"> <h4 className="m-0 text-[#BBE572]">
{item.description} {item.title}
{/* <TextShuffler textInput={item.description} /> */} {/* <TextShuffler textInput={item.title} /> */}
</span> </h4>
</li> <span className="opacity-80">
))} {item.description}
{/* <TextShuffler textInput={item.description} /> */}
</span>
</li>
)
)}
</React.Fragment> </React.Fragment>
)} )}
</ul> </ul>