Build technical notes archive

package-lock.json

@@ -8,6 +8,7 @@
       "name": "fly-personal-site",
       "version": "0.1.0",
       "dependencies": {
+        "lucide-react": "^1.17.0",
         "motion": "^12.40.0",
         "next": "16.2.7",
         "react": "19.2.4",
@@ -4634,6 +4635,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmmirror.com/lucide-react/-/lucide-react-1.17.0.tgz",
+      "integrity": "sha512-9FA9evdox/JQL5PT57fdA1x/yg8T7knJ98+zjTL3UfKza6pflQUUh3XtaQIHKvnsJw1lmsEyHVlt5jchYxOQ5w==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.21.tgz",
@@ -9217,6 +9226,12 @@
         "yallist": "^3.0.2"
       }
     },
+    "lucide-react": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmmirror.com/lucide-react/-/lucide-react-1.17.0.tgz",
+      "integrity": "sha512-9FA9evdox/JQL5PT57fdA1x/yg8T7knJ98+zjTL3UfKza6pflQUUh3XtaQIHKvnsJw1lmsEyHVlt5jchYxOQ5w==",
+      "requires": {}
+    },
     "magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.21.tgz",

package.json

@@ -9,6 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "lucide-react": "^1.17.0",
     "motion": "^12.40.0",
     "next": "16.2.7",
     "react": "19.2.4",

src/app/globals.css

@@ -1,8 +1,8 @@
 @import "tailwindcss";
 
 :root {
-  --background: #101411;
+  --background: #05050b;
-  --foreground: #f4efe4;
+  --foreground: #ffffff;
 }
 
 @theme inline {
@@ -18,38 +18,292 @@
 }
 
 html {
+  background: var(--background);
+  overflow-x: clip;
+  overscroll-behavior-y: none;
   scroll-behavior: smooth;
 }
 
 body {
   margin: 0;
+  min-height: 100dvh;
+  overflow-x: clip;
   background: var(--background);
   color: var(--foreground);
   font-family: var(--font-body), sans-serif;
 }
 
 ::selection {
-  background: #d3ff30;
+  background: #22d3ee;
-  color: #101411;
+  color: #05050b;
 }
 
 a {
   text-decoration: none;
 }
 
