星辰
首页旅行家的故事创作者的世界技术宅的领域我的频道
蜀ICP备2025171371号-1
博客
项目经历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.js16全栈框架
React19UI 层
TypeScript5+类型安全
Tailwind CSS4样式系统
Framer Motion12+动画库
Three.js0.181+3D 渲染
MDX-内容格式

内容生态

博客:已完结项目、技术日志、工具分享 推荐系统:动画、游戏、音乐、插画 创作展示:小说、视频 交互:留言簿系统

完整项目报告

加载 PDF 组件中...