feat(navigation): add services section to header and translations

- Add 'nav.services' translations in both English and Chinese
- Include services link in desktop and mobile navigation
- Add id to services section for navigation
- Use personalInfo.name instead of translation for header name

src/components/GlassHeader.tsx

@@ -1,4 +1,5 @@
 import ThemeToggle from "./ui/theme-toggle";
+import { personalInfo } from "@/lib/data";
 import LanguageSwitcher from "./LanguageSwitcher";
 import { useTranslations, getLocalizedPath, type Lang } from "@/i18n/utils";
 import { useState, useEffect } from "react";
@@ -35,13 +36,14 @@ export default function GlassHeader({ lang }: GlassHeaderProps) {
           className="flex items-center text-lg font-medium transition-opacity duration-150 hover:opacity-80"
           href={getLocalizedPath('/', lang)}
         >
-          ✨ {t('personal.name')}
+          ✨ {personalInfo.name}
         </a>
 
         {/* 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' },
           ].map((item) => (
             <a
@@ -83,6 +85,7 @@ 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' },
             ].map((item) => (
               <a

src/i18n/ui.ts

@@ -10,6 +10,7 @@ export const ui = {
   en: {
     'nav.home': 'Home',
     'nav.about': 'About',
+    'nav.services': 'Services',
     'nav.projects': 'Projects',
     'nav.contact': 'Contact',
     'site.title': 'Joy Zhao - Full Stack Developer',
@@ -23,6 +24,7 @@ export const ui = {
   zh: {
     'nav.home': '首页',
     'nav.about': '关于',
+    'nav.services': '服务',
     'nav.projects': '项目',
     'nav.contact': '联系',
     'site.title': 'Joy Zhao - 全栈开发者',

src/pages/index.astro

@@ -167,7 +167,7 @@ const pageTitle = t('site.title');
     <SkillsMarquee lang={lang} client:only="react" />
     
     <!-- Services Section - Inlined Content -->
-    <section class="py-20 px-4 bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800">
+    <section id="services" class="py-20 px-4 bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800">
       <div class="max-w-6xl mx-auto">
         <h2 class="text-4xl font-bold text-center mb-16 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
           Services I Offer

src/pages/zh/index.astro

@@ -166,7 +166,7 @@ const pageTitle = t('site.title');
     <SkillsMarquee lang={lang} client:only="react" />
     
     <!-- Services Section - Inlined Content -->
-    <section class="py-20 px-4 bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800">
+    <section id="services" class="py-20 px-4 bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800">
       <div class="max-w-6xl mx-auto">
         <h2 class="text-4xl font-bold text-center mb-16 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
           我提供的服务