-.noise-layer {
+.tech-doc-content {
+  animation: doc-rise 720ms ease both;
+  contain: paint;
+  max-width: 100%;
+  color: rgba(255, 255, 255, 0.74);
+  font-size: 16px;
+  line-height: 2;
+  overflow-wrap: anywhere;
+}
+
+.tech-doc-toc a {
+  text-decoration: none;
+}
+
+.tech-doc-toc div::-webkit-scrollbar,
+.tech-doc-content pre::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.tech-doc-toc div::-webkit-scrollbar-thumb,
+.tech-doc-content pre::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: rgba(103, 232, 249, 0.38);
+}
+
+.tech-doc-content::before {
+  content: "";
+  display: block;
+  height: 3px;
+  margin-bottom: 28px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #22d3ee, #a855f7, #f0abfc, #84cc16);
+  box-shadow: 0 0 26px rgba(34, 211, 238, 0.42);
+}
+
+.tech-doc-content :where(h3, h4) {
+  margin: 42px 0 16px;
+  scroll-margin-top: 32px;
+  color: #ffffff;
+  font-weight: 900;
+  line-height: 1.35;
+}
+
+.tech-doc-content h3 {
+  font-size: clamp(1.45rem, 2vw, 2rem);
+  background: linear-gradient(90deg, #67e8f9, #f0abfc 58%, #bef264);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  text-shadow: 0 0 30px rgba(34, 211, 238, 0.2);
+}
+
+.tech-doc-content h4 {
+  font-size: 1.05rem;
+  color: #a5f3fc;
+}
+
+.tech-doc-content :where(p, ul, ol, blockquote, pre) {
+  margin: 16px 0;
+}
+
+.tech-doc-content :where(ul, ol) {
+  padding-left: 1.35rem;
+}
+
+.tech-doc-content li {
+  margin: 8px 0;
+  padding-left: 0.2rem;
+}
+
+.tech-doc-content li::marker {
+  color: #67e8f9;
+  font-weight: 800;
+}
+
+.tech-doc-content a {
+  color: #67e8f9;
+  border-bottom: 1px solid rgba(103, 232, 249, 0.35);
+  transition:
+    color 160ms ease,
+    border-color 160ms ease,
+    text-shadow 160ms ease;
+}
+
+.tech-doc-content a:hover {
+  color: #f0abfc;
+  border-color: rgba(240, 171, 252, 0.75);
+  text-shadow: 0 0 18px rgba(240, 171, 252, 0.35);
+}
+
+.tech-doc-content strong {
+  color: #ffffff;
+  font-weight: 900;
+}
+
+.tech-doc-content code {
+  border: 1px solid rgba(103, 232, 249, 0.18);
+  border-radius: 8px;
+  background: rgba(34, 211, 238, 0.1);
+  color: #a5f3fc;
+  font-family: var(--font-code), monospace;
+  font-size: 0.9em;
+  padding: 0.1rem 0.38rem;
+}
+
+.tech-doc-content pre {
+  position: relative;
+  max-width: 100%;
+  min-width: 0;
+  width: 100%;
+  overflow-x: auto;
+  border: 1px solid rgba(45, 212, 191, 0.28);
+  border-radius: 20px;
+  padding-top: 2.75rem;
+  background:
+    linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0 2.75rem, transparent 2.75rem),
+    radial-gradient(circle at 16% 0%, rgba(45, 212, 191, 0.2), transparent 28%),
+    radial-gradient(circle at 88% 8%, rgba(14, 165, 233, 0.22), transparent 26%),
+    #020617;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
+    0 16px 46px rgba(2, 6, 23, 0.42),
+    0 0 24px rgba(45, 212, 191, 0.08);
+}
+
+.tech-doc-content pre::before {
+  content: attr(data-language);
+  position: absolute;
+  left: 1.1rem;
+  top: 0.9rem;
+  color: #5eead4;
+  font-family: var(--font-code), monospace;
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.16em;
+}
+
+.tech-doc-code-copy {
+  position: absolute;
+  right: 0.85rem;
+  top: 0.56rem;
+  z-index: 1;
+  width: 4.1rem;
+  border: 1px solid rgba(103, 232, 249, 0.38);
+  border-radius: 999px;
+  background: rgba(8, 47, 73, 0.72);
+  color: #cffafe;
+  cursor: pointer;
+  font-family: var(--font-body), sans-serif;
+  font-size: 0.78rem;
+  font-weight: 800;
+  line-height: 1;
+  padding: 0.52rem 0.72rem;
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    color 160ms ease;
+}
+
+.tech-doc-code-copy:hover,
+.tech-doc-code-copy[data-copied="true"] {
+  border-color: rgba(94, 234, 212, 0.9);
+  background: rgba(20, 184, 166, 0.22);
+  color: #ffffff;
+  box-shadow: 0 0 24px rgba(45, 212, 191, 0.26);
+}
+
+.tech-doc-content pre code {
+  display: block;
+  width: max-content;
+  min-width: max-content;
+  max-width: none;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.82);
+  font-size: 0.88rem;
+  line-height: 1.8;
+  padding: 0 1.25rem 1.25rem;
+  white-space: pre;
+}
+
+.tech-doc-content img {
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  object-fit: contain;
+  margin: 24px 0;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.04);
+  box-shadow: 0 18px 52px rgba(34, 211, 238, 0.12);
+}
+
+.tech-doc-content blockquote {
+  border-left: 3px solid #22d3ee;
+  border-radius: 14px;
+  background: rgba(34, 211, 238, 0.08);
+  color: rgba(255, 255, 255, 0.78);
+  padding: 0.8rem 1rem;
+}
+
+.tech-doc-content hr {
+  height: 1px;
+  margin: 32px 0;
+  border: 0;
+  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.45), transparent);
+}
+
+.neon-aurora {
+  position: absolute;
+  inset: -18% -10% auto -10%;
+  z-index: -3;
+  height: 72%;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 12% 24%, rgba(34, 211, 238, 0.44), transparent 28%),
+    radial-gradient(circle at 48% 8%, rgba(99, 102, 241, 0.36), transparent 30%),
+    radial-gradient(circle at 86% 32%, rgba(217, 70, 239, 0.42), transparent 28%),
+    radial-gradient(circle at 74% 72%, rgba(132, 204, 22, 0.18), transparent 24%);
+  filter: blur(12px) saturate(1.18);
+  transform: translateZ(0);
+}
+
+.cyber-grid {
+  position: absolute;
+  inset: 0;
+  z-index: -2;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(34, 211, 238, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(217, 70, 239, 0.08) 1px, transparent 1px);
+  background-size: 64px 64px;
+  mask-image: linear-gradient(to bottom, black 0%, black 56%, transparent 100%);
+}
+
+.scanline {
   position: absolute;
   inset: 0;
   z-index: -1;
   pointer-events: none;
-  opacity: 0.2;
+  opacity: 0.18;
-  background-image:
+  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
-    radial-gradient(circle at 18% 30%, rgba(244, 239, 228, 0.18) 0 1px, transparent 1px),
+  background-size: 100% 7px;
-    radial-gradient(circle at 72% 64%, rgba(211, 255, 48, 0.14) 0 1px, transparent 1px);
-  background-size: 34px 34px, 46px 46px;
   mix-blend-mode: screen;
 }
 
