Build technical notes archive

2026-06-09 09:30:28 +08:00
parent 0a1c46e037
commit 5eaa3cac79
115 changed files with 14916 additions and 184 deletions
@@ -0,0 +1,64 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { ArrowUp } from "lucide-react";
+
+export function BackToTopButton() {
+  const [visible, setVisible] = useState(false);
+  const prefersReducedMotion = useReducedMotion();
+
+  useEffect(() => {
+    let frame = 0;
+
+    const updateVisibility = () => {
+      frame = 0;
+      setVisible(window.scrollY > 520);
+    };
+
+    const handleScroll = () => {
+      if (frame) {
+        return;
+      }
+
+      frame = window.requestAnimationFrame(updateVisibility);
+    };
+
+    updateVisibility();
+    window.addEventListener("scroll", handleScroll, { passive: true });
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      if (frame) {
+        window.cancelAnimationFrame(frame);
+      }
+    };
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: prefersReducedMotion ? "auto" : "smooth",
+    });
+  };
+
+  return (
+    <AnimatePresence>
+      {visible ? (
+        <motion.button
+          type="button"
+          aria-label="回到顶部"
+          title="回到顶部"
+          className="fixed bottom-6 right-5 z-50 inline-flex h-12 w-12 items-center justify-center rounded-full border border-cyan-300/35 bg-[#07111f]/95 text-cyan-100 shadow-[0_0_28px_rgba(34,211,238,0.24)] outline-none transition hover:-translate-y-0.5 hover:border-fuchsia-300/70 hover:text-white hover:shadow-[0_0_34px_rgba(217,70,239,0.25)] focus-visible:ring-2 focus-visible:ring-cyan-300 sm:bottom-8 sm:right-8"
+          initial={{ opacity: 0, scale: 0.82, y: 12 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          exit={{ opacity: 0, scale: 0.82, y: 12 }}
+          transition={{ duration: 0.18, ease: "easeOut" }}
+          onClick={scrollToTop}
+        >
+          <ArrowUp className="h-5 w-5" />
+        </motion.button>
+      ) : null}
+    </AnimatePresence>
+  );
+}
@@ -0,0 +1,323 @@
+import Link from "next/link";
+import {
+  ArrowLeft,
+  ArrowUpRight,
+  BookOpen,
+  Braces,
+  Code2,
+  Gauge,
+  Globe2,
+  Layers3,
+  MonitorCog,
+  RadioTower,
+  Sparkles,
+} from "lucide-react";
+
+type FrontendArticle = {
+  slug: string;
+  title: string;
+  description: string;
+  href?: string;
+  status?: "ready" | "soon";
+};
+
+type FrontendNotesPageProps = {
+  eyebrow: string;
+  title: string;
+  description: string;
+  archiveLabel?: string;
+  featuredTitle?: string;
+  listTitle?: string;
+  listDescription: string;
+  articles: readonly FrontendArticle[];
+};
+
+const articleVisuals: Record<
+  string,
+  {
+    accent: string;
+    glyph: string;
+    track: string;
+    Icon: typeof Code2;
+  }
+> = {
+  html: {
+    accent: "from-orange-300 via-rose-300 to-fuchsia-300",
+    glyph: "HTML",
+    track: "Markup",
+    Icon: Layers3,
+  },
+  css: {
+    accent: "from-sky-300 via-cyan-300 to-lime-300",
+    glyph: "CSS",
+    track: "Visual system",
+    Icon: Sparkles,
+  },
+  "javascript-part-1": {
+    accent: "from-yellow-200 via-cyan-300 to-blue-400",
+    glyph: "JS-I",
+    track: "Core language",
+    Icon: Braces,
+  },
+  "javascript-part-2": {
+    accent: "from-cyan-300 via-violet-300 to-fuchsia-300",
+    glyph: "JS-II",
+    track: "Runtime",
+    Icon: Code2,
+  },
+  "vue-part-1": {
+    accent: "from-emerald-300 via-teal-300 to-cyan-300",
+    glyph: "Vue I",
+    track: "Framework",
+    Icon: MonitorCog,
+  },
+  "vue-part-2": {
+    accent: "from-green-300 via-cyan-300 to-blue-300",
+    glyph: "Vue II",
+    track: "Ecosystem",
+    Icon: MonitorCog,
+  },
+  "react-part-1": {
+    accent: "from-cyan-200 via-blue-300 to-indigo-300",
+    glyph: "React I",
+    track: "UI model",
+    Icon: RadioTower,
+  },
+  "react-part-2": {
+    accent: "from-blue-300 via-fuchsia-300 to-rose-300",
+    glyph: "React II",
+    track: "Architecture",
+    Icon: RadioTower,
+  },
+  network: {
+    accent: "from-lime-200 via-cyan-300 to-blue-400",
+    glyph: "NET",
+    track: "Protocol",
+    Icon: Globe2,
+  },
+  browser: {
+    accent: "from-purple-300 via-cyan-300 to-emerald-300",
+    glyph: "BOM",
+    track: "Browser",
+    Icon: MonitorCog,
+  },
+  performance: {
+    accent: "from-lime-200 via-yellow-200 to-cyan-300",
+    glyph: "Perf",
+    track: "Optimization",
+    Icon: Gauge,
+  },
+  "code-output": {
+    accent: "from-fuchsia-300 via-rose-300 to-orange-200",
+    glyph: "Quiz",
+    track: "Execution",
+    Icon: Braces,
+  },
+};
+
+const featuredSlugs = ["javascript-part-1", "css", "browser"] as const;
+
+function getArticleVisual(slug: string) {
+  return (
+    articleVisuals[slug] ?? {
+      accent: "from-cyan-300 via-fuchsia-300 to-lime-200",
+      glyph: "Soon",
+      track: "Coming soon",
+      Icon: Code2,
+    }
+  );
+}
+
+export function FrontendNotesPage({
+  eyebrow,
+  title,
+  description,
+  archiveLabel = "ARCHIVE",
+  featuredTitle = "精选入口",
+  listTitle = "全部文章",
+  listDescription,
+  articles,
+}: FrontendNotesPageProps) {
+  const featuredArticles =
+    featuredSlugs
+      .map((slug) => articles.find((article) => article.slug === slug))
+      .filter((article): article is FrontendArticle => Boolean(article)).length > 0
+      ? featuredSlugs
+          .map((slug) => articles.find((article) => article.slug === slug))
+          .filter((article): article is FrontendArticle => Boolean(article))
+      : articles.slice(0, 3);
+
+  const renderArticleContent = (article: FrontendArticle, index: number, compact = false) => {
+    const visual = getArticleVisual(article.slug);
+    const Icon = visual.Icon;
+    const isSoon = article.status === "soon";
+
+    if (compact) {
+      return (
+        <>
+          <div
+            className={`flex aspect-square items-center justify-center bg-gradient-to-br ${visual.accent} font-mono text-sm font-black text-[#05050b] shadow-lg shadow-cyan-500/15`}
+          >
+            {isSoon ? "..." : String(index + 1).padStart(2, "0")}
+          </div>
+          <div className="min-w-0">
+            <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] text-cyan-100/65">
+              <Icon className="h-4 w-4" />
+              {visual.track}
+            </div>
+            <h3 className="mt-2 text-xl font-black text-white">{article.title}</h3>
+            <p className="mt-2 line-clamp-2 text-sm leading-6 text-white/54">
+              {article.description}
+            </p>
+          </div>
+          <ArrowUpRight className="h-5 w-5 text-white/42 transition group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-cyan-100" />
+        </>
+      );
+    }
+
+    return (
+      <>
+        <div className={`absolute inset-x-0 top-0 h-1 bg-gradient-to-r ${visual.accent}`} />
+        <div className="flex items-start justify-between gap-4">
+          <div
+            className={`inline-flex h-14 w-14 items-center justify-center bg-gradient-to-br ${visual.accent} font-mono text-xs font-black text-[#05050b]`}
+          >
+            {visual.glyph}
+          </div>
+          <span className="font-mono text-sm text-fuchsia-200/70">
+            {isSoon ? "SOON" : String(index + 1).padStart(2, "0")}
+          </span>
+        </div>
+
+        <div className="mt-8 flex items-center gap-2 text-xs font-bold uppercase tracking-[0.16em] text-cyan-100/60">
+          <Icon className="h-4 w-4" />
+          {visual.track}
+        </div>
+        <h3 className="mt-4 text-2xl font-black leading-tight text-white">{article.title}</h3>
+        <p className="mt-4 line-clamp-3 text-sm leading-7 text-white/55">{article.description}</p>
+
+        <div className="absolute inset-x-5 bottom-5 flex items-center justify-between border-t border-white/10 pt-4">
+          <span className="font-mono text-xs uppercase tracking-[0.16em] text-white/42">
+            {isSoon ? "敬请期待" : "Read article"}
+          </span>
+          <span className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-cyan-300/24 bg-cyan-300/[0.08] text-cyan-100 transition group-hover:border-fuchsia-300/70 group-hover:text-fuchsia-100">
+            <ArrowUpRight className="h-4 w-4" />
+          </span>
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <main className="relative min-h-dvh overflow-hidden bg-[#05050b] px-5 py-6 text-white sm:px-8 lg:px-10">
+      <div className="neon-aurora" />
+      <div className="cyber-grid" />
+      <div className="scanline" />
+
+      <div className="relative z-10 mx-auto max-w-7xl">
+        <header className="flex items-center justify-between rounded-full border border-white/10 bg-white/[0.04] px-4 py-3 shadow-2xl shadow-cyan-500/10">
+          <Link
+            href="/"
+            className="inline-flex h-11 items-center gap-2 rounded-full border border-white/12 bg-white/[0.05] px-4 text-sm font-semibold text-white/80 outline-none transition hover:border-cyan-300/70 hover:text-cyan-100 focus-visible:ring-2 focus-visible:ring-cyan-300"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            首页
+          </Link>
+          <Link
+            href="/"
+            className="rounded-full bg-white px-4 py-2 text-sm font-black text-[#05050b] outline-none transition hover:bg-cyan-200 focus-visible:ring-2 focus-visible:ring-cyan-300"
+          >
+            fly
+          </Link>
+        </header>
+
+        <section className="grid min-h-[calc(100dvh-92px)] gap-10 py-12 lg:grid-cols-[0.9fr_1.1fr] lg:items-center lg:py-14">
+          <div>
+            <div className="inline-flex items-center gap-2 rounded-full border border-cyan-300/30 bg-cyan-300/10 px-4 py-2 font-mono text-xs uppercase text-cyan-100 shadow-lg shadow-cyan-500/10">
+              <BookOpen className="h-4 w-4" />
+              {eyebrow}
+            </div>
+            <h1 className="mt-7 font-display text-5xl font-black leading-tight sm:text-7xl lg:text-8xl">
+              {title}
+              <span className="block bg-gradient-to-r from-cyan-200 via-fuchsia-200 to-lime-200 bg-clip-text text-transparent">
+                {archiveLabel}
+              </span>
+            </h1>
+            <p className="mt-7 max-w-2xl text-base leading-8 text-white/62 sm:text-lg">
+              {description}
+            </p>
+
+            <div className="mt-9 h-px max-w-xl bg-gradient-to-r from-cyan-300 via-fuchsia-300 to-transparent" />
+          </div>
+
+          <div className="relative">
+            <div className="absolute -inset-6 bg-[radial-gradient(circle_at_20%_12%,rgba(34,211,238,0.25),transparent_30%),radial-gradient(circle_at_84%_80%,rgba(217,70,239,0.2),transparent_32%)] blur-2xl" />
+            <div className="relative overflow-hidden border border-white/10 bg-[#090915]/90 p-5 shadow-2xl shadow-black/40 sm:p-6">
+              <div className="flex items-center justify-between border-b border-white/10 pb-4">
+                <div>
+                  <p className="font-mono text-xs uppercase tracking-[0.2em] text-fuchsia-200/70">
+                    launch sequence
+                  </p>
+                  <h2 className="mt-2 text-2xl font-black">{featuredTitle}</h2>
+                </div>
+                <div className="h-3 w-3 rounded-full bg-lime-300 shadow-[0_0_24px_rgba(190,242,100,0.85)]" />
+              </div>
+
+              <div className="mt-5 grid gap-3">
+                {featuredArticles.map((article, index) => {
+                  const className =
+                    "group grid gap-4 border border-white/10 bg-white/[0.045] p-4 outline-none transition hover:-translate-y-0.5 hover:border-cyan-300/50 hover:bg-cyan-300/[0.07] focus-visible:ring-2 focus-visible:ring-cyan-300 sm:grid-cols-[4.8rem_1fr_auto] sm:items-center";
+
+                  return article.href ? (
+                    <Link key={article.slug} href={article.href} className={className}>
+                      {renderArticleContent(article, index, true)}
+                    </Link>
+                  ) : (
+                    <div key={article.slug} className={className}>
+                      {renderArticleContent(article, index, true)}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="pb-16">
+          <div className="flex flex-col justify-between gap-4 border-y border-white/10 py-7 sm:flex-row sm:items-end">
+            <div>
+              <p className="font-mono text-xs uppercase tracking-[0.2em] text-cyan-200/70">
+                all dossiers
+              </p>
+              <h2 className="mt-3 text-3xl font-black text-white sm:text-4xl">{listTitle}</h2>
+            </div>
+            <p className="max-w-xl text-sm leading-7 text-white/52">
+              {listDescription}
+            </p>
+          </div>
+
+          <div className="mt-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+            {articles.map((article, index) => {
+              const className =
+                "group relative min-h-72 overflow-hidden border border-white/10 bg-white/[0.04] p-5 outline-none transition hover:-translate-y-1 hover:border-white/25 hover:bg-white/[0.065] focus-visible:ring-2 focus-visible:ring-cyan-300";
+
+              return article.href ? (
+                <Link
+                  key={article.slug}
+                  href={article.href}
+                  className={className}
+                >
+                  {renderArticleContent(article, index)}
+                </Link>
+              ) : (
+                <div key={article.slug} className={className}>
+                  {renderArticleContent(article, index)}
+                </div>
+              );
+            })}
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+}
@@ -1,217 +1,346 @@
 "use client";

-import Image from "next/image";
+import Link from "next/link";
 import { motion, useReducedMotion } from "motion/react";
+import {
+  ArrowUpRight,
+  Bot,
+  Braces,
+  Database,
+  GitBranch,
+  LifeBuoy,
+  Mail,
+  Sparkles,
+  TerminalSquare,
+} from "lucide-react";

-const highlights = [
-  { label: "Frontend", value: "React / Vue / Next.js" },
-  { label: "Notes", value: "HTML, CSS, JS, Git" },
-  { label: "Current", value: "Rebuilding a personal web identity" },
+const navItems = [
+  { label: "技术文章", href: "#articles" },
+  { label: "生活分享", href: "#life" },
+  { label: "联系我", href: "mailto:3505891631@qq.com" },
+  { label: "Gitea", href: "http://124.221.147.173:3000/fly/fly-personal-site" },
 ];

-const chapters = [
+const portals = [
  {
-    title: "Engineering Notes",
-    eyebrow: "01",
-    body: "把前端知识拆成可复用的笔记，不追求堆砌，追求每次回看都能拿来解决问题。",
-    href: "http://124.221.147.173:3000/fly/flys_blog",
+    title: "技术文章",
+    href: "#articles",
+    eyebrow: "Knowledge archive",
+    description: "围绕前端工程、服务端基础和 AI Agent 的技术内容索引。",
+    icon: TerminalSquare,
+    gradient: "from-cyan-300 via-blue-500 to-violet-500",
  },
  {
-    title: "Personal Experiments",
-    eyebrow: "02",
-    body: "记录一些页面、工具、交互和生活灵感，把学习过程变成能被看见的作品。",
-    href: "http://124.221.147.173:3000/fly/fly-personal-site",
-  },
-  {
-    title: "Quiet Systems",
-    eyebrow: "03",
-    body: "偏爱清晰、克制、有质感的界面。让复杂内容保持秩序，让细节自己发光。",
-    href: "#signal",
+    title: "生活分享",
+    href: "#life",
+    eyebrow: "Life stream",
+    description: "技术之外的日常片段，呈现更完整的个人侧面。",
+    icon: LifeBuoy,
+    gradient: "from-lime-300 via-emerald-400 to-cyan-400",
  },
 ];

-const stack = [
-  "Next.js",
-  "Tailwind CSS",
-  "Motion",
-  "TypeScript",
-  "Vue",
-  "React",
-  "Git",
-  "VitePress",
+const noteModules = [
+  {
+    name: "前端",
+    href: "/notes/frontend",
+    icon: Braces,
+    description: "React、Vue、Next.js、CSS、动画、工程化。",
+  },
+  {
+    name: "后端",
+    href: "/notes/backend",
+    icon: Database,
+    description: "API、数据库、部署、鉴权、缓存、服务基础。",
+  },
+  {
+    name: "AI Agent",
+    href: "/notes/ai-agent",
+    icon: Bot,
+    description: "Agent 工作流、工具调用、提示词和自动化实践。",
+  },
 ];

+const lifeTopics = ["Daily", "Reading", "Music", "Photo", "Travel", "Thoughts"];
+
 export function HomePage() {
  const reduceMotion = useReducedMotion();
+  const distance = reduceMotion ? 0 : 28;
+  const duration = reduceMotion ? 0 : 0.58;
+  const easeOut = [0.22, 1, 0.36, 1] as const;
+
+  const container = {
+    hidden: {},
+    show: {
+      transition: {
+        staggerChildren: reduceMotion ? 0 : 0.075,
+        delayChildren: reduceMotion ? 0 : 0.08,
+      },
+    },
+  };

  const reveal = {
-    hidden: { opacity: 0, y: reduceMotion ? 0 : 24 },
-    show: { opacity: 1, y: 0 },
+    hidden: { opacity: 0, y: distance, filter: reduceMotion ? "none" : "blur(10px)" },
+    show: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration, ease: easeOut } },
+  };
+
+  const scaleReveal = {
+    hidden: { opacity: 0, y: distance, scale: reduceMotion ? 1 : 0.96 },
+    show: { opacity: 1, y: 0, scale: 1, transition: { duration, ease: easeOut } },
  };

  return (
-    <main className="min-h-dvh overflow-hidden bg-[#101411] text-[#f4efe4]">
-      <section className="relative isolate flex min-h-dvh items-center px-5 py-6 sm:px-8 lg:px-12">
-        <div className="absolute inset-0 -z-10 bg-[linear-gradient(90deg,rgba(244,239,228,0.08)_1px,transparent_1px),linear-gradient(180deg,rgba(244,239,228,0.08)_1px,transparent_1px)] bg-[size:72px_72px]" />
-        <div className="absolute inset-x-0 top-0 -z-10 h-80 bg-[radial-gradient(circle_at_18%_18%,rgba(211,255,48,0.18),transparent_34%),radial-gradient(circle_at_82%_4%,rgba(242,124,74,0.22),transparent_28%)]" />
-        <div className="noise-layer" />
+    <main className="min-h-dvh overflow-hidden bg-[#05050b] text-white">
+      <section className="relative isolate min-h-dvh px-5 py-5 sm:px-8 lg:px-10">
+        <motion.div
+          className="neon-aurora"
+          initial={{ opacity: 0, scale: reduceMotion ? 1 : 0.92 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: reduceMotion ? 0 : 1.2, ease: "easeOut" }}
+        />
+        <motion.div
+          className="cyber-grid"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: reduceMotion ? 0 : 0.9, delay: reduceMotion ? 0 : 0.18 }}
+        />
+        <motion.div
+          className="scanline"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 0.18 }}
+          transition={{ duration: reduceMotion ? 0 : 0.8, delay: reduceMotion ? 0 : 0.28 }}
+        />

-        <div className="mx-auto grid w-full max-w-7xl gap-10 lg:grid-cols-[minmax(0,1.05fr)_minmax(360px,0.95fr)] lg:items-center">
+        <motion.header
+          initial="hidden"
+          animate="show"
+          variants={container}
+          className="relative z-10 mx-auto flex max-w-7xl items-center justify-between rounded-full border border-white/10 bg-white/[0.04] px-4 py-3 shadow-2xl shadow-cyan-500/10 backdrop-blur-2xl"
+        >
+          <motion.div variants={scaleReveal}>
+            <Link
+              href="/"
+              className="group inline-flex h-11 items-center gap-3 rounded-full bg-white px-4 text-sm font-black text-[#05050b] outline-none transition hover:bg-cyan-200 focus-visible:ring-2 focus-visible:ring-cyan-300"
+            >
+              <Sparkles className="h-4 w-4 transition group-hover:rotate-12" />
+              fly
+            </Link>
+          </motion.div>
+
+          <nav aria-label="主导航" className="hidden items-center gap-1 md:flex">
+            {navItems.map((item) => (
+              <motion.a
+                key={item.label}
+                href={item.href}
+                variants={reveal}
+                className="rounded-full px-4 py-2 text-sm text-white/68 outline-none transition hover:bg-white/10 hover:text-white focus-visible:ring-2 focus-visible:ring-fuchsia-300"
+              >
+                {item.label}
+              </motion.a>
+            ))}
+          </nav>
+        </motion.header>
+
+        <div className="relative z-10 mx-auto grid min-h-[calc(100dvh-88px)] max-w-7xl gap-8 py-10 lg:grid-cols-[0.9fr_1.1fr] lg:items-center lg:py-6">
          <motion.div
            initial="hidden"
            animate="show"
-            transition={{ staggerChildren: reduceMotion ? 0 : 0.08 }}
-            className="flex min-h-[calc(100dvh-48px)] flex-col justify-between gap-10 py-2 lg:min-h-[calc(100dvh-64px)]"
+            variants={container}
+            className="max-w-3xl"
          >
-            <motion.header variants={reveal} className="flex items-center justify-between gap-4">
-              <a
-                href="#top"
-                aria-label="fly homepage"
-                className="group inline-flex h-11 items-center gap-3 rounded-full border border-[#f4efe4]/18 bg-[#f4efe4]/8 px-4 text-sm font-medium text-[#f4efe4] outline-none transition hover:border-[#d3ff30]/70 hover:bg-[#d3ff30] hover:text-[#101411] focus-visible:ring-2 focus-visible:ring-[#d3ff30]"
-              >
-                <span className="h-2.5 w-2.5 rounded-full bg-[#d3ff30] transition group-hover:bg-[#101411]" />
-                fly
-              </a>
-              <nav aria-label="Primary navigation" className="hidden items-center gap-2 sm:flex">
-                {["notes", "work", "signal"].map((item) => (
-                  <a
-                    key={item}
-                    href={`#${item}`}
-                    className="rounded-full px-4 py-2 text-sm text-[#f4efe4]/68 outline-none transition hover:bg-[#f4efe4]/10 hover:text-[#f4efe4] focus-visible:ring-2 focus-visible:ring-[#d3ff30]"
-                  >
-                    {item}
-                  </a>
-                ))}
-              </nav>
-            </motion.header>
-
-            <div id="top" className="max-w-4xl">
-              <motion.p variants={reveal} className="mb-6 text-sm font-medium text-[#d3ff30]">
-                Personal website / frontend notes / visual experiments
-              </motion.p>
-              <motion.h1
-                variants={reveal}
-                className="max-w-4xl font-display text-7xl font-semibold leading-none text-[#f8f4ea] sm:text-8xl lg:text-9xl"
-              >
-                fly
-              </motion.h1>
-              <motion.p
-                variants={reveal}
-                className="mt-8 max-w-2xl text-lg leading-8 text-[#d8d0bf] sm:text-xl sm:leading-9"
-              >
-                前端开发者，正在把技术笔记、页面实验和个人审美重新整理成一个更自由、更有质感的个人网站。
-              </motion.p>
-              <motion.div variants={reveal} className="mt-9 flex flex-col gap-3 sm:flex-row">
-                <a
-                  href="#work"
-                  className="inline-flex h-12 items-center justify-center rounded-full bg-[#d3ff30] px-6 text-sm font-semibold text-[#101411] outline-none transition hover:bg-[#f4efe4] focus-visible:ring-2 focus-visible:ring-[#f4efe4]"
-                >
-                  查看主页结构
-                </a>
-                <a
-                  href="http://124.221.147.173:3000/fly/flys_blog"
-                  className="inline-flex h-12 items-center justify-center rounded-full border border-[#f4efe4]/22 px-6 text-sm font-semibold text-[#f4efe4] outline-none transition hover:border-[#f27c4a] hover:bg-[#f27c4a] hover:text-[#101411] focus-visible:ring-2 focus-visible:ring-[#f27c4a]"
-                >
-                  打开旧博客仓库
-                </a>
-              </motion.div>
-            </div>
-
-            <motion.div
+            <motion.p
              variants={reveal}
-              className="grid gap-3 border-y border-[#f4efe4]/14 py-5 sm:grid-cols-3"
+              className="mb-6 inline-flex rounded-full border border-cyan-300/30 bg-cyan-300/10 px-4 py-2 font-mono text-xs uppercase text-cyan-100 shadow-lg shadow-cyan-500/10"
            >
-              {highlights.map((item) => (
-                <div key={item.label} className="min-h-24">
-                  <p className="text-xs font-semibold uppercase text-[#f27c4a]">{item.label}</p>
-                  <p className="mt-3 max-w-[18rem] text-sm leading-6 text-[#f4efe4]/72">{item.value}</p>
-                </div>
-              ))}
+              frontend engineer / web experience / creative code
+            </motion.p>
+            <motion.h1
+              variants={reveal}
+              className="font-display text-7xl font-semibold leading-none tracking-normal text-white sm:text-8xl lg:text-[10rem]"
+            >
+              fly
+            </motion.h1>
+            <motion.p variants={reveal} className="mt-7 max-w-2xl text-xl leading-9 text-white/72">
+              我是 fly，前端开发工程师。专注现代 Web 界面、工程化体验和 AI Agent 方向的探索。
+            </motion.p>
+            <motion.div variants={container} className="mt-9 flex flex-col gap-3 sm:flex-row">
+              <motion.a
+                variants={scaleReveal}
+                href="#articles"
+                className="group inline-flex h-12 items-center justify-center gap-2 rounded-full bg-gradient-to-r from-cyan-300 via-blue-400 to-fuchsia-400 px-6 text-sm font-black text-[#05050b] shadow-xl shadow-cyan-500/25 outline-none transition hover:scale-[1.02] focus-visible:ring-2 focus-visible:ring-cyan-200"
+              >
+                进入内容矩阵
+                <ArrowUpRight className="h-4 w-4 transition group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
+              </motion.a>
+              <motion.a
+                variants={scaleReveal}
+                href="http://124.221.147.173:3000/fly/fly-personal-site"
+                className="inline-flex h-12 items-center justify-center gap-2 rounded-full border border-white/14 bg-white/[0.04] px-6 text-sm font-semibold text-white shadow-xl shadow-fuchsia-500/10 outline-none backdrop-blur transition hover:border-fuchsia-300/70 hover:bg-fuchsia-300/10 focus-visible:ring-2 focus-visible:ring-fuchsia-300"
+              >
+                <GitBranch className="h-4 w-4" />
+                Gitea 仓库
+              </motion.a>
+              <motion.a
+                variants={scaleReveal}
+                href="mailto:3505891631@qq.com"
+                className="inline-flex h-12 items-center justify-center gap-2 rounded-full border border-cyan-300/24 bg-cyan-300/[0.08] px-6 text-sm font-semibold text-cyan-100 shadow-xl shadow-cyan-500/10 outline-none backdrop-blur transition hover:border-cyan-200/80 hover:bg-cyan-300/14 focus-visible:ring-2 focus-visible:ring-cyan-300"
+              >
+                <Mail className="h-4 w-4" />
+                3505891631@qq.com
+              </motion.a>
            </motion.div>
          </motion.div>

-          <motion.aside
-            id="signal"
-            initial={{ opacity: 0, y: reduceMotion ? 0 : 28, rotate: reduceMotion ? 0 : 1.5 }}
-            animate={{ opacity: 1, y: 0, rotate: 0 }}
-            transition={{ duration: reduceMotion ? 0 : 0.7, ease: "easeOut" }}
-            className="relative mx-auto w-full max-w-[520px] lg:ml-auto"
+          <motion.div
+            initial="hidden"
+            animate="show"
+            variants={container}
+            className="grid gap-4"
          >
-            <div className="absolute -inset-4 rounded-[2rem] border border-[#f4efe4]/10 bg-[#f4efe4]/6" />
-            <div className="relative overflow-hidden rounded-[1.5rem] border border-[#f4efe4]/16 bg-[#f4efe4]/8 p-3 shadow-2xl shadow-black/40">
-              <Image
-                src="/fly-signal.png"
-                alt="Abstract fly personal field notes artwork"
-                width={1200}
-                height={1400}
-                priority
-                className="aspect-[6/7] w-full rounded-[1rem] object-cover"
-              />
-            </div>
-            <div className="absolute bottom-5 left-5 right-5 rounded-2xl border border-[#101411]/12 bg-[#f8f4ea]/88 p-4 text-[#101411] shadow-xl shadow-black/20 backdrop-blur">
-              <p className="text-xs font-semibold uppercase text-[#6e6a5e]">signal</p>
-              <p className="mt-2 text-sm leading-6">
-                A new home for notes, projects, experiments, and the quiet parts of making things.
-              </p>
-            </div>
-          </motion.aside>
-        </div>
-      </section>
+            {portals.map((portal, index) => {
+              const Icon = portal.icon;

-      <section id="work" className="bg-[#f4efe4] px-5 py-20 text-[#101411] sm:px-8 lg:px-12">
-        <div className="mx-auto max-w-7xl">
-          <div className="grid gap-8 border-t border-[#101411]/16 pt-8 lg:grid-cols-[0.72fr_1.28fr]">
-            <div>
-              <p className="text-sm font-semibold text-[#a24325]">What this site becomes</p>
-              <h2 className="mt-5 max-w-md font-display text-5xl font-semibold leading-tight sm:text-6xl">
-                一个更像 fly 的个人主页。
-              </h2>
-            </div>
-            <div className="grid gap-4 md:grid-cols-3">
-              {chapters.map((chapter) => (
-                <a
-                  key={chapter.title}
-                  href={chapter.href}
-                  className="group flex min-h-72 flex-col justify-between rounded-[1.25rem] border border-[#101411]/14 bg-white/55 p-5 outline-none transition hover:-translate-y-1 hover:border-[#101411]/35 hover:bg-white focus-visible:ring-2 focus-visible:ring-[#101411]"
+              return (
+                <motion.a
+                  key={portal.title}
+                  href={portal.href}
+                  variants={scaleReveal}
+                  className="group relative overflow-hidden rounded-[1.5rem] border border-white/12 bg-white/[0.055] p-5 shadow-2xl shadow-black/40 outline-none backdrop-blur-2xl transition hover:-translate-y-1 hover:border-white/28 focus-visible:ring-2 focus-visible:ring-cyan-300"
                >
-                  <div>
-                    <p className="text-sm font-semibold text-[#a24325]">{chapter.eyebrow}</p>
-                    <h3 className="mt-8 text-2xl font-semibold">{chapter.title}</h3>
-                    <p className="mt-5 text-sm leading-7 text-[#4d493f]">{chapter.body}</p>
+                  <div className={`absolute inset-y-0 left-0 w-1/2 bg-gradient-to-r ${portal.gradient} opacity-20 blur-3xl transition group-hover:opacity-40`} />
+                  <div className="relative flex items-start justify-between gap-6">
+                    <div>
+                      <p className="font-mono text-xs uppercase text-white/48">0{index + 1} / {portal.eyebrow}</p>
+                      <h2 className="mt-5 text-3xl font-black text-white sm:text-4xl">{portal.title}</h2>
+                      <p className="mt-3 max-w-md text-sm leading-7 text-white/62">{portal.description}</p>
+                    </div>
+                    <span className={`inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br ${portal.gradient} text-[#05050b] shadow-lg shadow-cyan-500/20`}>
+                      <Icon className="h-6 w-6" />
+                    </span>
                  </div>
-                  <span className="mt-8 inline-flex h-10 w-10 items-center justify-center rounded-full border border-[#101411]/18 text-lg transition group-hover:bg-[#d3ff30]">
-                    /
-                  </span>
-                </a>
-              ))}
-            </div>
-          </div>
+                </motion.a>
+              );
+            })}
+          </motion.div>
        </div>
      </section>

-      <section id="notes" className="bg-[#101411] px-5 py-20 text-[#f4efe4] sm:px-8 lg:px-12">
-        <div className="mx-auto grid max-w-7xl gap-10 lg:grid-cols-[1fr_1fr] lg:items-end">
-          <div>
-            <p className="text-sm font-semibold text-[#d3ff30]">Stack and rhythm</p>
-            <h2 className="mt-5 font-display text-5xl font-semibold leading-tight sm:text-6xl">
-              写代码，也整理判断。
-            </h2>
-            <p className="mt-6 max-w-xl text-base leading-8 text-[#d8d0bf]">
-              首页先完成品牌感和结构感。后续可以接入 MDX 博客、项目详情页、关于页和部署流程，把旧 VitePress 的内容慢慢迁过来。
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-3">
-            {stack.map((item) => (
-              <span
-                key={item}
-                className="rounded-full border border-[#f4efe4]/16 bg-[#f4efe4]/8 px-4 py-3 text-sm text-[#f4efe4]/78"
-              >
-                {item}
-              </span>
-            ))}
+      <motion.section
+        id="articles"
+        initial="hidden"
+        whileInView="show"
+        viewport={{ once: true, amount: 0.18 }}
+        variants={container}
+        className="relative px-5 py-24 sm:px-8 lg:px-10"
+      >
+        <motion.div variants={reveal} className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-cyan-300/70 to-transparent" />
+        <div className="mx-auto max-w-7xl">
+          <div className="mb-10 flex flex-col justify-between gap-6 md:flex-row md:items-end">
+            <motion.div variants={container}>
+              <motion.p variants={reveal} className="font-mono text-xs uppercase text-cyan-200">
+                technical archive
+              </motion.p>
+              <motion.h2 variants={reveal} className="mt-4 font-display text-5xl font-semibold sm:text-7xl">
+                技术文章
+              </motion.h2>
+            </motion.div>
+            <motion.p variants={reveal} className="max-w-xl text-base leading-8 text-white/58">
+              以「前端」为主线，同时延展到后端基础和 AI Agent。这里展示我的技术内容入口、实践路径和能力边界。
+            </motion.p>
          </div>
+
+          <motion.div variants={container} className="grid gap-4 lg:grid-cols-3">
+            {noteModules.map((module) => {
+              const Icon = module.icon;
+
+              return (
+                <motion.div key={module.name} variants={scaleReveal}>
+                  <Link
+                    href={module.href}
+                    className="group flex min-h-80 rounded-[1.75rem] border border-white/10 bg-gradient-to-b from-white/[0.08] to-white/[0.025] p-6 shadow-2xl shadow-black/30 outline-none backdrop-blur-xl transition hover:-translate-y-1 hover:border-cyan-300/45 hover:shadow-cyan-500/15 focus-visible:ring-2 focus-visible:ring-cyan-300"
+                  >
+                    <div className="flex h-full flex-col justify-between">
+                      <div>
+                        <span className="inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-cyan-300/12 text-cyan-100 ring-1 ring-cyan-300/25">
+                          <Icon className="h-6 w-6" />
+                        </span>
+                        <h3 className="mt-8 text-4xl font-black">{module.name}</h3>
+                        <p className="mt-5 text-sm leading-7 text-white/58">{module.description}</p>
+                      </div>
+                      <span className="mt-10 inline-flex items-center gap-2 text-sm font-semibold text-cyan-100">
+                        打开模块
+                        <ArrowUpRight className="h-4 w-4 transition group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
+                      </span>
+                    </div>
+                  </Link>
+                </motion.div>
+              );
+            })}
+          </motion.div>
        </div>
-      </section>
+      </motion.section>
+
+      <motion.section
+        id="life"
+        initial="hidden"
+        whileInView="show"
+        viewport={{ once: true, amount: 0.18 }}
+        variants={container}
+        className="px-5 py-24 sm:px-8 lg:px-10"
+      >
+        <motion.div
+          variants={scaleReveal}
+          className="mx-auto overflow-hidden rounded-[2rem] border border-white/10 bg-[radial-gradient(circle_at_18%_12%,rgba(217,70,239,0.28),transparent_32%),radial-gradient(circle_at_78%_80%,rgba(34,211,238,0.24),transparent_30%),rgba(255,255,255,0.05)] p-6 shadow-2xl shadow-fuchsia-500/10 backdrop-blur-xl sm:p-10 lg:max-w-7xl"
+        >
+          <div className="grid gap-10 lg:grid-cols-[0.8fr_1.2fr] lg:items-end">
+            <motion.div variants={container}>
+              <motion.p variants={reveal} className="font-mono text-xs uppercase text-lime-200">
+                life channel
+              </motion.p>
+              <motion.h2 variants={reveal} className="mt-4 font-display text-5xl font-semibold sm:text-7xl">
+                生活分享
+              </motion.h2>
+              <motion.p variants={reveal} className="mt-6 max-w-xl text-base leading-8 text-white/66">
+                技术之外的日常切面。阅读、音乐、照片、旅行和一些阶段性的想法，让这个网站不只是一份技术档案。
+              </motion.p>
+            </motion.div>
+            <motion.div variants={container} className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+              {lifeTopics.map((topic) => (
+                <motion.div key={topic} variants={scaleReveal}>
+                  <Link
+                    href="/life"
+                    className="block rounded-2xl border border-white/12 bg-black/20 px-5 py-5 text-sm font-bold text-white/82 shadow-lg shadow-black/10 outline-none transition hover:-translate-y-0.5 hover:border-cyan-200/55 hover:bg-cyan-300/[0.08] hover:text-cyan-50 hover:shadow-[0_0_28px_rgba(34,211,238,0.18)] focus-visible:ring-2 focus-visible:ring-cyan-300"
+                  >
+                    {topic}
+                  </Link>
+                </motion.div>
+              ))}
+            </motion.div>
+          </div>
+        </motion.div>
+      </motion.section>
+
+      <motion.footer
+        initial="hidden"
+        whileInView="show"
+        viewport={{ once: true, amount: 0.4 }}
+        variants={container}
+        className="px-5 py-10 text-white/46 sm:px-8 lg:px-10"
+      >
+        <motion.div
+          variants={reveal}
+          className="mx-auto flex max-w-7xl flex-col justify-between gap-4 border-t border-white/10 pt-6 text-sm md:flex-row"
+        >
+          <p>© 2026 fly. Built with Next.js, Tailwind CSS and Motion.</p>
+          <a
+            href="http://124.221.147.173:3000/fly/fly-personal-site"
+            className="inline-flex items-center gap-2 text-cyan-100 outline-none transition hover:text-fuchsia-200 focus-visible:ring-2 focus-visible:ring-cyan-300"
+          >
+            Gitea repository
+            <ArrowUpRight className="h-4 w-4" />
+          </a>
+        </motion.div>
+      </motion.footer>
    </main>
  );
 }
