zgy/zhaoguiyang.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add multilingual about, services and projects pages with i18n support

Browse Source 
- 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
This commit is contained in:
joyzhao
2025-06-18 18:15:32 +08:00
parent e5497e5e6d
commit 7bb617a5c5
9 changed files with 1000 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/pages/zh/about.md Normal file
View File

@@ -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
## 我的旅程 🛣️
我的职业旅程让我经历了各种角色和行业。我曾与初创公司、企业公司以及介于两者之间的各种公司合作。每一次经历都教会了我关于技术、团队合作和解决问题的宝贵经验。 🌱
## 理念 🧐
我相信编写干净、可维护的代码，解决实际问题。我对用户体验和性能优化充满热情。我喜欢在协作环境中工作，在那里可以自由分享想法，每个人都为最终产品做出贡献。 🤝
## 编码之外 🌈
当我不编码时，你可能会发现我在山中徒步旅行 🏔️，阅读一本好书 📚，或在厨房里尝试新的食谱 🍳。我也是一个热衷于旅行的人，喜欢体验世界各地不同的文化 🌍。
## 联系我 📫
我始终对新的机会、合作或只是关于技术的友好交流持开放态度。欢迎通过本站上的任何社交媒体链接与我联系。

236
src/pages/zh/projects.astro Normal file
View File

@@ -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>

80
src/pages/zh/services.md Normal file
View File

@@ -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付款制