阿腾技术网站 (Ateng Matrix)

⚡ 全栈架构决策矩阵 · 工业级 AI 工程底座 · 纯白天幕视觉门户

---

🌟 核心设计与视觉体验

阿腾技术网站（Ateng Matrix）是一套专为极客开发者量身定制的**纯白现代极客风（Light Tech 2026）**开源个人工程门户与决策中枢。突破传统黑灰暗黑风的刻板印象，以明亮通透的纯白天幕呈现顶级工业质感：

• 🌊 60FPS 满帧漫反射极光天幕：依托纯原生 CSS @keyframes 与 GPU 硬件渲染层构建三维液态流体色浪，彻底告别死板网格与突兀硬线条，呈现丝滑纯净的科技沉浸感。
• 🪐 轻量 Canvas 物理引力粒子场：集成微物理引擎驱动的空气感浮动粒子，动态捕捉指针位置并自适应三端阶梯式功耗（手机 14 点节能省电，电脑 28 点全景微动）。
• 💎 3D 透视陀螺仪与专属环形激光：运用 (hover: hover) and (pointer: fine) 高精度指针环境感知，为核心旗舰卡片装配专属语义渐变环形激光（Border Beam）与动态角标微光，触控端自动平滑降级为 iOS 原生微弹反馈。
• 📐 三端治愈级自适应网格：
  • 电脑端（≥ 1024px）：双层 3 列黄金视界，层次严谨分明；
  • 平板端（768px ~ 1023px）：核心 6 项完美闭环为 2 列 × 3 行对称网格，次要生态末项自适应双列通栏（col-span-2），彻底消灭尾部空缺；
  • 移动端（< 768px）：单列弹性堆叠，原生适配 iOS 底部安全区（safe-area-inset-bottom）。

---

🧭 全景项目矩阵导航

网站聚合索引作者开源生态下的 13 项关键技术资产，划分为两大核心板块：

1. 核心架构矩阵（6 大核心工程）

平台代号	矩阵项目	领域定位	核心能力与技术栈	在线直达
01	全栈技术选型矩阵	顶层架构决策	全端全平台技术选型收敛 · 架构决策与权衡 · 工业级技术基线	查看蓝图
02	AI Agent 智能体	AI 智能体生态	生产级自主智能体体系 · SDD 规范驱动落地基座 · 智能体编排	探索智能体
03	MCP 服务矩阵	AI 上下文协议	Model Context Protocol · 企业级中间件与云原生协议中枢	进入协议中心
04	Linux 运维	云原生基础设施	容器化与自动化编排 · 系统运维实战库 · 基础设施代码化	进入运维文档
05	Java 后端	企业级后端工程	微服务分布式架构 · 企业级工程深度沉淀 · Spring Boot & Cloud	查看后端技术
06	Vue 前端	现代前端工程	现代前端工程化演进 · 全平台表现层解决方案 · TypeScript	探索前端工程

2. 开源生态与精选工具（7 项周边工程）

序号	项目名称	领域归属	核心能力与技术栈	在线直达
07	Skills 技能中心	AI 技能规范	Anthropic 官方标准规范 · Matt Pocock 技能集 · 规范驱动研发 (SDD)	获取技能库
08	工程化框架技术网站	企业级脚手架	RuoYi-Vue-Plus · RuoYi-Cloud-Plus · RuoYi-Plus-UI 全套架构实践	查看脚手架
09	在线工具箱	实用开发辅助	现代 Web 纯前端开箱即用工具箱 · 散列加解密 · 编解码转换	打开工具箱
10	clip 剪贴板管理器	桌面级效率工具	Tauri v2 + Rust + React · 毫秒级回填 & 离线 OCR · 极低内存常驻	查看桌面应用
11	VitePress Zenith	现代研发文档模版	顶配 VitePress 架构 · 命令搜索中心 · Twoslash + 离线 PWA 增强	体验旗舰模版
12	OSS 开源工程模版	工业级通用模版	GitHub 最佳实践模板 · CI/CD 自动化流水线 · 多环境发版规范	获取开源模版
13	软件设计师备考指南	专业认证知识库	计算机中级软考 · 9 大考纲精要与历年真题剖析 · 核心算法归纳	开启备考指南

---

📂 工程目录架构解构

