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

refactor(i18n): restructure translation system with nested objects and proxy

Browse Source 
feat(data): add projects and services data structure for dynamic rendering
refactor(pages): replace hardcoded content with dynamic data-driven components
This commit is contained in:
joyzhao
2025-06-19 10:52:05 +08:00
parent c1f240d007
commit 5b6b9f5d58
7 changed files with 446 additions and 541 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
src/lib/data.ts
View File

@@ -1,8 +1,202 @@
export const personalInfo = {
name: "Joy Zhao",
name: "Guiyang Zhao",
location: "Shanghai, China",
avatar:"https://avatars.githubusercontent.com/u/24975063?v=4",
email: "zhaoguiyang18@gmail.com",
github: "https://github.com/zguiyang",
linkedin: "https://linkedin.com/in/zhaoguiyang"
avatar: "/images/avatar.jpg",
email: "zhaoguiyang@gmail.com",
github: "https://github.com/zhaoguiyang",
linkedin: "https://linkedin.com/in/zhaoguiyang",
};
export const projects = {
en: [
{
id: "taskify",
tag: "business",
title: "Taskify App",
icon: "📱",
color: "purple",
image: {
bg: "from-purple-500/20 to-purple-600/20",
hover: "from-purple-500/20 to-purple-600/20",
text: "text-purple-400",
},
description: [
"A comprehensive task management application with drag-and-drop functionality.",
"Built with React, TypeScript, and Tailwind CSS using modern development approaches.",
"Real-time collaboration through WebSocket integration for instant updates.",
"Advanced task filtering, sorting, and project management capabilities.",
],
tech: ["React", "Node.js", "MongoDB"],
link: "#",
},
{
id: "eshop",
tag: "ecommerce",
title: "E-Shop Platform",
icon: "🛒",
color: "green",
image: {
bg: "from-green-500/20 to-green-600/20",
hover: "from-green-500/20 to-green-600/20",
text: "text-green-400",
},
description: [
"Scalable e-commerce platform built with Next.js, Stripe payments, and TailwindCSS.",
"Mobile-first responsive design for optimal user experience across devices.",
"Integrated payment processing with Stripe for secure transactions.",
"Admin dashboard for inventory management and order processing.",
],
tech: ["Next.js", "Stripe", "TailwindCSS"],
link: "#",
},
{
id: "portfolio",
tag: "portfolio",
title: "Portfolio Site",
icon: "🌐",
color: "purple",
image: {
bg: "from-purple-500/20 to-purple-600/20",
hover: "from-purple-500/20 to-purple-600/20",
text: "text-purple-400",
},
description: [
"Personal portfolio showcasing my work, built with HTML, TailwindCSS, and Alpine.js.",
"Responsive design with dark mode support and smooth animations.",
"Optimized for performance with minimal JavaScript and efficient CSS.",
"Integrated blog section with markdown support for content management.",
],
tech: ["HTML", "TailwindCSS", "Alpine.js"],
link: "#",
},
],
zh: [
{
id: "taskify",
tag: "business",
title: "Taskify 应用",
icon: "📱",
color: "purple",
image: {
bg: "from-purple-500/20 to-purple-600/20",
hover: "from-purple-500/20 to-purple-600/20",
text: "text-purple-400",
},
description: [
"一个全面的任务管理应用，具有拖放功能。",
"使用React、TypeScript和Tailwind CSS构建，采用现代开发方法。",
"通过WebSocket集成实现实时协作功能，实现即时更新。",
"高级任务筛选、排序和项目管理功能。",
],
tech: ["React", "Node.js", "MongoDB"],
link: "#",
},
{
id: "eshop",
tag: "ecommerce",
title: "电商平台",
icon: "🛒",
color: "green",
image: {
bg: "from-green-500/20 to-green-600/20",
hover: "from-green-500/20 to-green-600/20",
text: "text-green-400",
},
description: [
"使用Next.js、Stripe支付和TailwindCSS构建的可扩展电子商务平台。",
"采用移动优先的响应式设计，提供最佳用户体验。",
"集成Stripe支付处理，确保交易安全。",
"管理员仪表板，用于库存管理和订单处理。",
],
tech: ["Next.js", "Stripe", "TailwindCSS"],
link: "#",
},
{
id: "portfolio",
tag: "portfolio",
title: "个人作品集网站",
icon: "🌐",
color: "purple",
image: {
bg: "from-purple-500/20 to-purple-600/20",
hover: "from-purple-500/20 to-purple-600/20",
text: "text-purple-400",
},
description: [
"展示我的作品的个人作品集，使用HTML、TailwindCSS和Alpine.js构建。",
"响应式设计，支持暗黑模式和平滑动画。",
"通过最小化JavaScript和高效CSS优化性能。",
"集成博客部分，支持markdown内容管理。",
],
tech: ["HTML", "TailwindCSS", "Alpine.js"],
link: "#",
},
],
};
export const services = {
en: [
{
title: "Outsourcing Projects",
icon: {
svg: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>`,
gradient: "from-blue-500 to-cyan-500",
},
items: [
"Provide outsourcing project services for overseas clients",
"Project packaging, can provide services in different packages",
"Use popular technologies: React, nest.js, next.js, etc.",
"Project delivery, provide three months of free maintenance",
"Regardless of project size, can provide services",
],
color: "blue",
},
{
title: "Bug Fixes",
icon: {
svg: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>`,
gradient: "from-red-500 to-pink-500",
},
items: [
"Quickly locate and fix website issues, able to quickly locate and solve problems",
"Help you solve any problems encountered in the project, Bug, functional optimization issues",
"Application of Vue, React, Node and other technologies",
"Frontend automation, deployment, monitoring, automation, etc.",
"Only limited to Node.js projects",
],
color: "red",
},
],
zh: [
{
title: "外包项目",
icon: {
svg: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>`,
gradient: "from-blue-500 to-cyan-500",
},
items: [
"为海外客户提供外包项目服务",
"项目打包，可以提供不同套餐的服务",
"使用流行技术：React、nest.js、next.js 等",
"项目交付，提供三个月免费维护",
"不论项目大小，都可以提供服务",
],
color: "blue",
},
{
title: "Bug 修复",
icon: {
svg: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>`,
gradient: "from-red-500 to-pink-500",
},
items: [
"快速定位和修复网站问题，能够快速定位和解决问题",
"帮助您解决项目中遇到的任何问题，Bug、功能优化问题",
"Vue、React、Node 等技术的应用",
"前端自动化、部署、监控、自动化等",
"仅限于 Node.js 项目",
],
color: "red",
},
],
};