blog-astro/src/pages/about.astro

---
import Breadcrumbs from '@/components/Breadcrumbs.astro'
import Link from '@/components/Link.astro'
import PageHead from '@/components/PageHead.astro'
import Layout from '@/layouts/Layout.astro'
import Comment from '@/components/Comment.astro'
---

<Layout class="max-w-3xl">
  <PageHead slot="head" title="About" />
  <Breadcrumbs items={[{ label: 'About', icon: 'lucide:info' }]} />

  <section class="grid gap-6">
    <div class="relative rounded-lg border p-6">
      <div class="relative flex flex-col gap-4">
        <p class="text-xs uppercase tracking-[0.35em] text-muted-foreground">
          profile
        </p>
        <h1 class="text-3xl font-semibold">关于我</h1>
        <p class="max-w-3xl text-muted-foreground">
          啥都写一点，但是啥都不精通。前端后端客户端，运维网安都会那么一点点，尝试写出点什么项目但总是失败。
        </p>
      </div>
    </div>

    <div class="grid gap-4 md:grid-cols-3">
      <div class="rounded-lg border p-5">
        <h3 class="text-lg font-semibold">安全</h3>
        <p class="text-sm leading-relaxed text-muted-foreground">
          非典型 Misc，啥都做点，（感觉更像是全栈？）
        </p>
      </div>
      <div class="rounded-lg border p-5">
        <h3 class="text-lg font-semibold">代码</h3>
        <p class="text-sm leading-relaxed text-muted-foreground">
          近期在写 C 和 Swift，之前写过 Golang、Python、JavaScript
        </p>
      </div>
      <div class="rounded-lg border p-5">
        <h3 class="text-lg font-semibold">生活</h3>
        <p class="text-sm leading-relaxed text-muted-foreground">
          二次元、骑车、游泳、羽毛球、CS、摄影
        </p>
      </div>
    </div>

    <div class="rounded-lg border p-6">
      <div class="flex items-center justify-between gap-4">
        <div>
          <p class="text-xs uppercase text-muted-foreground">setup</p>
          <h3 class="text-xl font-semibold">常用设备</h3>
        </div>
      </div>
      <div class="mt-4 grid gap-3 md:grid-cols-2">
        <div class="rounded-lg border p-4">
          <p class="text-sm font-semibold">PC</p>
          <p class="text-sm text-muted-foreground">
            M2 Macbook Air · MSI Stealth 14 · iPad Air 5
          </p>
        </div>
        <div class="rounded-lg border p-4">
          <p class="text-sm font-semibold">手机</p>
          <p class="text-sm text-muted-foreground">iPhone 17 · vivo x100 · iPhone 13 mini</p>
        </div>
        <div class="rounded-lg border p-4 md:col-span-2">
          <p class="text-sm font-semibold">影音与记录</p>
          <p class="text-sm text-muted-foreground">Sony XM5 · Nikon Zfc</p>
        </div>
      </div>
    </div>

    <section class="rounded-lg border p-6">
      <p class="text-xs uppercase text-muted-foreground">site</p>
      <h3 class="text-xl font-semibold">关于本站</h3>
      <p class="mt-2 text-sm leading-relaxed text-muted-foreground">
        栈在 <Link href="https://astro.build" external underline>Astro</Link>,
        <Link href="https://tailwindcss.com" external underline>Tailwind</Link>,
        <Link href="https://ui.shadcn.com" external underline>shadcn/ui</Link> 之上，开源在
        <Link href="https://github.com/jktrn/astro-erudite" external underline>GitHub</Link>。
      </p>
      <h4 class="text-l font-semibold mt-2">大事记</h4>
      <div class="mt-3 overflow-x-auto rounded-lg border">
        <table class="w-full text-sm">
          <thead class="bg-muted/60 text-left text-muted-foreground">
            <tr>
              <th class="px-4 py-2 font-semibold">时间</th>
              <th class="px-4 py-2 font-semibold">事件</th>
            </tr>
          </thead>
          <tbody class="divide-y">
            <tr>
              <td class="px-4 py-2 whitespace-nowrap">2018</td>
              <td class="px-4 py-2">
                第一次建站，域名 <code>stevelbr.ga</code>，使用 hexo 和不知道有几种主题
              </td>
            </tr>
            <tr>
              <td class="px-4 py-2 whitespace-nowrap">2020</td>
              <td class="px-4 py-2">
                购入腾讯云轻量服务器，购入域名 <code>stevelbr.top</code> ，使用 typecho 和
                typecho-theme-handsome 建站，接入备案。
              </td>
            </tr>
            <tr>
              <td class="px-4 py-2 whitespace-nowrap">2023</td>
              <td class="px-4 py-2">
                停止续费腾讯云轻量，购入域名 <code>nvme0n1p.dev</code>，使用 hugo+serverless service 建站。
              </td>
            </tr>
            <tr>
              <td class="px-4 py-2 whitespace-nowrap">2024.1</td>
              <td class="px-4 py-2">
                使用 <Link href="http://cali.so" external underline>cali.so</Link> nextjs自建服务，运行于 vercel。
              </td>
            </tr>
            <tr>
              <td class="px-4 py-2 whitespace-nowrap">2024.2</td>
              <td class="px-4 py-2">
                使用 astro 重构 typecho theme void 主题，使用 notion 作为 cms。
              </td>
            </tr>
            <tr>
              <td class="px-4 py-2 whitespace-nowrap">2024.8</td>
              <td class="px-4 py-2">
                使用 nuxtjs 重构 typecho theme void，同样使用 notion 作为 cms。
              </td>
            </tr>
            <tr>
              <td class="px-4 py-2 whitespace-nowrap">2024.10</td>
              <td class="px-4 py-2">
                优化 nuxtjs 代码，现在全站支持无刷新页面切换。<del>同时增加 algolia docsearch 魔改版作为站内搜索。</del>好像没开 Server Side Rendering ，炸了
              </td>
            </tr>
            <tr>
              <td class="px-4 py-2 whitespace-nowrap">2024.11</td>
              <td class="px-4 py-2">
                感谢<Link href="https://www.dkdun.cn/" external underline>林枫云</Link>对 ctfer 的支持，切换到了他家的香港服务器。
              </td>
            </tr>
            <tr>
              <td class="px-4 py-2 whitespace-nowrap">2025.2</td>
              <td class="px-4 py-2">用nextjs重写了。优化了访问速度，减少了了图片。</td>
            </tr>
            <tr>
              <td class="px-4 py-2 whitespace-nowrap">2025.7</td>
              <td class="px-4 py-2">抽空把algolia search弄好了。(真的吗</td>
            </tr>
            <tr>
              <td class="px-4 py-2 whitespace-nowrap">2025.12</td>
              <td class="px-4 py-2">换成Astro！</td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>

    <section class="rounded-lg border p-6">
      <p class="text-xs uppercase text-muted-foreground">comment</p>
      <h3 class="text-xl font-semibold mb-3">留言 / 评论</h3>
      <Comment />
    </section>
  </section>
</Layout>