作品集：玻璃拟态

基于 Next.js 15 App Router、TypeScript、Tailwind CSS 和 MDX 构建的极简玻璃拟态作品集网站

在线演示 (V1) • [GITHUB：私有源码]

Overview

• 角色：独立创作者、UI/UX 设计师与前端开发人员
• 技术栈：Next.js 15 (App Router), React 18, TypeScript, Tailwind CSS 4, Framer Motion, Radix UI, MDX, next-intl
• 关键成果：完美的 100/100/100/100 PageSpeed 评分与 SEO 优化
• 总结：一个静态生成的开发者作品集网站，展示了高端极简主义美学。该网站在寻找前端开发实习期间（最终成功加入 Trend Micro）构建。具有模块化 UI 原语、本地化内容和完全响应式的玻璃拟态界面。

The Problem

• 挑战：核心挑战是在开发生涯的早期阶段，从零开始构建一套凝聚力强的视觉语言。由于这是我第二次从头设计作品集网站，因此在不使用现成模板的情况下，找到合适的切入点、构建平衡的布局并确保高美学质量并非易事。
• 受众：技术招聘人员、工程主管以及当时我申请实习的公司的团队（如 Trend Micro）。
• 限制条件：在多种移动端和桌面端浏览器上实现统一的磨砂玻璃拟态 UI，同时保持初始客户端包体积（Bundle Size）尽可能小、页面响应迅速并满足无障碍标准。

Approach & Decisions

• 架构：使用 Next.js App Router 实现多语言页面。依赖 React Server Components (RSC) 来渲染静态 Markdown (MDX) 页面，并仅在需要交互元素（动画、停靠栏、命令菜单）的地方结合使用 Client Components。
• 关键决策：
  • 采用 Tailwind CSS 4：利用 Tailwind 4 的早期版本来实现平滑的 CSS 玻璃拟态变量、自定义 backdrop-filter 和边框渐变。
  • 模块化 UI 原语：构建可重用的布局模块（ui/、motion-primitives/、dock/），以便轻松组合不同的视图，避免积累技术债。
  • 使用 next-intl 支持多语言：优化代码库结构，开箱即用地支持英文和其他目标语言的国际化。
• 权衡：选择静态生成（SSG）配合客户端组件注水（Hydration），而不是动态服务器渲染，以优化加载时间，但这限制了实时的动态数据库交互。
• 数据流：页面请求直接映射到包裹在布局模板中的静态 MDX 编译内容。客户端状态通过 React hook 进行管理，用于菜单、主题切换和模态框。

Key Results & Impact

• 成果：一个精致、现代的玻璃拟态界面，加载速度极快，且在搜索引擎上排名很高。
• Lighthouse 性能表现：在 PageSpeed Insights 上，移动端和桌面端的 Performance、Accessibility、Best Practices 和 SEO 均获得了完美的 100 / 100 / 100 / 100 满分。
• 上下文：在积极寻找实习期间构建，并最终成功入职 Trend Micro。
• 优化限制：在此 V1 项目中，优化严格限制于标准搜索引擎优化（SEO）。它完全不包含后来在 V2 布局中引入的现代优化范式，如 AI 优化 (AIO)、回答引擎优化 (AEO) 和生成式引擎优化 (GEO)。
• 对比：这是 V1 布局。虽然性能极佳，但它缺少 V2（作品集：赛博朋克）布局中包含的自定义终端交互、3D Canvas 物理效果和语音激活的 AI 聊天机器人。
• 影响：证明了执行高保真用户界面设计和构建搜索优化的 React 代码库的能力。

Technical Deep Dive

• 显著细节：交互式动画停靠栏导航、使用实用背景的自定义磨砂玻璃效果、CMD+K 快捷命令搜索菜单。
• 验证：在本地使用 next build 构建和测试，并通过 Lighthouse、Vercel Analytics 运行性能分析，并在 Safari、Chrome 和 Firefox 上进行了手动的布局检查。
• 优化：为所有 MDX 页面提供静态页面生成 (SSG)，延迟加载沉重的交互式客户端组件，并使用标准 Next.js 图像配置进行图像优化。
• 代码质量：强制执行严格的 TypeScript 检查、代码格式化和 linter 规则。
• 链接：查看 package.json 和 components/ 文件夹结构。

Reflections

• 不同之处：我本应该提前在 Figma 中建立设计系统或视觉指南。对于第二次进行设计的开发者来说，直接在代码中设计导致了在达到最终凝聚的玻璃拟态美学之前经历了多次布局迭代。
• 成功之处：获得了完美的 100/100 PageSpeed 评分，并交付了优雅、干净的磨砂玻璃美学。
• 教训：极简设计看似简单，但需要精确的间距、排版层级和内边距才能显得专业。实现玻璃拟态表面还需要针对浏览器兼容性提供细致的 backdrop-filter 回退方案。

---

My Contributions

• 完全所有权：从零开始独立设计、架构并实现了 100% 的项目，包括 UI 设计、布局系统、组件结构、动画和本地化配置。

---

Project Architecture

该应用程序使用为静态客户端生成配置的结构化 Next.js App Router 模式。

• 分层结构：全局配置和核心布局包装器管理主题提供商和基础样式，而 MDX 加载器解析原始 markdown 文件。
• 功能模块：
  • components/ui/ - 布局模块和核心视觉组件。
  • components/motion-primitives/ - 用于平滑过渡的动画包装器。
  • components/dock/ - 可自定义的浮动导航工具。
• 状态管理：将客户端状态局部化在单个包装器中（例如，激活的项索引、遮罩层可见性）。

路由与资源映射

与 V2（赛博朋克）架构不同，V1 是一个轻量级的纯客户端构建版本：

• 包含的功能：
  • 静态根节点与锚点：利用片段路由的单页结构（#home, #about, #featured-projects, #experience-education-certificates, #blog, #connect）。
  • 元数据与发现：本地化的清单文件（/site.webmanifest, /browserconfig.xml）。
  • 水合构建包：用于布局、页面元素和延迟加载状态的静态 next-chunks。
• 缺失的功能：
  • 无后端 API：缺少流式接口、音乐路由或聊天机器人处理器（/api/chat, /api/music）。
  • 无 AI / Agent 集成：完全缺少模型上下文协议 (MCP) 接口 (/api/mcp) 和 LLM 发现文本结构 (/llms.txt, /llms-full.txt)。

---

Demo Preview

• 玻璃拟态落地页：磨砂面板、细致的彩色背景以及精确的排版对齐。
• 动画停靠栏导航：平滑的鼠标追踪停靠栏图标展开和目标区域跳转。
• 命令菜单 (CMD+K)：用于直接页面导航和快捷方式的即时覆盖菜单。
• 在线演示链接：可在 franzdomingov1.vercel.app 查看在线项目。

托管说明：
V1 玻璃拟态作品集部署在 Vercel 上，可以通过上面的在线演示链接访问。请注意，主作品集此后已升级为赛博朋克 (V2) 布局。