From 7bb617a5c5278b47c82d1ffee6464591a96f219d Mon Sep 17 00:00:00 2001
From: joyzhao <zhaoguiyang18@gmail.com>
Date: Wed, 18 Jun 2025 18:15:32 +0800
Subject: [PATCH] feat: add multilingual about, services and projects pages
 with i18n support

- Create new about and services pages in both English and Chinese
- Implement projects page with responsive design and project cards
- Add i18n translations for new UI elements
- Update header navigation to support new pages
- Create shared AboutLayout component with table of contents
---
 src/components/GlassHeader.tsx |  18 ++-
 src/i18n/ui.ts                 |  12 +-
 src/layouts/AboutLayout.astro  | 270 +++++++++++++++++++++++++++++++++
 src/pages/about.md             |  39 +++++
 src/pages/projects.astro       | 236 ++++++++++++++++++++++++++++
 src/pages/services.md          |  80 ++++++++++
 src/pages/zh/about.md          |  39 +++++
 src/pages/zh/projects.astro    | 236 ++++++++++++++++++++++++++++
 src/pages/zh/services.md       |  80 ++++++++++
 9 files changed, 1000 insertions(+), 10 deletions(-)
 create mode 100644 src/layouts/AboutLayout.astro
 create mode 100644 src/pages/about.md
 create mode 100644 src/pages/projects.astro
 create mode 100644 src/pages/services.md
 create mode 100644 src/pages/zh/about.md
 create mode 100644 src/pages/zh/projects.astro
 create mode 100644 src/pages/zh/services.md