+@keyframes doc-rise {
+  from {
+    opacity: 0;
+    transform: translateY(18px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,

src/app/life/page.tsx

@@ -0,0 +1,12 @@
+import { PlaceholderPage } from "@/components/placeholder-page";
+
+export default function LifePage() {
+  return (
+    <PlaceholderPage
+      eyebrow="Life journal"
+      title="生活分享"
+      description="技术之外的个人切面：日常、阅读、音乐、照片、旅行，以及阶段性的想法。"
+      items={["日常记录", "阅读和音乐", "照片和旅行", "一些想法"]}
+    />
+  );
+}

src/app/notes/[module]/page.tsx

@@ -0,0 +1,110 @@
+import { notFound } from "next/navigation";
+import { FrontendNotesPage } from "@/components/frontend-notes-page";
+import { frontendArticles } from "@/content/notes/frontend/articles";
+
+const modules = ["frontend", "backend", "ai-agent"] as const;
+
+type PageProps = {
+  params: Promise<{
+    module: string;
+  }>;
+};
+
+export function generateStaticParams() {
+  return modules.map((module) => ({ module }));
+}
+
+export default async function NotesModulePage({ params }: PageProps) {
+  const { module } = await params;
+
+  if (!modules.includes(module as (typeof modules)[number])) {
+    notFound();
+  }
+
+  if (module === "frontend") {
+    const articles = frontendArticles.map((article) => ({
+      slug: article.slug,
+      title: article.title,
+      description: article.description,
+      href: `/notes/frontend/${article.slug}`,
+    }));
+
+    return (
+      <FrontendNotesPage
+        eyebrow="Frontend knowledge base"
+        title="前端笔记"
+        description="fly 的前端知识索引，覆盖基础语言、框架机制、浏览器、网络、性能与代码执行题。"
+        listDescription="每个入口都是一组可独立阅读的知识点，适合快速定位概念、机制与常见问题。"
+        articles={articles}
+      />
+    );
+  }
+
+  if (module === "backend") {
+    return (
+      <FrontendNotesPage
+        eyebrow="Backend knowledge base"
+        title="后端笔记"
+        description="后端方向会整理服务端基础、接口设计、数据库、部署、鉴权、缓存和稳定性相关内容。"
+        featuredTitle="敬请期待"
+        listTitle="规划内容"
+        listDescription="这些模块会在后续逐步补齐，先保留入口和内容结构。"
+        articles={[
+          {
+            slug: "backend-api",
+            title: "API 设计",
+            description: "接口规范、请求响应结构、错误码、鉴权边界和版本管理等内容整理。",
+            status: "soon",
+          },
+          {
+            slug: "backend-database",
+            title: "数据库",
+            description: "数据建模、索引、事务、查询优化和常见业务存储方案。",
+            status: "soon",
+          },
+          {
+            slug: "backend-deployment",
+            title: "部署与服务稳定性",
+            description: "服务部署、日志、监控、缓存、限流和故障排查相关实践。",
+            status: "soon",
+          },
+        ]}
+      />
+    );
+  }
+
+  if (module === "ai-agent") {
+    return (
+      <FrontendNotesPage
+        eyebrow="AI Agent knowledge base"
+        title="AI Agent 笔记"
+        description="AI Agent 方向会记录工作流、工具调用、上下文工程、提示词和自动化场景实践。"
+        featuredTitle="敬请期待"
+        listTitle="规划内容"
+        listDescription="这些方向会随着实践逐步沉淀成可回看的技术文章。"
+        articles={[
+          {
+            slug: "agent-workflow",
+            title: "Agent 工作流",
+            description: "任务拆解、执行循环、状态管理和人机协作流程。",
+            status: "soon",
+          },
+          {
+            slug: "agent-tools",
+            title: "工具调用",
+            description: "函数调用、MCP、浏览器自动化、文件操作和外部系统集成。",
+            status: "soon",
+          },
+          {
+            slug: "agent-prompting",
+            title: "提示词与上下文工程",
+            description: "角色约束、上下文压缩、记忆策略和输出质量控制。",
+            status: "soon",
+          },
+        ]}
+      />
+    );
+  }
+
+  notFound();
+}

src/app/notes/frontend/[slug]/page.tsx

@@ -0,0 +1,35 @@
+import { notFound } from "next/navigation";
+import { TechDocPage } from "@/components/tech-doc-page";
+import { frontendArticles, getFrontendArticle } from "@/content/notes/frontend/articles";
+import { getTechArticle } from "@/lib/tech-article";
+
+type PageProps = {
+  params: Promise<{
+    slug: string;
+  }>;
+};
+
+export function generateStaticParams() {
+  return frontendArticles.map((article) => ({ slug: article.slug }));
+}
+
+export default async function FrontendArticlePage({ params }: PageProps) {
+  const { slug } = await params;
+  const articleMeta = getFrontendArticle(slug);
+
+  if (!articleMeta) {
+    notFound();
+  }
+
+  const article = getTechArticle(`frontend/${articleMeta.file}`);
+
+  return (
+    <TechDocPage
+      eyebrow="Frontend notes"
+      title={articleMeta.title}
+      description={articleMeta.description}
+      contentHtml={article.contentHtml}
+      toc={articleMeta.slug === "code-output" ? [] : article.toc}
+    />
+  );
+}

src/components/back-to-top-button.tsx

@@ -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>
+  );
+}

src/components/frontend-notes-page.tsx

@@ -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>
+  );
+}

