From f31fbb20a66aac35d2d8af4346f94efe8c64ca4b Mon Sep 17 00:00:00 2001 From: joyzhao Date: Mon, 16 Jun 2025 19:26:05 +0800 Subject: [PATCH] feat(projects): add project tags and improve project cards layout - Add project type tags (business, opensource, personal) to project cards - Update i18n translations for new project tags and visit/demo labels - Improve tech stack indicators styling with unified gray theme - Simplify project card footer links to use translation labels - Update project descriptions and tech stack details --- src/i18n/ui.ts | 14 ++++- src/pages/index.astro | 130 ++++++++++++++++++++------------------- src/pages/zh/index.astro | 102 +++++++++++++++--------------- 3 files changed, 126 insertions(+), 120 deletions(-) diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts index 4e71cb1..59c6fab 100644 --- a/src/i18n/ui.ts +++ b/src/i18n/ui.ts @@ -17,7 +17,12 @@ export const ui = { 'site.description': 'Full Stack Developer specializing in React, Node.js, and modern web technologies', 'hero.githubLink': 'GitHub Profile', 'hero.linkedinLink': 'LinkedIn Profile', - 'footer.rights': 'All rights reserved' + 'footer.rights': 'All rights reserved', + 'project.tag.business': 'Business Project', + 'project.tag.opensource': 'Open Source', + 'project.tag.personal': 'Personal Product', + 'project.visit': 'Visit', + 'project.demo': 'Live Demo' // Projects and services content has been inlined into respective page files // to reduce reliance on the translation system and improve maintainability }, @@ -31,7 +36,12 @@ export const ui = { 'site.description': '专注于 React、Node.js 和现代 Web 技术的全栈开发者', 'hero.githubLink': 'GitHub 主页', 'hero.linkedinLink': 'LinkedIn 主页', - 'footer.rights': '版权所有' + 'footer.rights': '版权所有', + 'project.tag.business': '商业项目', + 'project.tag.opensource': '开源项目', + 'project.tag.personal': '个人产品', + 'project.visit': '访问', + 'project.demo': '在线演示' // 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/index.astro b/src/pages/index.astro index 6893eae..5679fec 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -400,9 +400,14 @@ const pageTitle = t('site.title');

-
+
-
+
+ +
+ {t('project.tag.business')} +
+
@@ -424,7 +429,11 @@ const pageTitle = t('site.title');
• - A task management app with real-time collaboration, built using React, Node.js, and MongoDB. + A comprehensive task management application with drag-and-drop functionality. +
+
+ • + Built with React, TypeScript, and Tailwind CSS for modern development.
• @@ -436,38 +445,36 @@ const pageTitle = t('site.title');
- -
- React - Node.js - MongoDB + +
+ React + Node.js + MongoDB
-
+
- - - - View on GitHub - - - + {t('project.visit')} +
-
+
+ +
+ {t('project.tag.opensource')} +
+
@@ -480,7 +487,7 @@ const pageTitle = t('site.title');

- 📱 + 🛒 E-Shop Platform

@@ -489,50 +496,52 @@ const pageTitle = t('site.title');
• - A scalable e-commerce platform with Next.js, Stripe payments, and TailwindCSS. + Modern e-commerce solution with comprehensive features for online retail.
• - Integrated Stripe payment processing for secure transactions. + Built with Next.js, Prisma, and Stripe for seamless payment processing.
• - Advanced product catalog with search, filtering, and recommendation features. + Features shopping cart, payment integration, and admin dashboard. +
+
+ • + Responsive design with optimized performance and SEO capabilities.
- -
- Next.js - Stripe - TailwindCSS + +
+ Next.js + Stripe + TailwindCSS
-
+
- - - - View on GitHub - - - + {t('project.visit')} +
-
+
+ +
+ {t('project.tag.personal')} +
+
@@ -545,7 +554,7 @@ const pageTitle = t('site.title');

- 📱 + 🎨 Portfolio Site

@@ -554,44 +563,37 @@ const pageTitle = t('site.title');
• - My personal portfolio showcasing my work, built with HTML, TailwindCSS, and Alpine.js. + Responsive personal portfolio website showcasing creative work and projects.
• - Modern glassmorphism design with smooth animations and transitions. + Built with Astro, React, and Tailwind CSS for optimal performance.
• - Fully responsive layout optimized for all device sizes. + Features dark mode support and smooth animations for enhanced UX.
- -
- HTML - TailwindCSS - Alpine.js + +
+ HTML + TailwindCSS + Animate
-
+
- - - - View on GitHub - - - + {t('project.visit')} +
diff --git a/src/pages/zh/index.astro b/src/pages/zh/index.astro index eaff2da..46a7602 100644 --- a/src/pages/zh/index.astro +++ b/src/pages/zh/index.astro @@ -399,9 +399,14 @@ const pageTitle = t('site.title');

-
+
-
+
+ +
+ {t('project.tag.business')} +
+
@@ -423,7 +428,7 @@ const pageTitle = t('site.title');
• - 一个功能齐全的任务管理应用程序 + 一个功能完整的任务管理应用程序
• @@ -435,38 +440,36 @@ const pageTitle = t('site.title');
- -
- React - Node.js - MongoDB + +
+ React + Node.js + MongoDB
-
+
- - - - 在 GitHub 上查看 - - - + {t('project.visit')} +
-
+
+ +
+ {t('project.tag.opensource')} +
+
@@ -500,38 +503,36 @@ const pageTitle = t('site.title');
- -
- Next.js - Stripe - TailwindCSS + +
+ Next.js + Stripe + TailwindCSS
-
+
- - - - 在 GitHub 上查看 - - - + {t('project.visit')} +
-
+
+ +
+ {t('project.tag.personal')} +
+
@@ -565,32 +566,25 @@ const pageTitle = t('site.title');
- -
- HTML - TailwindCSS - Alpine.js + +
+ HTML + TailwindCSS + Animate
-
+
- - - - 在 GitHub 上查看 - - - + {t('project.visit')} +