From 89cfeff439ba7d6f5ea863453c90758d706461a9 Mon Sep 17 00:00:00 2001
From: joyzhao <zhaoguiyang18@gmail.com>
Date: Mon, 16 Jun 2025 18:37:28 +0800
Subject: [PATCH] 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 | 5 ++++-
 src/i18n/ui.ts                 | 2 ++
 src/pages/index.astro          | 2 +-
 src/pages/zh/index.astro       | 2 +-
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/GlassHeader.tsx b/src/components/GlassHeader.tsx
index 2f58c0c..534b3c2 100644
--- a/src/components/GlassHeader.tsx
+++ b/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
diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
index 4d51118..4e71cb1 100644
--- a/src/i18n/ui.ts
+++ b/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 - 全栈开发者',
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b36c812..6893eae 100644
--- a/src/pages/index.astro
+++ b/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
diff --git a/src/pages/zh/index.astro b/src/pages/zh/index.astro
index 5b6e7fa..eaff2da 100644
--- a/src/pages/zh/index.astro
+++ b/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">
           我提供的服务