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 16:00:48 +01:00
parent d29620ffaa
commit 425b93acb9
5 changed files with 69 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
"use client"; "use client";
import React from "react"; import React from "react";
import TextShuffler from "../../components/actions/TextShuffler"; // import TextShuffler from "../../components/actions/TextShuffler";
import { about, genericScroll } from "../(utils)/animate"; import { about, genericScroll } from "../(utils)/animate";
export default function AboutSection() { export default function AboutSection() {
@ -29,7 +29,8 @@ export default function AboutSection() {
<div className="flex flex-col xl:flex-row w-full gap-8"> <div className="flex flex-col xl:flex-row w-full gap-8">
<div className="w-full xl:w-[40%]"> <div className="w-full xl:w-[40%]">
<h2> <h2>
<TextShuffler textInput="About Me" /> About Me
{/* <TextShuffler textInput="About Me" /> */}
</h2> </h2>
<div className="flex flex-col-reverse xl:flex-col items-start gap-4"> <div className="flex flex-col-reverse xl:flex-col items-start gap-4">
@ -52,10 +53,11 @@ export default function AboutSection() {
</div> </div>
</div> </div>
<span className="hero-sub-text"> <span className="hero-sub-text">
<TextShuffler 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.
{/* <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." 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} delay={500}
/> /> */}
</span> </span>
<a <a
@ -70,7 +72,8 @@ export default function AboutSection() {
<div className="w-full xl:w-[60%] bg-[#343680] px-4 md:px-6 py-2"> <div className="w-full xl:w-[60%] bg-[#343680] px-4 md:px-6 py-2">
<section> <section>
<h3> <h3>
<TextShuffler textInput={targetStack?.match(/dev/i) ? "Web Dev Tech Stack" : "UI/UX tech stack"} /> {targetStack?.match(/dev/i) ? "Web Dev Tech Stack" : "UI/UX tech stack"}
{/* <TextShuffler textInput={targetStack?.match(/dev/i) ? "Web Dev Tech Stack" : "UI/UX tech stack"} /> */}
</h3> </h3>
<hr /> <hr />
<ul style={{ maxWidth: "800px" }}> <ul style={{ maxWidth: "800px" }}>
@ -82,10 +85,12 @@ export default function AboutSection() {
className="mb-4" className="mb-4"
> >
<h4 className="m-0"> <h4 className="m-0">
<TextShuffler textInput={item.title} /> {item.title}
{/* <TextShuffler textInput={item.title} /> */}
</h4> </h4>
<span className="opacity-80"> <span className="opacity-80">
<TextShuffler textInput={item.description} /> {item.description}
{/* <TextShuffler textInput={item.description} /> */}
</span> </span>
</li> </li>
))} ))}
@ -98,10 +103,12 @@ export default function AboutSection() {
className="mb-4" className="mb-4"
> >
<h4 className="m-0"> <h4 className="m-0">
<TextShuffler textInput={item.title} /> {item.title}
{/* <TextShuffler textInput={item.title} /> */}
</h4> </h4>
<span className="opacity-80"> <span className="opacity-80">
<TextShuffler textInput={item.description} /> {item.description}
{/* <TextShuffler textInput={item.description} /> */}
</span> </span>
</li> </li>
))} ))}

20
app/(components)/Hero.tsx
View File