src/components/home-page.tsx

@@ -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 = [
+const navItems = [
-  { label: "Frontend", value: "React / Vue / Next.js" },
+  { label: "技术文章", href: "#articles" },
-  { label: "Notes", value: "HTML, CSS, JS, Git" },
+  { label: "生活分享", href: "#life" },
-  { label: "Current", value: "Rebuilding a personal web identity" },
+  { 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",
+    title: "技术文章",
-    eyebrow: "01",
+    href: "#articles",
-    body: "把前端知识拆成可复用的笔记，不追求堆砌，追求每次回看都能拿来解决问题。",
+    eyebrow: "Knowledge archive",
-    href: "http://124.221.147.173:3000/fly/flys_blog",
+    description: "围绕前端工程、服务端基础和 AI Agent 的技术内容索引。",
+    icon: TerminalSquare,
+    gradient: "from-cyan-300 via-blue-500 to-violet-500",
   },
   {
-    title: "Personal Experiments",
+    title: "生活分享",
-    eyebrow: "02",
+    href: "#life",
-    body: "记录一些页面、工具、交互和生活灵感，把学习过程变成能被看见的作品。",
+    eyebrow: "Life stream",
-    href: "http://124.221.147.173:3000/fly/fly-personal-site",
+    description: "技术之外的日常片段，呈现更完整的个人侧面。",
-  },
+    icon: LifeBuoy,
-  {
+    gradient: "from-lime-300 via-emerald-400 to-cyan-400",
-    title: "Quiet Systems",
-    eyebrow: "03",
-    body: "偏爱清晰、克制、有质感的界面。让复杂内容保持秩序，让细节自己发光。",
-    href: "#signal",
   },
 ];
 
-const stack = [
+const noteModules = [
-  "Next.js",
+  {
-  "Tailwind CSS",
+    name: "前端",
-  "Motion",
+    href: "/notes/frontend",
-  "TypeScript",
+    icon: Braces,
-  "Vue",
+    description: "React、Vue、Next.js、CSS、动画、工程化。",
-  "React",
+  },
-  "Git",
+  {
-  "VitePress",
+    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 },
+    hidden: { opacity: 0, y: distance, filter: reduceMotion ? "none" : "blur(10px)" },
-    show: { opacity: 1, y: 0 },
+    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]">
+    <main className="min-h-dvh overflow-hidden bg-[#05050b] text-white">
-      <section className="relative isolate flex min-h-dvh items-center px-5 py-6 sm:px-8 lg:px-12">
+      <section className="relative isolate min-h-dvh px-5 py-5 sm:px-8 lg:px-10">
-        <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]" />
+        <motion.div
-        <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%)]" />
+          className="neon-aurora"
-        <div className="noise-layer" />
+          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 }}
+            variants={container}
-            className="flex min-h-[calc(100dvh-48px)] flex-col justify-between gap-10 py-2 lg:min-h-[calc(100dvh-64px)]"
+            className="max-w-3xl"
           >
