feat(ui): modernize design with gradient icons and animations

- Add modern-code-icon.svg and update favicon with gradient styling
- Implement glass effect, hover animations and gradient text in global.css
- Enhance GlassHeader with motion animations and new icon
- Update design variables for modern look including shadows and transitions

public/favicon.svg

@@ -1,9 +1,16 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128" fill="none">
+  <defs>
+    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#8B5CF6" />
+      <stop offset="100%" stop-color="#EC4899" />
+    </linearGradient>
+  </defs>
+  <rect width="128" height="128" rx="24" fill="white" class="dark:fill-black" />
+  <path d="M42 38L24 64L42 90" stroke="url(#gradient)" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M86 38L104 64L86 90" stroke="url(#gradient)" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
   <style>
-        path { fill: #000; }
     @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
+      .dark\:fill-black { fill: #000; }
     }
   </style>
 </svg>

public/modern-code-icon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <defs>
+    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#8B5CF6" />
+      <stop offset="100%" stop-color="#EC4899" />
+    </linearGradient>
+  </defs>
+  <path d="M9 6L3 12L9 18" stroke="url(#gradient)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M15 6L21 12L15 18" stroke="url(#gradient)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/GlassHeader.tsx

@@ -8,6 +8,7 @@ import { useState, useEffect } from "react";
 import { Menu, X } from "lucide-react";
 import { defaultLang } from "@/i18n/ui";
 import { type GlassHeaderProps } from "@/types";
+import { motion } from "framer-motion";
 
 export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
   const [lang, setLang] = useState<Lang>(propLang || defaultLang);
@@ -35,18 +36,30 @@ export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
   const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
 
   return (
-    <header className={`fixed top-0 z-50 w-full transition-all duration-300 ${
+    <motion.header 
+      initial={{ y: -100, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
+      className={`fixed top-0 z-50 w-full transition-all duration-300 ${
         isScrolled 
           ? 'backdrop-blur-md backdrop-filter bg-white/80 dark:bg-black/80 border-b border-border/30 shadow-lg shadow-black/5 dark:shadow-black/20' 
           : 'bg-transparent'
-    }`}>
+      }`}
+    >
       <Container className="p-4 flex justify-between items-center">
-        <a
-          className="flex items-center text-lg font-medium transition-opacity duration-150 hover:opacity-80"
+        <motion.a
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+          className="flex items-center text-lg font-medium transition-colors duration-150 hover:text-foreground/80"
           href={getLocalizedPath('/', lang)}
         >
-          ✨ {personalInfo.name}
-        </a>
+          <img 
+            src="/modern-code-icon.svg" 
+            alt="Code Icon" 
+            className="w-6 h-6 mr-2" 
+          /> 
+          <span className="gradient-text font-bold">{personalInfo.name}</span>
+        </motion.a>
 
         {/* Desktop Navigation */}
         <nav className="hidden md:flex items-center space-x-6 text-sm font-medium">
@@ -56,39 +69,64 @@ export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
             { key: 'nav.services', icon: '🛠️ ', href: getLocalizedPath('/services', lang) },
             // { key: 'nav.projects', icon: '🚀 ', href: getLocalizedPath('/projects', lang) },
             { key: 'nav.blog', icon: '📝 ', href: getLocalizedPath('/blog', lang) },
-          ].map((item) => (
-            <a
+          ].map((item, index) => (
+            <motion.a
               key={item.key}
               href={item.href}
-              className="transition-colors duration-150 hover:text-foreground/80 text-foreground/60"
+              className="transition-colors duration-150 hover:text-foreground/80 text-foreground/60 px-3 py-2 rounded-md hover:bg-foreground/5"
+              initial={{ opacity: 0, y: -20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ 
+                duration: 0.3, 
+                delay: 0.1 + index * 0.1,
+                ease: "easeOut"
+              }}
+              whileHover={{ y: -2 }}
             >
               {item.icon}
               {t(item.key as any)}
-            </a>
+            </motion.a>
           ))}
         </nav>
 
-        <div className="flex items-center space-x-2">
+        <div className="flex items-center space-x-3">
           {/* Language Switcher added here */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.3, delay: 0.4 }}
+          >
             <LanguageSwitcher lang={lang} />
+          </motion.div>
+          
+          <motion.div
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.3, delay: 0.5 }}
+          >
             <ThemeToggle />
