Merge pull request #4 from Aeonoi/animations

Animations
Aeonoi · Oct 26, 2024 · 31baed8 · 31baed8
2 parents 2e84032 + 2159067
commit 31baed8
Show file tree

Hide file tree

Showing 9 changed files with 154 additions and 38 deletions.
diff --git 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
@@ -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/animated_box_hover.tsx 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/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
@@ -1,34 +1,49 @@
+"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">
+    <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">
             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
@@ -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);
+  };
+
   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,18 +33,40 @@ 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">
             {description}
           </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>
   );
 };

diff --git 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
@@ -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
@@ -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;