张佳个人作品集网站

一个基于 Next.js 14 和 shadcn/ui 构建的现代化个人作品集网站，展示技术项目、博客文章和个人信息。

✨ 特性

• 🎨 现代化设计: 采用玻璃拟态和渐变效果的美观界面
• 📱 完全响应式: 完美适配桌面端和移动端
• ⚡ 高性能: 基于 Next.js 14 App Router 构建
• 🌈 丰富动画: 精心设计的交互动画和过渡效果
• 🎯 用户体验: 直观的导航和优秀的视觉层次

🛠️ 技术栈

• 框架: Next.js 14 (App Router)
• UI组件: shadcn/ui + Radix UI
• 样式: Tailwind CSS
• 语言: TypeScript
• 图标: Lucide React
• 部署: Vercel Ready

📁 项目结构

youweb/
├── app/                    # Next.js App Router页面
│   ├── layout.tsx         # 根布局
│   ├── page.tsx           # 首页（个人介绍）
│   ├── portfolio/         # 作品集页面
│   ├── blog/              # 博客页面
│   └── globals.css        # 全局样式
├── components/            # React组件
│   ├── ui/                # shadcn/ui组件
│   ├── navigation.tsx     # 导航组件
│   └── mobile-nav.tsx     # 移动端导航
├── lib/                   # 工具函数
│   └── utils.ts           # 常用工具
└── public/                # 静态资源

🚀 快速开始

环境要求

• Node.js 18.17+
• npm 或 yarn

安装和运行

1. 克隆仓库

git clone https://github.com/comeonzhj/youweb.git
cd youweb

2. 安装依赖

npm install

3. 启动开发服务器

npm run dev

4. 打开浏览器访问 http://localhost:3000

使用启动脚本（推荐）

chmod +x start.sh
./start.sh

📄 页面介绍

🏠 首页

• 个人介绍和头像展示
• 技能标签云
• 工作经历时间线
• 项目亮点卡片

💼 作品集页面

• 项目分类筛选
• 项目详细信息展示
• 技术栈统计
• GitHub链接和演示

📝 博客页面

• 精选文章展示
• 文章分类和标签
• 阅读时间和访问统计
• 文章详情页面

🎨 设计特色

• 玻璃拟态效果: 现代化的半透明设计
• 渐变背景: 多层次的色彩渐变
• 动画效果: 悬停、缩放、平移等交互动画
• 响应式布局: 移动端友好的设计
• 自定义组件: 基于shadcn/ui的定制化组件

🔧 自定义配置

个人信息修改

编辑以下文件来更新个人信息：

• app/page.tsx - 首页个人信息
• app/portfolio/page.tsx - 项目列表
• app/blog/page.tsx - 博客文章
• components/navigation.tsx - 导航链接

样式定制

• 修改 app/globals.css 中的CSS变量来调整主题色彩
• 使用Tailwind CSS类名进行样式调整
• shadcn/ui组件支持完全自定义

添加图片资源

在 public/ 目录下添加以下文件：

• avatar.jpg - 个人头像 (200x200px)
• favicon.ico - 网站图标

📦 构建和部署

本地构建

npm run build
npm start

部署到Vercel

1. 推送代码到GitHub
2. 在 Vercel 导入项目
3. 自动部署完成

部署到其他平台

npm run build
# 构建文件在 .next 目录

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License

👤 作者

张佳

• GitHub: @comeonzhj
• 网站: 个人作品集

---

⭐ 如果这个项目对你有帮助，请给它一个star！