feat(portfolio): redesign site as opportunity gateway
- add now/hire pages and update IA/navigation - feature Elynd in projects and homepage messaging - refresh services/blog/brand copy for AI product positioning - reduce hydration overhead by using Astro Container - remove Google Fonts external dependency and use local fallback stack
This commit is contained in:
zguiyang
191
src/pages/zh/now.astro
Normal file
191
src/pages/zh/now.astro
Normal file
@@ -0,0 +1,191 @@
|
||||
---
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import GlassHeader from "@/components/GlassHeader";
|
||||
import Footer from "@/components/Footer";
|
||||
import Container from "@/components/ui/Container.astro";
|
||||
import { useTranslations } from "@/i18n/utils";
|
||||
import type { Lang } from "@/types/i18n";
|
||||
import { defaultLang } from "@/i18n/ui";
|
||||
|
||||
const lang = Astro.currentLocale as Lang || defaultLang;
|
||||
const t = useTranslations(lang);
|
||||
const pageTitle = lang === 'zh' ? '现在' : 'Now';
|
||||
---
|
||||
|
||||
<Layout title={pageTitle}>
|
||||
<GlassHeader lang={lang} client:only="react" />
|
||||
<main class="min-h-screen">
|
||||
<!-- Now Page Hero -->
|
||||
<section class="py-24 relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-blue-900/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-blue-900/30"></div>
|
||||
|
||||
<Container className="relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<span class="inline-block px-4 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm font-medium mb-4">
|
||||
关于我现在正在做什么
|
||||
</span>
|
||||
<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">
|
||||
现在
|
||||
</h1>
|
||||
<p class="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
持续更新我的现状、正在构建的内容以及合作机会
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Building Section -->
|
||||
<section class="py-16 relative">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-12 h-12 bg-purple-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="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/20 p-8">
|
||||
<div class="flex items-start gap-6">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-600 to-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-3xl">⚡</span>
|
||||
</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-purple-500/20 text-purple-600 dark:text-purple-400 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Exploring Section -->
|
||||
<section class="py-16 relative bg-white/5 dark:bg-gray-900/50">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<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="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-blue-500/20 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="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-blue-500/20 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="max-w-4xl mx-auto">
|
||||
<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="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl border border-green-500/20 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-purple-900/10 to-blue-900/10 dark:from-purple-900/20 dark:to-blue-900/20">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto 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="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-yellow-500/20 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-purple-500 hover:bg-purple-600 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-purple-500 text-purple-500 hover:bg-purple-500 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="max-w-4xl mx-auto 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