some fun animations

DanL2015 · Jun 17, 2024 · bd36e29 · bd36e29
1 parent fe315c6
commit bd36e29
Show file tree

Hide file tree

Showing 8 changed files with 273 additions and 142 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "framer-motion": "^11.2.10",
     "gray-matter": "^4.0.3",
     "next": "14.1.4",
     "next-themes": "^0.3.0",

diff --git a/src/app/components/caret.js b/src/app/components/caret.js
@@ -28,7 +28,7 @@ function Caret() {
   }
 
   return (
-    <div className="animate-bounce cursor-pointer fixed flex justify-center items-center bottom-10 right-10 p-3 border-solid border-b3 dark:border-b2 bg-b4 dark:bg-b1 rounded border-2" onClick={caretClick}>
+    <div className="animate-bounce cursor-pointer fixed flex justify-center items-center bottom-10 right-10 p-3 border-solid border-b3 dark:border-b2 bg-b4/40 dark:bg-b1/40 backdrop-filter backdrop-blur-lg rounded border-2" onClick={caretClick}>
       <FaChevronUp className={scroll ? "text-b1 dark:text-b4 text-sm h-4 w-4" : "hidden"} />
       <FaChevronDown className={scroll ? "hidden" : "text-b1 dark:text-b4 text-sm h-4 w-4"} />
     </div>

diff --git a/src/app/components/navbar.js b/src/app/components/navbar.js
@@ -4,119 +4,140 @@ import { IoMdMenu } from "react-icons/io";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 import { useTheme } from "next-themes";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
 
 function Navbar({ curPage }) {
   const [menu, setMenu] = useState(false);
+  const [atTop, setAtTop] = useState(true);
   const { theme, setTheme } = useTheme();
   const pathName = usePathname();
+
+  useEffect(() => {
+    window.addEventListener("scroll", function () {
+      if (this.window.scrollY == 0) {
+        setAtTop(true);
+      } else {
+        setAtTop(false);
+      }
+    });
+  }, []);
+
   return (
-    <main>
-      <div className="mx-10 my-8 flex flex-row justify-between items-center">
-        <Link href="/">
-          <div className="flex-container">
-            <div className="dark:text-b5 text-b0 text-2xl font-['Rubik'] font-bold">
-              d
+    <main className="fixed top-0 z-10 flex flex-col items-center w-full">
+      <motion.div layout className={`${atTop ? "w-full" : "w-3/4"}`}>
+        <div className="px-10 py-8 flex flex-row bg-b5/40 dark:bg-b1/40 justify-between items-center backdrop-filter backdrop-blur-lg rounded-xl m-4">
+          <Link href="/">
+            <div className="flex-container">
+              <div className="dark:text-b5 text-b0 text-2xl font-['Rubik'] font-bold">
+                d
+              </div>
+              <div className="text-blue-light dark:text-blue text-2xl font-['Rubik'] font-bold">
+                .
+              </div>
+              <div className="dark:text-b4 text-b1 text-2xl font-['Rubik'] font-bold">
+                liu
+              </div>
             </div>
-            <div className="text-blue-light dark:text-blue text-2xl font-['Rubik'] font-bold">.</div>
-            <div className="dark:text-b4 text-b1 text-2xl font-['Rubik'] font-bold">
-              liu
-            </div>
-          </div>
-        </Link>
-        <div className="flex-container hidden md:flex">
-          <Link
-            href="/"
-            className={
-              "text-2xl font-['Dosis'] hover:dark:text-lightblue hover:text-lightblue-light mx-2 " +
-              (pathName === "/"
-                ? "text-blue-light dark:text-blue"
-                : "dark:text-b4 text-b1")
-            }
-          >
-            home
-          </Link>
-          <div className="text-xl dark:text-b2 text-b3 font-['Dosis'] mx-2">
-            {"//"}
-          </div>
-          <Link
-            href="/projects"
-            className={
-              "text-2xl font-['Dosis'] hover:dark:text-lightblue hover:text-lightblue-light mx-2 " +
-              (pathName === "/projects"
-                ? "text-blue-light dark:text-blue"
-                : "dark:text-b4 text-b1")
-            }
-          >
-            projects
           </Link>
-          <div className="text-xl dark:text-b2 text-b3 font-['Dosis'] mx-2">
-            {"//"}
+          <div className="flex-container hidden md:flex">
+            <Link
+              href="/"
+              className={
+                "text-2xl font-['Dosis'] hover:dark:text-lightblue hover:text-lightblue-light mx-2 " +
+                (pathName === "/"
+                  ? "text-blue-light dark:text-blue"
+                  : "dark:text-b4 text-b1")
+              }
+            >
+              home
+            </Link>
+            <div className="text-xl dark:text-b3 text-b2 font-['Dosis'] mx-2">
+              {"//"}
+            </div>
+            <Link
+              href="/projects"
+              className={
+                "text-2xl font-['Dosis'] hover:dark:text-lightblue hover:text-lightblue-light mx-2 " +
+                (pathName === "/projects"
+                  ? "text-blue-light dark:text-blue"
+                  : "dark:text-b4 text-b1")
+              }
+            >
+              projects
+            </Link>
+            <div className="text-xl dark:text-b3 text-b2 font-['Dosis'] mx-2">
+              {"//"}
+            </div>
+            <Link
+              href="/blog"
+              className={
+                "text-2xl font-['Dosis'] hover:dark:text-lightblue hover:text-lightblue-light mx-2 " +
+                (pathName === "/blog"
+                  ? "text-blue-light dark:text-blue"
+                  : "dark:text-b4 text-b1")
+              }
+            >
+              blog
+            </Link>
+            <div
+              className="cursor-pointer text-2xl mx-2 p-2 rounded text-b1 dark:text-b4 hover:text-b5 dark:hover:text-b0 hover:bg-b1 dark:hover:bg-b4"
+              onClick={() => {
+                setTheme(theme === "light" ? "dark" : "light");
+              }}
+            >
+              {theme === "light" ? <FiSun /> : <FiMoon />}
+            </div>
           </div>
-          <Link
-            href="/blog"
-            className={
-              "text-2xl font-['Dosis'] hover:dark:text-lightblue hover:text-lightblue-light mx-2 " +
-              (pathName === "/blog"
-                ? "text-blue-light dark:text-blue"
-                : "dark:text-b4 text-b1")
-            }
-          >
-            blog
-          </Link>
           <div
-            className="cursor-pointer text-2xl mx-2 p-2 rounded text-b1 dark:text-b4 hover:text-b5 dark:hover:text-b0 hover:bg-b1 dark:hover:bg-b4"
+            className="flex md:hidden cursor-pointer text-2xl mx-2 p-2 rounded text-b4 hover:text-b0 hover:bg-b4"
             onClick={() => {
-              setTheme(theme === "light" ? "dark" : "light");
+              console.log(menu);
+              setMenu(!menu);
             }}
           >
-            {theme === "light" ? <FiSun /> : <FiMoon />}
+            <IoMdMenu className="hamburger-icon"></IoMdMenu>
           </div>
         </div>
-        <div
-          className="flex md:hidden cursor-pointer text-2xl mx-2 p-2 rounded text-b4 hover:text-b0 hover:bg-b4"
-          onClick={() => {
-            console.log(menu);
-            setMenu(!menu);
-          }}
-        >
-          <IoMdMenu className="hamburger-icon"></IoMdMenu>
-        </div>
-      </div>
-      <div
-        className={
-          "mx-10 flex flex-col justify-center items-start md:hidden " +
-          (menu ? "visible" : "hidden")
-        }
-      >
-        <Link
-          href="/"
-          className={
-            "text-2xl font-['Dosis'] hover:text-lightblue my-1 " +
-            (pathName === "/" ? "text-blue" : "text-b4")
-          }
-        >
-          home
-        </Link>
-        <Link
-          href="/projects"
-          className={
-            "text-2xl font-['Dosis'] hover:text-lightblue my-1 " +
-            (pathName === "/projects" ? "text-blue" : "text-b4")
-          }
-        >
-          projects
-        </Link>
-        <Link
-          href="/blog"
-          className={
-            "text-2xl font-['Dosis'] hover:text-lightblue my-1 " +
-            (pathName === "/blog" ? "text-blue" : "text-b4")
-          }
-        >
-          blog
-        </Link>
-      </div>
+      </motion.div>
+      <motion.div layout className={`${atTop ? "w-full" : "w-3/4"}`}>
+        <AnimatePresence>
+          {menu && (
+            <motion.div
+              className="flex flex-col justify-center items-start p-10 backdrop-filter backdrop-blur-lg md:hidden bg-b5/40 dark:bg-b1/40 rounded-xl mx-4"
+              layout
+              initial={{ opacity: 0, y: -100 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -100 }}
+            >
+              <Link
+                href="/"
+                className={`text-2xl font-['Dosis'] hover:text-lightblue my-1 ${
+                  pathName === "/blog" ? "text-blue" : "text-b1"
+                })`}
+              >
+                home
+              </Link>
+              <Link
+                href="/projects"
+                className={`text-2xl font-['Dosis'] hover:text-lightblue my-1 ${
+                  pathName === "/blog" ? "text-blue" : "text-b1"
+                })`}
+              >
+                projects
+              </Link>
+              <Link
+                href="/blog"
+                className={`text-2xl font-['Dosis'] hover:text-lightblue my-1 ${
+                  pathName === "/blog" ? "text-blue" : "text-b1"
+                })`}
+              >
+                blog
+              </Link>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </motion.div>
     </main>
   );
 }