personal-site/app/(components)/Hero.tsx

"use client";

import React from "react";
import Image from "next/image";
import { gsap } from "gsap";
import { TextPlugin } from "gsap/all";
gsap.registerPlugin(TextPlugin);

export default function Hero() {
    /**
     * Handle animations on page load
     */
    React.useEffect(() => {
        const tl = gsap.timeline();

        gsap.fromTo(
            "#hero-sub-text",
            {
                opacity: 0,
            },
            {
                opacity: 1,
                delay: 0.5,
                duration: 1,
            }
        );
        gsap.to("#hero-text", {
            text: "I'm Benjamin Toby, a Software Engineer and UI/UX expert.",
            delay: 1,
            duration: 2,
            ease: "none",
        });
        gsap.fromTo(
            ".hero-button-link",
            {
                opacity: 0,
            },
            {
                opacity: 1,
                delay: 3,
                duration: 1,
                stagger: 0.5,
            }
        );
    }, []);

    /**
     * Render component
     */
    return (
        <div
            className="flex flex-col xl:flex-row items-center gap-0 justify-center -mt-[80px] xl:-mt-[160px] w-full relative pt-[500px] xl:pt-0 page-section"
            id="hero-content-wrapper"
        >
            <div
                className="rounded-full max-w-[450px] absolute md:relative flex items-center md:items-start justify-center mr-0 xl:-mr-14 bg-[#3e3f9c] overflow-hidden"
                id="main-image"
                style={{
                    transform: "scale(1.2)",
                }}
            >
                <img
                    src="/images/my-photo-stroked.png"
                    width={500}
                    height={562}
                    alt="Benjamin Toby Image"
                    className="contrast-[140%] grayscale mt-20 flex items-center justify-center object-contain"
                />
            </div>

            <div
                className="max-w-2xl relative z-10 mt-10 w-full"
                id="hero-text-section"
            >
                <span
                    id="hero-sub-text"
                    className="uppercase bg-primary_light text-[black]/80 font-bold px-3 py-1 tracking-wide"
                >
                    Howdy Tech Enthusiasts
                </span>
                <div className="h-4"></div>
                <h1
                    className="text-5xl md:text-[58px] leading-[1.1] gsap-text h-auto xl:h-[220px]"
                    id="hero-text"
                ></h1>

                <div className="h-10 flex xl:hidden"></div>

                <div className="gap-4 flex items-center flex-wrap">
                    <a
                        href="https://www.linkedin.com/in/benjamin-toby/"
                        target="_blank"
                        className="button grow hero-button-link"
                    >
                        Linkedin
                    </a>
                    <a
                        href="/contact"
                        style={{
                            backgroundColor: "transparent",
                            color: "white",
                            border: "2px solid white",
                        }}
                        className="button grow hero-button-link"
                    >
                        Contact Me
                    </a>
                    <a
                        href="/documents/Resume-Benjamin-Toby-Linkedin.pdf"
                        download={true}
                        className="button grow hero-button-link"
                        style={{
                            backgroundColor: "transparent",
                            color: "white",
                            border: "2px solid white",
                        }}
                    >
                        See my resume
                    </a>
                </div>
            </div>
        </div>
    );
}