From dd4d9bc6dfdec67985867f5447c0125e0646471d Mon Sep 17 00:00:00 2001
From: Aeonoi <dzhou527@gmail.com>
Date: Sat, 26 Oct 2024 12:56:01 -0400
Subject: [PATCH 1/3] feat(animations): attempt at hover image

---
 components/project-card.tsx | 42 ++++++++++++++++++++++++++++++++-----
 1 file changed, 37 insertions(+), 5 deletions(-)

diff --git a/components/project-card.tsx b/components/project-card.tsx
index 52f9345..006fb29 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -1,4 +1,7 @@
+"use client";
 import Link from "next/link";
+import { motion } from "framer-motion";
+import { useState } from "react";
 
 interface Props {
   link: string;
@@ -12,6 +15,13 @@ const ProjectCard: React.FC<Props> = ({
   image,
   title,
 }: Props) => {
+  const [isHovered, setIsHovered] = useState<boolean>(false);
+
+  // Small delay to allow hover-out before hiding the large image
+  const handleMouseLeave = () => {
+    setTimeout(() => setIsHovered(false), 200); // Adjust delay as needed
+  };
+
   return (
     // <div className="min-h-full max-w-3xl mx-auto p-3 bg-white shadow-md rounded-lg text-black">
     <div className="min-h-full max-w-3xl mx-auto p-3 text-black">
@@ -23,11 +33,16 @@ const ProjectCard: React.FC<Props> = ({
       </Link>
       <div className="flex flex-col">
         <div className="flex w-full">
-          <img
-            className="aspect-auto object-cover max-h-full rounded-lg block"
-            src={image}
-            alt={title}
-          />
+          <motion.div
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={handleMouseLeave}
+          >
+            <img
+              className="aspect-auto object-cover max-h-full rounded-lg block"
+              src={image}
+              alt={title}
+            />
+          </motion.div>
         </div>
         <div className="p-8">
           <p className="mt-2 text-sm text-catppuccin_teal font-semibold">
@@ -35,6 +50,23 @@ const ProjectCard: React.FC<Props> = ({
           </p>
         </div>
       </div>
+      {isHovered && (
+        <motion.div
+          className="fixed inset-0 z-100 flex justify-center items-center bg-black bg-opacity-70 pointer-events-none"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+        >
+          <motion.img
+            src={image}
+            alt={title}
+            className="rounded-lg max-w-2xl max-h-1/2 object-cover pointer-events-none"
+            initial={{ scale: 0 }}
+            animate={{ scale: 1.5 }}
+            exit={{ scale: 0 }}
+          />
+        </motion.div>
+      )}
     </div>
   );
 };

From 0df3e205ad8653efe6ad0cf28521a4ab84e4dcb7 Mon Sep 17 00:00:00 2001
From: Aeonoi <dzhou527@gmail.com>
Date: Sat, 26 Oct 2024 14:49:59 -0400
Subject: [PATCH 2/3] feat(animationsd): add basic animations to buttons in
 navbar

---
 components/animated_box_hover.tsx | 38 +++++++++++++++++++++
 components/navbar.tsx             | 55 ++++++++++++++++++++-----------
 components/project-card.tsx       |  2 +-
 3 files changed, 74 insertions(+), 21 deletions(-)
 create mode 100644 components/animated_box_hover.tsx

diff --git a/components/animated_box_hover.tsx b/components/animated_box_hover.tsx
new file mode 100644
index 0000000..3c82cf5
--- /dev/null
+++ b/components/animated_box_hover.tsx
@@ -0,0 +1,38 @@
+"use client";
+import { motion } from "framer-motion";
+import Link from "next/link";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const HoverBox: React.FC<Props> = ({ children }) => {
+  return (
+    <motion.button
+      className="relative flex justify-center items-center w-20 h-10"
+      whileHover={{ scale: 1.1 }}
+      whileTap={{ scale: 0.9 }}
+    >
+      {/* biome-ignore lint/a11y/noSvgWithoutTitle: draws path */}
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 220 80"
+        className="absolute top-0 left-0"
+      >
+        <motion.path
+          d="M 10 10 H 210 V 70 H 10 Z"
+          fill="transparent"
+          stroke="#ed8796"
+          strokeWidth="2"
+          initial={{ pathLength: 0 }}
+          whileHover={{ pathLength: 1 }}
+          transition={{ duration: 0.5, ease: "easeInOut" }}
+        />
+      </svg>
+      {children}
+    </motion.button>
+  );
+};
+
+export default HoverBox;
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 3c378fc..49ad27a 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,8 +1,10 @@
+"use client";
+import { motion } from "framer-motion";
 import Link from "next/link";
+import HoverBox from "./animated_box_hover";
 
 const Navbar: React.FC = () => {
   return (
-    // <header className="sticky top-0 w-full h-14 bg-transparent shadow-md z-50 bg-gradient-to-r from-catppuccin_blue via-catppuccin_lavender to-catppuccin_mauve animate-fadeIn">
     <header className="sticky top-0 w-full h-14 bg-transparent shadow-md z-50 animate-fadeIn backdrop-blur-md">
       <nav className="container mx-auto px-3 py-3">
         <div className="flex justify-between items-center text-white">
@@ -10,25 +12,38 @@ const Navbar: React.FC = () => {
             Dylan Zhou
           </div>
           <div className="flex justify-center items-center space-x-4">
-            <Link href="#hero" className="hover:text-red-500">
-              Home
-            </Link>
-            <Link href="#about" className="hover:text-red-500">
-              About
-            </Link>
-            <Link href="#projects" className="hover:text-red-500">
-              Projects
-            </Link>
-            {/* <Link */}
-            {/*   href="#contact" */}
-            {/*   className="text-gray-800 hover:text-catppuccin_blue" */}
-            {/* > */}
-            {/*   Contact */}
-            {/* </Link> */}
-            {/* Resume */}
-            <Link href="#resume" className="hover:text-red-500">
-              Resume
-            </Link>
+            <motion.button
+              whileHover={{ scale: 1.1 }}
+              whileTap={{ scale: 0.9 }}
+            >
+              <Link href="#hero" className="hover:text-red-500">
+                Home
+              </Link>
+            </motion.button>
+            <motion.button
+              whileHover={{ scale: 1.1 }}
+              whileTap={{ scale: 0.9 }}
+            >
+              <Link href="#about" className="hover:text-red-500">
+                About
+              </Link>
+            </motion.button>
+            <motion.button
+              whileHover={{ scale: 1.1 }}
+              whileTap={{ scale: 0.9 }}
+            >
+              <Link href="#projects" className="hover:text-red-500">
+                Projects
+              </Link>
+            </motion.button>
+            <motion.button
+              whileHover={{ scale: 1.1 }}
+              whileTap={{ scale: 0.9 }}
+            >
+              <Link href="#resume" className="hover:text-red-500">
+                Resume
+              </Link>
+            </motion.button>
           </div>
         </div>
       </nav>
diff --git a/components/project-card.tsx b/components/project-card.tsx
index 006fb29..bd79222 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -19,7 +19,7 @@ const ProjectCard: React.FC<Props> = ({
 
   // Small delay to allow hover-out before hiding the large image
   const handleMouseLeave = () => {
-    setTimeout(() => setIsHovered(false), 200); // Adjust delay as needed
+    setTimeout(() => setIsHovered(false), 200);
   };
 
   return (

From 2159067d6cf9535030c3078ca663f23201d2cdb8 Mon Sep 17 00:00:00 2001
From: Aeonoi <dzhou527@gmail.com>
Date: Sat, 26 Oct 2024 15:48:22 -0400
Subject: [PATCH 3/3] feat(animation): add animations when scrolling or
 visiting different sections

When scrolling down/up the section will fade in and when leaving, the section will fade out.
---
 app/page.tsx              | 23 +++++++++++++++--------
 components/about.tsx      |  2 +-
 components/hero.tsx       |  2 +-
 components/navbar.tsx     |  2 +-
 components/projects.tsx   |  2 +-
 components/resume.tsx     |  2 +-
 components/transition.tsx | 24 ++++++++++++++++++++++++
 7 files changed, 44 insertions(+), 13 deletions(-)
 create mode 100644 components/transition.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 59c1cbd..779e8a6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,24 +1,31 @@
 import About from "@/components/about";
-import Contact from "@/components/contact";
 import Hero from "@/components/hero";
 import Navbar from "@/components/navbar";
 import Projects from "@/components/projects";
 import Resume from "@/components/resume";
+import Transition from "@/components/transition";
 
 const Home: React.FC = () => {
   return (
-    <main>
+    <main className="">
+      {/* Top Navigation Bar Section */}
       <Navbar />
       {/* Hero Section */}
-      <Hero />
+      <Transition>
+        <Hero />
+      </Transition>
       {/* About Section */}
-      <About />
+      <Transition>
+        <About />
+      </Transition>
       {/* Projects Section */}
-      <Projects />
-      {/* Contacts Section */}
-      {/* <Contact /> */}
+      <Transition>
+        <Projects />
+      </Transition>
       {/* Resume Section */}
-      <Resume />
+      <Transition>
+        <Resume />
+      </Transition>
     </main>
   );
 };
diff --git a/components/about.tsx b/components/about.tsx
index c5ecd59..a1a14a0 100644
--- a/components/about.tsx
+++ b/components/about.tsx
@@ -3,7 +3,7 @@ import Background from "./background";
 
 const About: React.FC = () => {
   return (
-    <main id="about" className="animate-fadeIn">
+    <main id="about" className="scroll-m-14">
       <Background styles="h-full md:h-screen flex items-center">
         {/* <div className="grid grid-cols-2 text-black max-w-4xl mx-auto p-6"> */}
         <div className="grid grid-cols-1 md:grid-cols-2 text-catppuccin_text p-10 w-full justify-items-center">
diff --git a/components/hero.tsx b/components/hero.tsx
index c54f927..9aac8e7 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -7,7 +7,7 @@ import { motion } from "framer-motion";
 
 const Hero: React.FC = () => {
   return (
-    <main id="hero" className="animate-fadeIn">
+    <main id="hero" className="">
       <Background styles="h-screen flex items-center justify-center">
         <div className="relative z-10 text-center text-white max-w-3xl">
           <h1 className="text-4xl md:text-6xl font-bold mb-6">
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 49ad27a..5d1eec8 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -5,7 +5,7 @@ import HoverBox from "./animated_box_hover";
 
 const Navbar: React.FC = () => {
   return (
-    <header className="sticky top-0 w-full h-14 bg-transparent shadow-md z-50 animate-fadeIn backdrop-blur-md">
+    <header className="fixed top-0 w-full h-14 bg-transparent shadow-md z-50 animate-fadeIn backdrop-blur-md">
       <nav className="container mx-auto px-3 py-3">
         <div className="flex justify-between items-center text-white">
           <div className="hidden md:flex text-2xl font-bold text-catppuccin_red">
diff --git a/components/projects.tsx b/components/projects.tsx
index e918a48..fd8b4ae 100644
--- a/components/projects.tsx
+++ b/components/projects.tsx
@@ -3,7 +3,7 @@ import ProjectCard from "./project-card";
 
 const Projects: React.FC = () => {
   return (
-    <main className="animate-fadeIn">
+    <main className="scroll-m-14">
       <Background>
         <p
           id="projects"
diff --git a/components/resume.tsx b/components/resume.tsx
index 5aa4c80..1fe5795 100644
--- a/components/resume.tsx
+++ b/components/resume.tsx
@@ -4,7 +4,7 @@ import Background from "./background";
 
 const Resume: React.FC = () => {
   return (
-    <main id="resume" className="animate-fadeIn scroll-m-14">
+    <main id="resume" className="scroll-m-14">
       <Background styles="h-screen">
         <p className="text-5xl items-center text-center text-white m-20 lg:m-10">
           Resume
diff --git a/components/transition.tsx b/components/transition.tsx
new file mode 100644
index 0000000..8b0c086
--- /dev/null
+++ b/components/transition.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const Transition: React.FC<Props> = ({ children }) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.5, ease: "easeInOut", delay: 0.2 }}
+      viewport={{ once: false, amount: 0.5 }}
+      className="pt-14"
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export default Transition;