Merge branch 'master' of https://github.com/SayarB/GDSC-official-website

GDGVIT · Oct 30, 2023 · 1d6172b · 1d6172b
2 parents 6e5d3be + 95fa67d
commit 1d6172b
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
@@ -1,8 +1,9 @@
+
 import './globals.css'
 import { Unbounded } from 'next/font/google'
 import localFont from "next/font/local"
 
-const unbounded = Unbounded({ subsets: ['latin'], variable: '--font-unbounded' })
+const unbounded = Unbounded({ subsets: ['latin'], variable: '--font-unbounded', display: 'swap' })
 const neue_machina = localFont({
   src: '/NeueMachina-Regular.otf',
   variable: '--font-neuemachina'

diff --git a/web/app/page.tsx b/web/app/page.tsx
@@ -153,7 +153,7 @@ export default function Home() {
 
 
   return <main id='main-thing' ref={mainRef} className='h-[100vh] overflow-auto overflow-x-hidden snap-y'>
-    <StartAnim onComplete={() => { setStartAnimationComplete(true) }} />
+    {!startAnimationComplete && <StartAnim onComplete={() => { setStartAnimationComplete(true) }} />}
     {
       startAnimationComplete &&
       <>

diff --git a/web/components/StartAnim.tsx b/web/components/StartAnim.tsx
@@ -2,11 +2,12 @@
 
 import { Player, PlayerEvent } from "@lottiefiles/react-lottie-player";
 import LoadingAnimation from "../animations/loading_anim.json";
-import { useEffect } from "react";
+import { CSSProperties, useEffect } from "react";
 type Props = {
-    onComplete: () => void
+    onComplete: () => void;
+    style?: CSSProperties
 }
-const StartAnim = ({ onComplete }: Props) => {
+const StartAnim = ({ onComplete, style }: Props) => {
 
     useEffect(() => {
         const timeout = setTimeout(() => { onComplete() }, 15100)
@@ -15,10 +16,10 @@ const StartAnim = ({ onComplete }: Props) => {
         }
     })
 
-    return <div className="fixed top-0 bottom-0 left-0 right-0 flex items-center justify-center bg-dark -z-10"><Player
+    return <div className="fixed top-0 bottom-0 left-0 right-0 flex items-center justify-center overflow-hidden bg-dark -z-10" style={style} ><Player
         src={LoadingAnimation}
         autoplay
-        style={{ minHeight: '100vh', minWidth: '100vw', aspectRatio: 16 / 9, zIndex: 10, backgroundColor: "transparent" }}
+        style={{ minHeight: '100vh', minWidth: '100vw', aspectRatio: 16 / 9, zIndex: 0, backgroundColor: "transparent" }}
 
     /></div>
 }