极简玻璃拟态作品集

极简、玻璃拟态作品集 / 个人网站 / Next.js App Router 项目

一句话摘要： 使用 Next.js 15 App Router、TypeScript、Tailwind CSS 4 和 MDX 构建的静态生成作品集网站。展示了玻璃拟态 UI、模块化架构和快速自定义能力——无需 CMS。

开发周期：2025年6月 - 2025年7月

备注：

• 托管/代码可用性免责声明： 完整源代码可应要求提供。项目已上线，但未公开源码以避免暴露潜在漏洞。
• 联系获取更多信息或演示： 通过 franzdomingo.dev 联系 Franz Phillip G. Domingo。
• 导航说明： 博客和项目页面可通过网站导航访问。

---

功能特点

• 极简、玻璃拟态 UI
• 响应式、移动优先布局
• 由 MDX 驱动的博客和项目页面
• 模块化组件系统 (ui/, motion-primitives/, dock/)
• CMD+K 命令菜单、动画停靠栏（Dock）和聊天机器人
• SEO 优化、无障碍且高性能
• 部署在 Vercel，支持 SSL + CDN
• 深色模式切换
• Toast 通知系统
• 易于扩展的新板块和组件

---

我的贡献（角色与职责）

Frontend Architecture:

• Developed physics-based canvas transitions and custom scroll snap engines.
• Integrated an AI chatbot with vocal synthesis and local storage persistence.

Multi-Agent Orchestration:

• Orchestrated a pipeline of specialized agents (Coder, Front-End, QA, Tech Writer, Infra).

Performance & DevOps:

• Configured Vercel Edge Runtime and DNS routing for optimal performance.
• Ensured accessibility with reduced-motion fallbacks and Core Web Vitals audits.

---

面临的挑战

• Synchronizing complex animations:
  Coordinating canvas-based wave physics with React state and GSAP ScrollTrigger.
• AI Chatbot Performance:
  Optimizing TTS vocal synthesis and LLM streaming within a Next.js Edge environment.
• Agent Orchestration:
  Managing a complex multi-agent orchestration pipeline for feature delivery.
• Accessibility:
  Balancing high-performance visual glitch effects with strict reduced-motion accessibility standards.

---

项目架构

• Architecture Style:
  Modular, functional React with Next.js App Router (Turbopack).
• Component Organization:
  • app/: Edge runtime routing, layouts, and internationalization (next-intl).
  • components/: Bento grids, 3D Canvas scenes, AI chatbot interface, and GSAP triggers.
  • messages/: Localization JSON dictionaries.
• Integrations:
  Three.js for WebGL, GSAP for high-performance scrolling, and @google/generative-ai for the chatbot.

---

演示预览

• 截图/视频： 极简玻璃拟态作品集的在线演示可在 franzdomingo.dev 查看。所有 UI 功能、布局和交互均可直接探索。

• 平台视图： Web（响应式，移动优先）

• 功能展示：

  • 玻璃拟态落地页
  • 动画停靠栏导航
  • 命令菜单 (CMD+K)
  • 博客和项目页面
  • 聊天机器人和 Toast 通知

• 演示说明： 访问在线站点 franzdomingo.dev。 如需完整源码或私人演示，请联系作者。

---

如果您需要更多细节或想查看代码库，请直接联系作者。

---