refactor(now): restructure page with result-oriented content

- Replace Doing/Exploring/Shipping with Current Focus, Problems I'm Solving, Recent Outputs, Availability
- Focus on completed results rather than ongoing learning processes
- Add project status badges (Live/Coming Soon)
- Include abstract problem statements showing product thinking
- Add availability section with job preferences and project types
- Update date to auto-generate on each build

src/pages/now.astro

@@ -9,55 +9,122 @@ import { defaultLang } from '@/i18n/ui';
 const lang = (Astro.currentLocale as Lang) || defaultLang;
 const isZh = lang === 'zh';
 
-const doing = isZh
-  ? ['推进工程化案例化的个人站升级', '优化远程协作下的交付流程与文档标准', '持续打磨 AI 协作开发实践']
-  : ['Upgrading this portfolio into an engineering case-study site', 'Improving remote-first delivery workflow and documentation quality', 'Refining practical AI-assisted development workflows'];
+const focuses = [
+  {
+    title: 'Cloud Bookmark Tool',
+    status: 'Live',
+    desc: 'A lightweight, self-deployable tool for developers and information workers with full data control. Supports AI auto-tagging, content recognition, and semantic search.',
+  },
+  {
+    title: 'ELYND English Learning Tool',
+    status: 'Coming Soon',
+    desc: 'An English learning product based on reading context, providing e-books with synchronized audio. Supports instant word/sentence explanation and AI conversation to aid understanding.',
+  },
+];
 
-const exploring = isZh
-  ? ['复杂权限系统的前端边界设计', '大规模业务表单与状态流管理', '更稳定的跨团队异步协作机制']
-  : ['Frontend boundary design for complex permission systems', 'Scalable state management for large business forms', 'More stable async collaboration practices across teams'];
+const problems = [
+  {
+    title: 'The "Understanding Gap" in Language Learning',
+    desc: 'Vocabulary memorization lacks context, original texts are hard to understand, and there\'s no instant feedback—aiming to bridge these comprehension breaks in learning.',
+  },
+  {
+    title: 'Productizing AI Capabilities',
+    desc: 'Not just demo-level showcases, but practical AI integration in real products: tagging, text processing, and conversation.',
+  },
+  {
+    title: 'UX Design for AI-Powered Tools',
+    desc: 'Integrating AI capabilities without adding complexity—keeping tools simple while powerful.',
+  },
+];
 
-const shipping = isZh
-  ? ['工程案例库结构重构', '导航与路由转化路径优化', '双语文案统一与信息层级简化']
-  : ['Refactoring project pages into engineering case studies', 'Optimizing navigation and conversion routes', 'Unifying EN/ZH copy and simplifying information hierarchy'];
+const outputs = [
+  'Cloud Bookmark Tool v1.0 launched',
+  'ELYND coming soon',
+];
+
+const availability = {
+  jobs: 'Remote / Full-stack / AI',
+  projects: 'Freelance / Subcontracting / Independent development',
+  preferences: 'Tool products / AI integration / Web applications',
+};
+
+const today = new Date().toISOString().split('T')[0];
 ---
 
-<Layout title={isZh ? '现在' : 'Now'}>
+<Layout title="Now">
   <GlassHeader lang={lang} client:load transition:persist="header" />
 
   <main class="min-h-screen pt-24 pb-20">
     <Container>
       <section class="page-content-main">
-        <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">{isZh ? '现在' : 'Now'}</h1>
-        <p class="mt-4 text-lg text-muted-foreground">{isZh ? '我当前的工作重点与近期交付。' : 'What I am focusing on right now and what I am shipping recently.'}</p>
+        <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">Now</h1>
+        <p class="mt-4 text-lg text-muted-foreground">What I am working on and what I have shipped.</p>
       </section>
 
-      <section class="page-content-main mt-10 grid gap-6 md:grid-cols-3">
-        <article class="page-surface p-6">
-          <h2 class="text-lg font-bold">{isZh ? '在做什么' : 'Doing'}</h2>
-          <ul class="mt-4 space-y-2 text-sm text-muted-foreground">
-            {doing.map((item) => <li>• {item}</li>)}
-          </ul>
-        </article>
-
-        <article class="page-surface p-6">
-          <h2 class="text-lg font-bold">{isZh ? '在研究什么' : 'Exploring'}</h2>
-          <ul class="mt-4 space-y-2 text-sm text-muted-foreground">
-            {exploring.map((item) => <li>• {item}</li>)}
-          </ul>
-        </article>
-
-        <article class="page-surface p-6">
-          <h2 class="text-lg font-bold">{isZh ? '最近交付' : 'Shipping'}</h2>
-          <ul class="mt-4 space-y-2 text-sm text-muted-foreground">
-            {shipping.map((item) => <li>• {item}</li>)}
-          </ul>
-        </article>
+      <!-- Current Focus -->
+      <section class="page-content-main mt-10">
+        <h2 class="text-xl font-bold">Current Focus</h2>
+        <div class="mt-4 space-y-4">
+          {focuses.map((item) => (
+            <article class="page-surface p-5">
+              <div class="flex items-center gap-3">
+                <h3 class="text-base font-bold">{item.title}</h3>
+                <span class="rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary">{item.status}</span>
+              </div>
+              <p class="mt-2 text-sm text-muted-foreground">{item.desc}</p>
+            </article>
+          ))}
+        </div>
       </section>
 