atengk.github.io/
├── public/                 # 静态资源目录（图标/SVG 矢量/Logo）
│   ├── icons/              # 各项目卡片专属图标矢量文件 (*.svg)
│   ├── favicon.svg         # 站点高清矢量 Favicon
│   └── hero.svg            # Hero 背景装饰矢量
├── src/
│   ├── components/         # 表现层原子与业务组件
│   │   ├── LightHero.tsx       # 纯白天幕 Hero 主视觉区（标题掠影+品牌徽标+动态数据）
│   │   ├── LightBentoGrid.tsx  # 三端自适应 Bento 栅格网格（核心矩阵 + 生态工具）
│   │   ├── TiltCard.tsx        # 3D 物理陀螺仪微透视容器（支持 Border Beam 环形流光）
│   │   └── ParticleCanvas.tsx  # Canvas 物理引力背景微动粒子场
│   ├── data/               # 领域数据驱动模型
│   │   └── projects.ts         # 全网项目元数据集中注册表 (PROJECTS 数组)
│   ├── styles/
│   │   └── globals.css         # 全局样式（Tailwind v4 主题/流体极光 Keyframes）
│   ├── App.tsx             # 应用主入口（装配粒子背景、极光天幕与主视口容器）
│   └── main.tsx            # React 根挂载入口
├── index.html              # HTML 模板入口
├── package.json            # 依赖声明与任务指令配置
├── tsconfig.json           # TypeScript 编译配置
└── vite.config.ts          # Vite 6 构建插件与别名配置

---

🚀 模块扩展开发指南

本项目采用数据驱动与组件解耦的现代化分层设计。后续若需要添加新的项目卡片、调整展示顺序或新增独立业务版块，请遵循以下三层指引：

分层 1：快速接入常规生态 / 工具卡片（数据驱动，零改动组件）

若新项目属于生态或周边实用工具，只需在数据文件中注册，系统将自动在下半区的「开源生态与实用工具」自适应渲染，无需修改任何组件代码。

步骤说明：

1. 准备项目矢量图标：

   • 准备一张 SVG 矢量图或 128x128 像素透明背景的高清 PNG；
   • 存入 ./public/icons/ 目录，例如 public/icons/my-new-tool.svg。

2. 在数据注册表中追加条目：

   • 打开 ./src/data/projects.ts，在 PROJECTS 数组尾部（或指定排序位置）添加配置对象：

// src/data/projects.ts
{
  id: 'my-new-tool',                         // 唯一标识符（字母/数字/连字符）
  title: '云原生网关控制台',                     // 卡片主标题
  tagline: '高性能 API 网关动态路由与流量治理平台', // 简短一句话描述（15~25字最佳）
  description: '支持多租户隔离、动态流量灰度切流与实时指标观测的云原生网关解决方案。', // 完整背景描述
  icon: '/icons/my-new-tool.svg',            // 图标相对路径（存放在 public/icons/ 下）
  link: 'https://github.com/atengk/gateway', // 点击跳转的完整外部或内部链接
  category: 'tool',                          // 分类属性: 'core' | 'ecosystem' | 'tool' | 'template' | 'study'
  tags: ['Gateway', '云原生', 'Go'],         // 关键技术标签列表（推荐 2~3 个）
  badge: '新特性',                           // 可选：右上角展示的胶囊角标文字
},

---

分层 2：升级/新增核心架构旗舰卡片（专属环形流光与视觉定制）

若新项目具备战略地位，需展示在首屏最显眼的「核心架构矩阵」中（配有 3D 陀螺仪透视倾斜、环形激光流动与右上角氛围微光），请执行以下两步：

步骤说明：

1. 在数据注册表中声明：

   • 参考【分层 1】，在 ./src/data/projects.ts 中注册项目数据，设定唯一的 id（例如 id: 'gateway-core'）。

