关于本站
欢迎来到我的个人空间!这是一个基于 Next.js 15 和 Fumadocs UI 构建,并经过深度定制的个人网站。 它不仅是一个展示平台,也是我探索现代 Web 技术、实践前沿设计理念的创新实验室。 这里融合了个人主页、技术文档、音乐播放、摄影作品、AI 助手聊天等多元化功能, 致力于为各位访客营造一个集知识分享、技术交流、审美享受于一体的独特数字体验空间。
核心功能
- 现代化响应式个人主页,展示教育背景与个人信息
- 基于 Fumadocs 的 MDX 文档系统,支持数学公式、代码高亮与全文搜索
- 唱片机风格音乐播放器,支持本地音乐文件播放、专辑封面展示与播放列表管理
- 瀑布流布局相册画廊,采用鼠标追踪 3D 倾斜效果,提供沉浸式图片浏览体验
- AI 智能助手聊天系统,内置阿米娅(明日方舟)和喜多郁代(孤独摇滚)两个角色助手
- 基于 Bangumi API 的动画追番功能,实时展示「今日放送」和「我的收藏」列表
- Live2D 角色展示系统,支持动态交互式虚拟角色(阿米娅、喜多等)
- 智能主题系统:支持浅色/深色模式无缝切换,配备独立的背景图片与平滑过渡动画
- 霞鹜文楷 (LXGW WenKai) 全站字体应用,营造优雅的中文阅读体验
- 毛玻璃质感 UI 设计语言,多层次视觉效果与现代化交互体验
- 导航栏视觉增强系统,集成水波纹点击效果、磁性悬停变形、渐变下划线等多种交互动画
技术架构
- 前端框架:Next.js 15.3.1 (App Router) + React 19.1.0
- 文档系统:Fumadocs UI 15.2.12 + MDX 11.6.1
- 样式系统:TailwindCSS 4.1.4 (原子化 CSS) + 自定义 CSS 动画
- 类型安全:TypeScript 5.8.3 (严格模式)
- 图标库:Lucide React 0.503.0 + Simple Icons 14.12.3
- 交互动画:Pixi.js 6.5.9 + pixi-live2d-display 0.4.0
- 音频处理:music-metadata 11.2.1 (元数据解析)
- 内容渲染:React Markdown + rehype-katex + rehype-highlight
- 状态管理:React Context API (主题、音乐播放器、AI 助手)
- 图像优化:Next.js Image + Sharp 0.34.1
- 部署优化:静态资源 CDN + 响应式图片压缩
特别鸣谢
本网站基于优秀的开源框架 Fumadocs 构建,该框架为现代化文档网站提供了强大的 MDX 支持和精美的 UI 组件。 在此基础上,我进行了全方位的定制开发:从零构建了唱片机风格音乐播放器、3D 倾斜效果相册系统、 AI 角色助手聊天面板、Live2D 虚拟角色交互、Bangumi 动画追番功能等核心模块。 同时深度定制了主题系统、导航栏交互动画、毛玻璃 UI 效果等视觉体验, 使整个网站形成了独特的技术风格与交互美学。感谢 Fumadocs 团队提供的优秀技术基础!
本站的全局字体采用了优秀的开源字体「霞鹜文楷 / LXGW WenKai」。其温润优雅的字形极大地提升了网站的阅读体验。 十分感谢字体作者 lxgw 的无私奉献。
支持本站
如果您欣赏这个网站的技术实现、设计理念或内容分享,欢迎通过以下方式给予支持。 您的每一份鼓励都是我持续探索前沿技术、优化用户体验、分享优质内容的重要动力! 无论是技术交流、功能建议还是资金支持,都将助力网站不断进化完善。
联系方式
欢迎与我交流技术实现细节、分享创意想法或讨论前端开发心得。 无论是关于 Web 技术栈选型、交互动画设计,还是个人网站搭建经验,我都乐于分享和探讨。 也欢迎对网站功能提出建议或发现问题时及时反馈!