From a446ce68bd089c9492d1d9273dabb40a98cee65d Mon Sep 17 00:00:00 2001
From: joyzhao <zhaoguiyang18@gmail.com>
Date: Fri, 20 Jun 2025 10:49:53 +0800
Subject: [PATCH] feat(i18n): add slogans and update translations for multiple
 pages

Add new slogan translations for projects and blog pages in both English and Chinese
Update about and services pages with additional content
Modify footer to include remote work availability notice
---
 src/components/Footer.tsx     | 20 ++++++++++++++------
 src/i18n/ui.ts                |  8 ++++++++
 src/pages/about.md            |  2 ++
 src/pages/blog/index.astro    |  5 +++--
 src/pages/projects.astro      |  2 +-
 src/pages/services.md         |  2 ++
 src/pages/zh/blog/index.astro |  5 +++--
 7 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index d2b6740..eb07678 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -29,12 +29,20 @@ export default function Footer({ lang: propLang }: FooterProps) {
           transition={{ duration: 0.5 }}
           viewport={{ once: true }}
         >
-          <motion.p
-            className="text-sm text-muted-foreground text-center md:text-left"
-            whileHover={{ scale: 1.01 }}
-          >
-            &copy; {new Date().getFullYear()} { personalInfo.name }. {t('footer.rights')} ✨
-          </motion.p>
+          <motion.div className="flex flex-col gap-2">
+            <motion.p
+              className="text-sm text-muted-foreground text-center md:text-left"
+              whileHover={{ scale: 1.01 }}
+            >
+              &copy; {new Date().getFullYear()} { personalInfo.name }. {t('footer.rights')} ✨
+            </motion.p>
+            <motion.p
+              className="text-sm text-purple-500 font-medium text-center md:text-left"
+              whileHover={{ scale: 1.01 }}
+            >
+              {lang === 'zh' ? '如果你正在寻找一名前端/Ts全栈工程师（远程工作），请联系我！' : 'Looking for a Frontend/TS Full-stack Engineer (Remote)? Contact me!'}
+            </motion.p>
+          </motion.div>
           <motion.p
             className="text-sm text-muted-foreground mt-2 md:mt-0 text-center md:text-left"
             initial={{ opacity: 0 }}
diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
index 196e506..0fb2668 100644
--- a/src/i18n/ui.ts
+++ b/src/i18n/ui.ts
@@ -42,6 +42,10 @@ const structuredUi = {
     projects: {
       title: 'My Projects',
       description: 'A collection of my recent work, showcasing innovative solutions and clean code. Explore the details of each project below.',
+      slogan: 'Crafting elegant solutions to complex problems with clean code and innovative thinking.',
+    },
+    blog: {
+      slogan: 'This is where innovative thinking meets complex problems.',
     },
     // Projects and services content has been inlined into respective page files
     // to reduce reliance on the translation system and improve maintainability
@@ -80,6 +84,10 @@ const structuredUi = {
     projects: {
       title: '我的项目',
       description: '这里展示了我最近的作品集，展现了创新解决方案和整洁的代码。请浏览下方了解每个项目的详细信息。',
+      slogan: '用优雅的代码和创新的思维，为复杂问题打造精致的解决方案。',
+    },
+    blog: {
+      slogan: '这里是创新思维与复杂问题相遇的地方。',
     },
     // 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/pages/about.md b/src/pages/about.md
index 500d0df..37a9cc7 100644
--- a/src/pages/about.md
+++ b/src/pages/about.md
@@ -12,6 +12,8 @@ I'm a TypeScript Full Stack Engineer who loves development, technology, and expl
 
 I started my programming journey in 2016 when I accidentally encountered programming. This opportunity became the catalyst for my coding adventure, and I fell in love with programming during my subsequent self-learning journey. I enjoy creating websites and applications with code and sharing them with users. The sense of achievement I get from this process makes me increasingly fascinated. My dream is to become a lifelong coder.
 
+我相信这里是想法变为现实的地方。我正在探索自由职业者之路，努力成为数字游民中的一员。
+
 ## My Skills 💪
 
 Below are the technology stacks I'm currently familiar with or proficient in, as well as those I'm learning or planning to learn. If your project requires technologies I'm not familiar with, don't worry - I have excellent collaborative relationships with various tech experts, including but not limited to backend developers, app developers, UI designers, product managers, etc., and can provide any services you need.
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 25edb52..a76d42d 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -5,12 +5,13 @@ import CategoryCard from '../../components/blog/CategoryCard.astro';
 import TagCard from '../../components/blog/TagCard.astro';
 import Container from '../../components/ui/Container';
 import { type BlogPost } from '@/types';
-import { type Lang } from '@/i18n/utils';
+import { type Lang, useTranslations } from '@/i18n/utils';
 import { defaultLang } from '@/i18n/ui';
 import { sortPostsByDate } from '@/utils/blog-utils';
 
 // Get current language environment using Astro.currentLocale
 const lang = Astro.currentLocale as Lang || defaultLang;
+const t = useTranslations(lang);
 
 // Read all blog posts using import.meta.glob
 const allPosts = await import.meta.glob('./posts/*.md', { eager: true });
@@ -50,7 +51,7 @@ const sortedBlogPosts = sortPostsByDate(blogPosts);
           Our <span class="text-purple-500">Latest</span> Blog
         </h1>
         <p class="text-xl text-muted-foreground max-w-3xl mx-auto">
-          Dive into my thoughts on coding, tech trends, and developer life. Explore my latest posts below.
+          {t('blog.slogan')} Dive into my thoughts on coding, tech trends, and developer life. Explore my latest posts below.
         </p>
       </div>
     </Container>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index 0a16280..aab4d77 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -33,7 +33,7 @@ const currentProjects = projects[lang as keyof typeof projects] || projects.en;
 
           <!-- Description -->
           <p class="text-lg text-muted-foreground max-w-3xl mx-auto mb-12 leading-relaxed">
-            {t('projects.description')}
+            {t('projects.slogan')} {t('projects.description')}
           </p>
         </div>
       </Container>
diff --git a/src/pages/services.md b/src/pages/services.md
index 750241c..ac97d03 100644
--- a/src/pages/services.md
+++ b/src/pages/services.md
@@ -6,6 +6,8 @@ layout: "../layouts/AboutLayout.astro"
 
 # Services I Provide 🛠️
 
+用优雅的代码和创新的思维，为复杂问题打造精致的解决方案。
+
 ## Web Development 🌐
 
 - Building responsive and modern websites using the latest technologies
diff --git a/src/pages/zh/blog/index.astro b/src/pages/zh/blog/index.astro
index c261211..ae06efb 100644
--- a/src/pages/zh/blog/index.astro
+++ b/src/pages/zh/blog/index.astro
@@ -5,12 +5,13 @@ import CategoryCard from '../../../components/blog/CategoryCard.astro';
 import TagCard from '../../../components/blog/TagCard.astro';
 import Container from '../../../components/ui/Container';
 import { type BlogPost } from '@/types';
-import { type Lang } from '@/i18n/utils';
+import { type Lang, useTranslations } from '@/i18n/utils';
 import { defaultLang } from '@/i18n/ui';
 import { sortPostsByDate, extractCategories, extractTags } from '@/utils/blog-utils';
 
 // 使用Astro.currentLocale获取当前语言环境
 const lang = Astro.currentLocale as Lang || defaultLang;
+const t = useTranslations(lang);
 
 // 使用import.meta.glob读取所有中文博客文章
 const allPosts = await import.meta.glob('./posts/*.md', { eager: true });
@@ -62,7 +63,7 @@ const tags = extractTags(allPostsArray);
           我的<span class="text-purple-500">博客</span>
         </h1>
         <p class="text-xl text-muted-foreground max-w-3xl mx-auto">
-          深入我对编程、技术趋势和开发者生活的思考。探索我的最新文章。
+          {t('blog.slogan')} 探索我对网络开发、设计和技术的想法、教程和见解。
         </p>
       </div>
     </Container>