feat(site): refocus portfolio for personal brand and AI full-stack profile

src/pages/about.astro

@@ -3,33 +3,21 @@ import Layout from '@/layouts/Layout.astro';
 import GlassHeader from '@/components/GlassHeader';
 import Footer from '@/components/Footer';
 import Container from '@/components/ui/Container.astro';
-import { personalInfo, uses, contactMethods } from '@/lib/data';
+import ContactCard from '@/components/ContactCard.astro';
+import {
+  personalInfo,
+  uses,
+  aboutNarrative,
+  aboutCapabilities,
+  aboutPrinciples,
+  brandTimeline,
+} from '@/lib/data';
 import type { Lang } from '@/types/i18n';
 import { defaultLang } from '@/i18n/ui';
 
 const lang = (Astro.currentLocale as Lang) || defaultLang;
 const isZh = lang === 'zh';
 const prefix = isZh ? '/zh' : '';
-
-const focusAreas = isZh
-  ? ['前端架构设计与模块治理', '大型企业应用工程化交付', '金融与区块链系统前端建设', 'AI 协作开发流程实践']
-  : ['Frontend architecture and module governance', 'Large-scale enterprise application delivery', 'Financial and blockchain system engineering', 'AI-assisted development workflow practices'];
-
-const experienceNotes = isZh
-  ? [
-      '8 年专业开发经验，持续参与复杂业务系统建设。',
-      '参与多个政府与金融科技相关系统，包括交易平台、区块链基础设施、产业管理系统。',
-      '擅长跨角色协作与远程异步沟通，注重稳定交付与长期可维护性。',
-    ]
-  : [
-      '8 years of professional development experience across complex business systems.',
-      'Contributed to government- and fintech-related systems, including trading platforms, blockchain infrastructure, and industrial management systems.',
-      'Strong in cross-functional collaboration and remote async execution with long-term maintainability in mind.',
-    ];
-
-const workStyle = isZh
-  ? ['远程优先、异步协作为主，关键节点同步决策', '强调可维护架构与稳定交付节奏', '文档化需求与边界，降低沟通与返工成本']
-  : ['Remote-first and async-friendly collaboration with sync checkpoints', 'Maintainable architecture and stable delivery cadence', 'Documented requirements and boundaries to reduce rework'];
 ---
 
 <Layout title={isZh ? '关于' : 'About'}>
@@ -40,37 +28,64 @@ const workStyle = isZh
       <section class="page-content-main" id="overview">
         <div class="mb-6 flex flex-wrap gap-2 text-sm">
           <a href="#overview" class="rounded-md border border-border px-3 py-1 hover:bg-muted">{isZh ? '概览' : 'Overview'}</a>
-          <a href="#experience" class="rounded-md border border-border px-3 py-1 hover:bg-muted">{isZh ? '经验' : 'Experience'}</a>
-          <a href="#focus" class="rounded-md border border-border px-3 py-1 hover:bg-muted">{isZh ? '技术焦点' : 'Focus'}</a>
+          <a href="#story" class="rounded-md border border-border px-3 py-1 hover:bg-muted">{isZh ? '故事' : 'Story'}</a>
+          <a href="#capabilities" class="rounded-md border border-border px-3 py-1 hover:bg-muted">{isZh ? '能力' : 'Capabilities'}</a>
+          <a href="#principles" class="rounded-md border border-border px-3 py-1 hover:bg-muted">{isZh ? '原则' : 'Principles'}</a>
+          <a href="#timeline" class="rounded-md border border-border px-3 py-1 hover:bg-muted">{isZh ? '时间线' : 'Timeline'}</a>
           <a href="#uses" class="rounded-md border border-border px-3 py-1 hover:bg-muted">Uses</a>
-          <a href="#contact-brief" class="rounded-md border border-border px-3 py-1 hover:bg-muted">{isZh ? '联系' : 'Contact'}</a>
         </div>
 
         <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">{isZh ? '关于我' : 'About'}</h1>
