diff --git a/src/components/CTA.tsx b/src/components/CTA.tsx index 836734c..762a15f 100644 --- a/src/components/CTA.tsx +++ b/src/components/CTA.tsx @@ -4,20 +4,9 @@ import Blob from '@/components/Blob'; const CTA = () => { return ( -
-
- - - {''} - -
- +
{ +const useBlobBg = (animation: boolean): [JSX.Element, CSSProperties] => { const [data, setData] = useState & { frames: string }>(); useEffect(() => { const bg = createBg(); @@ -88,7 +88,9 @@ const useBlobBg = (): [JSX.Element, CSSProperties] => { ...data?.cssVars, backgroundColor: 'hsla(0,0%,100%,0.5)', background: data?.background, - animation: `15000ms infinite alternate switchColor-${data?.bgInstance} cubic-bezier(0.4, 0, 0.6, 1)`, + animation: animation + ? `15000ms infinite alternate switchColor-${data?.bgInstance} cubic-bezier(0.4, 0, 0.6, 1)` + : '', }, ]; }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 7a9eb56..74d0acf 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -11,7 +11,7 @@ import Testimonials from '@/components/Testimonials'; import Projects from '@/components/Projects'; const Header = () => { - const [frames, bgStyles] = useBlobBg(); + const [frames, bgStyles] = useBlobBg(false); return (
diff --git a/src/styles/globals.css b/src/styles/globals.css index eb07bef..e0666b3 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -10,24 +10,10 @@ html { @apply text-transparent bg-clip-text bg-gradient-to-br from-[#3634BB] via-royal to-cornflower-500; } -@keyframes animatedBackground { - from { - background-position: 0 0; - } - to { - background-position: 100% 0; - } -} - .bg-stars { background-image: url('/stars.png'), linear-gradient(lightgray, lightgray); background-size: cover, cover, 50%; background-repeat: repeat-x, no-repeat, no-repeat; - animation-timing-function: ease-in-out; - animation: animatedBackground 40s linear infinite alternate; - @media (max-width: 640px) { - animation: animatedBackground 120s linear infinite alternate; - } } @layer utilities {