-            <motion.header variants={reveal} className="flex items-center justify-between gap-4">
+            <motion.p
-              <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
               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) => (
+              frontend engineer / web experience / creative code
-                <div key={item.label} className="min-h-24">
+            </motion.p>
-                  <p className="text-xs font-semibold uppercase text-[#f27c4a]">{item.label}</p>
+            <motion.h1
-                  <p className="mt-3 max-w-[18rem] text-sm leading-6 text-[#f4efe4]/72">{item.value}</p>
+              variants={reveal}
-                </div>
+              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
+          <motion.div
-            id="signal"
+            initial="hidden"
-            initial={{ opacity: 0, y: reduceMotion ? 0 : 28, rotate: reduceMotion ? 0 : 1.5 }}
+            animate="show"
-            animate={{ opacity: 1, y: 0, rotate: 0 }}
+            variants={container}
-            transition={{ duration: reduceMotion ? 0 : 0.7, ease: "easeOut" }}
+            className="grid gap-4"
-            className="relative mx-auto w-full max-w-[520px] lg:ml-auto"
           >
-            <div className="absolute -inset-4 rounded-[2rem] border border-[#f4efe4]/10 bg-[#f4efe4]/6" />
+            {portals.map((portal, index) => {
-            <div className="relative overflow-hidden rounded-[1.5rem] border border-[#f4efe4]/16 bg-[#f4efe4]/8 p-3 shadow-2xl shadow-black/40">
+              const Icon = portal.icon;
-              <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>
 
-      <section id="work" className="bg-[#f4efe4] px-5 py-20 text-[#101411] sm:px-8 lg:px-12">
+              return (
-        <div className="mx-auto max-w-7xl">
+                <motion.a
-          <div className="grid gap-8 border-t border-[#101411]/16 pt-8 lg:grid-cols-[0.72fr_1.28fr]">
+                  key={portal.title}
-            <div>
+                  href={portal.href}
-              <p className="text-sm font-semibold text-[#a24325]">What this site becomes</p>
+                  variants={scaleReveal}
-              <h2 className="mt-5 max-w-md font-display text-5xl font-semibold leading-tight sm:text-6xl">
+                  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"
-                一个更像 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]"
                 >
-                  <div>
+                  <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`} />
-                    <p className="text-sm font-semibold text-[#a24325]">{chapter.eyebrow}</p>
+                  <div className="relative flex items-start justify-between gap-6">
-                    <h3 className="mt-8 text-2xl font-semibold">{chapter.title}</h3>
+                    <div>
-                    <p className="mt-5 text-sm leading-7 text-[#4d493f]">{chapter.body}</p>
+                      <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]">
+                </motion.a>
-                    /
+              );
-                  </span>
+            })}
-                </a>
+          </motion.div>
-              ))}
-            </div>
-          </div>
         </div>
       </section>
 
-      <section id="notes" className="bg-[#101411] px-5 py-20 text-[#f4efe4] sm:px-8 lg:px-12">
+      <motion.section
-        <div className="mx-auto grid max-w-7xl gap-10 lg:grid-cols-[1fr_1fr] lg:items-end">
+        id="articles"
-          <div>
+        initial="hidden"
-            <p className="text-sm font-semibold text-[#d3ff30]">Stack and rhythm</p>
+        whileInView="show"
-            <h2 className="mt-5 font-display text-5xl font-semibold leading-tight sm:text-6xl">
+        viewport={{ once: true, amount: 0.18 }}
-              写代码，也整理判断。
+        variants={container}
-            </h2>
+        className="relative px-5 py-24 sm:px-8 lg:px-10"
-            <p className="mt-6 max-w-xl text-base leading-8 text-[#d8d0bf]">
+      >
-              首页先完成品牌感和结构感。后续可以接入 MDX 博客、项目详情页、关于页和部署流程，把旧 VitePress 的内容慢慢迁过来。
+        <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" />
-            </p>
+        <div className="mx-auto max-w-7xl">
-          </div>
+          <div className="mb-10 flex flex-col justify-between gap-6 md:flex-row md:items-end">
-          <div className="flex flex-wrap gap-3">
+            <motion.div variants={container}>
-            {stack.map((item) => (
+              <motion.p variants={reveal} className="font-mono text-xs uppercase text-cyan-200">
-              <span
+                technical archive
-                key={item}
+              </motion.p>
-                className="rounded-full border border-[#f4efe4]/16 bg-[#f4efe4]/8 px-4 py-3 text-sm text-[#f4efe4]/78"
+              <motion.h2 variants={reveal} className="mt-4 font-display text-5xl font-semibold sm:text-7xl">
-              >
+                技术文章
-                {item}
+              </motion.h2>
-              </span>
+            </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>
   );
 }

src/components/placeholder-page.tsx

@@ -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>
+  );
+}

src/components/tech-doc-article.tsx

@@ -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 }}
+    />
+  );
+}

src/components/tech-doc-page.tsx

@@ -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>
+  );
+}