feat(site): optimize full-stack positioning and collaboration conversion pages

src/pages/about.astro

@@ -3,12 +3,13 @@ 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 } from '@/lib/data';
+import { personalInfo, uses, contactMethods } 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 协作开发流程实践']
@@ -25,6 +26,10 @@ const experienceNotes = isZh
       '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'}>
@@ -32,37 +37,85 @@ const experienceNotes = isZh
 
   <main class="min-h-screen pt-24 pb-20">
     <Container>
-      <section class="page-content-main">
+      <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="#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>
       </section>
 
-      <section class="page-content-main mt-12 grid gap-6 lg:grid-cols-2">
-        <article class="page-surface p-8">
-          <h2 class="text-2xl font-bold tracking-tight">{isZh ? '背景' : 'Background'}</h2>
-          <div class="mt-4 space-y-4 text-muted-foreground">
-            {personalInfo.about[lang].map((line) => <p>{line}</p>)}
-          </div>
-        </article>
-
-        <article class="page-surface p-8">
-          <h2 class="text-2xl font-bold tracking-tight">{isZh ? '技术焦点' : 'Technical Focus'}</h2>
-          <ul class="mt-4 space-y-3 text-muted-foreground">
-            {focusAreas.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>
-        </article>
-      </section>
-
-      <section class="page-content-main mt-6 page-surface p-8">
+      <section class="page-content-main mt-10 page-surface p-8" id="experience">
         <h2 class="text-2xl font-bold tracking-tight">{isZh ? '经验概览' : 'Experience'}</h2>
-        <ul class="mt-4 space-y-3 text-muted-foreground">
+        <div class="mt-4 space-y-4 text-muted-foreground">
+          {personalInfo.about[lang].map((line) => <p>{line}</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>
           ))}
         </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>
+          ))}
+        </ul>
+      </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">
+          {uses.map((group) => (
+            <article class="rounded-md border border-border/70 p-5">
+              <h3 class="text-base font-bold">{group.title[lang]}</h3>
+              <ul class="mt-3 space-y-1.5 text-sm text-muted-foreground">
+                {group.items.map((item) => <li>• {item}</li>)}
+              </ul>
+            </article>
+          ))}
+        </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.slice(0, 2).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>
+
+        <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>
+        </div>
+      </section>
     </Container>
   </main>