zhaoguiyang.site/src/pages/zh/about.astro

---
import Layout from '@/layouts/Layout.astro';
import GlassHeader from '@/components/GlassHeader';
import Footer from '@/components/Footer';
import Container from '@/components/ui/Container.astro';
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' : '';
---

<Layout title={isZh ? '关于' : 'About'}>
  <GlassHeader lang={lang} client:load transition:persist="header" />

  <main id="main-content" class="min-h-screen pt-24 pb-20">
    <Container>
      <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="#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>
        </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">
          {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="story">
        <h2 class="text-2xl font-bold tracking-tight">{isZh ? '个人叙事' : 'Narrative'}</h2>
        <div class="mt-4 space-y-4 text-muted-foreground">
          {aboutNarrative.map((line) => <p>{line[lang]}</p>)}
        </div>
      </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="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">
          {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="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}/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">
          <p class="font-semibold text-foreground">GitHub</p>
          <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>

  <Footer lang={lang} client:load />
</Layout>