A modern, interactive personal blog built with Next.js 14, showcasing my journey as a full-stack developer, projects, and personal experiences.
- Dark Theme: Cyberpunk-inspired design with neon accents
- Smooth Animations: Framer Motion powered transitions and interactions
- 3D Graphics: Three.js integration for immersive backgrounds
- Responsive Layout: Mobile-first design that works on all devices
- Photo Gallery: Interactive lightbox gallery showcasing personal moments, anime favorites, and travel memories
- About Section: Comprehensive profile with skills, experience, and interests
- Project Showcase: GitHub integration displaying my latest work
- Blog Posts: Markdown/MDX support for writing technical articles
- Next.js 15 App Router: Latest routing and rendering features
- Image Optimization: Automatic image compression and lazy loading
- Static Generation: Pre-rendered pages for lightning-fast loads
- SEO Optimized: Proper meta tags and structured data
- Cursor Effects: Custom cursor trail and click ripples
- Scroll Animations: Elements animate into view as you scroll
- Smooth Scrolling: Enhanced scroll behavior for better UX
- Back to Top: Quick navigation button
- Framework: Next.js 15.5.0 with App Router
- UI Library: React 19.1.0
- Language: TypeScript 5
- Styling: Tailwind CSS 4 + shadcn/ui components
- Animations: Framer Motion 12
- 3D Graphics: Three.js + React Three Fiber
- Format: Markdown/MDX
- Parser: gray-matter for frontmatter
- Processing: remark + rehype plugins
- Syntax Highlighting: rehype-highlight
- Package Manager: pnpm
- Linting: ESLint
- Type Checking: TypeScript strict mode
- Node.js 20+
- pnpm (recommended) or npm
# Clone the repository
git clone https://github.com/yourusername/blog.git
cd blog
# Install dependencies
pnpm install
# Run development server
pnpm devOpen http://localhost:3000 to view the blog.
# Create optimized production build
pnpm build
# Start production server
pnpm start/
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── page.tsx # Homepage
│ │ ├── blog/ # Blog pages
│ │ └── experience/ # Experience page
│ ├── components/ # React components
│ │ ├── ui/ # Reusable UI components
│ │ ├── about-section.tsx
│ │ ├── hero-section.tsx
│ │ └── ...
│ └── lib/ # Utility functions
├── public/ # Static assets
│ ├── personal/ # Personal photo gallery
│ └── ...
├── content/ # Markdown blog posts
│ └── posts/
└── CLAUDE.md # AI assistant guidelines
Create a new .md file in content/posts/:
---
title: "Your Post Title"
date: "2025-01-22"
excerpt: "Brief description"
tags: ["tag1", "tag2"]
published: true
---
Your content here...Add images to public/personal/ and they'll automatically appear in the gallery on the About page.
Edit tailwind.config.js to customize the color scheme.
All components are in src/components/ and can be modified independently.
Edit section components in src/components/ to customize layout and content.
This project is optimized for Vercel deployment:
- Build the project:
pnpm build - Deploy the
.nextfolder to your hosting provider - Ensure Node.js 20+ is available on the server
This project is open source and available under the MIT License.
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
Wenhao (wenhaogege)
- GitHub: @yourusername
- University: Zhejiang University (ZJU)
- Graduation: 2026
- Next.js - The React framework
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Animation library
- shadcn/ui - Beautiful UI components
- Three.js - 3D graphics library
⭐ If you found this project helpful, please consider giving it a star!