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

77 lines
2.9 KiB
TypeScript

"use client";
import React from "react";
import Image from "next/image";
import TextShuffler from "../../components/actions/TextShuffler";
import { hero } from "../(utils)/animate";
export default function Hero() {
React.useEffect(hero, []);
return (
<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="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"
>
<Image
src="/images/my-photo.png"
// fill
width={500}
height={562}
objectFit="contain"
alt="Benjamin Toby Image"
className="contrast-[140%] grayscale mt-20 flex items-center justify-center"
/>
</div>
<div
className="max-w-2xl relative z-10 mt-10 w-full"
id="hero-text-section"
>
<h1
className="text-5xl leading-snug"
id="hero-text"
>
{/* Hi */}
{/* Fullstack developer, UI/UX designer, Software Engineer, welcome */}
<TextShuffler
textInput="I'm Benjamin Toby, a Software Engineer and UI/UX expert"
delay={500}
/>
</h1>
<div className="gap-4 flex items-center">
<a
href="/documents/Resume-Benjamin-Toby-Linkedin.pdf"
download={true}
className="button"
>
See my resume
</a>
<a
href="https://www.linkedin.com/in/benjamin-toby/"
target="_blank"
className="button"
>
Linkedin
</a>
<a
href="/contact"
style={{
backgroundColor: "transparent",
color: "white",
border: "2px solid white",
}}
className="button"
>
Contact Me
</a>
</div>
</div>
</div>
</div>
);
}