-        <p class="mt-6 text-lg leading-relaxed text-muted-foreground">{personalInfo.description[lang]}</p>
+        <p class="mt-6 text-lg leading-relaxed text-muted-foreground">
+          {isZh
+            ? '我是一名长期在复杂业务场景中工作的 AI 全栈工程师。这个页面主要展示我的经历、能力与做事方式。'
+            : 'I am an AI full-stack engineer working in complex product environments. This page focuses on my experience, capability, and way of working.'}
+        </p>
       </section>
 
-      <section class="page-content-main mt-10 page-surface p-8" id="experience">
-        <h2 class="text-2xl font-bold tracking-tight">{isZh ? '经验概览' : 'Experience'}</h2>
+      <section class="page-content-main mt-10 page-surface p-8" id="story">
+        <h2 class="text-2xl font-bold tracking-tight">{isZh ? '个人叙事' : 'Narrative'}</h2>
         <div class="mt-4 space-y-4 text-muted-foreground">
-          {personalInfo.about[lang].map((line) => <p>{line}</p>)}
+          {aboutNarrative.map((line) => <p>{line[lang]}</p>)}
         </div>
-        <ul class="mt-5 space-y-3 text-muted-foreground">
-          {experienceNotes.map((item) => (
-            <li class="flex gap-3"><span class="mt-2 h-1.5 w-1.5 rounded-full bg-primary"></span><span>{item}</span></li>
+      </section>
+
+      <section class="page-content-main mt-6 page-surface p-8" id="capabilities">
+        <h2 class="text-2xl font-bold tracking-tight">{isZh ? '核心能力' : 'Core Capabilities'}</h2>
+        <ul class="mt-4 grid gap-3 md:grid-cols-2 text-muted-foreground">
+          {aboutCapabilities.map((item) => (
+            <li class="flex gap-3 rounded-md border border-border/70 p-3"><span class="mt-2 h-1.5 w-1.5 rounded-full bg-primary"></span><span>{item[lang]}</span></li>
           ))}
         </ul>
       </section>
 
-      <section class="page-content-main mt-6 page-surface p-8" id="focus">
-        <h2 class="text-2xl font-bold tracking-tight">{isZh ? '技术焦点' : 'Technical Focus'}</h2>
-        <ul class="mt-4 grid gap-3 md:grid-cols-2 text-muted-foreground">
-          {focusAreas.map((item) => (
-            <li class="flex gap-3 rounded-md border border-border/70 p-3"><span class="mt-2 h-1.5 w-1.5 rounded-full bg-primary"></span><span>{item}</span></li>
+      <section class="page-content-main mt-6 page-surface p-8" id="principles">
+        <h2 class="text-2xl font-bold tracking-tight">{isZh ? '工作原则' : 'Working Principles'}</h2>
+        <ul class="mt-4 space-y-3 text-muted-foreground">
+          {aboutPrinciples.map((item) => (
+            <li class="flex gap-3"><span class="mt-2 h-1.5 w-1.5 rounded-full bg-primary"></span><span>{item[lang]}</span></li>
           ))}
         </ul>
       </section>
 
+      <section class="page-content-main mt-6 page-surface p-8" id="timeline">
+        <h2 class="text-2xl font-bold tracking-tight">{isZh ? '经历时间线' : 'Career Timeline'}</h2>
+        <div class="mt-5 space-y-4">
+          {brandTimeline.map((item) => (
+            <article class="rounded-md border border-border/70 p-5">
+              <p class="text-xs font-semibold uppercase tracking-wider text-primary/80">{item.period[lang]}</p>
+              <h3 class="mt-1 text-base font-bold">{item.title[lang]}</h3>
+              <p class="mt-2 text-sm text-muted-foreground">{item.summary[lang]}</p>
+              {item.highlights && item.highlights.length > 0 && (
+                <ul class="mt-3 space-y-1.5 text-sm text-foreground/90">
+                  {item.highlights.map((line) => <li>• {line[lang]}</li>)}
+                </ul>
+              )}
+            </article>
+          ))}
+        </div>
+      </section>
+
       <section class="page-content-main mt-6 page-surface p-8" id="uses">
         <h2 class="text-2xl font-bold tracking-tight">{isZh ? '工具与工作流' : 'Uses'}</h2>
         <div class="mt-5 grid gap-5 md:grid-cols-2">
@@ -85,35 +100,17 @@ const workStyle = isZh
         </div>
       </section>
 
-      <section class="page-content-main mt-6 page-surface p-8" id="work-style">
-        <h2 class="text-2xl font-bold tracking-tight">{isZh ? '工作方式' : 'Work Style'}</h2>
-        <ul class="mt-4 space-y-3 text-muted-foreground">
-          {workStyle.map((item) => (
-            <li class="flex gap-3"><span class="mt-2 h-1.5 w-1.5 rounded-full bg-primary"></span><span>{item}</span></li>
-          ))}
-        </ul>
-      </section>
-
-      <section class="page-content-main mt-6 page-surface p-8" id="contact-brief">
-        <h2 class="text-2xl font-bold tracking-tight">{isZh ? '联系（简版）' : 'Contact Brief'}</h2>
-        <p class="mt-3 text-muted-foreground">{isZh ? '优先沟通远程岗位机会，其次为项目合作咨询。' : 'Remote role opportunities are prioritized, followed by project collaboration.'}</p>
-
-        <ul class="mt-5 space-y-3 text-sm">
-          {contactMethods.map((method) => (
-            <li class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between border-b border-border/70 pb-3">
-              <span class="font-semibold text-foreground">{method.label[lang]}</span>
-              {method.href ? (
-                <a href={method.href} target="_blank" rel="noopener noreferrer" class="text-primary hover:text-primary/80 break-all">{method.value}</a>
-              ) : (
-                <span class="text-muted-foreground break-all">{method.value}</span>
-              )}
-            </li>
-          ))}
-        </ul>
+      <section class="page-content-main mt-6 page-surface p-8" id="next-step">
+        <h2 class="text-2xl font-bold tracking-tight">{isZh ? '下一步' : 'Next Step'}</h2>
+        <p class="mt-3 text-muted-foreground">
+          {isZh
+            ? '如果你想进一步判断合作匹配度，可以继续查看案例页与合作页。'
+            : 'If you want to assess collaboration fit, continue to the project cases and collaboration page.'}
+        </p>
 
         <div class="mt-6 flex flex-wrap gap-3">
-          <a href={`${prefix}/contact`} class="inline-flex h-10 items-center rounded-lg bg-primary px-5 text-sm font-semibold text-primary-foreground">{isZh ? '进入完整联系页' : 'Open Full Contact Page'}</a>
-          <a href={`${prefix}/contact#project-collaboration`} class="inline-flex h-10 items-center rounded-lg border border-border px-5 text-sm font-semibold hover:bg-muted">{isZh ? '项目合作入口' : 'Project Collaboration'}</a>
+          <a href={`${prefix}/projects`} class="inline-flex h-10 items-center rounded-lg bg-primary px-5 text-sm font-semibold text-primary-foreground">{isZh ? '查看案例' : 'View Projects'}</a>
+          <a href={`${prefix}/hire`} class="inline-flex h-10 items-center rounded-lg border border-border px-5 text-sm font-semibold hover:bg-muted">{isZh ? '查看合作页' : 'View Hire Page'}</a>
         </div>
 
         <div class="mt-5 border-t border-border/70 pt-4 text-sm">
@@ -121,6 +118,8 @@ const workStyle = isZh
           <a href={personalInfo.github} target="_blank" rel="noopener noreferrer" class="text-primary hover:text-primary/80 break-all">{personalInfo.github}</a>
         </div>
       </section>
+
+      <ContactCard lang={lang} />
     </Container>
   </main>