Next.js+React+TypeScript+Framer Motion — Building a Personal Portfolio with Modern Web Technologies
Next.js full-stack application integrating MDX content system, Canvas generative art, and Framer Motion interactive animations. Showcasing the fusion of modern frontend architecture and creative design.
Personal Homepage - Complete Practice of Modern Web Technologies
A complete personal creative showcase platform integrating modern web technology stack. The project demonstrates how to build a professional, high-performance, and creative personal digital brand.
Core Features
Modern Architecture: Next.js 16 full-stack framework supporting SSR/SSG/ISR multiple rendering strategies Content Management: Flexible MDX-based system supporting React component embedding in Markdown Responsive Design: Tailwind CSS 4 + multi-level breakpoint adaptation Animation System: Complete interaction language driven by Framer Motion Generative Art: Dynamic backgrounds implemented with Canvas 2D and Three.js (ASCII tracing, 3D waves, etc.) Performance Optimization: Code splitting, image optimization, Core Web Vitals optimization
Tech Stack
| Technology | Version | Purpose |
|---|---|---|
| Next.js | 16 | Full-stack Framework |
| React | 19 | UI Layer |
| TypeScript | 5+ | Type Safety |
| Tailwind CSS | 4 | Styling System |
| Framer Motion | 12+ | Animation Library |
| Three.js | 0.181+ | 3D Rendering |
| MDX | - | Content Format |
Content Ecosystem
Blog: Completed projects, technical logs, tool sharing Recommendation System: Anime, games, music, illustrations Creative Showcase: Novels, videos Interaction: Guestbook system