+          </motion.div>
 
           {/* Mobile Menu Button */}          
-          <button
-            className="md:hidden p-2 text-foreground transition-opacity duration-150 hover:opacity-80 active:opacity-60"
+          <motion.button
+            className="md:hidden p-2 text-foreground transition-all duration-150 hover:bg-foreground/10 active:bg-foreground/20 rounded-md"
             onClick={toggleMenu}
             aria-label="Toggle menu"
+            whileTap={{ scale: 0.9 }}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.3, delay: 0.6 }}
           >
             {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
-          </button>
+          </motion.button>
         </div>
       </Container>
 
       {/* Mobile Navigation */}
-      <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={`md:hidden overflow-hidden transition-all duration-300 ease-out ${
+        isMenuOpen ? 'max-h-60 opacity-100' : 'max-h-0 opacity-0'
       }`}>
-        <div className={`py-4 px-4 border-t border-border/10 ${
+        <div className={`py-4 px-4 border-t border-border/10 glass-effect ${
           isScrolled 
             ? 'bg-white/80 dark:bg-black/80 shadow-sm' 
             : 'bg-white/85 dark:bg-black/85'
@@ -100,20 +138,27 @@ export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
               { key: 'nav.services', icon: '🛠️ ', href: getLocalizedPath('/services', lang) },
               { key: 'nav.projects', icon: '🚀 ', href: getLocalizedPath('/projects', lang) },
               { key: 'nav.blog', icon: '📝 ', href: getLocalizedPath('/blog', lang) },
-            ].map((item) => (
-              <a
+            ].map((item, index) => (
+              <motion.a
                 key={item.key}
                 href={item.href}
-                className="transition-colors duration-150 hover:text-foreground/80 text-foreground/60 py-2 block"
+                className="transition-colors duration-150 hover:text-foreground/80 text-foreground/60 py-2 px-3 block rounded-md hover:bg-foreground/5"
                 onClick={toggleMenu}
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ 
+                  duration: 0.2, 
+                  delay: index * 0.05,
+                  ease: "easeOut"
+                }}
               >
                 {item.icon}
                 {t(item.key as any)}
-              </a>
+              </motion.a>
             ))}
           </nav>
         </div>
       </div>
-    </header>
+    </motion.header>
   );
 }

src/pages/services.md