-      <section class="page-content-main mt-8 page-surface p-6">
+      <!-- Problems I'm Solving -->
+      <section class="page-content-main mt-8">
+        <h2 class="text-xl font-bold">Problems I'm Solving</h2>
+        <div class="mt-4 space-y-3">
+          {problems.map((item) => (
+            <article class="rounded-lg border border-border/70 p-4">
+              <h3 class="text-sm font-semibold">{item.title}</h3>
+              <p class="mt-1.5 text-sm text-muted-foreground">{item.desc}</p>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <!-- Recent Outputs -->
+      <section class="page-content-main mt-8">
+        <h2 class="text-xl font-bold">Recent Outputs</h2>
+        <ul class="mt-4 space-y-2">
+          {outputs.map((item) => (
+            <li class="flex items-center gap-2 text-sm">
+              <span class="h-1.5 w-1.5 rounded-full bg-accent"></span>
+              {item}
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      <!-- Availability -->
+      <section class="page-content-main mt-8 page-surface p-5">
+        <h2 class="text-xl font-bold">Availability</h2>
+        <div class="mt-4 grid gap-3 text-sm md:grid-cols-3">
+          <div>
+            <span class="font-medium">Open to: </span>
+            <span class="text-muted-foreground">{availability.jobs}</span>
+          </div>
+          <div>
+            <span class="font-medium">Projects: </span>
+            <span class="text-muted-foreground">{availability.projects}</span>
+          </div>
+          <div>
+            <span class="font-medium">Preferred: </span>
+            <span class="text-muted-foreground">{availability.preferences}</span>
+          </div>
+        </div>
+      </section>
+
+      <section class="page-content-main mt-8 page-surface p-4">
         <p class="text-sm text-muted-foreground">
-          {isZh ? '最后更新：2026-03-16' : 'Last updated: 2026-03-16'}
+          Last updated: {today}
         </p>
       </section>
     </Container>

src/pages/zh/now.astro

@@ -9,55 +9,122 @@ import { defaultLang } from '@/i18n/ui';
 const lang = (Astro.currentLocale as Lang) || defaultLang;
 const isZh = lang === 'zh';
 
-const doing = isZh
-  ? ['推进工程化案例化的个人站升级', '优化远程协作下的交付流程与文档标准', '持续打磨 AI 协作开发实践']
-  : ['Upgrading this portfolio into an engineering case-study site', 'Improving remote-first delivery workflow and documentation quality', 'Refining practical AI-assisted development workflows'];
+const focuses = [
+  {
+    title: '云端书签工具',
+    status: '已上线',
+    desc: '面向开发者与信息工作者的轻量级自部署工具，数据完全可控。支持 AI 自动标签、内容识别与语义搜索。',
+  },
+  {
+    title: 'ELYND 英语学习工具',
+    status: '即将上线',
+    desc: '基于阅读场景的英语学习产品，提供电子书与同步音频。支持点击单词/句子即时解释，AI 对话辅助理解。',
+  },
+];
 
-const exploring = isZh
-  ? ['复杂权限系统的前端边界设计', '大规模业务表单与状态流管理', '更稳定的跨团队异步协作机制']
-  : ['Frontend boundary design for complex permission systems', 'Scalable state management for large business forms', 'More stable async collaboration practices across teams'];
+const problems = [
+  {
+    title: '英语学习中的「理解断点」问题',
+    desc: '背单词脱离语境、阅读原文有障碍、遇到问题缺乏即时反馈——想解决学习过程中的理解断裂。',
+  },
+  {
+    title: 'AI 能力的产品化落地',
+    desc: '不只是 Demo 层面的展示，而是在真实产品中接入 AI 标签、文本处理、对话能力。',
+  },
+  {
+    title: '工具型 AI 产品的用户体验',
+    desc: '如何在保持工具简洁性的同时，融入 AI 能力而不造成负担。',
+  },
+];
 
-const shipping = isZh
-  ? ['工程案例库结构重构', '导航与路由转化路径优化', '双语文案统一与信息层级简化']
-  : ['Refactoring project pages into engineering case studies', 'Optimizing navigation and conversion routes', 'Unifying EN/ZH copy and simplifying information hierarchy'];
+const outputs = [
+  '云端书签工具 v1.0 上线',
+  'ELYND 即将发布',
+];
+
+const availability = {
+  jobs: '远程 / 全栈 / AI 方向',
+  projects: '外包 / 分包 / 独立项目开发',
+  preferences: '工具类产品 / AI 能力接入 / Web 应用',
+};
+
+const today = new Date().toISOString().split('T')[0];
 ---
 
-<Layout title={isZh ? '现在' : 'Now'}>
+<Layout title="现在">
   <GlassHeader lang={lang} client:load transition:persist="header" />
 
   <main class="min-h-screen pt-24 pb-20">
     <Container>
       <section class="page-content-main">
-        <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">{isZh ? '现在' : 'Now'}</h1>
-        <p class="mt-4 text-lg text-muted-foreground">{isZh ? '我当前的工作重点与近期交付。' : 'What I am focusing on right now and what I am shipping recently.'}</p>
+        <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">现在</h1>
+        <p class="mt-4 text-lg text-muted-foreground">我当前的工作状态与产出。</p>
       </section>
 
-      <section class="page-content-main mt-10 grid gap-6 md:grid-cols-3">
-        <article class="page-surface p-6">
-          <h2 class="text-lg font-bold">{isZh ? '在做什么' : 'Doing'}</h2>
-          <ul class="mt-4 space-y-2 text-sm text-muted-foreground">
-            {doing.map((item) => <li>• {item}</li>)}
-          </ul>
-        </article>
-
-        <article class="page-surface p-6">
-          <h2 class="text-lg font-bold">{isZh ? '在研究什么' : 'Exploring'}</h2>
-          <ul class="mt-4 space-y-2 text-sm text-muted-foreground">
-            {exploring.map((item) => <li>• {item}</li>)}
-          </ul>
-        </article>
-
-        <article class="page-surface p-6">
-          <h2 class="text-lg font-bold">{isZh ? '最近交付' : 'Shipping'}</h2>
-          <ul class="mt-4 space-y-2 text-sm text-muted-foreground">
-            {shipping.map((item) => <li>• {item}</li>)}
-          </ul>
-        </article>
+      <!-- 当前主线 -->
+      <section class="page-content-main mt-10">
+        <h2 class="text-xl font-bold">当前主线</h2>
+        <div class="mt-4 space-y-4">
+          {focuses.map((item) => (
+            <article class="page-surface p-5">
+              <div class="flex items-center gap-3">
+                <h3 class="text-base font-bold">{item.title}</h3>
+                <span class="rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary">{item.status}</span>
+              </div>
+              <p class="mt-2 text-sm text-muted-foreground">{item.desc}</p>
+            </article>
+          ))}
+        </div>
       </section>
 
-      <section class="page-content-main mt-8 page-surface p-6">
+      <!-- 当前关注的问题 -->
+      <section class="page-content-main mt-8">
+        <h2 class="text-xl font-bold">当前关注的问题</h2>
+        <div class="mt-4 space-y-3">
+          {problems.map((item) => (
+            <article class="rounded-lg border border-border/70 p-4">
+              <h3 class="text-sm font-semibold">{item.title}</h3>
+              <p class="mt-1.5 text-sm text-muted-foreground">{item.desc}</p>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <!-- 近期产出 -->
+      <section class="page-content-main mt-8">
+        <h2 class="text-xl font-bold">近期产出</h2>
+        <ul class="mt-4 space-y-2">
+          {outputs.map((item) => (
+            <li class="flex items-center gap-2 text-sm">
+              <span class="h-1.5 w-1.5 rounded-full bg-accent"></span>
+              {item}
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      <!-- 当前状态 -->
+      <section class="page-content-main mt-8 page-surface p-5">
+        <h2 class="text-xl font-bold">当前状态</h2>
+        <div class="mt-4 grid gap-3 text-sm md:grid-cols-3">
+          <div>
+            <span class="font-medium">求职：</span>
+            <span class="text-muted-foreground">{availability.jobs}</span>
+          </div>
+          <div>
+            <span class="font-medium">接单：</span>
+            <span class="text-muted-foreground">{availability.projects}</span>
+          </div>
+          <div>
+            <span class="font-medium">偏好：</span>
+            <span class="text-muted-foreground">{availability.preferences}</span>
+          </div>
+        </div>
+      </section>
+
+      <section class="page-content-main mt-8 page-surface p-4">
         <p class="text-sm text-muted-foreground">
-          {isZh ? '最后更新：2026-03-16' : 'Last updated: 2026-03-16'}
+          最后更新：{today}
         </p>
       </section>
     </Container>