#

xvpc · May 29, 2024 · b9327f6 · b9327f6
1 parent 327aa41
commit b9327f6
Show file tree

Hide file tree

Showing 34 changed files with 225 additions and 70 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,12 @@
+A simple NextJs Project for Animations.
+
+
+
+## [Go to site](https://xvpc.github.io/animations)
+
+
+
+## Screenshots
+
+![Site1 Image](./public/images/site/site1.png)
+![Site2 Image](./public/images/site/site2.png)
diff --git a/components/Drinks.tsx b/components/Drinks.tsx
@@ -39,9 +39,6 @@ export default function Drinks() {
     const [currentIndex, setCurrentIndex] = useState(0);
     const currentData: Record<string, any> = drinks.data[currentIndex || 0];
 
-    // useMemo(() => {
-    //     console.log(nextRef)
-    // }, [nextRef])
 
     return (
         <div className={`min-h-full flex justify-center items-center transition-all ${drinks?.data[currentIndex || 0]?.backgroundColor || "default-color"}`}>
@@ -55,7 +52,7 @@ export default function Drinks() {
                     transition={{duration: 3.4, repeatDelay: 0.6, repeat: Infinity, ease: 'easeOut'}}
                     className='rounded w-fit h-fit drop-shadow-2xl'
                     >
-                        <ImageHolder width={420} height={400} title={currentData.name} url={currentData.image} />
+                        <ImageHolder title={currentData.name} url={currentData.image} />
                     </motion.div>  
 
                     <div className='flex flex-col justify-center items-center gap-2'>
@@ -136,7 +133,7 @@ export default function Drinks() {
                                     drinks?.data.map((item, index) => {
                                         return(
                                             <SwiperSlide id={item.name} className={`rounded overflow-hidden cursor-pointer transition-all hover:drop-shadow-2xl`} key={index}>
-                                                <ImageHolder slider width={220} height={200} title={item.name} url={item.image} />
+                                                <ImageHolder slider title={item.name} url={item.image} />
                                             </SwiperSlide>
                                         )
                                     })

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -1,16 +1,21 @@
 import React from 'react'
 
-import { Roboto } from "next/font/google";
-import { IoIosArrowBack } from 'react-icons/io';
-import { duration, IconButton } from '@mui/material';
+// NextJs
 import Link from 'next/link';
-import { easeInOut, motion } from 'framer-motion';
+import Head from 'next/head';
+
+// Icons
+import { IoIosArrowBack } from 'react-icons/io';
+
+// Mui
+import { Button, IconButton, useMediaQuery } from '@mui/material';
 
+// Animations
+import { motion } from 'framer-motion';
+
+// Utils
+import { github, portfolio, site } from '@/utils/Assets';
 
-const roboto = Roboto({
-    subsets: ["latin"],
-    weight: "400"
-})
 
 type layoutProps = {
     children?: React.ReactNode,
@@ -25,26 +30,29 @@ const animations = {
 
 
 export default function Layout({ children, pageTitle }: layoutProps) {
+    const matchMd = useMediaQuery('(min-width:768px)');
 
     return (
         <motion.div
-        variants={animations}
-        initial="initial"
-        animate="animate"
-        exit="exit"
-        transition={{ duration: 0.4, ease: "easeInOut" }}
-        className={`${roboto.className} main-bg overflow-x-hidden text-white flex flex-col justify-between items-center`}
+        className={`main-bg overflow-x-hidden text-white flex flex-col justify-between items-center`}
         >
+            <Head>
+                <title>{pageTitle || site.title}</title>
+                    <meta name="title" content={site.title} />
+                    <meta name="description" content={site.description} />
+                    <meta name="viewport" content="width=device-width, initial-scale=1" />
+                    {/* <link rel="icon" href="/favicon.ico" /> */}
+            </Head>
             <header>
-                <nav className='absolute top-0 start-0 end-0'>
+                <nav className='sticky w-screen h-20 z-50'>
                     {pageTitle?.toLowerCase() != "home" && 
                     <div className='flex flex-row justify-between items-center gap-10 py-4 px-8'>
                         <Link href={"/"}>
                             <IconButton color='default' size="large">
                                 <IoIosArrowBack />
                             </IconButton>
                         </Link>
-                        <Link href={"https://xvpc.dev"} target='_blank'>
+                        <Link href={"https://"+portfolio} target='_blank'>
                             <h1 className='text-gray-200 font-bold'>
                                 xvpc.dev
                             </h1>
@@ -53,9 +61,25 @@ export default function Layout({ children, pageTitle }: layoutProps) {
                     }
                 </nav>
             </header>
-            <main className='w-full h-screen px-0'>
-                {children}
-            </main>
+            <motion.main 
+            variants={animations}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            transition={{ duration: 0.4, ease: "easeInOut" }}
+            className='w-full h-screen px-0'
+            >
+                {matchMd ?
+                    children
+                    :
+                    <div className='container m-auto my-5 py-5 flex flex-col justify-center items-center text-center gap-5'>
+                        <h1 className='text-red-600 font-bold text-wrap'>Only Available for Desktop!</h1>
+                        <Link href={github} target='_blank'>
+                            <Button className='font-bold capitalize truncate self-center text-center' size="medium" variant="contained" title='Leave site' color='error'>Get out!</Button>
+                        </Link>
+                    </div>
+                }
+            </motion.main>
         </motion.div>
     )
 }
diff --git a/components/Meals.tsx b/components/Meals.tsx
@@ -1,9 +1,86 @@
-import React from 'react'
+import React, { useState } from 'react'
+
+// Framer Motion
+import { motion } from 'framer-motion'
+
+// Lib
+import ImageHolder from '@/utils/ImageHolder';
+import BurgerDetails from '@/lib/BurgerDetails';
+
+// Mui
+import { Button, Tooltip } from '@mui/material';
+
+// Utils
+import { production } from '@/utils/Assets';
+
+
+// 
+const imageDimensions: Object = {maxHeight: "130px", maxWidth: "280px", position: "relative", zIndex: 1};
+
+const animationTransition = {delay: 0.1, duration: 0.8, ease: "easeOut", type: "spring"};
 
 
 export default function Meals() {
+    const [activeBurger, setActiveBurger] = useState(false);
 
     return (
-        <div className='text-black'>Meals</div>
+        <div style={{backgroundImage: `url(${production ? "./images/meals/burger/smoke.png" : "/images/meals/burger/smoke.png"})`, backgroundRepeat: "no-repeat", backgroundSize: "cover"}} className='min-h-full transition-all flex justify-center items-center p-5 overflow-hidden'>
+            <motion.div className='container relative py-5 flex flex-col justify-center items-center'>
+                <div className='flex flex-col justify-center items-center gap-4 text-center'>
+                    <motion.div style={{zIndex: 15, fontSize: "70px", fontFamily: "Verdana" }} className='flex flex-col justify-center items-center gap-2 overflow-hidden font-bold text-white m-0 p-0 border-b-2 pb-2' initial={{opacity: 1, height: "auto"}} animate={activeBurger ? {opacity: 0, height: 0} : {}} transition={{...animationTransition, duration: 0.5}}>
+                        <h3 className='text-slate-800 font-light'>Try</h3>
+                        <h1>Our Fatass Meal</h1>
+                    </motion.div>
+                    <h5 className='font-bold font-serif p-0 m-0' style={{fontFamily: "cursive, Arial, Helvetica, sans-serif", fontSize: "14px"}}>Since 1943</h5>
+                </div>
+                <Tooltip title={activeBurger ? 'Go back' : 'Show'} arrow>
+                    <Button style={{zIndex: 10}} className='font-bold font-xl m-3 capitalize truncate rounded-full' size="large" variant="contained" color='warning' 
+                    onClick={() => {
+                        setActiveBurger(!activeBurger)
+                        !activeBurger && setTimeout(() => {document?.getElementById("burger")?.scrollIntoView({behavior: "smooth"})}, 400);
+                    }}>
+                        {activeBurger ? "I'm good!" : "Order Now!"}
+                    </Button>
+                </Tooltip>
+
+                <motion.div id="burger" className='relative flex flex-col justify-center items-center' transition={{from: "beforeChildren"}}>
+                    <motion.div initial={{ y: 100}} animate={activeBurger ? {y:0} : {}} transition={animationTransition} style={{...imageDimensions, zIndex: 7}} className=''>
+                        {activeBurger && <BurgerDetails direction='start' name='Bun' cal={130} />}
+                        <ImageHolder width={1080} height={720} url='/images/meals/burger/topbun.png' />
+                    </motion.div>
+                    <motion.div initial={{ y: 20}} animate={activeBurger ? {y:0} : {}} transition={animationTransition} style={{...imageDimensions, zIndex: 6}} className=''>
+                        {activeBurger && <BurgerDetails direction='end' name='onion' cal={26} />}
+                        <ImageHolder width={1080} height={720} url='/images/meals/burger/onion.png' />
+                    </motion.div>
+                    <motion.div initial={{ y: -80}} animate={activeBurger ? {y:0} : {}} transition={animationTransition} style={{...imageDimensions, zIndex: 5}} className=''>
+                        {activeBurger && <BurgerDetails direction='start' name='bacon' cal={65} />}
+                        <ImageHolder width={1080} height={720} url='/images/meals/burger/bacon.png' />
+                    </motion.div>
+                    <motion.div initial={{ y: -170}} animate={activeBurger ? {y:0} : {}} transition={animationTransition} style={{...imageDimensions, zIndex: 4}} className=''>
+                        {activeBurger && <BurgerDetails direction='end' name='cheese' cal={112} />}
+                        <ImageHolder width={1080} height={720} url='/images/meals/burger/cheese.png' />
+                    </motion.div>
+                    <motion.div initial={{ y: -280}} animate={activeBurger ? {y:0} : {}} transition={animationTransition} style={{...imageDimensions, zIndex: 3}} className=''>
+                        {activeBurger && <BurgerDetails direction='start' name='meat' cal={225} />}
+                        <ImageHolder width={1080} height={720} url='/images/meals/burger/meat.png' />
+                    </motion.div>
+                    <motion.div initial={{ y: -380}} animate={activeBurger ? {y:0} : {}} transition={animationTransition} style={{...imageDimensions, zIndex: 2}} className=''>
+                        {activeBurger && <BurgerDetails direction='end' name='lettuc' cal={14} />}
+                        <ImageHolder width={1080} height={720} url='/images/meals/burger/lettuc.png' />
+                    </motion.div>
+                    <motion.div initial={{ y: -480}} animate={activeBurger ? {y:0} : {}} transition={animationTransition} style={{...imageDimensions, zIndex: 1}} className=''>
+                        {activeBurger && <BurgerDetails direction='start' name='bun' cal={120} />}
+                        <ImageHolder width={1080} height={720} url='/images/meals/burger/bottombun.png' />
+                    </motion.div>
+                </motion.div>
+
+                <motion.div style={{zIndex: 2}} initial={{  scale: 0, opacity: 0}} animate={activeBurger ? { scale: 1, opacity: 1} : {}} transition={{...animationTransition, delay: 0.4, duration: 1}} className='absolute'>
+                    <ImageHolder width={1080} height={720} url='/images/meals/burger/chips.png' />
+                </motion.div>
+                <motion.div style={{height: 180, width: 160, zIndex: 1}} initial={{ opacity: 0, right: "-10000px"}} animate={activeBurger ? { opacity: 1, right: "0px"} : {}} transition={{...animationTransition, delay: 0.4, duration: 1.8}} className='absolute bottom-1/2'>
+                    <ImageHolder width={1080} height={720} url='/images/meals/burger/ketchup2.png' />
+                </motion.div>
+            </motion.div>
+        </div>
     )
 }
diff --git a/data/drinks.json b/data/drinks.json
@@ -5,7 +5,7 @@
             "name": "Redbull",
             "description": "Red Bull is a brand of energy drinks created and owned by the Austrian company Red Bull GmbH.",
             "price": "2.59",
-            "image": "/images/redbull.png",
+            "image": "/images/drinks/redbull.png",
             "textColor": "text-blue-800",
             "backgroundColor": "redbull-color"
         },
@@ -14,7 +14,7 @@
             "name": "cocacola",
             "description": "The Coca-Cola Company is an American multinational corporation founded in 1892.",
             "price": "0.99",
-            "image": "/images/cocacola.png",
+            "image": "/images/drinks/cocacola.png",
             "textColor": "text-red-600",
             "backgroundColor": "cocacola-color"
         },
@@ -23,7 +23,7 @@
             "name": "cocazero",
             "description": "Cola is a carbonated soft drink flavored with vanilla, cinnamon, citrus oils, and other flavorings.",
             "price": "1.20",
-            "image": "/images/cocazero.png",
+            "image": "/images/drinks/cocazero.png",
             "textColor": "text-black",
             "backgroundColor": "cocazero-color"
         },
@@ -32,7 +32,7 @@
             "name": "fanta",
             "description": "Fanta is an American-owned brand of fruit-flavored carbonated soft drink created by Coca-Cola Deutschland under the leadership of German businessman Max Keith.",
             "price": "1.49",
-            "image": "/images/fanta.png",
+            "image": "/images/drinks/fanta.png",
             "textColor": "text-orange-600",
             "backgroundColor": "fanta-color"
         },
@@ -41,7 +41,7 @@
             "name": "sprite",
             "description": "Sprite is a clear, lemon-lime flavored soft drink created by the Coca-Cola Company. Sprite comes in multiple flavors, including cranberry.",
             "price": "2.59",
-            "image": "/images/sprite.png",
+            "image": "/images/drinks/sprite.png",
             "textColor": "text-green-800",
             "backgroundColor": "sprite-color"
         },
@@ -50,7 +50,7 @@
             "name": "pepsi",
             "description": "Pepsi is a carbonated soft drink with a cola flavor, manufactured by PepsiCo. As of 2023.",
             "price": "1.46",
-            "image": "/images/pepsi.png",
+            "image": "/images/drinks/pepsi.png",
             "textColor": "text-blue-800",
             "backgroundColor": "pepsi-color"
         }

diff --git a/lib/BurgerDetails.tsx b/lib/BurgerDetails.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+
+// Framer Motion
+import { motion } from 'framer-motion'
+
+type BurgerDetailsProps = {
+    direction: "start" | "end",
+    name: string,
+    cal?: number
+}
+
+const detailsAnimation = {
+    initial: { y: "-100vh", opacity: 0},
+    animation: {
+        y: 80, opacity: 1,
+        transition: { delay: 0.1, duration: 1, ease: "easeInOut", type: "spring" }
+    }
+}
+
+export default function BurgerDetails({direction, name, cal} : BurgerDetailsProps) {
+
+    return (
+        <motion.div style={{x: direction == "start" ? -220 : 220, zIndex: 12}} variants={detailsAnimation} initial="initial" animate="animation" className={`flex-row justify-between items-end text-white overflow-hidden ${direction == "start" ? "text-start" : "text-end"}`}>
+            <div className={`flex flex-col w-100 justify-between items-end text-white overflow-hidden`}>
+                <span className={`${direction == "start" ? "self-start" : "self-end"} p-0 m-0 font-extrabold capitalize`}>{name}</span>
+                <div className='border-b-2 border-white w-full'></div>
+                <p style={{fontSize: "12px"}} className={`${direction == "start" ? "self-start" : "self-end"} p-0 m-0 font-normal ps-2`}>{cal || 0} Cal</p>
+            </div>
+            {
+                direction == "start" ?
+                <div style={{marginTop: 8, marginLeft: "-10px"}} className='font-bold text-xl'>&bull;</div> :
+                <div style={{marginTop: 8, marginRight:  "-10px"}} className='font-bold text-xl'>&bull;</div>
+            }
+        </motion.div>
+    )
+}
diff --git a/next.config.mjs b/next.config.mjs
@@ -6,8 +6,7 @@ const nextConfig = {
   },
   output: 'export',
   distDir: 'out',
-  // Name of your Github project
-  basePath: '/animations'
+  basePath: process.env.NODE_ENV != "production" ? "" : "/animations"
 };
 
 export default nextConfig;
