From 0c22c6abf696dd567eedcadbab7d85dd353a303c Mon Sep 17 00:00:00 2001
From: joyzhao <zhaoguiyang18@gmail.com>
Date: Mon, 16 Jun 2025 11:44:39 +0800
Subject: [PATCH] refactor(components): simplify animations and styling in
 header and hero sections

remove framer-motion dependencies and replace with CSS transitions
clean up unused imports and streamline mobile menu implementation
---
 src/components/GlassHeader.tsx | 105 +++++++++++++--------------------
 src/components/HeroSection.tsx |   4 +-
 2 files changed, 44 insertions(+), 65 deletions(-)

diff --git a/src/components/GlassHeader.tsx b/src/components/GlassHeader.tsx
index 5eb11ae..c21bb71 100644
--- a/src/components/GlassHeader.tsx
+++ b/src/components/GlassHeader.tsx
@@ -3,7 +3,6 @@ import LanguageSwitcher from "./LanguageSwitcher";
 import { useTranslations, getLocalizedPath, type Lang } from "@/i18n/utils";
 import { useState, useEffect } from "react";
 import { Menu, X } from "lucide-react";
-import { motion, AnimatePresence } from "framer-motion";
 
 interface GlassHeaderProps {
   lang: Lang;
@@ -32,36 +31,28 @@ export default function GlassHeader({ lang }: GlassHeaderProps) {
         : 'bg-transparent'
     }`}>
       <div className="container max-w-4xl mx-auto p-4 flex justify-between items-center">
-        <motion.a
-          className="flex items-center text-lg font-medium"
+        <a
+          className="flex items-center text-lg font-medium transition-opacity duration-150 hover:opacity-80"
           href={getLocalizedPath('/', lang)}
-          whileHover={{ scale: 1.05 }}
-          whileTap={{ scale: 0.95 }}
         >
           ✨ {t('personal.name')}
-        </motion.a>
+        </a>
 
         {/* Desktop Navigation */}
         <nav className="hidden md:flex items-center space-x-6 text-sm font-medium">
           {[ 
             { key: 'nav.skills', icon: '🛠️ ', sectionId: 'skills' },
             { key: 'nav.projects', icon: '🚀 ', sectionId: 'projects' },
-          ].map(
-            (item, index) => (
-              <motion.a
-                key={item.key} // Changed from item to item.key
-                href={`#${item.sectionId}`}
-                className="transition-colors hover:text-foreground/80 text-foreground/60"
-                initial={{ opacity: 0, y: -10 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.2, delay: index * 0.1 }}
-                whileHover={{ y: -2 }}
-              >
-                {item.icon}
-                {t(item.key as any) /* Type assertion needed if UiKeys is strict */}
-              </motion.a>
-            )
-          )}
+          ].map((item) => (
+            <a
+              key={item.key}
+              href={`#${item.sectionId}`}
+              className="transition-colors duration-150 hover:text-foreground/80 text-foreground/60"
+            >
+              {item.icon}
+              {t(item.key as any)}
+            </a>
+          ))}
         </nav>
 
         <div className="flex items-center space-x-2">
@@ -70,55 +61,43 @@ export default function GlassHeader({ lang }: GlassHeaderProps) {
           <ThemeToggle />
 
           {/* Mobile Menu Button */}          
-          <motion.button
-            className="md:hidden p-2 text-foreground"
+          <button
+            className="md:hidden p-2 text-foreground transition-opacity duration-150 hover:opacity-80 active:opacity-60"
             onClick={toggleMenu}
             aria-label="Toggle menu"
-            whileTap={{ scale: 0.95 }}
           >
             {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
-          </motion.button>
+          </button>
         </div>
       </div>
 
       {/* Mobile Navigation */}
-      <AnimatePresence>
-        {isMenuOpen && (
-          <motion.div
-            className={`md:hidden py-4 px-4 border-t border-border/10 transition-all duration-300 ${
-              isScrolled 
-                ? 'backdrop-blur-md backdrop-filter bg-white/80 dark:bg-black/80 shadow-lg shadow-black/5 dark:shadow-black/20' 
-                : 'bg-transparent'
-            }`}
-            initial={{ opacity: 0, height: 0 }}
-            animate={{ opacity: 1, height: "auto" }}
-            exit={{ opacity: 0, height: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <nav className="flex flex-col space-y-4 text-sm font-medium">
-              {[ 
-            { key: 'nav.skills', icon: '🛠️ ', sectionId: 'skills' },
-            { key: 'nav.projects', icon: '🚀 ', sectionId: 'projects' },
-          ].map(
-                (item, index) => (
-                  <motion.a
-                    key={item.key} // Changed from item to item.key
-                    href={`#${item.sectionId}`}
-                    className="transition-colors hover:text-foreground/80 text-foreground/60 py-2"
-                    onClick={toggleMenu}
-                    initial={{ opacity: 0, x: -20 }}
-                    animate={{ opacity: 1, x: 0 }}
-                    transition={{ duration: 0.2, delay: index * 0.1 }}
-                  >
-                    {item.icon}
-                    {t(item.key as any) /* Type assertion needed if UiKeys is strict */}
-                  </motion.a>
-                )
-              )}
-            </nav>
-          </motion.div>
-        )}
-      </AnimatePresence>
+      <div className={`md:hidden overflow-hidden transition-all duration-200 ease-out ${
+        isMenuOpen ? 'max-h-48 opacity-100' : 'max-h-0 opacity-0'
+      }`}>
+        <div className={`py-4 px-4 border-t border-border/10 ${
+          isScrolled 
+            ? 'bg-white/80 dark:bg-black/80 shadow-sm' 
+            : 'bg-white/85 dark:bg-black/85'
+        }`}>
+          <nav className="flex flex-col space-y-3 text-sm font-medium">
+            {[ 
+              { key: 'nav.skills', icon: '🛠️ ', sectionId: 'skills' },
+              { key: 'nav.projects', icon: '🚀 ', sectionId: 'projects' },
+            ].map((item) => (
+              <a
+                key={item.key}
+                href={`#${item.sectionId}`}
+                className="transition-colors duration-150 hover:text-foreground/80 text-foreground/60 py-2 block"
+                onClick={toggleMenu}
+              >
+                {item.icon}
+                {t(item.key as any)}
+              </a>
+            ))}
+          </nav>
+        </div>
+      </div>
     </header>
   );
 }
diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx
index 3f95c7c..2575a0f 100644
--- a/src/components/HeroSection.tsx
+++ b/src/components/HeroSection.tsx
@@ -1,4 +1,4 @@
-import { Mail, Github, MapPin, Linkedin, Code, Terminal } from "lucide-react";
+import { Mail, Github, MapPin, Linkedin, Code } from "lucide-react";
 import { useTranslations } from "@/i18n/utils";
 import { motion } from "framer-motion";
 import MotionWrapper from "./MotionWrapper";
@@ -29,7 +29,7 @@ export default function HeroSection({ lang }: { lang: "en" | "zh" }) {
   };
 
   return (
-    <section className="py-16 md:py-32 relative overflow-hidden min-h-screen flex items-center">
+    <section className="py-32 relative overflow-hidden min-h-screen flex items-center">
       {/* Background gradient */}
       <div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-purple-700/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-purple-700/30"></div>