@ -2,7 +2,7 @@
import React from "react"; import React from "react";
import Image from "next/image"; import Image from "next/image";
import TextShuffler from "../../components/actions/TextShuffler"; // import TextShuffler from "../../components/actions/TextShuffler";
import { hero } from "../(utils)/animate"; import { hero } from "../(utils)/animate";
export default function Hero() { export default function Hero() {
@ -10,7 +10,7 @@ export default function Hero() {
return ( return (
<div> <div>
<div className="flex flex-col xl:flex-row items-center gap-0 justify-center -mt-[120px] xl:-mt-[160px] w-full relative pt-[450px] md:pt-0"> <div className="flex flex-col xl:flex-row items-center gap-0 justify-center -mt-[80px] xl:-mt-[160px] w-full relative pt-[500px] md:pt-0">
<div <div
className="rounded-full max-w-[450px] absolute md:relative top-0 flex items-center md:items-start justify-center mr-0 xl:-mr-14 bg-[#3e3f9c] overflow-hidden" className="rounded-full max-w-[450px] absolute md:relative top-0 flex items-center md:items-start justify-center mr-0 xl:-mr-14 bg-[#3e3f9c] overflow-hidden"
id="main-image" id="main-image"
@ -31,29 +31,29 @@ export default function Hero() {
id="hero-text-section" id="hero-text-section"
> >
<h1 <h1
className="text-5xl leading-snug" className="text-4xl md:text-5xl leading-snug"
id="hero-text" id="hero-text"
> >
{/* Hi */} I'm Benjamin Toby, a Software Engineer and UI/UX expert
{/* Fullstack developer, UI/UX designer, Software Engineer, welcome */} {/* Fullstack developer, UI/UX designer, Software Engineer, welcome */}
<TextShuffler {/* <TextShuffler
textInput="I'm Benjamin Toby, a Software Engineer and UI/UX expert" textInput="I'm Benjamin Toby, a Software Engineer and UI/UX expert"
delay={500} delay={500}
/> /> */}
</h1> </h1>
<div className="gap-4 flex items-center"> <div className="gap-4 flex items-center flex-wrap">
<a <a
href="/documents/Resume-Benjamin-Toby-Linkedin.pdf" href="/documents/Resume-Benjamin-Toby-Linkedin.pdf"
download={true} download={true}
className="button" className="button grow"
> >
See my resume See my resume
</a> </a>
<a <a
href="https://www.linkedin.com/in/benjamin-toby/" href="https://www.linkedin.com/in/benjamin-toby/"
target="_blank" target="_blank"
className="button" className="button grow"
> >
Linkedin Linkedin
</a> </a>
@ -64,7 +64,7 @@ export default function Hero() {
color: "white", color: "white",
border: "2px solid white", border: "2px solid white",
}} }}
className="button" className="button grow"
> >
Contact Me Contact Me
</a> </a>

13
app/about/(components)/Hero.tsx
View File

@ -1,7 +1,7 @@
"use client"; "use client";
import React from "react"; import React from "react";
import TextShuffler from "../../../components/actions/TextShuffler"; // import TextShuffler from "../../../components/actions/TextShuffler";
import { appear, genericScroll } from "../../(utils)/animate"; import { appear, genericScroll } from "../../(utils)/animate";
export default function Hero() { export default function Hero() {
@ -15,19 +15,22 @@ export default function Hero() {
// id="hero-text-section" // id="hero-text-section"
> >
<span className="text-primary-light text-lg"> <span className="text-primary-light text-lg">
<TextShuffler textInput="About Me" /> About Me
{/* <TextShuffler textInput="About Me" /> */}
</span> </span>
<h1 <h1
className="text-5xl leading-snug" className="text-5xl leading-snug"
id="hero-text" id="hero-text"
> >
<TextShuffler textInput="Ben of All Trade, Master of All" /> Ben of All Trade, Master of All
{/* <TextShuffler textInput="Ben of All Trade, Master of All" /> */}
</h1> </h1>
<span className="hero-sub-text"> <span className="hero-sub-text">
<TextShuffler 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.
{/* <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." 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} delay={1000}
/> /> */}
</span> </span>
</div> </div>
</div> </div>

20
app/about/(components)/MoreAboutMe.tsx
View File

@ -1,7 +1,7 @@
"use client"; "use client";
import React from "react"; import React from "react";
import TextShuffler from "../../../components/actions/TextShuffler"; // import TextShuffler from "../../../components/actions/TextShuffler";
import { appear, genericScroll } from "../../(utils)/animate"; import { appear, genericScroll } from "../../(utils)/animate";
export default function MoreAboutMe() { export default function MoreAboutMe() {
@ -23,7 +23,8 @@ export default function MoreAboutMe() {
> >
<div className="w-full"> <div className="w-full">
<h2> <h2>
<TextShuffler textInput="More About Me" /> More About Me
{/* <TextShuffler textInput="More About Me" /> */}
</h2> </h2>
<div className="flex flex-col items-start gap-4"> <div className="flex flex-col items-start gap-4">
@ -51,7 +52,8 @@ export default function MoreAboutMe() {
<div className="w-full bg-[#343680] px-4 md:px-6 py-2"> <div className="w-full bg-[#343680] px-4 md:px-6 py-2">
<section> <section>
<h3> <h3>
<TextShuffler textInput={targetStack?.match(/dev/i) ? "Web Dev Tech Stack" : "UI/UX tech stack"} /> {targetStack?.match(/dev/i) ? "Web Dev Tech Stack" : "UI/UX tech stack"}
{/* <TextShuffler textInput={targetStack?.match(/dev/i) ? "Web Dev Tech Stack" : "UI/UX tech stack"} /> */}
</h3> </h3>
<hr /> <hr />
<ul style={{ maxWidth: "800px" }}> <ul style={{ maxWidth: "800px" }}>
@ -63,10 +65,12 @@ export default function MoreAboutMe() {
className="mb-4" className="mb-4"
> >
<h4 className="m-0"> <h4 className="m-0">
<TextShuffler textInput={item.title} /> {item.title}
{/* <TextShuffler textInput={item.title} /> */}
</h4> </h4>
<span className="opacity-80"> <span className="opacity-80">
<TextShuffler textInput={item.description} /> {item.description}
{/* <TextShuffler textInput={item.description} /> */}
</span> </span>
</li> </li>
))} ))}
@ -79,10 +83,12 @@ export default function MoreAboutMe() {
className="mb-4" className="mb-4"
> >
<h4 className="m-0"> <h4 className="m-0">
<TextShuffler textInput={item.title} /> {item.title}
{/* <TextShuffler textInput={item.title} /> */}
</h4> </h4>
<span className="opacity-80"> <span className="opacity-80">
<TextShuffler textInput={item.description} /> {item.description}
{/* <TextShuffler textInput={item.description} /> */}
</span> </span>
</li> </li>
))} ))}

22
styles/tw_main.css
View File

@ -178,6 +178,10 @@
margin-top: 1rem margin-top: 1rem
} }
.-mt-\[80px\] {
margin-top: -80px
}
.flex { .flex {
display: flex display: flex
} }
@ -365,6 +369,14 @@
padding-top: 450px padding-top: 450px
} }
.pt-\[480px\] {
padding-top: 480px
}
.pt-\[500px\] {
padding-top: 500px
}
.text-5xl { .text-5xl {
font-size: 3rem; font-size: 3rem;
line-height: 1 line-height: 1
@ -398,6 +410,11 @@
line-height: 1.75rem line-height: 1.75rem
} }
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.uppercase { .uppercase {
text-transform: uppercase text-transform: uppercase
} }
@ -492,6 +509,11 @@
.md\:pt-0 { .md\:pt-0 {
padding-top: 0px padding-top: 0px
} }
.md\:text-5xl {
font-size: 3rem;
line-height: 1
}
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {