From 8ff4074c1b19cee7dd650da1fe54be664f898008 Mon Sep 17 00:00:00 2001 From: zguiyang Date: Sat, 14 Mar 2026 12:00:42 +0800 Subject: [PATCH] refactor(hire): replace emoji icons with Lucide React components for improved scalability and consistency --- src/components/ProjectCard.astro | 12 +- src/layouts/AboutLayout.astro | 16 +- src/lib/data/projects.ts | 18 +- src/pages/about.mdx | 4 +- src/pages/hire.astro | 37 ++-- src/pages/now.astro | 347 +++++++++++++++++-------------- src/pages/zh/about.mdx | 4 +- src/pages/zh/hire.astro | 35 ++-- src/pages/zh/now.astro | 339 ++++++++++++++++-------------- 9 files changed, 445 insertions(+), 367 deletions(-) diff --git a/src/components/ProjectCard.astro b/src/components/ProjectCard.astro index acb266d..0e50077 100644 --- a/src/components/ProjectCard.astro +++ b/src/components/ProjectCard.astro @@ -1,6 +1,7 @@ --- import { useTranslations } from "@/i18n/utils"; import type { Lang } from "@/types/i18n"; +import * as LucideIcons from "lucide-react"; interface Props { project: { @@ -31,6 +32,9 @@ interface Props { const { project, lang, showStatus = false } = Astro.props; const t = useTranslations(lang); +// 渲染 Lucide 图标的逻辑 +const IconComponent = (LucideIcons as any)[project.icon]; + const statusClassMap = { building: "bg-amber-500/15 text-amber-700 dark:text-amber-300 border-amber-500/30", completed: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 border-emerald-500/30", @@ -49,7 +53,13 @@ const statusColor = statusClassMap[project.status as keyof typeof statusClassMap
- {project.icon} + {IconComponent ? ( +
+ +
+ ) : ( + {project.icon} + )}
diff --git a/src/layouts/AboutLayout.astro b/src/layouts/AboutLayout.astro index e82dd94..05bda82 100644 --- a/src/layouts/AboutLayout.astro +++ b/src/layouts/AboutLayout.astro @@ -6,6 +6,7 @@ import { defaultLang } from '@/i18n/ui'; import GlassHeader from '@/components/GlassHeader'; import Footer from '@/components/Footer'; import Container from "../components/ui/Container.astro"; +import { Sparkles, FileText } from "lucide-react"; // Use Astro's MarkdownLayoutProps for proper type safety export type Props = MarkdownLayoutProps; @@ -37,14 +38,17 @@ const lang = Astro.currentLocale as Lang || defaultLang;
-

- ✨ {title} +

+ {title}

{description && ( -

- 📝 {description} -

+
+ +

+ {description} +

+
)}
@@ -78,7 +82,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
- + diff --git a/src/lib/data/projects.ts b/src/lib/data/projects.ts index 1accf61..c1a7882 100644 --- a/src/lib/data/projects.ts +++ b/src/lib/data/projects.ts @@ -9,7 +9,7 @@ export const projects = { role: "Founder & Lead Developer", impact: "Building an open AI workspace for builders", title: "Elynd", - icon: "⚡", + icon: "Zap", color: "purple", image: { bg: "from-purple-500/20 to-blue-500/20", @@ -37,7 +37,7 @@ export const projects = { impact: "Helped startup launch MVP in 3 months", title: "Taskify App", tag: "business", - icon: "📱", + icon: "Smartphone", color: "purple", image: { bg: "from-purple-500/20 to-purple-600/20", @@ -61,7 +61,7 @@ export const projects = { impact: "E-commerce platform handling $100K+ monthly revenue", title: "E-Shop Platform", tag: "business", - icon: "🛒", + icon: "ShoppingCart", color: "green", image: { bg: "from-green-500/20 to-green-600/20", @@ -85,7 +85,7 @@ export const projects = { impact: "Personal brand and portfolio showcasing", title: "Portfolio Site", tag: "portfolio", - icon: "🌐", + icon: "Globe", color: "purple", image: { bg: "from-purple-500/20 to-purple-600/20", @@ -111,7 +111,7 @@ export const projects = { role: "创始人 & 首席开发者", impact: "构建面向构建者的开放 AI 工作空间", title: "Elynd", - icon: "⚡", + icon: "Zap", color: "purple", image: { bg: "from-purple-500/20 to-blue-500/20", @@ -139,7 +139,7 @@ export const projects = { impact: "帮助创业公司在3个月内推出 MVP", title: "Taskify 应用", tag: "business", - icon: "📱", + icon: "Smartphone", color: "purple", image: { bg: "from-purple-500/20 to-purple-600/20", @@ -163,7 +163,7 @@ export const projects = { impact: "电商平台月营收超过 10 万美元", title: "电商平台", tag: "business", - icon: "🛒", + icon: "ShoppingCart", color: "green", image: { bg: "from-green-500/20 to-green-600/20", @@ -187,7 +187,7 @@ export const projects = { impact: "个人品牌和作品集展示", title: "个人作品集网站", tag: "portfolio", - icon: "🌐", + icon: "Globe", color: "purple", image: { bg: "from-purple-500/20 to-purple-600/20", @@ -204,4 +204,4 @@ export const projects = { link: "#", }, ], -}; \ No newline at end of file +}; diff --git a/src/pages/about.mdx b/src/pages/about.mdx index 61c9e93..e658d20 100644 --- a/src/pages/about.mdx +++ b/src/pages/about.mdx @@ -6,7 +6,7 @@ layout: "../layouts/AboutLayout.astro" import HighlightBox from '../components/markdown/HighlightBox.astro'; -# Joy Zhao 👨‍💻 +# Joy Zhao I'm a TypeScript Full Stack Engineer who loves development, technology, and exploring new possibilities. I enjoy bringing digital projects to life. 🚀 @@ -68,4 +68,4 @@ Since everyone's time is valuable, please add a note when contacting me, such as - **QQ**: 2770723534 - **WeChat**: JoyCodeing - \ No newline at end of file + diff --git a/src/pages/hire.astro b/src/pages/hire.astro index 8dca36e..7a9e1cd 100644 --- a/src/pages/hire.astro +++ b/src/pages/hire.astro @@ -4,6 +4,7 @@ import GlassHeader from "@/components/GlassHeader"; import Footer from "@/components/Footer"; import Container from "@/components/ui/Container.astro"; import { useTranslations } from "@/i18n/utils"; +import { Users, Wrench, Lightbulb, Handshake, CircleDollarSign, Clock, Target, Check, Calendar, Mail, Radio, Zap, Globe, Smartphone, ShoppingCart, Layout as LayoutIcon, ClipboardList } from "lucide-react"; import type { Lang } from "@/types/i18n"; import { defaultLang } from "@/i18n/ui"; @@ -42,7 +43,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
- 👥 +

{lang === 'zh' ? '我与谁合作' : 'Who I Work With'} @@ -104,7 +105,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
- 🛠️ +

{lang === 'zh' ? '我能构建什么' : 'What I Build'} @@ -115,7 +116,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
- ⚡ +

AI 产品与应用

@@ -131,7 +132,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
- 🌐 +

Web 应用

@@ -147,7 +148,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
- 📱 +

全栈产品

@@ -170,7 +171,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
- 📋 +

{lang === 'zh' ? '合作模式' : 'Engagement Models'} @@ -180,7 +181,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
- 🤝 +

{lang === 'zh' ? '技术合伙人' : 'Technical Co-founder'} @@ -194,7 +195,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
- 💰 +

{lang === 'zh' ? '项目制' : 'Project-based'} @@ -208,7 +209,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
- ⏰ +

{lang === 'zh' ? '咨询/顾问' : 'Consulting'} @@ -230,7 +231,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
- 🎯 +

{lang === 'zh' ? '工作方式' : 'Delivery Style'} @@ -240,7 +241,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
  • - ✓ +
    {lang === 'zh' ? '敏捷迭代' : 'Agile Iteration'} @@ -253,7 +254,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
  • - ✓ +
    {lang === 'zh' ? '透明沟通' : 'Transparent Communication'} @@ -266,7 +267,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
  • - ✓ +
    {lang === 'zh' ? '代码质量' : 'Code Quality'} @@ -279,14 +280,14 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
  • - ✓ +
    {lang === 'zh' ? '产品思维' : 'Product Thinking'}

    {lang === 'zh' - ? '不只是写代码，还思考产品价值，用户体验和业务目标' + ? '不只是写代码，还思考产品价值，用户体验 and 业务目标' : 'Not just writing code, but also thinking about product value, user experience, and business goals'}

    @@ -303,7 +304,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
    - 📅 +

    {lang === 'zh' ? '当前可用性' : 'Availability'} @@ -355,14 +356,14 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me'; href="mailto:zhaoguiyang18@gmail.com" class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2" > - 📧 + {lang === 'zh' ? '发送邮件' : 'Send Email'} - 📡 + {lang === 'zh' ? '了解更多关于我' : 'Learn More About Me'}

    diff --git a/src/pages/now.astro b/src/pages/now.astro index 9ef1d35..3c61467 100644 --- a/src/pages/now.astro +++ b/src/pages/now.astro @@ -4,6 +4,7 @@ import GlassHeader from "@/components/GlassHeader"; import Footer from "@/components/Footer"; import Container from "@/components/ui/Container.astro"; import { useTranslations } from "@/i18n/utils"; +import { Hammer, Zap, Telescope, Bot, Target, Rocket, Sparkles, MessageSquare, Handshake, MapPin } from "lucide-react"; import type { Lang } from "@/types/i18n"; import { defaultLang } from "@/i18n/ui"; @@ -14,57 +15,207 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now'; -
    +
    + +
    +
    +
    +
    + -
    -
    +
    + -
    - - {lang === 'zh' ? '关于我现在正在做什么' : "What's happening now"} - -

    +
    +
    + + + + + {lang === 'zh' ? '实时状态' : "Live Status"} +
    +

    {lang === 'zh' ? '现在' : 'Now'}

    -

    +

    {lang === 'zh' - ? '持续更新我的现状、正在构建的内容以及合作机会' - : 'Continuously updating my current status, what I am building, and collaboration opportunities'} + ? '关于我现在正在关注的事、正在构建的产品以及我的生活状态。' + : 'What I am currently focusing on, the products I am building, and my life status.'}

    - -
    + +
    -
    -
    -
    - 🔨 +
    + +
    +
    +
    + +
    +

    + {lang === 'zh' ? '正在构建' : 'Building'} +

    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +

    Elynd

    + Active +
    +

    + {lang === 'zh' + ? '一个开放的 AI 工作空间，让构建者能够更智能地工作。从 AI 第一性原理出发，打造完全开放、可自托管的协作工具。' + : 'An open AI workspace for builders to work smarter. Built from first principles of AI, creating fully open, self-hostable collaboration tools.'} +

    +
    + {['AI Product', 'TypeScript', 'Open Source', 'Astro'].map(tag => ( + {tag} + ))} +
    +
    +
    +
    -

    - {lang === 'zh' ? '正在构建' : 'Building'} -

    -
    -
    -
    - ⚡ + +
    +
    +
    +
    -
    -

    Elynd

    -

    - {lang === 'zh' - ? '一个开放的 AI 工作空间，让构建者能够更智能地工作。从 AI 第一性原理出发，打造完全开放、可自托管的协作工具。' - : 'An open AI workspace for builders to work smarter. Built from first principles of AI, creating fully open, self-hostable collaboration tools.'} -

    -
    - AI Product - TypeScript - Open Source +

    + {lang === 'zh' ? '正在探索' : 'Exploring'} +

    +
    + +
    + {[ + { + title: lang === 'zh' ? 'AI Agents 与工作流自动化' : 'AI Agents & Workflow Automation', + desc: lang === 'zh' ? '研究如何构建能够自主完成复杂任务的 AI Agent，以及如何将 AI 能力融入日常工作流。' : 'Researching how to build AI Agents that can autonomously complete complex tasks, and how to integrate AI capabilities into daily workflows.', + icon: Bot + }, + { + title: lang === 'zh' ? '产品导向的开发实践' : 'Product-Led Development Practices', + desc: lang === 'zh' ? '探索从产品角度思考开发，构建真正解决用户问题的产品，而不仅仅是技术实现。' : 'Exploring product thinking in development, building products that truly solve user problems, not just technical implementations.', + icon: Target + } + ].map(item => ( +
    +
    + +
    +

    {item.title}

    +

    {item.desc}

    +
    + ))} +
    +
    + + +
    +
    +
    + +
    +

    + {lang === 'zh' ? '最近发布' : 'Shipping'} +

    +
    + +
    + {[ + { + title: lang === 'zh' ? '个人网站全新改版' : 'Portfolio Redesign', + desc: lang === 'zh' ? '基于 Astro 5 和 Tailwind 4 的高性能双语站点。' : 'High-performance bilingual site built with Astro 5 & Tailwind 4.', + icon: Sparkles, + color: 'bg-green-500/10', + iconColor: 'text-green-500' + }, + { + title: lang === 'zh' ? 'DeepSeek 满血版接入' : 'DeepSeek Full Access', + desc: lang === 'zh' ? '在本地工作流中深度整合 DeepSeek-V3 提升效率。' : 'Deep integration of DeepSeek-V3 in local workflows for efficiency.', + icon: MessageSquare, + color: 'bg-blue-500/10', + iconColor: 'text-blue-500' + } + ].map(item => ( +
    +
    + +
    +
    +

    + {item.title} +

    +

    + {item.desc} +

    +
    +
    + +
    +
    + ))} +
    +
    + + +
    + +
    +
    +
    +
    +
    + +
    +

    {lang === 'zh' ? '开放合作' : 'Collaborate'}

    +

    + {lang === 'zh' + ? '始终对有趣的产品想法和技术咨询持开放态度。' + : "Always open to interesting product ideas and technical consulting."} +

    +
    +
    + + {lang === 'zh' ? '合作方式' : 'View Options'} + + + {lang === 'zh' ? '发送邮件' : 'Email Me'} + +
    +
    +
    + + +
    +
    + +
    +
    +

    {lang === 'zh' ? '当前位置' : 'Location'}

    +

    {lang === 'zh' ? '中国 · 杭州' : 'Hangzhou, China'}

    +
    +
    +
    + + {lang === 'zh' ? '最后更新' : 'Updated'} + + 2025.03.14
    @@ -72,132 +223,6 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
    - - -
    - -
    -
    -
    - 🔭 -
    -

    - {lang === 'zh' ? '正在探索' : 'Exploring'} -

    -
    - -
    -
    -

    - {lang === 'zh' ? 'AI Agents 与工作流自动化' : 'AI Agents & Workflow Automation'} -

    -

    - {lang === 'zh' - ? '研究如何构建能够自主完成复杂任务的 AI Agent，以及如何将 AI 能力融入日常工作流。' - : 'Researching how to build AI Agents that can autonomously complete complex tasks, and how to integrate AI capabilities into daily workflows.'} -

    -
    - -
    -

    - {lang === 'zh' ? '产品导向的开发实践' : 'Product-Led Development Practices'} -

    -

    - {lang === 'zh' - ? '探索从产品角度思考开发，构建真正解决用户问题的产品，而不仅仅是技术实现。' - : 'Exploring product thinking in development, building products that truly solve user problems, not just technical implementations.'} -

    -
    -
    -
    -     -
    - - -
    - -
    -
    -
    - 🚀 -
    -

    - {lang === 'zh' ? '最近发布' : 'Shipping'} -

    -
    - -
    -
    -
    - ✨ -
    -
    -

    - {lang === 'zh' ? '个人网站全新改版' : 'Portfolio Website Redesign'} -

    -

    - {lang === 'zh' - ? '全新设计的个人网站，突出 AI 产品构建者的定位' - : 'Redesigned portfolio with focus on AI product builder positioning'} -

    -
    -
    -
    -
    -     -
    - - -
    - -
    -
    -
    - 🤝 -
    -

    - {lang === 'zh' ? '开放合作' : 'Open to Collaborate'} -

    -
    - -
    -

    - {lang === 'zh' - ? '我始终对新的合作机会持开放态度。无论你是想要构建产品、寻找技术合伙人，还是需要技术咨询，都可以联系我。' - : "I'm always open to new collaboration opportunities. Whether you're looking to build a product, seeking a technical co-founder, or need technical consulting, feel free to reach out."} -

    -
    - - 💼 - {lang === 'zh' ? '查看合作方式' : 'View Collaboration Options'} - - - 📧 - {lang === 'zh' ? '发送邮件' : 'Send Email'} - -
    -
    -
    -     -
    - - -
    - -
    -

    - {lang === 'zh' ? '最后更新：' : 'Last updated: '} - 2025年3月 -

    -
    -     -