项目经历2025-11-08
Next.js+React+TypeScript+Framer Motion——现代Web技术搭的建个人技术展示网站
Next.js全栈应用融合MDX内容系统、Canvas生成艺术、Framer Motion交互动画。展示现代前端架构与创意设计结合。
Personal Homepage - 现代Web技术的完整实践
一个完整的个人创意展示平台,融合现代Web技术栈。项目展示了如何构建专业、高性能、充满创意的个人数字品牌。
核心特性
现代架构:Next.js 16 全栈框架,支持 SSR/SSG/ISR 多种渲染策略 内容管理:基于 MDX 的灵活系统,支持在 Markdown 中嵌入 React 组件 响应式设计:Tailwind CSS 4 + 多层次断点适配 动画系统:Framer Motion 驱动的完整交互语言 生成艺术:Canvas 2D 和 Three.js 实现的动态背景(ASCII 追踪、3D 波浪等) 性能优化:代码分割、图片优化、Core Web Vitals 优化
技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| Next.js | 16 | 全栈框架 |
| React | 19 | UI 层 |
| TypeScript | 5+ | 类型安全 |
| Tailwind CSS | 4 | 样式系统 |
| Framer Motion | 12+ | 动画库 |
| Three.js | 0.181+ | 3D 渲染 |
| MDX | - | 内容格式 |
内容生态
博客:已完结项目、技术日志、工具分享 推荐系统:动画、游戏、音乐、插画 创作展示:小说、视频 交互:留言簿系统
完整项目报告
加载 PDF 组件中...