Production Optimized

EthanBlake00 · Aug 18, 2024 · eca3948 · eca3948
1 parent 5898141
commit eca3948
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 47 deletions.
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,11 +1,13 @@
-"use client";
-import Header from "@/components/Header";
-import Hero from "@/components/Hero";
-import Footer from "@/components/ui/Footer";
+"use client"
 import {motion} from "framer-motion";
+import dynamic from "next/dynamic";
+const Header = dynamic(()=>import("@/components/Header"),{ssr:false});
+const Footer = dynamic(()=>import("@/components/ui/Footer"),{ssr:false});
+const Hero = dynamic(()=>import("@/components/Hero"),{ssr:false});
+
 export default function Home() {
     return (
-        <motion.main initial={{opacity:0}} animate={{opacity:1}} className="relative rounded-lg min-h-screen m-2">
+        <motion.main initial={{opacity:0}} animate={{opacity:1}} className="relative flex flex-col justify-between rounded-lg min-h-screen px-8 py-4">
             <Header/>
             <Hero/>
             <Footer/>

diff --git a/app/projects/page.tsx b/app/projects/page.tsx
@@ -1,55 +1,74 @@
 "use client";
 import React, {useEffect, useState} from 'react';
 import {getFilterMenuItems, getProjects} from "@/firebase/Config";
-import FilterCard from "@/components/ui/FilterCard";
-import Header from "@/components/Header";
-import Footer from "@/components/ui/Footer";
-import {motion} from "framer-motion";
-import ProjectCard from "@/components/ui/ProjectCard";
-import EmptyState from "@/components/ui/EmptyState";
+import {AnimatePresence, motion} from "framer-motion";
 import {Project} from "@/interfaces";
+import dynamic from "next/dynamic";
+
+const FilterCard = dynamic(() => import("@/components/ui/FilterCard"), {ssr: false});
+const ProjectCard = dynamic(() => import("@/components/ui/ProjectCard"), {ssr: false});
+const EmptyState = dynamic(() => import("@/components/ui/EmptyState"), {ssr: false});
+const LoadingState = dynamic(() => import("@/components/ui/LoadingState"), {ssr: false});
+const Header = dynamic(() => import("@/components/Header"), {ssr: false});
+const Footer = dynamic(() => import("@/components/ui/Footer"), {ssr: false});
 
 const Page = () => {
     const [selectedFilter, setSelectedFilter] = useState<string>("All")
     const [filters, setFilters] = useState([])
     const [projects, setProjects] = useState([] as Project[])
+
+    const [isFiltersLoading, setIsFiltersLoading] = useState<boolean>(true)
+    const [isProjectsLoading, setIsProjectsLoading] = useState<boolean>(true)
+
     const fetchFilterItems = async () => {
         const filters = await getFilterMenuItems();
         setFilters(filters)
     }
     const fetchProjects = async () => {
         const projects = await getProjects(selectedFilter)
+        // @ts-ignore
         setProjects(projects)
     }
     useEffect(() => {
-        fetchFilterItems()
+        fetchFilterItems().then(() => setIsFiltersLoading(false))
     }, []);
 
     useEffect(() => {
-        fetchProjects()
-    }, [selectedFilter])
+        setIsProjectsLoading(true)
+        fetchProjects().then(() => setIsProjectsLoading(false))
+    }, [selectedFilter]);
 
     return (
-        <main className="w-full relative min-h-[100vh]">
+        <main className="relative flex flex-col justify-between rounded-lg min-h-screen px-8 py-4">
             <Header/>
-            <motion.div initial={{opacity: 0, y: '1vh'}}
-                        transition={{delay: .6, type: 'spring', stiffness: 100, damping: 10}}
-                        animate={{opacity: 1, y: 0}}
-                        className="w-full flex-wrap pt-10 md:pt-20 justify-center h-full gap-5 items-center flex flex-row">
-                {filters?.map((name, index) => (
-                    <FilterCard handleClick={() => {
-                        setSelectedFilter(name)
-                    }} key={index} name={name} selectedFilter={selectedFilter}/>
-                ))}
-            </motion.div>
-            <motion.div initial={{opacity: 0, y: '1vh'}}
-                        transition={{delay: .6, type: 'spring', stiffness: 100, damping: 10}}
-                        animate={{opacity: 1, y: 0}} className="w-full flex-wrap md:pt-20 pt-10 justify-center gap-5 items-start flex flex-row">
-                {projects?.length > 0 ? (projects.map((project,index)=>(
-                    <ProjectCard project={project} key={index}/>
-                ))) : (<EmptyState subTitle="Still in Development" title="Opps, No Projects!"/>)}
-            </motion.div>
+            <AnimatePresence>
+                {isFiltersLoading ? (<LoadingState/>) : (
+                    <motion.div initial={{opacity: 0, y: '1vh'}}
+                                transition={{delay: .6, type: 'spring', stiffness: 100, damping: 10}}
+                                animate={{opacity: 1, y: 0}}
+                                className="w-full flex-wrap pt-10 md:pt-20 justify-center h-full gap-5 items-center flex flex-row">
+                        {filters?.map((name, index) => (
+                            <FilterCard handleClick={() => {
+                                setSelectedFilter(name)
+                            }} key={index} name={name} selectedFilter={selectedFilter}/>
+                        ))}
+                    </motion.div>
+                )}
+            </AnimatePresence>
+            <AnimatePresence>
+                {isProjectsLoading ? (<LoadingState/>) : (
+                    <motion.div initial={{opacity: 0, y: '1vh'}}
+                                transition={{delay: .6, type: 'spring', stiffness: 100, damping: 10}}
+                                animate={{opacity: 1, y: 0}}
+                                className="w-full flex-wrap md:pt-20 pt-10 justify-center pb-20 gap-5 items-start flex flex-row">
+                        {projects?.length > 0 ? (projects.map((project, index) => (
+                            <ProjectCard project={project} key={index}/>
+                        ))) : (<EmptyState subTitle="Still in Development" title="Opps, No Projects!"/>)}
+                    </motion.div>
+                )}
+            </AnimatePresence>
             <Footer/>
+
         </main>
     );
 };

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,11 +1,13 @@
 "use client";
 import React from 'react';