@@ -0,0 +1,83 @@
+import Link from "next/link";
+
+type PlaceholderPageProps = {
+  eyebrow: string;
+  title: string;
+  description: string;
+  items: readonly (
+    | string
+    | {
+        label: string;
+        href: string;
+      }
+  )[];
+};
+
+export function PlaceholderPage({
+  eyebrow,
+  title,
+  description,
+  items,
+}: PlaceholderPageProps) {
+  return (
+    <main className="min-h-dvh bg-[#080807] px-5 py-6 text-[#f7f1e3] sm:px-8 lg:px-12">
+      <div className="mx-auto flex min-h-[calc(100dvh-48px)] max-w-6xl flex-col">
+        <header className="flex items-center justify-between border-b border-[#d6b56d]/20 pb-5">
+          <Link
+            href="/"
+            className="rounded-full border border-[#d6b56d]/28 px-4 py-2 font-display text-xl outline-none transition hover:bg-[#d6b56d] hover:text-[#080807] focus-visible:ring-2 focus-visible:ring-[#d6b56d]"
+          >
+            fly
+          </Link>
+          <Link
+            href="/"
+            className="text-sm text-[#d6b56d] outline-none transition hover:text-[#f7f1e3] focus-visible:ring-2 focus-visible:ring-[#d6b56d]"
+          >
+            返回首页
+          </Link>
+        </header>
+
+        <section className="grid flex-1 gap-10 py-16 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
+          <div>
+            <p className="font-mono text-xs uppercase text-[#d6b56d]">{eyebrow}</p>
+            <h1 className="mt-5 font-display text-5xl font-medium leading-tight sm:text-7xl">
+              {title}
+            </h1>
+            <p className="mt-7 max-w-2xl text-lg leading-9 text-[#b9ad91]">{description}</p>
+          </div>
+
+          <div className="grid gap-3">
+            {items.map((item, index) => {
+              const label = typeof item === "string" ? item : item.label;
+              const content = (
+                <div
+                  key={label}
+                  className="rounded-[1rem] border border-[#d6b56d]/16 bg-[#f7f1e3]/[0.035] p-5 transition hover:border-cyan-300/45 hover:bg-cyan-300/[0.06]"
+                >
+                  <p className="font-mono text-xs text-[#d6b56d]">
+                    {String(index + 1).padStart(2, "0")}
+                  </p>
+                  <p className="mt-3 text-base text-[#f7f1e3]">{label}</p>
+                </div>
+              );
+
+              if (typeof item === "string") {
+                return content;
+              }
+
+              return (
+                <Link
+                  key={label}
+                  href={item.href}
+                  className="block outline-none focus-visible:ring-2 focus-visible:ring-cyan-300"
+                >
+                  {content}
+                </Link>
+              );
+            })}
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+}
@@ -0,0 +1,84 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+type TechDocArticleProps = {
+  contentHtml: string;
+};
+
+export function TechDocArticle({ contentHtml }: TechDocArticleProps) {
+  const articleRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const article = articleRef.current;
+    if (!article) {
+      return;
+    }
+
+    const timeouts: ReturnType<typeof setTimeout>[] = [];
+    const buttons: HTMLButtonElement[] = [];
+    const copyText = async (text: string) => {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text);
+        return;
+      }
+
+      const textarea = document.createElement("textarea");
+      textarea.value = text;
+      textarea.setAttribute("readonly", "");
+      textarea.style.position = "fixed";
+      textarea.style.opacity = "0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      textarea.remove();
+    };
+
+    article.querySelectorAll("pre").forEach((pre) => {
+      const code = pre.querySelector("code");
+      pre.setAttribute("data-language", code?.getAttribute("lang")?.toUpperCase() || "CODE");
+
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "tech-doc-code-copy";
+      button.textContent = "复制";
+
+      button.addEventListener("click", async () => {
+        const text = code?.textContent?.trimEnd();
+        if (!text) {
+          return;
+        }
+
+        try {
+          await copyText(text);
+          button.textContent = "已复制";
+          button.dataset.copied = "true";
+
+          const timeout = setTimeout(() => {
+            button.textContent = "复制";
+            delete button.dataset.copied;
+          }, 1400);
+          timeouts.push(timeout);
+        } catch {
+          button.textContent = "复制失败";
+        }
+      });
+
+      pre.appendChild(button);
+      buttons.push(button);
+    });
+
+    return () => {
+      timeouts.forEach(clearTimeout);
+      buttons.forEach((button) => button.remove());
+    };
+  }, [contentHtml]);
+
+  return (
+    <article
+      ref={articleRef}
+      className="tech-doc-content min-w-0 max-w-full rounded-[1.75rem] border border-white/10 bg-[#090915]/95 p-5 shadow-2xl shadow-cyan-500/10 sm:p-8 lg:p-10"
+      dangerouslySetInnerHTML={{ __html: contentHtml }}
+    />
+  );
+}
@@ -0,0 +1,131 @@
+import Link from "next/link";
+import { ArrowLeft, ExternalLink } from "lucide-react";
+import { BackToTopButton } from "@/components/back-to-top-button";
+import { TechDocArticle } from "@/components/tech-doc-article";
+import { TechDocToc } from "@/components/tech-doc-toc";
+
+type KnowledgePoint = {
+  title: string;
+  note?: string;
+  children?: readonly string[];
+};
+
+type TechDocPageProps = {
+  eyebrow: string;
+  title: string;
+  description: string;
+  points?: readonly KnowledgePoint[];
+  contentHtml?: string;
+  toc?: readonly {
+    title: string;
+    href: string;
+  }[];
+  source?: {
+    label: string;
+    href?: string;
+  };
+};
+
+export function TechDocPage({
+  eyebrow,
+  title,
+  description,
+  points = [],
+  contentHtml,
+  toc = [],
+  source,
+}: TechDocPageProps) {
+  return (
+    <main className="relative min-h-dvh overflow-x-clip bg-[#05050b] px-5 py-6 text-white sm:px-8 lg:px-10">
+      <div className="neon-aurora" />
+      <div className="cyber-grid" />
+      <div className="scanline" />
+
+      <div className="relative z-10 mx-auto w-full max-w-[96rem]">
+        <header className="flex items-center justify-between rounded-full border border-white/10 bg-white/[0.04] px-4 py-3 shadow-2xl shadow-cyan-500/10 backdrop-blur-2xl">
+          <Link
+            href="/notes/frontend"
+            className="inline-flex h-11 items-center gap-2 rounded-full border border-white/12 bg-white/[0.05] px-4 text-sm font-semibold text-white/80 outline-none transition hover:border-cyan-300/70 hover:text-cyan-100 focus-visible:ring-2 focus-visible:ring-cyan-300"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            前端笔记
+          </Link>
+          <Link
+            href="/"
+            className="rounded-full bg-white px-4 py-2 text-sm font-black text-[#05050b] outline-none transition hover:bg-cyan-200 focus-visible:ring-2 focus-visible:ring-cyan-300"
+          >
+            fly
+          </Link>
+        </header>
+
+        <section className="grid gap-10 py-14 lg:grid-cols-[20rem_minmax(0,64rem)] lg:justify-center lg:py-20">
+          <aside className="min-w-0 lg:w-80">
+            <p className="font-mono text-xs uppercase text-cyan-200">{eyebrow}</p>
+            <h1 className="mt-5 font-display text-5xl font-semibold leading-tight sm:text-7xl">
+              {title}
+            </h1>
+            <p className="mt-6 max-w-xl text-base leading-8 text-white/62">{description}</p>
+            {source ? (
+              source.href ? (
+                <a
+                  href={source.href}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="mt-8 inline-flex h-11 items-center gap-2 rounded-full border border-fuchsia-300/24 bg-fuchsia-300/[0.08] px-4 text-sm font-semibold text-fuchsia-100 outline-none transition hover:border-fuchsia-200/80 hover:bg-fuchsia-300/14 focus-visible:ring-2 focus-visible:ring-fuchsia-300"
+                >
+                  {source.label}
+                  <ExternalLink className="h-4 w-4" />
+                </a>
+              ) : (
+                <span className="mt-8 inline-flex h-11 items-center rounded-full border border-fuchsia-300/24 bg-fuchsia-300/[0.08] px-4 text-sm font-semibold text-fuchsia-100">
+                  {source.label}
+                </span>
+              )
+            ) : null}
+
+            {toc.length ? <TechDocToc toc={toc} /> : null}
+          </aside>
+
+          {contentHtml ? (
+            <TechDocArticle contentHtml={contentHtml} />
+          ) : (
+            <div className="min-w-0 space-y-4">
+              {points.map((point, index) => (
+                <article
+                  key={point.title}
+                  className="rounded-[1.5rem] border border-white/10 bg-white/[0.045] p-5 shadow-xl shadow-black/20 backdrop-blur transition hover:border-cyan-300/40 hover:bg-cyan-300/[0.06] sm:p-6"
+                >
+                  <div className="flex gap-4">
+                    <span className="mt-1 font-mono text-sm text-cyan-200">
+                      {String(index + 1).padStart(2, "0")}
+                    </span>
+                    <div>
+                      <h2 className="text-xl font-black text-white sm:text-2xl">{point.title}</h2>
+                      {point.note ? (
+                        <p className="mt-3 text-sm leading-7 text-white/58">{point.note}</p>
+                      ) : null}
+                      {point.children?.length ? (
+                        <div className="mt-4 flex flex-wrap gap-2">
+                          {point.children.map((child) => (
+                            <span
+                              key={child}
+                              className="rounded-full border border-white/10 bg-black/20 px-3 py-2 text-xs font-semibold text-white/70"
+                            >
+                              {child}
+                            </span>
+                          ))}
+                        </div>
+                      ) : null}
+                    </div>
+                  </div>
+                </article>
+              ))}
+            </div>
+          )}
+        </section>
+      </div>
+
+      <BackToTopButton />
+    </main>
+  );
+}
@@ -0,0 +1,39 @@
+import { ListTree } from "lucide-react";
+
+type TocItem = {
+  title: string;
+  href: string;
+};
+
+type TechDocTocProps = {
+  toc: readonly TocItem[];
+};
+
+export function TechDocToc({ toc }: TechDocTocProps) {
+  return (
+    <div className="mt-8 w-full lg:sticky lg:top-8 lg:w-80">
+      <nav
+        className="tech-doc-toc w-full rounded-[1.25rem] border border-white/10 bg-[#090915]/90 p-4 shadow-2xl shadow-black/20"
+      >
+        <div className="mb-3 flex items-center gap-2 font-mono text-xs uppercase tracking-[0.18em] text-cyan-200">
+          <ListTree className="h-4 w-4" />
+          目录
+        </div>
+        <div className="max-h-[calc(100dvh-8rem)] space-y-1 overflow-y-auto pr-1">
+          {toc.map((item, index) => (
+            <a
+              key={item.href}
+              href={item.href}
+              className="group flex items-start gap-3 rounded-xl px-3 py-2 text-sm text-white/58 transition hover:bg-cyan-300/[0.08] hover:text-cyan-100"
+            >
+              <span className="block w-7 shrink-0 font-mono text-xs leading-5 text-fuchsia-200/70 transition group-hover:text-fuchsia-100">
+                {String(index + 1).padStart(2, "0")}
+              </span>
+              <span className="block flex-1 leading-5">{item.title}</span>
+            </a>
+          ))}
+        </div>
+      </nav>
+    </div>
+  );
+}