diff --git a/pages/404.tsx b/pages/404.tsx
@@ -11,7 +11,7 @@ export default function NoMatch(){
     const router = useRouter();
 
     useEffect(() => {
-        let timeout;
+        let timeout: ReturnType<typeof setTimeout>;
         timeout = setTimeout(() => {
             router.push('/');
         }, 1000);

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,14 +1,18 @@
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
 
+// Animations
 import { AnimatePresence } from "framer-motion";
+import { ParallaxProvider } from "react-scroll-parallax";
 
 
 export default function App({ Component, pageProps }: AppProps) {
 
   return(
-    <AnimatePresence mode="wait" >
-      <Component {...pageProps} />
-    </AnimatePresence>
+    <ParallaxProvider>
+      <AnimatePresence mode="wait" >
+        <Component {...pageProps} />
+      </AnimatePresence>
+    </ParallaxProvider>
   );
 }
diff --git a/pages/drinks.tsx b/pages/drinks.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+// Components
 import Layout from '@/components/Layout'
 import Drinks from '@/components/Drinks'
 

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -7,7 +7,7 @@ import Layout from "@/components/Layout";
 
 export default function Main() {
   return (
-    <Layout pageTitle={"Home"}>
+    <Layout pageTitle="Home">
       <Home />
     </Layout>
   );

diff --git a/pages/meals.tsx b/pages/meals.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+// Components
 import Layout from '@/components/Layout'
 import Meals from '@/components/Meals'
 

diff --git a/public/images/cocacola.png → public/images/drinks/cocacola.png b/public/images/cocacola.png → public/images/drinks/cocacola.png
diff --git a/public/images/cocazero.png → public/images/drinks/cocazero.png b/public/images/cocazero.png → public/images/drinks/cocazero.png
diff --git a/public/images/fanta.png → public/images/drinks/fanta.png b/public/images/fanta.png → public/images/drinks/fanta.png
diff --git a/public/images/lemon.png → public/images/drinks/lemon.png b/public/images/lemon.png → public/images/drinks/lemon.png
diff --git a/public/images/pepsi.png → public/images/drinks/pepsi.png b/public/images/pepsi.png → public/images/drinks/pepsi.png
diff --git a/public/images/redbull.png → public/images/drinks/redbull.png b/public/images/redbull.png → public/images/drinks/redbull.png
diff --git a/public/images/sprite.png → public/images/drinks/sprite.png b/public/images/sprite.png → public/images/drinks/sprite.png
diff --git a/public/images/meals/burger/bacon.png b/public/images/meals/burger/bacon.png
diff --git a/public/images/meals/burger/bottombun.png b/public/images/meals/burger/bottombun.png
diff --git a/public/images/meals/burger/cheese.png b/public/images/meals/burger/cheese.png
diff --git a/public/images/meals/burger/chips.png b/public/images/meals/burger/chips.png
diff --git a/public/images/meals/burger/ketchup2.png b/public/images/meals/burger/ketchup2.png
diff --git a/public/images/meals/burger/lettuc.png b/public/images/meals/burger/lettuc.png
diff --git a/public/images/meals/burger/meat.png b/public/images/meals/burger/meat.png
diff --git a/public/images/meals/burger/onion.png b/public/images/meals/burger/onion.png
diff --git a/public/images/meals/burger/smoke.png b/public/images/meals/burger/smoke.png
diff --git a/public/images/meals/burger/topbun.png b/public/images/meals/burger/topbun.png
diff --git a/public/images/site/site1.png b/public/images/site/site1.png
diff --git a/public/images/site/site2.png b/public/images/site/site2.png
diff --git a/styles/globals.css b/styles/globals.css
@@ -7,8 +7,10 @@
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
 }
+
 *{
   scrollbar-width: none !important;
+  font-family: cursive, Verdana, Geneva, Tahoma, sans-serif;
 }
 
 .main-bg{