-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: hero circle lines animation with gsap
- Loading branch information
1 parent
230f607
commit 89c695d
Showing
14 changed files
with
522 additions
and
160 deletions.
There are no files selected for viewing
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { Suspense, lazy } from "react" | ||
| import { type LottieComponentProps } from "lottie-react" | ||
| import { Skeleton } from "./ui/skeleton" | ||
|
|
||
| const LazyLottieComponent = lazy(() => import("lottie-react")) | ||
|
|
||
| interface LottieProps<T extends Record<string, unknown>> { | ||
| getAnimationData: () => Promise<T> | ||
| id: string | ||
| } | ||
|
|
||
| export function LazyLottie<T extends Record<string, unknown>>({ | ||
| getAnimationData, | ||
| id, | ||
| ref, | ||
| ...props | ||
| }: LottieProps<T> & Omit<LottieComponentProps, "animationData">) { | ||
| const data = getAnimationData() | ||
|
|
||
| if (!data) return <Skeleton /> | ||
|
|
||
| return ( | ||
| <Suspense fallback={<Skeleton />}> | ||
| <LazyLottieComponent animationData={data} {...props} /> | ||
| </Suspense> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| "use client" | ||
|
|
||
| import { useEffect, useRef } from "react" | ||
| import { gsap } from "gsap" | ||
|
|
||
| export default function ResumeBtn() { | ||
| const topTween = useRef(null) | ||
| const rightTween = useRef(null) | ||
| const bottomTween = useRef(null) | ||
| const leftTween = useRef(null) | ||
|
|
||
| useEffect(() => { | ||
| if (topTween && rightTween && bottomTween && leftTween) { | ||
| gsap.fromTo( | ||
| topTween.current, | ||
| { | ||
| left: "-100%", | ||
| }, | ||
| { | ||
| left: "100%", | ||
| repeat: -1, | ||
| duration: 2, | ||
| } | ||
| ) | ||
| gsap.fromTo( | ||
| rightTween.current, | ||
| { | ||
| top: "-100%", | ||
| }, | ||
| { | ||
| top: "100%", | ||
| delay: 0.5, | ||
| repeat: -1, | ||
| duration: 2, | ||
| } | ||
| ) | ||
|
|
||
| gsap.fromTo( | ||
| bottomTween.current, | ||
| { | ||
| right: "-100%", | ||
| }, | ||
| { | ||
| right: "100%", | ||
| delay: 1, | ||
| repeat: -1, | ||
| duration: 2, | ||
| } | ||
| ) | ||
|
|
||
| gsap.fromTo( | ||
| leftTween.current, | ||
| { | ||
| bottom: "-100%", | ||
| }, | ||
| { | ||
| bottom: "100%", | ||
| delay: 1.5, | ||
| repeat: -1, | ||
| duration: 2, | ||
| } | ||
| ) | ||
| } | ||
| }, []) | ||
|
|
||
| return ( | ||
| <button className="group hidden duration-150 md:block relative h-[34px] w-[100px] overflow-hidden border-[.01px] border-gray-800 hover:border-none hover:bg-accentColor hover:shadow-resume_btn_shadow hover:webkit-reflect"> | ||
| <div | ||
| ref={topTween} | ||
| className="absolute left-[-100px] top-0 h-[1px] w-full bg-[linear-gradient(90deg,transparent,hsl(var(--accent-color)))]" | ||
| /> | ||
| <span | ||
| ref={rightTween} | ||
| className="absolute right-0 top-[-100%] h-full w-[1px] bg-[linear-gradient(180deg,transparent,hsl(var(--accent-color)))]" | ||
| /> | ||
| <span | ||
| ref={bottomTween} | ||
| className="absolute bottom-0 right-[-100%] h-[1px] w-full bg-[linear-gradient(270deg,transparent,hsl(var(--accent-color)))]" | ||
| /> | ||
| <span | ||
| ref={leftTween} | ||
| className="absolute bottom-[-100%] left-0 h-full w-[1px] bg-[linear-gradient(360deg,transparent,hsl(var(--accent-color)))]" | ||
| /> | ||
| <div className="text-xs group-hover:text-white text-accentColor dark:text-gray-300"> | ||
| Resume | ||
| </div> | ||
| </button> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { ArrowRightIcon } from "@radix-ui/react-icons" | ||
| import { Button } from "../ui/button" | ||
|
|
||
| export default function HeroContent() { | ||
| return ( | ||
| <div className="relative max-w-[55rem] mt-[11rem] m-auto w-full flex flex-col gap-4 justify-center items-center"> | ||
| <div className="bg-[linear-gradient(#fff,rgba(255,255,255,.6))] inline-block text-transparent bg-clip-text leading-none text-6xl font-semibold"> | ||
| It's Shinn Thant | ||
| </div> | ||
| <div className="text-4xl font-semibold"> | ||
| <span className="bg-[linear-gradient(#fff,rgba(255,255,255,.6))] inline-block text-transparent bg-clip-text"> | ||
| A | ||
| </span>{" "} | ||
| <span className="text-accentColor">Front-End</span>{" "} | ||
| <span className="bg-[linear-gradient(#fff,rgba(255,255,255,.6))] inline-block text-transparent bg-clip-text"> | ||
| Developer | ||
| </span> | ||
| </div> | ||
| <div className="w-[370px] text-sm bg-[linear-gradient(#fff,rgba(255,255,255,.6))] inline-block text-transparent bg-clip-text"> | ||
| Passionate and detail-oriented frontend developer with a knack for | ||
| creating visually appealing and user-friendly web interfaces | ||
| </div> | ||
|
|
||
| <div className="bg-[linear-gradient(#fff,rgba(255,255,255,.6))] inline-block text-transparent bg-clip-text text-lg"> | ||
| Where creativity meets functionality. | ||
| </div> | ||
|
|
||
| <Button className="contact_me_btn shadow-md mt-3 group flex items-center gap-2"> | ||
| <div className="dark:text-black relative z-[3]">Contact Me</div> | ||
| <div className="contact_me_btn_overlay group-hover:opacity-100" /> | ||
|
|
||
| <div className="relative group overflow-hidden w-4 z-[3]"> | ||
| <div className="flex group-hover:animate-animate-frame-contact-me-btn-icon translate-x-[-100%]"> | ||
| <ArrowRightIcon className="text-black flex-none relative z-[3]" /> | ||
| <ArrowRightIcon className="text-black flex-none relative z-[3]" /> | ||
| </div> | ||
| </div> | ||
| </Button> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { LazyLottie } from "../LazyLottie" | ||
|
|
||
| export default function HeroLottie() { | ||
| return ( | ||
| <div className="absolute hidden md:block left-[-50px] top-[-14px] rotate-270"> | ||
| <LazyLottie | ||
| getAnimationData={() => import("@/app/assets/lottie/hero-lottie.json")} | ||
| loop | ||
| id="hero-lottie" | ||
| /> | ||
| </div> | ||
| ) | ||
| } |
Oops, something went wrong.