-import Logo from "@/components/ui/Logo";
-import Email from "@/components/ui/Email";
 import Lottie from "lottie-react";
 import {party} from "@/data";
 import {useGlobalContext} from "@/context/GlobalProvider";
 import {motion} from "framer-motion";
+import dynamic from "next/dynamic";
+
+const Logo = dynamic(()=>import("@/components/ui/Logo"),{ssr:false})
+const Email = dynamic(()=>import("@/components/ui/Email"),{ssr:false})
 
 const Header = () => {
     const {playPartyAnimation} = useGlobalContext();

diff --git a/components/ui/LoadingState.tsx b/components/ui/LoadingState.tsx
@@ -0,0 +1,17 @@
+"use client"
+import React from 'react';
+import {motion} from "framer-motion";
+import Lottie from "lottie-react";
+import {Loader} from "@/data";
+
+const LoadingState = () => {
+    return (
+        <motion.div initial={{opacity:0,y:'1vh'}} exit={{opacity:0,y:'1vh'}} animate={{opacity:1,y:0}} className="w-full h-full flex justify-center items-center">
+            <div className="w-32 h-32">
+                <Lottie animationData={Loader} loop={true}/>
+            </div>
+        </motion.div>
+    );
+};
+
+export default LoadingState;
diff --git a/components/ui/Logo.tsx b/components/ui/Logo.tsx
@@ -4,10 +4,12 @@ import Link from "next/link";
 
 const Logo = () => {
     return (
-        <div className="bg-gray-900 transition-all w-fit p-1 md:p-2 absolute top-5 left-5">
+        <div className="bg-gray-900 lg:hover:scale-110 transition-all duration-500 w-fit p-1 md:p-2 absolute top-5 left-5">
             <Link href="/">
-                <h1 className="md:text-2xl text-lg font-bold text-white tracking-wider">NAD</h1>
-                <h1 className="md:text-2xl text-lg font-bold text-white tracking-wider">MAL</h1>
+                <h1 className="md:text-xl text-lg text-center font-bold text-white tracking-wider">H</h1>
+                <h1 className="md:text-xl text-lg text-center font-bold text-white tracking-wider">N</h1>
+                <h1 className="md:text-xl text-lg text-center font-bold text-white tracking-wider">K</h1>
+                <h1 className="md:text-xl text-lg text-center font-bold text-white tracking-wider">M</h1>
             </Link>
         </div>
     );

diff --git a/components/ui/ProjectCard.tsx b/components/ui/ProjectCard.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
 import Link from "next/link";
 import {motion} from "framer-motion";
+import {Project} from "@/interfaces";
+import Image from "next/image";
 
 const ProjectCard = ({project}:{project:Project}) => {
     return (
         <motion.div initial={{opacity:0,y:'2vh'}} animate={{opacity:1,y:0}} transition={{delay:.3}} className="w-[90vw] md:w-[50vw] lg:w-[30vw]">
             <div className="bg-gray-900 h-full flex w-full flex-col rounded-xl p-2 md:p-4">
-                <img src={project.thumbnail} alt={project.name} className="object-cover w-[90vw] h-[40vh] rounded-xl"/>
+                <Image src={project.thumbnail} alt={project.name} className="object-cover w-[90vw] h-[40vh] rounded-xl"/>
                 <div className="mt-2">
                     <h1 className="text-lg md:text-xl font-bold tracking-wide text-white line-clamp-1">{project.name}</h1>
                     <p className="text-sm md:text-base text-gray-400">{project.description}</p>

diff --git a/context/GlobalProvider.tsx b/context/GlobalProvider.tsx
@@ -10,22 +10,18 @@ export const useGlobalContext = () => useContext(GlobalContext)
 export const GlobalProvider = ({children}: { children: React.ReactNode }) => {
     const [play, setPlay] = useState<boolean>(false);
     const [emailCopied, setEmailCopied] = useState<boolean>(false);
-    const [user, setUser] = useState<any>();
 
-    const logUser = async () => {
-        const user = await loginAnonymouslyUser();
-        setUser(user);
-    }
     useEffect(() => {
-        logUser().then(() => console.info("Anonymous User Logged In"));
+        loginAnonymouslyUser().then(() => {
+            console.log("User Logged in")
+        });
     }, []);
     return (
         <GlobalContext.Provider value={{
             setPlayPartyAnimation: setPlay,
             playPartyAnimation: play,
             emailCopied: emailCopied,
             setEmailCopied: setEmailCopied,
-            user: user
         }}>
             {children}
         </GlobalContext.Provider>

diff --git a/data/Loader.json b/data/Loader.json
@@ -0,0 +1 @@
+{"v":"5.7.4","fr":29.9700012207031,"ip":0,"op":117.000004765508,"w":500,"h":500,"nm":"Blue","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Blue1 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.714],"y":[2.739]},"o":{"x":[0.385],"y":[0.019]},"t":0,"s":[0]},{"i":{"x":[0.203],"y":[0.983]},"o":{"x":[0.494],"y":[0.147]},"t":11,"s":[-3]},{"t":76.0000030955435,"s":[360]}],"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2,"l":2},"a":{"a":0,"k":[32.781,187.25,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[5.581,12.343],[-12.342,5.581],[-5.582,-12.343],[12.343,-5.581]],"o":[[-5.581,-12.343],[12.343,-5.582],[5.581,12.343],[-12.342,5.582]],"v":[[-22.348,10.106],[-10.107,-22.348],[22.349,-10.106],[10.106,22.348]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.2157,0.2549,0.3176,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.2904,0.4998,0.5896,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[30.429,30.43],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":150.000006109625,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Blue2 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.251],"y":[0.981]},"o":{"x":[0.625],"y":[-0.002]},"t":2,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0]},"t":79,"s":[365]},{"t":116.000004724777,"s":[360]}],"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2,"l":2},"a":{"a":0,"k":[76.745,174.036,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[4.731,10.462],[-10.462,4.731],[-4.73,-10.462],[10.461,-4.731]],"o":[[-4.731,-10.462],[10.462,-4.731],[4.731,10.462],[-10.462,4.731]],"v":[[-18.942,8.566],[-8.566,-18.943],[18.942,-8.566],[8.566,18.943]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.2157,0.2549,0.3176,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.297,0.5112,0.603,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[26.173,26.174],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":150.000006109625,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Blue3 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.251],"y":[0.981]},"o":{"x":[0.625],"y":[-0.002]},"t":4,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[-0.066]},"t":83,"s":[369]},{"t":113.000004602584,"s":[360]}],"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2,"l":2},"a":{"a":0,"k":[109.975,150.675,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[3.88,8.581],[-8.581,3.88],[-3.88,-8.581],[8.581,-3.88]],"o":[[-3.88,-8.581],[8.581,-3.88],[3.88,8.581],[-8.581,3.88]],"v":[[-15.537,7.026],[-7.026,-15.537],[15.537,-7.026],[7.026,15.537]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.2157,0.2549,0.3176,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.302,0.5216,0.6157,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[21.917,21.917],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":150.000006109625,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Blue4 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.251],"y":[0.981]},"o":{"x":[0.625],"y":[-0.002]},"t":6,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0]},"t":87,"s":[374]},{"t":110.000004480392,"s":[360]}],"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2,"l":2},"a":{"a":0,"k":[132.677,124.694,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[3.03,6.7],[-6.699,3.03],[-3.029,-6.7],[6.7,-3.029]],"o":[[-3.03,-6.7],[6.7,-3.03],[3.03,6.7],[-6.7,3.03]],"v":[[-12.131,5.486],[-5.486,-12.131],[12.131,-5.486],[5.486,12.131]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.2157,0.2549,0.3176,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.4547,0.6441,0.7253,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[17.661,17.661],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":150.000006109625,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Blue5 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.251],"y":[0.98]},"o":{"x":[0.625],"y":[-0.002]},"t":8,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0]},"t":91,"s":[378]},{"t":107.000004358199,"s":[360]}],"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2,"l":2},"a":{"a":0,"k":[146.141,98.239,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[2.179,4.819],[-4.819,2.179],[-2.179,-4.819],[4.819,-2.179]],"o":[[-2.179,-4.819],[4.819,-2.179],[2.179,4.818],[-4.819,2.179]],"v":[[-8.725,3.945],[-3.945,-8.725],[8.726,-3.946],[3.945,8.725]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.2157,0.2549,0.3176,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.2471,0.6275,0.7647,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[13.404,13.405],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":150.000006109625,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"Blue6 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.251],"y":[0.98]},"o":{"x":[0.625],"y":[-0.002]},"t":10,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.251],"y":[0]},"t":95,"s":[380]},{"t":106.000004317469,"s":[360]}],"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2,"l":2},"a":{"a":0,"k":[151.071,73.946,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[1.329,2.938],[-2.938,1.328],[-1.329,-2.938],[2.938,-1.328]],"o":[[-1.329,-2.938],[2.938,-1.329],[1.328,2.938],[-2.938,1.329]],"v":[[-5.319,2.405],[-2.406,-5.32],[5.32,-2.406],[2.406,5.319]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.2157,0.2549,0.3176,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7552,0.8502,0.8848,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[9.148,9.149],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":150.000006109625,"st":0,"bm":0}],"markers":[]}
diff --git a/data/index.ts b/data/index.ts
@@ -1,5 +1,6 @@
 import {git, linkedin, x} from "../assets";
 import party from "./party.json";
+import Loader from "./Loader.json";
 
 export const socialMedia = [
     {
@@ -19,4 +20,4 @@ export const socialMedia = [
     },
 ];
 
-export {party};
+export {party,Loader};
diff --git a/interfaces/index.ts b/interfaces/index.ts
@@ -10,7 +10,6 @@ export interface Project {
 
 
 export interface GlobalContextType {
-    user: any;
     playPartyAnimation: boolean;
     setPlayPartyAnimation: Dispatch<SetStateAction<boolean>>;
     emailCopied: boolean;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"v":"5.7.4","fr":29.9700012207031,"ip":0,"op":117.000004765508,"w":500,"h":500,"nm":"Blue","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Blue1 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.714],"y":[2.739]},"o":{"x":[0.385],"y":[0.019]},"t":0,"s":[0]},{"i":{"x":[0.203],"y":[0.983]},"o":{"x":[0.494],"y":[0.147]},"t":11,"s":[-3]},{"t":76.0000030955435,"s":[360]}],"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2,"l":2},"a":{"a":0,"k":[32.781,187.25,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[5.581,12.343],[-12.342,5.581],[-5.582,-12.343],[12.343,-5.581]],"o":[[-5.581,-12.343],[12.343,-5.582],[5.581,12.343],[-12.342,5.582]],"v":[[-22.348,10.106],[-10.107,-22.348],[22.349,-10.106],[10.106,22.348]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.2157,0.2549,0.3176,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.2904,0.4998,0.5896,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[30.429,30.43],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":150.000006109625,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Blue2 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.251],"y":[0.981]},"o":{"x":[0.625],"y":[-0.002]},"t":2,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0]},"t":79,"s":[365]},{"t":116.000004724777,"s":[360]}],"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2,"l":2},"a":{"a":0,"k":[76.745,174.036,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[4.731,10.462],[-10.462,4.731],[-4.73,-10.462],[10.461,-4.731]],"o":[[-4.731,-10.462],[10.462,-4.731],[4.731,10.462],[-10.462,4.731]],"v":[[-18.942,8.566],[-8.566,-18.943],[18.942,-8.566],[8.566,18.943]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.2157,0.2549,0.3176,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.297,0.5112,0.603,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[26.173,26.174],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":150.000006109625,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Blue3 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.251],"y":[0.981]},"o":{"x":[0.625],"y":[-0.002]},"t":4,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[-0.066]},"t":83,"s":[369]},{"t":113.000004602584,"s":[360]}],"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2,"l":2},"a":{"a":0,"k":[109.975,150.675,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[3.88,8.581],[-8.581,3.88],[-3.88,-8.581],[8.581,-3.88]],"o":[[-3.88,-8.581],[8.581,-3.88],[3.88,8.581],[-8.581,3.88]],"v":[[-15.537,7.026],[-7.026,-15.537],[15.537,-7.026],[7.026,15.537]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.2157,0.2549,0.3176,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.302,0.5216,0.6157,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[21.917,21.917],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":150.000006109625,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Blue4 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.251],"y":[0.981]},"o":{"x":[0.625],"y":[-0.002]},"t":6,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0]},"t":87,"s":[374]},{"t":110.000004480392,"s":[360]}],"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2,"l":2},"a":{"a":0,"k":[132.677,124.694,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[3.03,6.7],[-6.699,3.03],[-3.029,-6.7],[6.7,-3.029]],"o":[[-3.03,-6.7],[6.7,-3.03],[3.03,6.7],[-6.7,3.03]],"v":[[-12.131,5.486],[-5.486,-12.131],[12.131,-5.486],[5.486,12.131]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.2157,0.2549,0.3176,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.4547,0.6441,0.7253,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[17.661,17.661],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":150.000006109625,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Blue5 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.251],"y":[0.98]},"o":{"x":[0.625],"y":[-0.002]},"t":8,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0]},"t":91,"s":[378]},{"t":107.000004358199,"s":[360]}],"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2,"l":2},"a":{"a":0,"k":[146.141,98.239,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[2.179,4.819],[-4.819,2.179],[-2.179,-4.819],[4.819,-2.179]],"o":[[-2.179,-4.819],[4.819,-2.179],[2.179,4.818],[-4.819,2.179]],"v":[[-8.725,3.945],[-3.945,-8.725],[8.726,-3.946],[3.945,8.725]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.2157,0.2549,0.3176,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.2471,0.6275,0.7647,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[13.404,13.405],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":150.000006109625,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"Blue6 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.251],"y":[0.98]},"o":{"x":[0.625],"y":[-0.002]},"t":10,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.251],"y":[0]},"t":95,"s":[380]},{"t":106.000004317469,"s":[360]}],"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2,"l":2},"a":{"a":0,"k":[151.071,73.946,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[1.329,2.938],[-2.938,1.328],[-1.329,-2.938],[2.938,-1.328]],"o":[[-1.329,-2.938],[2.938,-1.329],[1.328,2.938],[-2.938,1.329]],"v":[[-5.319,2.405],[-2.406,-5.32],[5.32,-2.406],[2.406,5.319]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.2157,0.2549,0.3176,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7552,0.8502,0.8848,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[9.148,9.149],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":150.000006109625,"st":0,"bm":0}],"markers":[]}