diff --git a/src/components/GlassHeader.tsx b/src/components/GlassHeader.tsx
index 8e61b18..3a37fc5 100644
--- a/src/components/GlassHeader.tsx
+++ b/src/components/GlassHeader.tsx
@@ -42,14 +42,15 @@ export default function GlassHeader({ lang }: GlassHeaderProps) {
         {/* Desktop Navigation */}
         <nav className="hidden md:flex items-center space-x-6 text-sm font-medium">
           {[ 
-            { key: 'nav.about', icon: '👨‍💻 ', sectionId: 'about' },
-            { key: 'nav.services', icon: '🛠️ ', sectionId: 'services' },
-            { key: 'nav.projects', icon: '🚀 ', sectionId: 'projects' },
+            { key: 'nav.home', icon: '🏠 ', href: getLocalizedPath('/', lang) },
+            { key: 'nav.about', icon: '👨‍💻 ', href: getLocalizedPath('/about', lang) },
+            { 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
               key={item.key}
-              href={item.href || `#${item.sectionId}`}
+              href={item.href}
               className="transition-colors duration-150 hover:text-foreground/80 text-foreground/60"
             >
               {item.icon}
@@ -85,14 +86,15 @@ export default function GlassHeader({ lang }: GlassHeaderProps) {
         }`}>
           <nav className="flex flex-col space-y-3 text-sm font-medium">
             {[ 
-              { key: 'nav.about', icon: '👨‍💻 ', sectionId: 'about' },
-              { key: 'nav.services', icon: '🛠️ ', sectionId: 'services' },
-              { key: 'nav.projects', icon: '🚀 ', sectionId: 'projects' },
+              { key: 'nav.home', icon: '🏠 ', href: getLocalizedPath('/', lang) },
+              { key: 'nav.about', icon: '👨‍💻 ', href: getLocalizedPath('/about', lang) },
+              { 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
                 key={item.key}
-                href={item.href || `#${item.sectionId}`}
+                href={item.href}
                 className="transition-colors duration-150 hover:text-foreground/80 text-foreground/60 py-2 block"
                 onClick={toggleMenu}
               >
diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
index 025b6ba..d3c831e 100644
--- a/src/i18n/ui.ts
+++ b/src/i18n/ui.ts
@@ -22,8 +22,12 @@ export const ui = {
     'project.tag.business': 'Business Project',
     'project.tag.opensource': 'Open Source',
     'project.tag.personal': 'Personal Product',
+    'project.tag.portfolio': 'Portfolio',
+    'project.tag.ecommerce': 'E-Commerce',
     'project.visit': 'Visit',
-    'project.demo': 'Live Demo'
+    'project.demo': 'Live Demo',
+    'projects.title': 'My Projects',
+    'projects.description': 'A collection of my recent work, showcasing innovative solutions and clean code. Explore the details of each project below.'
     // Projects and services content has been inlined into respective page files
     // to reduce reliance on the translation system and improve maintainability
   },
@@ -42,8 +46,12 @@ export const ui = {
     'project.tag.business': '商业项目',
     'project.tag.opensource': '开源项目',
     'project.tag.personal': '个人产品',
+    'project.tag.portfolio': '作品集',
+    'project.tag.ecommerce': '电子商务',
     'project.visit': '访问',
-    'project.demo': '在线演示'
+    'project.demo': '在线演示',
+    'projects.title': '我的项目',
+    'projects.description': '这里展示了我最近的作品集，展现了创新解决方案和整洁的代码。请浏览下方了解每个项目的详细信息。'
     // Projects and services content has been inlined into respective page files
     // to reduce reliance on the translation system and improve maintainability
   }
diff --git a/src/layouts/AboutLayout.astro b/src/layouts/AboutLayout.astro
new file mode 100644
index 0000000..380daea
--- /dev/null
+++ b/src/layouts/AboutLayout.astro
@@ -0,0 +1,270 @@
+---
+import type { MarkdownLayoutProps } from 'astro';
+import { type Lang } from '@/i18n/utils';
+import { defaultLang } from '@/i18n/ui';
+import GlassHeader from '@/components/GlassHeader';
+import Footer from '@/components/Footer';
+import "../styles/global.css";
+
+// Define the frontmatter structure
+interface FrontmatterProps {
+  title: string;
+  description?: string;
+}
+
+// Use Astro's MarkdownLayoutProps for proper type safety
+export type Props = MarkdownLayoutProps<FrontmatterProps>;
+
+// Access frontmatter data correctly for markdown layouts
+const { frontmatter } = Astro.props;
+const { title, description } = frontmatter;
+
+const lang = Astro.currentLocale as Lang || defaultLang;
+---
+
+<!doctype html>
+<html lang={lang}>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content={description} />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body class="min-h-screen bg-background font-sans antialiased selection:bg-purple-500/20 selection:text-purple-500">
+    <!-- Enhanced background with gradient overlay -->
+    <div class="fixed inset-0 -z-10 h-full w-full bg-background">
+      <!-- Base radial gradient -->
+      <div class="absolute inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))] dark:bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.2),rgba(0,0,0,0))]">
+      </div>
+      <!-- Additional subtle gradient for about page -->
+      <div class="absolute inset-0 bg-gradient-to-br from-purple-50/30 via-transparent to-blue-50/20 dark:from-purple-950/20 dark:via-transparent dark:to-blue-950/10">
+      </div>
+    </div>
+    
+    <!-- Glass Header with navigation -->
+    <GlassHeader lang={lang} client:load />
+    
+    <!-- Main content with proper spacing for fixed header -->
+    <div class="pt-16 sm:pt-20">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
+        <div class="max-w-7xl mx-auto">
+          <div class="grid grid-cols-1 xl:grid-cols-4 gap-6 lg:gap-8">
+            <!-- Main Content -->
+            <main class="xl:col-span-3 order-2 xl:order-1">
+              <!-- About page header -->
+              <header class="mb-10">
+                <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground mb-6 leading-tight tracking-tight">
+                  ✨ {title}
+                </h1>
+                
+                {description && (
+                  <p class="text-lg sm:text-xl text-muted-foreground mb-8 leading-relaxed max-w-4xl">
+                    📝 {description}
+                  </p>
+                )}
+              </header>
+              
+              <!-- About page content with typography styles -->
+              <article class="prose prose-lg dark:prose-invert max-w-none prose-headings:scroll-mt-24 prose-headings:font-bold prose-headings:tracking-tight prose-h1:text-2xl sm:prose-h1:text-3xl prose-h2:text-xl sm:prose-h2:text-2xl prose-h3:text-lg sm:prose-h3:text-xl prose-h4:text-base sm:prose-h4:text-lg prose-p:text-base sm:prose-p:text-lg prose-p:leading-relaxed prose-p:mb-6 prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-strong:text-foreground prose-code:text-sm prose-code:px-2 prose-code:py-1 prose-code:rounded prose-pre:bg-muted prose-pre:border prose-pre:text-sm prose-blockquote:border-l-primary prose-blockquote:bg-muted/30 prose-blockquote:text-base prose-li:text-base sm:prose-li:text-lg prose-li:leading-relaxed">
+                <slot />
+              </article>
+            </main>
+            
+            <!-- Sidebar with Table of Contents -->
+            <aside class="xl:col-span-1 order-1 xl:order-2">
+              <div class="xl:sticky xl:top-24 space-y-6 sm:space-y-8 xl:space-y-12 xl:max-h-[calc(100vh-6rem)] xl:overflow-y-auto">
+                <!-- Table of Contents -->
+                <div class="bg-card/50 backdrop-blur-sm rounded-2xl border border-border h-auto xl:h-[400px] lg:h-[500px] overflow-y-auto">
+                  <div class="max-xl:hidden">
+                    <div id="nav-content" class="sticky w-72 top-14 max-h-[calc(100svh-3.5rem)] overflow-x-hidden">
+                      <div class="flex flex-col gap-3 p-4">
+                        <h3 class="dark:text-zinc-400 text-blacktext/90 font-bold tracking-wide text-sm sm:text-base uppercase flex items-center mb-4">
+                          <svg class="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
+                          </svg>
+                          {lang === 'zh' ? '📑 目录' : '📑 Table of Contents'}
+                        </h3>
+                        <div class="text-neutral-500 dark:text-neutral-300">
+                          <ul id="toc-list" class="leading-relaxed text-sm sm:text-base border-l dark:border-neutral-500/20 border-blacktext/20">
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </aside>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Footer -->
+    <Footer lang={lang} client:load />
+  </body>
+</html>
+
+<script>
+  /**
+   * Initialize table of contents functionality
+   * Extracts headings from article content and creates navigation links
+   */
+  document.addEventListener("DOMContentLoaded", function () {
+    const tocList = document.getElementById("toc-list");
+    const content = document.querySelector("article");
+
+    if (!tocList || !content) return;
+
+    // Extract h1, h2, h3, h4 headings from article content
+    const headers = content.querySelectorAll("h1, h2, h3, h4");
+    let currentUl = tocList;
+
+    /**
+     * Process each heading and create corresponding TOC entry
+     */
+    headers.forEach((header, index) => {
+      // Generate ID if not present
+      if (!header.id) {
+        header.id = header.textContent?.trim().toLowerCase().replace(/\s+/g, "-") + "-" + index;
+      }
+
+      const li = document.createElement("li");
+      const link = document.createElement("a");
+      link.href = `#${header.id}`;
+      link.textContent = header.textContent?.trim() || header.id;
+
+      // Apply styling based on heading level
+      const level = parseInt(header.tagName.charAt(1));
+      link.classList.add(
+        "block", "w-full", "text-left", "py-2", "px-3", "rounded-lg", "text-sm", 
+        "transition-all", "duration-200", "border-l", "border-transparent", 
+        "text-muted-foreground", "hover:text-foreground", "hover:bg-muted/50"
+      );
+
+      // Add indentation based on heading level
+      if (level === 1) {
+        link.classList.add("font-semibold");
+      } else if (level === 2) {
+        link.classList.add("ml-3");
+      } else if (level === 3) {
+        link.classList.add("ml-6");
+      } else if (level === 4) {
+        link.classList.add("ml-9");
+      }
+
+      li.appendChild(link);
+      tocList.appendChild(li);
+
+      /**
+       * Handle smooth scroll on link click
+       */
+      link.addEventListener("click", function (e) {
+        e.preventDefault();
+        const targetElement = document.getElementById(header.id);
+        if (targetElement) {
+          targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
+        }
+      });
+    });
+
+    /**
+     * Set up intersection observer for active section tracking
+     */
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const id = entry.target.getAttribute("id");
+          const link = document.querySelector(`#toc-list a[href="#${id}"]`);
+
+          if (entry.isIntersecting) {
+            // Remove active state from all links
+            document.querySelectorAll("#toc-list a").forEach((el) => {
+              el.classList.remove(
+                "bg-purple-500/10", "text-purple-500", "border-l-2", "border-purple-500"
+              );
+              el.classList.add("text-muted-foreground");
+            });
+
+            // Add active state to current link
+            if (link) {
+              link.classList.remove("text-muted-foreground");
+              link.classList.add(
+                "bg-purple-500/10", "text-purple-500", "border-l-2", "border-purple-500"
+              );
+            }
+          }
+        });
+      },
+      {
+        rootMargin: "-20% 0% -35% 0%",
+        threshold: 0
+      }
+    );
+
+    // Observe all headings for intersection
+    headers.forEach((header) => observer.observe(header));
+  });
+</script>
+
+<script is:inline>
+  const getThemePreference = () => {
+    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
+      return localStorage.getItem("theme");
+    }
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  };
+  const isDark = getThemePreference() === "dark";
+  document.documentElement.classList[isDark ? "add" : "remove"]("dark");
+
+  if (typeof localStorage !== "undefined") {
+    const observer = new MutationObserver(() => {
+      const isDark = document.documentElement.classList.contains("dark");
+      localStorage.setItem("theme", isDark ? "dark" : "light");
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+  }
+</script>
+
+<style>
+  /* Additional styling for smooth transitions */
+  #toc-list a:hover {
+    transform: translateX(2px);
+  }
+  
+  #toc-list a:focus {
+    outline: 2px solid rgba(168, 85, 247, 0.5);
+    outline-offset: 2px;
+  }
+  
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    scroll-behavior: smooth;
+  }
+
+  :root {
+    --transition-standard: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  body {
+    transition:
+      background-color var(--transition-standard),
+      color var(--transition-standard);
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/about.md b/src/pages/about.md
new file mode 100644
index 0000000..4f8e955
--- /dev/null
+++ b/src/pages/about.md
@@ -0,0 +1,39 @@
+---
+title: "About Me"
+description: "Learn more about my background, skills, and experiences"
+layout: "../layouts/AboutLayout.astro"
+---
+
+# Fernando López | EFEELE 👨‍💻
+
+Frontend Developer with 8 years of experience, passionate about development, technology, and coffee that sparks ideas. I love bringing digital projects to life. 🚀
+
+## About me 🧠
+
+I started developing my first commercial projects as a web developer in 2017. Although I've been passionate about technology for as long as I can remember. I discovered the internet at age 6, and along with it, I learned to use Paint 🎨 and play Pinball on a Windows XP computer that my cousins had. Years passed, and I discovered there was a cyber café near my house, so accompanied by my older brother, I spent a lot of time there, watching others play Age of Empires ⚔️. When I could, I also played on the computers and investigated how those games worked. But above all, I remember that while sitting there, I watched the owner, Alfredo, the good Fred, while he programmed and modeled game maps, or at least that's what I remember. That made me want to try doing the same. I found it incredible how so many things happened on his screen that, although I couldn't understand them, looked amazing. Without a doubt, he was my first influence to get into programming. ✨
+
+When we got our first computer at home, around 2011, I spent all my time there, creating my own texture packs to integrate them into one of my favorite games at that time: Minecraft. 🎮 I was fascinated by the idea of being able to modify the appearance of the game and share my creations with friends. This was my first real contact with digital creation, and it sparked a passion that continues to this day. 💡
+
+## My Skills 💪
+
+- **Frontend** 🖥️: React, Vue.js, Angular, HTML5, CSS3, JavaScript/TypeScript
+- **Backend** ⚙️: Node.js, Express, Django, Flask, Spring Boot
+- **Databases** 💾: MongoDB, PostgreSQL, MySQL, Redis
+- **DevOps** 🔄: Docker, Kubernetes, AWS, Azure, CI/CD pipelines
+- **Mobile** 📱: React Native, Flutter
+
+## My Journey 🛣️
+
+My professional journey has taken me through various roles and industries. I've worked with startups, enterprise companies, and everything in between. Each experience has taught me valuable lessons about technology, teamwork, and problem-solving. 🌱
+
+## Philosophy 🧐
+
+I believe in writing clean, maintainable code that solves real problems. I'm passionate about user experience and performance optimization. I enjoy working in collaborative environments where ideas are freely shared and everyone contributes to the final product. 🤝
+
+## Outside of Coding 🌈
+
+When I'm not coding, you might find me hiking in the mountains 🏔️, reading a good book 📚, or experimenting with new recipes in the kitchen 🍳. I'm also an avid traveler and enjoy experiencing different cultures around the world 🌍.
+
+## Let's Connect 📫
+
+I'm always open to new opportunities, collaborations, or just a friendly chat about technology. Feel free to reach out through any of the social media links on this site.
\ No newline at end of file
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
new file mode 100644
index 0000000..0d30fcb
--- /dev/null
+++ b/src/pages/projects.astro
@@ -0,0 +1,236 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import GlassHeader from "@/components/GlassHeader";
+import Footer from "@/components/Footer";
+import { useTranslations, type Lang } from "@/i18n/utils";
+import { defaultLang } from "@/i18n/ui";
+
+const lang: Lang = defaultLang;
+const t = useTranslations(lang);
+const pageTitle = t('projects.title');
+---
+
+<Layout title={pageTitle}>
+  <GlassHeader lang={lang} client:only="react" />
+  <main class="min-h-screen">
+    <!-- Projects Hero Section -->
+    <section class="py-24 relative overflow-hidden">
+      <!-- Background gradient -->
+      <div class="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>
+      
+      <div class="container max-w-6xl mx-auto px-6 md:px-4 relative z-10">
+        <div class="text-center mb-16">
+          <!-- Main title -->
+          <h1 class="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-gray-900 via-purple-600 to-purple-800 dark:from-white dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent">
+            {t('projects.title')}
+          </h1>
+
+          <!-- Description -->
+          <p class="text-lg text-muted-foreground max-w-3xl mx-auto mb-12 leading-relaxed">
+            {t('projects.description')}
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Projects Grid Section -->
+    <section class="py-12 relative">
+      <!-- Background gradient -->
+      <div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent"></div>
+      
+      <div class="container max-w-6xl mx-auto px-6 md:px-4 relative z-10">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-stretch">
+          <!-- Taskify App Project -->
+          <div class="group overflow-hidden border border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative">
+            <!-- Project tag - positioned at top right -->
+            <div class="absolute top-4 right-4 z-10">
+              <span class="px-3 py-1 bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 text-xs rounded-full font-medium border border-blue-200 dark:border-blue-700">{t('project.tag.business')}</span>
+            </div>
+            
+            <!-- Project image placeholder -->
+            <div class="h-48 bg-gradient-to-br from-purple-500/20 to-purple-600/20 relative overflow-hidden">
+              <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-purple-600/10 group-hover:from-purple-500/20 group-hover:to-purple-600/20 transition-all duration-500"></div>
+              <div class="absolute bottom-4 left-4 right-4">
+                <div class="bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono text-purple-400">
+                  Taskify App
+                </div>
+              </div>
+            </div>
+            
+            <div class="p-6 pb-4">
+              <h3 class="text-xl group-hover:text-purple-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4">
+                <span class="text-purple-500">📱</span>
+                Taskify App
+              </h3>
+            </div>
+            
+            <div class="px-6 flex-grow">
+              <div class="space-y-3">
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-purple-500 mt-1">•</span>
+                  <span>A comprehensive task management application with drag-and-drop functionality.</span>
+                </div>
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-purple-500 mt-1">•</span>
+                  <span>Built with React, TypeScript, and Tailwind CSS for modern development.</span>
+                </div>
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-purple-500 mt-1">•</span>
+                  <span>Real-time collaboration features with WebSocket integration for instant updates.</span>
+                </div>
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-purple-500 mt-1">•</span>
+                  <span>Advanced task filtering, sorting, and project management capabilities.</span>
+                </div>
+              </div>
+              
+              <!-- Tech stack indicators with unified gray styling -->
+              <div class="mt-6 mb-4 flex flex-wrap gap-2">
+                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">React</span>
+                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">Node.js</span>
+                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">MongoDB</span>
+              </div>
+            </div>
+            
+            <!-- Visit project link -->
+            <div class="p-6 pt-2">
+              <a href="#" class="inline-flex items-center text-sm font-medium text-purple-500 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-300">
+                {t('project.visit')} 
+                <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
+                </svg>
+              </a>
+            </div>
+          </div>
+
+          <!-- E-Shop Platform Project -->
+          <div class="group overflow-hidden border border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative">
+            <!-- Project tag - positioned at top right -->
+            <div class="absolute top-4 right-4 z-10">
+              <span class="px-3 py-1 bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200 text-xs rounded-full font-medium border border-green-200 dark:border-green-700">{t('project.tag.ecommerce')}</span>
+            </div>
+            
+            <!-- Project image placeholder -->
+            <div class="h-48 bg-gradient-to-br from-green-500/20 to-green-600/20 relative overflow-hidden">
+              <div class="absolute inset-0 bg-gradient-to-br from-green-500/10 to-green-600/10 group-hover:from-green-500/20 group-hover:to-green-600/20 transition-all duration-500"></div>
+              <div class="absolute bottom-4 left-4 right-4">
+                <div class="bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono text-green-400">
+                  E-Shop Platform
+                </div>
+              </div>
+            </div>
+            
+            <div class="p-6 pb-4">
+              <h3 class="text-xl group-hover:text-green-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4">
+                <span class="text-green-500">🛒</span>
+                E-Shop Platform
+              </h3>
+            </div>
+            
+            <div class="px-6 flex-grow">
+              <div class="space-y-3">
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-green-500 mt-1">•</span>
+                  <span>A scalable e-commerce platform with Next.js, Stripe payments, and TailwindCSS.</span>
+                </div>
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-green-500 mt-1">•</span>
+                  <span>Responsive design with mobile-first approach for optimal user experience.</span>
+                </div>
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-green-500 mt-1">•</span>
+                  <span>Integrated payment processing with Stripe for secure transactions.</span>
+                </div>
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-green-500 mt-1">•</span>
+                  <span>Admin dashboard for inventory management and order processing.</span>
+                </div>
+              </div>
+              
+              <!-- Tech stack indicators with unified gray styling -->
+              <div class="mt-6 mb-4 flex flex-wrap gap-2">
+                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">Next.js</span>
+                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">Stripe</span>
+                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">TailwindCSS</span>
+              </div>
+            </div>
+            
+            <!-- Visit project link -->
+            <div class="p-6 pt-2">
+              <a href="#" class="inline-flex items-center text-sm font-medium text-green-500 hover:text-green-600 dark:hover:text-green-400 transition-colors duration-300">
+                {t('project.visit')} 
+                <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
+                </svg>
+              </a>
+            </div>
+          </div>
+
+          <!-- Portfolio Site Project -->
+          <div class="group overflow-hidden border border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative">
+            <!-- Project tag - positioned at top right -->
+            <div class="absolute top-4 right-4 z-10">
+              <span class="px-3 py-1 bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 text-xs rounded-full font-medium border border-purple-200 dark:border-purple-700">{t('project.tag.portfolio')}</span>
+            </div>
+            
+            <!-- Project image placeholder -->
+            <div class="h-48 bg-gradient-to-br from-purple-500/20 to-purple-600/20 relative overflow-hidden">
+              <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-purple-600/10 group-hover:from-purple-500/20 group-hover:to-purple-600/20 transition-all duration-500"></div>
+              <div class="absolute bottom-4 left-4 right-4">
+                <div class="bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono text-purple-400">
+                  Portfolio Site
+                </div>
+              </div>
+            </div>
+            
+            <div class="p-6 pb-4">
+              <h3 class="text-xl group-hover:text-purple-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4">
+                <span class="text-purple-500">🌐</span>
+                Portfolio Site
+              </h3>
+            </div>
+            
+            <div class="px-6 flex-grow">
+              <div class="space-y-3">
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-purple-500 mt-1">•</span>
+                  <span>My personal portfolio showcasing my work, built with HTML, TailwindCSS, and Alpine.js.</span>
+                </div>
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-purple-500 mt-1">•</span>
+                  <span>Responsive design with dark mode support and smooth animations.</span>
+                </div>
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-purple-500 mt-1">•</span>
+                  <span>Optimized for performance with minimal JavaScript and efficient CSS.</span>
+                </div>
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-purple-500 mt-1">•</span>
+                  <span>Integrated blog section with markdown support for content management.</span>
+                </div>
+              </div>
+              
+              <!-- Tech stack indicators with unified gray styling -->
+              <div class="mt-6 mb-4 flex flex-wrap gap-2">
+                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">HTML</span>
+                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">TailwindCSS</span>
+                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">Alpine.js</span>
+              </div>
+            </div>
+            
+            <!-- Visit project link -->
+            <div class="p-6 pt-2">
+              <a href="#" class="inline-flex items-center text-sm font-medium text-purple-500 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-300">
+                {t('project.visit')} 
+                <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+  <Footer lang={lang} client:load />
+</Layout>
\ No newline at end of file
diff --git a/src/pages/services.md b/src/pages/services.md
new file mode 100644
index 0000000..393181e
--- /dev/null
+++ b/src/pages/services.md
@@ -0,0 +1,80 @@
+---
+title: "My Services"
+description: "Explore the professional services I offer to help bring your digital projects to life"
+layout: "../layouts/AboutLayout.astro"
+---
+
+# Services I Provide 🛠️
+
+If you have a project that needs development, design, or bug fixing, feel free to contact me. 🚀
+
+## Web Development 🌐
+
+- 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
+
+## App Development 📱
+
+- 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
+
+## WeChat Mini Program Development 💬
+
+- 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
+
+## UI Design 🎨
+
+- 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
+
+## Bug Fixing 🐛
+
+- 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
+
+## Important Notes 📝
+
+To avoid unnecessary misunderstandings, please read the following notes before contacting me:
+
+1. Please provide detailed project requirements, including any design specifications (if you don't understand this, I can help guide you).
+2. Please specify project completion time and development period.
+3. In general, I only provide code, and the specific form of cooperation needs to be discussed.
+4. I cannot provide illegal services.
+5. Project source code can be maintained for 3 months.
+
+## Collaboration Process 🤝
+
+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 prototype
+6. Make payment
+7. Project development
+8. Project testing
+9. Project launch
+10. Project maintenance
+
+## Payment Methods 💰
+
+- WeChat Pay
+- Alipay
+- Bank Transfer
+
+Note: All projects use 442 payment method
\ No newline at end of file
diff --git a/src/pages/zh/about.md b/src/pages/zh/about.md
new file mode 100644
index 0000000..b7327e6
--- /dev/null
+++ b/src/pages/zh/about.md
@@ -0,0 +1,39 @@
+---
+title: "关于我"
+description: "了解更多关于我的背景、技能和经验"
+layout: "../../layouts/AboutLayout.astro"
+---
+
+# 赵桂阳 | Joy Zhao 👨‍💻
+
+我是一名全栈工程师，热爱开发，热爱技术和咖啡。我喜欢将数字项目变为现实。 🚀
+
+## 关于我 🧠
+
+我从2017年开始开发我的第一个商业项目，成为一名网页开发者。尽管我对技术的热爱可以追溯到很久以前。我在6岁时发现了互联网，同时，我学会了使用Paint 🎨 并在我表哥家的Windows XP电脑上玩弹球游戏。随着时间的推移，我发现我家附近有一家网吧，在我哥哥的陪伴下，我在那里度过了很多时光，看着别人玩帝国时代 ⚔️。当我有机会时，我也会在电脑上玩游戏，并研究这些游戏是如何运作的。但最重要的是，我记得当我坐在那里时，我看着老板Alfredo，好人Fred，他在编程和建模游戏地图，至少我记得是这样。这让我也想尝试做同样的事情。我发现他屏幕上发生的那么多事情是如此不可思议，尽管我无法理解它们，但看起来很神奇。毫无疑问，他是我进入编程领域的第一个影响者。 ✨
+
+当我们在2011年左右家里有了第一台电脑时，我把所有时间都花在那里，创建自己的纹理包，将它们集成到我当时最喜欢的游戏之一：Minecraft中。 🎮 我对能够修改游戏的外观并与朋友分享我的创作感到着迷。这是我第一次真正接触数字创作，它激发了一种至今仍在持续的热情。 💡
+
+## 我的技能 💪
+
+- **前端** 🖥️: React, Vue.js, Angular, HTML5, CSS3, JavaScript/TypeScript
+- **后端** ⚙️: Node.js, Express, Django, Flask, Spring Boot
+- **数据库** 💾: MongoDB, PostgreSQL, MySQL, Redis
+- **DevOps** 🔄: Docker, Kubernetes, AWS, Azure, CI/CD pipelines
+- **移动端** 📱: React Native, Flutter
+
+## 我的旅程 🛣️
+
+我的职业旅程让我经历了各种角色和行业。我曾与初创公司、企业公司以及介于两者之间的各种公司合作。每一次经历都教会了我关于技术、团队合作和解决问题的宝贵经验。 🌱
+
+## 理念 🧐
+
+我相信编写干净、可维护的代码，解决实际问题。我对用户体验和性能优化充满热情。我喜欢在协作环境中工作，在那里可以自由分享想法，每个人都为最终产品做出贡献。 🤝
+
+## 编码之外 🌈
+
+当我不编码时，你可能会发现我在山中徒步旅行 🏔️，阅读一本好书 📚，或在厨房里尝试新的食谱 🍳。我也是一个热衷于旅行的人，喜欢体验世界各地不同的文化 🌍。
+
+## 联系我 📫
+
+我始终对新的机会、合作或只是关于技术的友好交流持开放态度。欢迎通过本站上的任何社交媒体链接与我联系。
\ No newline at end of file
diff --git a/src/pages/zh/projects.astro b/src/pages/zh/projects.astro
new file mode 100644
index 0000000..cffa9e1
--- /dev/null
+++ b/src/pages/zh/projects.astro
@@ -0,0 +1,236 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import GlassHeader from "@/components/GlassHeader";
+import Footer from "@/components/Footer";
+import { useTranslations, type Lang } from "@/i18n/utils";
+import { defaultLang } from "@/i18n/ui";
+
+const lang: Lang = 'zh';
+const t = useTranslations(lang);
+const pageTitle = t('projects.title');
+---
+
+<Layout title={pageTitle}>
+  <GlassHeader lang={lang} client:only="react" />
+  <main class="min-h-screen">
+    <!-- Projects Hero Section -->
+    <section class="py-24 relative overflow-hidden">
+      <!-- Background gradient -->
+      <div class="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>
+      
+      <div class="container max-w-6xl mx-auto px-6 md:px-4 relative z-10">
+        <div class="text-center mb-16">
+          <!-- Main title -->
+          <h1 class="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-gray-900 via-purple-600 to-purple-800 dark:from-white dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent">
+            {t('projects.title')}
+          </h1>
+
+          <!-- Description -->
+          <p class="text-lg text-muted-foreground max-w-3xl mx-auto mb-12 leading-relaxed">
+            {t('projects.description')}
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Projects Grid Section -->
+    <section class="py-12 relative">
+      <!-- Background gradient -->
+      <div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent"></div>
+      
+      <div class="container max-w-6xl mx-auto px-6 md:px-4 relative z-10">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-stretch">
+          <!-- Taskify App Project -->
+          <div class="group overflow-hidden border border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative">
+            <!-- Project tag - positioned at top right -->
+            <div class="absolute top-4 right-4 z-10">
+              <span class="px-3 py-1 bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 text-xs rounded-full font-medium border border-blue-200 dark:border-blue-700">{t('project.tag.business')}</span>
+            </div>
+            
+            <!-- Project image placeholder -->
+            <div class="h-48 bg-gradient-to-br from-purple-500/20 to-purple-600/20 relative overflow-hidden">
+              <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-purple-600/10 group-hover:from-purple-500/20 group-hover:to-purple-600/20 transition-all duration-500"></div>
+              <div class="absolute bottom-4 left-4 right-4">
+                <div class="bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono text-purple-400">
+                  Taskify 应用
+                </div>
+              </div>
+            </div>
+            
+            <div class="p-6 pb-4">
+              <h3 class="text-xl group-hover:text-purple-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4">
+                <span class="text-purple-500">📱</span>
+                Taskify 应用
+              </h3>
+            </div>
+            
+            <div class="px-6 flex-grow">
+              <div class="space-y-3">
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-purple-500 mt-1">•</span>
+                  <span>一个全面的任务管理应用，具有拖放功能。</span>
+                </div>
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-purple-500 mt-1">•</span>
+                  <span>使用React、TypeScript和Tailwind CSS构建，采用现代开发方法。</span>
+                </div>
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-purple-500 mt-1">•</span>
+                  <span>通过WebSocket集成实现实时协作功能，实现即时更新。</span>
+                </div>
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-purple-500 mt-1">•</span>
+                  <span>高级任务筛选、排序和项目管理功能。</span>
+                </div>
+              </div>
+              
+              <!-- Tech stack indicators with unified gray styling -->
+              <div class="mt-6 mb-4 flex flex-wrap gap-2">
+                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">React</span>
+                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">Node.js</span>
+                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">MongoDB</span>
+              </div>
+            </div>
+            
+            <!-- Visit project link -->
+            <div class="p-6 pt-2">
+              <a href="#" class="inline-flex items-center text-sm font-medium text-purple-500 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-300">
+                {t('project.visit')} 
+                <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
+                </svg>
+              </a>
+            </div>
+          </div>
+
+          <!-- E-Shop Platform Project -->
+          <div class="group overflow-hidden border border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative">
+            <!-- Project tag - positioned at top right -->
+            <div class="absolute top-4 right-4 z-10">
+              <span class="px-3 py-1 bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200 text-xs rounded-full font-medium border border-green-200 dark:border-green-700">{t('project.tag.ecommerce')}</span>
+            </div>
+            
+            <!-- Project image placeholder -->
+            <div class="h-48 bg-gradient-to-br from-green-500/20 to-green-600/20 relative overflow-hidden">
+              <div class="absolute inset-0 bg-gradient-to-br from-green-500/10 to-green-600/10 group-hover:from-green-500/20 group-hover:to-green-600/20 transition-all duration-500"></div>
+              <div class="absolute bottom-4 left-4 right-4">
+                <div class="bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono text-green-400">
+                  电商平台
+                </div>
+              </div>
+            </div>
+            
+            <div class="p-6 pb-4">
+              <h3 class="text-xl group-hover:text-green-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4">
+                <span class="text-green-500">🛒</span>
+                电商平台
+              </h3>
+            </div>
+            
+            <div class="px-6 flex-grow">
+              <div class="space-y-3">
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-green-500 mt-1">•</span>
+                  <span>使用Next.js、Stripe支付和TailwindCSS构建的可扩展电子商务平台。</span>
+                </div>
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-green-500 mt-1">•</span>
+                  <span>采用移动优先的响应式设计，提供最佳用户体验。</span>
+                </div>
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-green-500 mt-1">•</span>
+                  <span>集成Stripe支付处理，确保交易安全。</span>
+                </div>
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-green-500 mt-1">•</span>
+                  <span>管理员仪表板，用于库存管理和订单处理。</span>
+                </div>
+              </div>
+              
+              <!-- Tech stack indicators with unified gray styling -->
+              <div class="mt-6 mb-4 flex flex-wrap gap-2">
+                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">Next.js</span>
+                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">Stripe</span>
+                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">TailwindCSS</span>
+              </div>
+            </div>
+            
+            <!-- Visit project link -->
+            <div class="p-6 pt-2">
+              <a href="#" class="inline-flex items-center text-sm font-medium text-green-500 hover:text-green-600 dark:hover:text-green-400 transition-colors duration-300">
+                {t('project.visit')} 
+                <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
+                </svg>
+              </a>
+            </div>
+          </div>
+
+          <!-- Portfolio Site Project -->
+          <div class="group overflow-hidden border border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative">
+            <!-- Project tag - positioned at top right -->
+            <div class="absolute top-4 right-4 z-10">
+              <span class="px-3 py-1 bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 text-xs rounded-full font-medium border border-purple-200 dark:border-purple-700">{t('project.tag.portfolio')}</span>
+            </div>
+            
+            <!-- Project image placeholder -->
+            <div class="h-48 bg-gradient-to-br from-purple-500/20 to-purple-600/20 relative overflow-hidden">
+              <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-purple-600/10 group-hover:from-purple-500/20 group-hover:to-purple-600/20 transition-all duration-500"></div>
+              <div class="absolute bottom-4 left-4 right-4">
+                <div class="bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono text-purple-400">
+                  个人作品集网站
+                </div>
+              </div>
+            </div>
+            
+            <div class="p-6 pb-4">
+              <h3 class="text-xl group-hover:text-purple-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4">
+                <span class="text-purple-500">🌐</span>
+                个人作品集网站
+              </h3>
+            </div>
+            
+            <div class="px-6 flex-grow">
+              <div class="space-y-3">
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-purple-500 mt-1">•</span>
+                  <span>展示我的作品的个人作品集，使用HTML、TailwindCSS和Alpine.js构建。</span>
+                </div>
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-purple-500 mt-1">•</span>
+                  <span>响应式设计，支持暗黑模式和平滑动画。</span>
+                </div>
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-purple-500 mt-1">•</span>
+                  <span>通过最小化JavaScript和高效CSS优化性能。</span>
+                </div>
+                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                  <span class="text-purple-500 mt-1">•</span>
+                  <span>集成博客部分，支持markdown内容管理。</span>
+                </div>
+              </div>
+              
+              <!-- Tech stack indicators with unified gray styling -->
+              <div class="mt-6 mb-4 flex flex-wrap gap-2">
+                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">HTML</span>
+                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">TailwindCSS</span>
+                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">Alpine.js</span>
+              </div>
+            </div>
+            
+            <!-- Visit project link -->
+            <div class="p-6 pt-2">
+              <a href="#" class="inline-flex items-center text-sm font-medium text-purple-500 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-300">
+                {t('project.visit')} 
+                <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+  <Footer lang={lang} client:load />
+</Layout>
\ No newline at end of file
diff --git a/src/pages/zh/services.md b/src/pages/zh/services.md
new file mode 100644
index 0000000..1001493
--- /dev/null
+++ b/src/pages/zh/services.md
@@ -0,0 +1,80 @@
+---
+title: "我的服务"
+description: "探索我提供的专业服务，帮助您实现数字项目"
+layout: "../../layouts/AboutLayout.astro"
+---
+
+# 提供服务 🛠️
+
+如果您有项目需要开发、设计、Bug 修复等，欢迎联系我。🚀
+
+## 网站开发 🌐
+
+- 使用最新技术构建响应式现代网站
+- 创建根据您特定需求定制的网络应用程序
+- 使用 React、Vue.js 或 Angular 实现前端界面
+- 使用 Node.js、Express、Django 或 Flask 开发后端系统
+- 优化网站性能和用户体验
+
+## APP 开发 📱
+
+- 使用 React Native 或 Flutter 开发跨平台移动应用
+- 创建原生 iOS 和 Android 应用
+- 构建渐进式网络应用（PWAs），提供类似移动应用的网页体验
+- 实现离线功能和推送通知
+- 集成设备功能，如摄像头、GPS 和传感器
+
+## 微信小程序开发 💬
+
+- 为企业设计和开发微信小程序
+- 创建交互性强且引人入胜的用户界面
+- 实现微信支付和其他微信 API
+- 针对微信生态系统和要求进行优化
+- 构建特定于您业务需求的自定义功能
+
+## UI设计 🎨
+
+- 创建现代、简洁、直观的用户界面
+- 设计适用于所有设备的响应式布局
+- 开发品牌标识和视觉语言
+- 创建线框图、原型和高保真模型
+- 实现设计系统，确保一致的用户体验
+
+## BUg 修复 🐛
+
+- 识别和解决现有应用程序中的问题
+- 调试前端和后端系统中的复杂问题
+- 优化代码以提高性能和可靠性
+- 将旧代码重构为现代标准
+- 实施自动化测试以防止未来出现错误
+
+## 注意事项 📝
+
+为了减少不必要的麻烦，请在沟通之前细读以下注意事项：
+
+1. 请提供详细的需求说明，有需要设计稿（如果你不了解这些关系，我这边可以帮你整理）。
+2. 请提供项目完成时间，开发周期。
+3. 一般情况下只提供简单的代码，其他形式的合作需要行动协商。
+4. 我们无法提供开黑服务。
+5. 项目源码可免维护3个月。
+
+## 合作步骤 🤝
+
+1. 确定合作项目
+2. 确定合作方式
+3. 确定项目功能需求
+4. 确定开发周期以及交付时间
+5. 确定项目设计原型图
+6. 支付费用
+7. 项目开发
+8. 项目测试
+9. 项目上线
+10. 项目维护
+
+## 付款方式 💰
+
+- 微信支付
+- 支付宝支付
+- 银行转账
+
+注：所有项目采用442付款制
\ No newline at end of file