2. 在栅格组件中注册主题与 ID：

   • 打开 ./src/components/LightBentoGrid.tsx；
   • 在 coreIds 数组中加入该项目的 ID：

   // src/components/LightBentoGrid.tsx
   const coreIds = [
     'fullstack-matrix',
     'ateng-agent',
     'ateng-mcp',
     'linux-infra',
     'java-backend',
     'vue-frontend',
     'gateway-core', // 新增的核心卡片 ID
   ]

   • 在 CORE_THEMES 对象中配置专属的色彩语义系统：

   // src/components/LightBentoGrid.tsx
   const CORE_THEMES: Record<string, CoreTheme> = {
     // ... 既有卡片主题 ...
     'gateway-core': {
       borderBeam: true, // 启用 360° 环形激光流光
       beamGradient: 'conic-gradient(from 0deg, transparent 0deg, #06b6d4 90deg, #3b82f6 180deg, #6366f1 270deg, transparent 360deg)', // 激光颜色流动梯度
       iconBg: 'bg-cyan-50/90 border-cyan-200/80', // 图标背景浅色与边框
       badgeStyle: 'bg-cyan-50 text-cyan-700 border border-cyan-200/80', // 胶囊角标风格
       hoverText: 'group-hover:text-cyan-600', // 鼠标悬停时的文字渐变响应色
       linkText: 'text-cyan-600',              // 底部「访问 →」引导色
       ambientGlow: 'from-cyan-500/[0.18] via-blue-500/[0.08] to-transparent', // 卡片右上角专属弥散氛围色
       tagStyle: 'bg-cyan-50/80 text-cyan-700 border-cyan-200/60', // 标签胶囊配色
     },
   }

💡 布局提示：核心架构矩阵在电脑端为 3 列网格，平板端为 2 列网格。核心项目总数建议保持为 6 或 3 的倍数（如 6 项、9 项），以确保各端网格呈现完美的对称几何结构。

---

分层 3：扩展全新独立 Section 业务版块（架构级扩展）

若后续需要新增全新的独立业务版块（例如「博客文章精选」、「开源数据看板」或「技术路线图」），可按组件化工程规范开发并挂载：

步骤说明：

1. 创建独立 Section 组件：

   • 在 ./src/components/ 目录下创建新文件，例如 ./src/components/BlogSection.tsx：

   /**
    * 博客精选与技术动态展示 Section 组件。
    *
    * @author Ateng
    * @since 2026-10-10
    */
   export function BlogSection() {
     return (
       <section className="space-y-4">
         <div className="flex items-center justify-between">
           <h2 className="text-xl sm:text-2xl font-black text-slate-900 tracking-tight">
             最新技术洞察
           </h2>
           <span className="text-xs text-slate-400 font-mono">ARTICLES & INSIGHTS</span>
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           {/* 自定义业务卡片内容 */}
         </div>
       </section>
     )
   }

2. 在根视口编排层挂载：

   • 打开 ./src/App.tsx，导入并将其挂载在 <main> 容器中：

   // src/App.tsx
   import { LightHero } from './components/LightHero'
   import { LightBentoGrid } from './components/LightBentoGrid'
   import { BlogSection } from './components/BlogSection' // 引入新模块
   
   export default function App() {
     return (
       <div className="...">
         {/* 背景粒子与流体极光 */}
         <ParticleCanvas />
         <div className="..." />
   
         <main className="relative z-10 max-w-7xl mx-auto px-4 ... space-y-8 sm:space-y-10 lg:space-y-11">
           <LightHero />
           <LightBentoGrid />
           <BlogSection /> {/* 顺畅挂载新模块，继承页面全局间距律动 */}
         </main>
       </div>
     )
   }

---

🛠️ 本地开发与工作流规范

本项目推荐使用 pnpm 作为包管理工具以获取极速依赖解析：

# 1. 克隆项目仓库
git clone https://github.com/atengk/atengk.github.io.git
cd atengk.github.io

# 2. 安装项目依赖
pnpm install

# 3. 启动本地开发服务 (默认监听 http://localhost:5173，毫秒级 HMR 热更新)
pnpm dev

# 4. 执行全量静态打包验证 (TypeScript 类型诊断 + Vite 生产构建)
pnpm build

# 5. 本地预览生产打包结果
pnpm preview

---

🚢 自动化部署与持续交付

项目基于 GitHub Actions 实现纯静态 SPA 的全自动化部署：

1. 每次向 main 分支执行推送后，自动触发部署工作流；
2. 自动化 Runner 执行依赖拉取、环境检查与 pnpm build 打包；
3. 将产物目录（dist/）全量同步推流至 gh-pages 分支，由 GitHub Pages 权威边缘节点提供 CDN 加速分发。

---

📄 开源许可证

本项目基于 Apache License 2.0 开源协议分发与维护，遵循开源开放协作原则。