refactor(hire): replace emoji icons with Lucide React components for improved scalability and consistency
This commit is contained in:
zguiyang
@@ -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,53 +15,207 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
|
||||
|
||||
<Layout title={pageTitle}>
|
||||
<GlassHeader lang={lang} client:only="react" />
|
||||
<main class="min-h-screen">
|
||||
<main class="min-h-screen relative overflow-hidden">
|
||||
<!-- 背景装饰 -->
|
||||
<div class="absolute inset-0 -z-10">
|
||||
<div class="absolute left-1/2 top-0 h-[800px] w-[1000px] -translate-x-1/2 -translate-y-1/2 bg-primary/10 blur-[120px]"></div>
|
||||
<div class="absolute right-0 top-1/3 h-[500px] w-[500px] bg-blue-500/5 blur-[100px]"></div>
|
||||
</div>
|
||||
|
||||
<!-- Now Page Hero -->
|
||||
<section class="py-24 relative overflow-hidden">
|
||||
<div class="page-hero-overlay"></div>
|
||||
<section class="pt-32 pb-24 relative overflow-hidden">
|
||||
<div class="page-hero-overlay" aria-hidden="true"></div>
|
||||
|
||||
<Container className="relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<span class="inline-block px-4 py-1 bg-primary/20 text-primary dark:text-primary rounded-full text-sm font-medium mb-4">
|
||||
关于我现在正在做什么
|
||||
</span>
|
||||
<h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
|
||||
现在
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-wider mb-6 animate-fade-in">
|
||||
<span class="relative flex h-2 w-2">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
|
||||
</span>
|
||||
{lang === 'zh' ? '实时状态' : "Live Status"}
|
||||
</div>
|
||||
<h1 class="page-title-gradient text-6xl md:text-8xl font-bold mb-8 tracking-tight">
|
||||
{lang === 'zh' ? '现在' : 'Now'}
|
||||
</h1>
|
||||
<p class="text-lg text-muted-foreground page-content-narrow">
|
||||
持续更新我的现状、正在构建的内容以及合作机会
|
||||
<p class="text-xl md:text-2xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
|
||||
{lang === 'zh'
|
||||
? '关于我现在正在关注的事、正在构建的产品以及我的生活状态。'
|
||||
: 'What I am currently focusing on, the products I am building, and my life status.'}
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Building Section -->
|
||||
<section class="py-16 relative">
|
||||
<!-- Main Content -->
|
||||
<section class="pb-32 relative mt-12 md:mt-24">
|
||||
<Container>
|
||||
<div class="page-content-main">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center">
|
||||
<span class="text-2xl">🔨</span>
|
||||
<div class="max-w-4xl mx-auto space-y-24">
|
||||
<!-- Building Section -->
|
||||
<div class="space-y-10">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center border border-primary/20">
|
||||
<Hammer className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<h2 class="text-3xl md:text-4xl font-bold tracking-tight">
|
||||
{lang === 'zh' ? '正在构建' : 'Building'}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="group relative">
|
||||
<div class="absolute -inset-1 rounded-[2rem] bg-gradient-to-r from-primary/30 to-blue-600/30 opacity-20 blur-xl transition duration-500 group-hover:opacity-40"></div>
|
||||
<div class="page-surface relative p-8 md:p-12 overflow-hidden border-primary/10 rounded-[2rem]">
|
||||
<div class="flex flex-col md:flex-row gap-10 items-start">
|
||||
<div class="w-24 h-24 bg-gradient-to-br from-primary to-blue-600 rounded-2xl flex items-center justify-center flex-shrink-0 shadow-lg shadow-primary/20 group-hover:scale-105 transition-transform duration-500">
|
||||
<Zap className="w-12 h-12 text-white" />
|
||||
</div>
|
||||
<div class="flex-1 space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-3xl font-bold">Elynd</h3>
|
||||
<span class="px-4 py-1.5 bg-green-500/10 text-green-600 dark:text-green-400 rounded-full text-xs font-bold border border-green-500/20 uppercase tracking-wider">Active</span>
|
||||
</div>
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
{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.'}
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-3 pt-2">
|
||||
{['AI Product', 'TypeScript', 'Open Source', 'Astro'].map(tag => (
|
||||
<span class="px-4 py-2 bg-secondary/50 text-secondary-foreground rounded-lg text-sm font-medium border border-border/50">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold">
|
||||
正在构建
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="page-surface p-8">
|
||||
<div class="flex items-start gap-6">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-primary to-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-3xl">⚡</span>
|
||||
<!-- Exploring Section -->
|
||||
<div class="space-y-10">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center border border-blue-500/20">
|
||||
<Telescope className="w-6 h-6 text-blue-500" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold mb-2">Elynd</h3>
|
||||
<p class="text-muted-foreground mb-4">
|
||||
一个开放的 AI 工作空间，让构建者能够更智能地工作。从 AI 第一性原理出发，打造完全开放、可自托管的协作工具。
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-1 bg-primary/20 text-primary dark:text-primary rounded-full text-sm">AI 产品</span>
|
||||
<span class="px-3 py-1 bg-blue-500/20 text-blue-600 dark:text-blue-400 rounded-full text-sm">TypeScript</span>
|
||||
<span class="px-3 py-1 bg-green-500/20 text-green-600 dark:text-green-400 rounded-full text-sm">开源</span>
|
||||
<h2 class="text-3xl md:text-4xl font-bold tracking-tight">
|
||||
{lang === 'zh' ? '正在探索' : 'Exploring'}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-8 md:grid-cols-2">
|
||||
{[
|
||||
{
|
||||
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 => (
|
||||
<div class="page-surface p-8 rounded-3xl hover:translate-y-[-4px] transition-all duration-300 border-border/50 group">
|
||||
<div class="w-12 h-12 bg-muted rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
<item.icon className="w-6 h-6 text-foreground" />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-4">{item.title}</h3>
|
||||
<p class="text-muted-foreground text-base leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shipping Section -->
|
||||
<div class="space-y-10">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 bg-green-500/10 rounded-xl flex items-center justify-center border border-green-500/20">
|
||||
<Rocket className="w-6 h-6 text-green-500" />
|
||||
</div>
|
||||
<h2 class="text-3xl md:text-4xl font-bold tracking-tight">
|
||||
{lang === 'zh' ? '最近发布' : 'Shipping'}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
{[
|
||||
{
|
||||
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 => (
|
||||
<div class="group relative flex items-center gap-6 p-4 rounded-2xl hover:bg-muted/50 transition-all duration-300">
|
||||
<div class={`w-12 h-12 ${item.color} rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform`}>
|
||||
<item.icon className={`w-6 h-6 ${item.iconColor}`} />
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-bold text-lg group-hover:text-primary transition-colors truncate">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p class="text-sm text-muted-foreground line-clamp-1">
|
||||
{item.desc}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-muted-foreground/30 group-hover:text-primary/50 transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Grid: Collaboration & Meta -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 pt-8">
|
||||
<!-- Collaboration Card -->
|
||||
<div class="relative group h-full">
|
||||
<div class="absolute -inset-1 rounded-[2.5rem] bg-gradient-to-br from-yellow-500/20 to-orange-500/20 blur opacity-75"></div>
|
||||
<div class="page-surface relative p-10 border-yellow-500/10 bg-gradient-to-br from-card to-yellow-500/5 rounded-[2.5rem] h-full flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="w-14 h-14 bg-yellow-500/10 rounded-2xl flex items-center justify-center mb-8">
|
||||
<Handshake className="w-8 h-8 text-yellow-600 dark:text-yellow-400" />
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold mb-4">{lang === 'zh' ? '开放合作' : 'Collaborate'}</h3>
|
||||
<p class="text-lg text-muted-foreground mb-8 leading-relaxed">
|
||||
{lang === 'zh'
|
||||
? '始终对有趣的产品想法 and 技术咨询持开放态度。'
|
||||
: "Always open to interesting product ideas and technical consulting."}
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<a href={lang === 'zh' ? '/zh/hire' : '/hire'} class="flex items-center justify-center py-4 rounded-2xl bg-primary text-primary-foreground font-bold text-base hover:scale-[1.02] transition-transform">
|
||||
{lang === 'zh' ? '合作方式' : 'View Options'}
|
||||
</a>
|
||||
<a href="mailto:zhaoguiyang18@gmail.com" class="flex items-center justify-center py-4 rounded-2xl border border-border bg-background/50 text-foreground font-bold text-base hover:bg-muted transition-colors">
|
||||
{lang === 'zh' ? '发送邮件' : 'Email Me'}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Meta/Status Card -->
|
||||
<div class="page-surface p-10 border-border/50 rounded-[2.5rem] flex flex-col items-center justify-center text-center space-y-6">
|
||||
<div class="w-20 h-20 bg-muted rounded-full flex items-center justify-center text-3xl">
|
||||
<MapPin className="w-10 h-10 text-primary" />
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<h3 class="text-2xl font-bold">{lang === 'zh' ? '当前位置' : 'Location'}</h3>
|
||||
<p class="text-muted-foreground">{lang === 'zh' ? '中国 · 杭州' : 'Hangzhou, China'}</p>
|
||||
</div>
|
||||
<div class="pt-4 w-full">
|
||||
<div class="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-muted/50 border border-border/50 mx-auto">
|
||||
<span class="text-xs text-muted-foreground uppercase font-bold tracking-widest border-r border-border/50 pr-3">
|
||||
{lang === 'zh' ? '最后更新' : 'Updated'}
|
||||
</span>
|
||||
<span class="text-sm font-semibold">2025.03.14</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -68,124 +223,6 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Exploring Section -->
|
||||
<section class="py-16 relative page-section-soft">
|
||||
<Container>
|
||||
<div class="page-content-main">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
|
||||
<span class="text-2xl">🔭</span>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold">
|
||||
正在探索
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6">
|
||||
<div class="page-surface p-6">
|
||||
<h3 class="text-lg font-bold mb-3">
|
||||
AI Agents 与工作流自动化
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
研究如何构建能够自主完成复杂任务的 AI Agent，以及如何将 AI 能力融入日常工作流。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="page-surface p-6">
|
||||
<h3 class="text-lg font-bold mb-3">
|
||||
产品导向的开发实践
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
探索从产品角度思考开发，构建真正解决用户问题的产品，而不仅仅是技术实现。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Shipping Section -->
|
||||
<section class="py-16 relative">
|
||||
<Container>
|
||||
<div class="page-content-main">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
|
||||
<span class="text-2xl">🚀</span>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold">
|
||||
最近发布
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="page-surface rounded-xl p-6 flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-xl">✨</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold mb-1">
|
||||
个人网站全新改版
|
||||
</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
全新设计的个人网站，突出 AI 产品构建者的定位
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Open to Collaborate Section -->
|
||||
<section class="py-16 relative bg-gradient-to-br from-blue-900/10 to-blue-900/10 dark:from-blue-900/20 dark:to-blue-900/20">
|
||||
<Container>
|
||||
<div class="page-content-main text-center">
|
||||
<div class="flex items-center justify-center gap-4 mb-8">
|
||||
<div class="w-12 h-12 bg-yellow-500/20 rounded-xl flex items-center justify-center">
|
||||
<span class="text-2xl">🤝</span>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold">
|
||||
开放合作
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="page-surface p-8">
|
||||
<p class="text-lg text-muted-foreground mb-8">
|
||||
我始终对新的合作机会持开放态度。无论你是想要构建产品、寻找技术合伙人，还是需要技术咨询，都可以联系我。
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a
|
||||
href="/zh/hire"
|
||||
class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
|
||||
>
|
||||
<span>💼</span>
|
||||
查看合作方式
|
||||
</a>
|
||||
<a
|
||||
href="mailto:zhaoguiyang18@gmail.com"
|
||||
class="border border-primary text-primary hover:bg-primary hover:text-white px-6 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
|
||||
>
|
||||
<span>📧</span>
|
||||
发送邮件
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Last Updated -->
|
||||
<section class="py-12">
|
||||
<Container>
|
||||
<div class="page-content-main text-center">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
最后更新：
|
||||
<span class="font-medium">2025年3月</span>
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
</main>
|
||||
<Footer lang={lang} client:only="react" />
|
||||
</Layout>
|
||||
|
||||
Reference in New Issue
Block a user