@@ -0,0 +1,119 @@
+---
+title: "My Services"
+description: "Explore the professional services I offer to help bring your digital projects to life"
+layout: "../layouts/AboutLayout.astro"
+---
+
+import HighlightBox from '../components/ui/HighlightBox.astro';
+
+# Services I Provide 🛠️
+
+<HighlightBox type="tip">
+用优雅的代码和创新的思维，为复杂问题打造精致的解决方案。
+</HighlightBox>
+
+## Web Development 🌐
+
+<HighlightBox type="info" title="Web Development Services">
+
+- Building responsive and modern websites using the latest technologies
+- Creating custom web applications tailored to your specific needs
+- Implementing frontend interfaces with React, Vue.js, or Angular
+- Developing backend systems with Node.js, Express, Django, or Flask
+- Optimizing website performance and user experience
+
+</HighlightBox>
+
+## App Development 📱
+
+<HighlightBox type="success" title="Mobile App Solutions">
+
+- Developing cross-platform mobile applications using React Native or Flutter
+- Creating native iOS and Android applications
+- Building progressive web apps (PWAs) for mobile-like experiences on the web
+- Implementing offline functionality and push notifications
+- Integrating with device features like camera, GPS, and sensors
+
+</HighlightBox>
+
+## WeChat Mini Program Development 💬
+
+<HighlightBox type="tip" title="WeChat Mini Program Expertise">
+
+- Designing and developing WeChat Mini Programs for businesses
+- Creating interactive and engaging user interfaces
+- Implementing WeChat Pay and other WeChat APIs
+- Optimizing for WeChat's ecosystem and requirements
+- Building custom features and functionalities specific to your business needs
+
+</HighlightBox>
+
+## UI Design 🎨
+
+<HighlightBox type="note" title="UI Design Services">
+
+- Creating modern, clean, and intuitive user interfaces
+- Designing responsive layouts that work across all devices
+- Developing brand identity and visual language
+- Creating wireframes, prototypes, and high-fidelity mockups
+- Implementing design systems for consistent user experiences
+
+</HighlightBox>
+
+## Bug Fixing 🐛
+
+<HighlightBox type="error" title="Bug Fixing & Code Optimization">
+
+- Identifying and resolving issues in existing applications
+- Debugging complex problems in frontend and backend systems
+- Optimizing code for better performance and reliability
+- Refactoring legacy code to modern standards
+- Implementing automated testing to prevent future bugs
+
+</HighlightBox>
+
+## Important Notes 📝
+
+<HighlightBox type="warning" title="Before Contacting Me">
+To avoid unnecessary misunderstandings, please read the following notes before contacting me:
+
+1. Please provide detailed project requirements, including wireframes or design specifications (if you don't understand these, I can help guide you).
+2. Please specify project completion time and development period.
+3. In general, I only accept commercial projects, and other forms of cooperation need to be discussed separately.
+4. I currently cannot provide invoicing services.
+5. Projects can be maintained free of charge for 3 months after completion.
+</HighlightBox>
+
+## Collaboration Process 🤝
+
+<HighlightBox type="info" title="How We'll Work Together">
+1. Confirm the project
+2. Determine the collaboration method
+3. Confirm project functional requirements
+4. Confirm development period and delivery time
+5. Confirm project design or wireframes
+6. Make payment
+7. Project development
+8. Project testing
+9. Project launch
+10. Project maintenance
+</HighlightBox>
+
+## Payment Methods 💰
+
+<HighlightBox type="note" title="Payment Options">
+
+- WeChat Pay
+- Alipay
+- Bank Transfer
+
+**Note: All projects use the 442 payment method**
+</HighlightBox>
+
+## Contact Information 📞
+
+<HighlightBox type="success" title="Get in Touch">
+- QQ: **2770723534**
+- WeChat: **JoyCodeing**
+- Email: **zhaoguiyang18@gmail.com**
+</HighlightBox>

src/styles/global.css

@@ -10,10 +10,39 @@
   overflow: hidden;
 }
 
+/* Modern Design Elements */
+.gradient-text {
+  background: linear-gradient(to right, #8B5CF6, #EC4899);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.glass-effect {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.dark .glass-effect {
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.hover-lift {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.hover-lift:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+}
+
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --radius: 0.625rem;
+  --radius: 0.75rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -45,6 +74,17 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+  --transition-standard: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --svg-filter-color: invert(0%) sepia(0%) saturate(0%) hue-rotate(324deg) brightness(96%) contrast(104%);
+  
+  /* Modern Design Variables */
+  --gradient-primary: linear-gradient(135deg, #8B5CF6, #EC4899);
+  --gradient-secondary: linear-gradient(135deg, #3B82F6, #10B981);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
+  --animation-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --animation-smooth: cubic-bezier(0.65, 0, 0.35, 1);
 }
 
 .dark {
@@ -79,6 +119,12 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
+  --svg-filter-color: invert(100%) sepia(0%) saturate(0%) hue-rotate(324deg) brightness(102%) contrast(101%);
+  
+  /* Dark Mode Modern Design Variables */
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
 }
 
 @theme inline {
@@ -122,9 +168,20 @@
 @layer base {
   * {
     @apply border-border outline-ring/50;
-    line-height: 1.2;
+    line-height: 1.5;
   }
   body {
     @apply bg-background text-foreground;
+    font-feature-settings: "ss01", "ss02", "cv01", "cv02";
+  }
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-bold tracking-tight;
+    line-height: 1.2;
+  }
+  a {
+    @apply transition-colors duration-200;
+  }
+  img {
+    @apply rounded-md;
   }
 }