Created by Difan Jia | PhD Student at University of Texas at Dallas
一个专为 Difan Jia 设计的现代化个人简历网站，基于 Next.js、Tailwind CSS 和 shadcn/ui 构建，支持完美的打印和 PDF 导出功能。
- 🎨 现代化响应式设计
- 🖨️ 原生打印/PDF 导出支持
- 🌓 支持暗色模式
- 📱 完全响应式布局
- ⚡ 基于 Next.js 15 的快速性能
- 🎯 TypeScript 支持
- 🧩 模块化组件设计
#---
Created by Difan Jia - PhD Student at UTD, specializing in HCI & Visualization
提示: 记住在打印时设置正确的页面参数，以获得最佳的 PDF 效果！
MIT License - Created by Difan Jia
This resume website was created by Difan Jia using modern web technologies. Feel free to use this as a template for your own resume!- Node.js >= 18.18
- 包管理器：pnpm（推荐）/ yarn / npm
-
克隆项目
git clone <difans-resume-repo-url> cd difans-resume
-
安装依赖
# 使用 pnpm（推荐） pnpm install # 或使用 yarn yarn install # 或使用 npm npm install
-
启动开发服务器
# 使用 pnpm pnpm dev # 或使用 yarn yarn dev # 或使用 npm npm run dev
-
访问网站
打开浏览器访问 http://localhost:3000
difans-resume/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── globals.css # 全局样式
│ │ ├── layout.tsx # 根布局
│ │ └── page.tsx # 主页面
│ ├── components/
│ │ ├── ui/ # shadcn/ui 组件
│ │ │ ├── badge.tsx
│ │ │ ├── button.tsx
│ │ │ └── card.tsx
│ │ └── CV.tsx # 主要的 CV 组件
│ └── lib/
│ └── utils.ts # 工具函数
├── public/ # 静态资源
├── components.json # shadcn/ui 配置
├── tailwind.config.ts # Tailwind 配置
└── tsconfig.json # TypeScript 配置
所有个人信息都存储在 src/components/CV.tsx 文件的 data 对象中：
const data = {
name: "你的姓名",
tagline: "你的标签",
roleTarget: "申请职位",
contact: {
email: "your@email.com",
phone: "你的电话",
location: "你的地址",
links: [
// 社交媒体链接
],
},
education: [
// 教育经历
],
experience: [
// 工作经历
],
projects: [
// 项目经历
],
skills: {
// 技能清单
},
awards: [
// 获奖经历
],
languages: [
// 语言能力
],
};- 点击页面右上角的 "Print / PDF" 按钮
- 在打印对话框中进行以下设置：
- 边距: None（无边距）
- 背景图形: On（开启）
- 缩放: 95-100%
- 纸张: A4 或 Letter
- 分页处理: 如果内容在卡片中间断页，可以调整缩放比例到 97-99%
- 背景保持: 确保开启"背景图形"以保持设计样式
- 边距最小化: 选择"无边距"获得最佳布局
# 添加 shadcn/ui 组件
npx shadcn@latest add [component-name]项目使用 Lucide React 图标库：
import { NewIcon } from "lucide-react";- 全局样式:
src/app/globals.css - Tailwind 配置:
tailwind.config.ts - 组件样式: 使用 Tailwind CSS 类
# 构建生产版本
pnpm build
# 启动生产服务器
pnpm start-
Vercel（推荐）
# 安装 Vercel CLI npm i -g vercel # 部署 vercel
-
Netlify
- 连接 Git 仓库
- 构建命令:
npm run build - 发布目录:
.next
-
自定义服务器
- 使用
npm run build构建 - 使用
npm start启动生产服务器
- 使用
原因: shadcn/ui 组件未生成或路径别名未配置
解决方案:
- 确认
src/components/ui/目录下有相应组件文件 - 检查
tsconfig.json中的路径别名配置：{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] } } }
原因: 服务端渲染环境中使用了浏览器 API
解决方案: 代码中已包含保护，确保以下代码存在：
if (typeof window !== 'undefined') {
// 浏览器专用代码
}原因: 图标组件导入错误或版本不匹配
解决方案:
- 检查控制台警告信息
- 确认图标名称在 lucide-react 中存在
- 代码会自动回退到 LinkIcon
解决步骤:
- 确认 Node.js 版本 >= 18.18
- 删除
node_modules和package-lock.json - 重新安装依赖
- 检查端口 3000 是否被占用
如果你更偏好轻量级的 Vite，可以按以下步骤创建：
# 创建 Vite 项目
pnpm create vite@latest cv-vite --template react-ts
cd cv-vite
# 安装依赖
pnpm add lucide-react class-variance-authority tailwind-merge @radix-ui/react-slot
# 初始化 shadcn/ui
pnpm dlx shadcn@latest init
pnpm dlx shadcn@latest add card badge button
# 初始化 Tailwind
pnpm dlx tailwindcss init -p然后配置相应的文件和别名。
MIT License
如果遇到问题，请：
- 检查本 README 的常见问题部分
- 查看项目 Issues
- 搜索相关的 Next.js、Tailwind CSS、shadcn/ui 文档
提示: 记住在打印时设置正确的页面参数，以获得最佳的 PDF 效果！
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.