ViteReact作品集

renderCV — Vite 作品集模板

作者 H0NEYP0T-466

renderCV 是一个纯客户端简历构建器，填写信息、选择模板后可导出适合打印的 A4 PDF，无需后端或账号。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-17查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

分区表单编辑简介、经历、教育、项目、技能与奖项

使用 @dnd-kit 拖拽调整简历区块顺序

A4 分页的实时预览，页面随输入更新

通过 @react-pdf/renderer 生成 PDF 并调用浏览器打印

模块化模板注册机制，当前提供 Modern 模板

纯客户端运行，README 说明无认证、无后端、无跟踪

模板详细介绍

renderCV 是一个基于 React 与 Vite 的客户端简历/履历构建器。用户在分区表单中填写姓名、职位、联系方式、简介、工作经历、教育、项目、技能与奖项，可通过 @dnd-kit 拖拽调整区块顺序，并在右侧查看按 A4 分页、随输入实时更新的预览。导出时使用 @react-pdf/renderer 生成 PDF 并触发浏览器打印对话框。README 说明数据仅保存在客户端，不涉及认证、后端或跟踪。

模板系统为模块化设计：当前仅提供 Modern 模板，新增模板需在 src/templates/ 下建立文件夹并在 src/templates/index.ts 注册。README 未说明数据持久化、导入导出 JSON、多语言或除 Modern 外的可用模板；这些能力不能从现有资料确认。

ViteReact作品集

适合你的项目吗？

适用场景

个人在浏览器中填写简历内容并导出打印用 PDF
需要按 A4 分页查看简历排版效果时进行实时预览
通过拖拽调整简历各区块的先后顺序
开发者按模板注册机制新增或替换简历模板

适合人群

需要快速制作打印版简历的个人用户
希望数据留在本地浏览器、不注册账号的用户
需要模块化模板结构以便扩展的前端开发者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
需 Node.js >= 18 与 npm >= 9（或 pnpm / yarn）
2
克隆仓库后执行 npm install，再运行 npm run dev，Vite 开发服务器默认在 http://localhost:5173
3
生产构建使用 npm run build（含类型检查与 vite build，输出到 dist/），可用 npm run preview 本地预览
4
新增模板需在 src/templates/ 下建立文件夹，并在 src/templates/index.ts 注册

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

https://github.com/H0NEYP0T-466/renderCV/blob/master/LICENSE https://github.com/H0NEYP0T-466/renderCV/blob/master/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-17。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 88 / 100
技术栈: Vite · React
网站类型: 作品集

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2026-07-03
截图检查日期: 2026-10-17

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Vite。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: codex-user-requested-batch-review-20261018 · 2026-10-18

查看当时使用的来源资料

SHA-256: d026f0e83a8ccb935d38006ef0cbc9fd10051bd29a7a17c44728f0b21ca30c39

2026-10-17T10:58:54.952Z

来源文件 / 仓库

<p align="center">
  <!-- Core -->
  <img src="https://img.shields.io/github/license/H0NEYP0T-466/renderCV?style=for-the-badge&color=brightgreen" alt="GitHub License">
  <img src="https://img.shields.io/github/stars/H0NEYP0T-466/renderCV?style=for-the-badge&color=yellow" alt="GitHub Stars">
  <img src="https://img.shields.io/github/forks/H0NEYP0T-466/renderCV?style=for-the-badge&color=blue" alt="GitHub Forks">
  <img src="https://img.shields.io/github/issues/H0NEYP0T-466/renderCV?style=for-the-badge&color=red" alt="GitHub Issues">
  <img src="https://img.shields.io/github/issues-pr/H0NEYP0T-466/renderCV?style=for-the-badge&color=orange" alt="GitHub Pull Requests">
  <img src="https://img.shields.io/badge/Contributions-Welcome-brightgreen?style=for-the-badge" alt="Contributions Welcome">

  <!-- Activity -->
  <img src="https://img.shields.io/github/last-commit/H0NEYP0T-466/renderCV?style=for-the-badge&color=purple" alt="Last Commit">
  <img src="https://img.shields.io/github/commit-activity/m/H0NEYP0T-466/renderCV?style=for-the-badge&color=teal" alt="Commit Activity">
  <img src="https://img.shields.io/github/repo-size/H0NEYP0T-466/renderCV?style=for-the-badge&color=blueviolet" alt="Repo Size">
  <img src="https://img.shields.io/github/languages/code-size/H0NEYP0T-466/renderCV?style=for-the-badge&color=indigo" alt="Code Size">

  <!-- Languages -->
  <img src="https://img.shields.io/github/languages/top/H0NEYP0T-466/renderCV?style=for-the-badge&color=critical" alt="Top Language">
  <img src="https://img.shields.io/github/languages/count/H0NEYP0T-466/renderCV?style=for-the-badge&color=success" alt="Languages Count">

  <!-- Community -->
  <img src="https://img.shields.io/github/discussions/H0NEYP0T-466/renderCV?style=for-the-badge&color=blue" alt="Discussions">
  <img src="https://img.shields.io/badge/Docs-Available-green?style=for-the-badge&logo=readthedocs&logoColor=white" alt="Documentation">
  <img src="https://img.shields.io/badge/Open%20Source-%E2%9D%A4-red?style=for-the-badge" alt="Open Source Love">
</p>

<br>

<p align="center"><strong>renderCV</strong> — a client-side CV / resume builder. Fill in your details, pick a template, and export a print-ready PDF. No backend, no accounts.</p>

<br>

## 🔗 Links

- **Demo:** [rendercv.vercel.app](https://rendercv.vercel.app)
- **Docs:** This README + [CLAUDE.md](./CLAUDE.md)
- **Issues:** [GitHub Issues](https://github.com/H0NEYP0T-466/renderCV/issues)
- **Contributing:** [CONTRIBUTING.md](./CONTRIBUTING.md)

<br>

## 📑 Table of Contents

- [Installation](#-installation)
- [Usage](#-usage)
- [Features](#-features)
- [Folder Structure](#-folder-structure)
- [Tech Stack](#-tech-stack)
- [Dependencies & Packages](#-dependencies--packages)
- [Contributing](#-contributing)
- [License](#-license)
- [Security](#-security)
- [Code of Conduct](#-code-of-conduct)

<br>

## 🚀 Installation

### Prerequisites

- **Node.js** >= 18
- **npm** >= 9 (or pnpm / yarn)

### Setup

```bash
# clone
git clone https://github.com/H0NEYP0T-466/renderCV.git
cd rendercv

# install deps
npm install

# start dev server
npm run dev
```

Vite dev server runs at `http://localhost:5173` with HMR.

### Production build

```bash
npm run build   # type-check + vite build → dist/
npm run preview # preview dist/ locally
```

<br>

## ⚡ Usage

1. **Fill your info** — name, title, contact, summary, experience, education, projects, skills, awards.
2. **Reorder sections** — drag-and-drop with @dnd-kit.
3. **Choose a template** — currently `Modern` (more planned).
4. **Live preview** — A4-paginated, hard-clipped pages update as you type.
5. **Export / Print** — renders a PDF via `@react-pdf/renderer` and triggers the browser print dialog.

Templates are modular — drop a new folder under `src/templates/`, register it in `src/templates/index.ts`, and pick it from the UI.

<br>

## ✨ Features

- 🖱️ **Drag-and-drop section reordering** (@dnd-kit)
- 📄 **Print-ready A4 PDF export** (@react-pdf/renderer)
- 👁️ **Live DOM-measured pagination** (no estimate undercount)
- 📐 **Responsive layout** across desktop / tablet / mobile
- 🎨 **Modular template system** — swap or add templates without touching core
- 🖼️ **Optional photo** support
- 📋 **Section-based editor** — summary, experience, education, projects, skills, awards
- ⚡ **Client-side only** — no auth, no backend, no tracking

<br>

## 📂 Folder Structure

```
renderCV/
├── public/                   # static assets
├── src/
│   ├── main.tsx              # React entry (StrictMode → App)
│   ├── App.tsx               # root — editor/preview layout
│   ├── App.css
│   ├── index.css             # global CSS custom properties
│   ├── assets/
│   ├── types/
│   │   └── index.ts          # ResumeData shared types
│   ├── data/
│   │   ├── defaultResume.ts  # empty resume
│   │   └── exampleResume.ts  # sample data
│   ├── context/
│   │   └── ResumeContext.tsx # global state (data, template, UI)
│   ├── components/
│   │   ├── editor/
│   │   │   ├── EditorLayout.tsx/.css
│   │   │   ├── EditorPanel.tsx     # all form sections
│   │   │   ├── Field.tsx/.css      # reusable form field
│   │   │   ├── SectionEditor.tsx/.css
│   │   │   └── SortableSection.tsx/.css  # dnd wrapper
│   │   ├── preview/
│   │   │   ├── PreviewPanel.tsx/.css
│   │   └── export/
│   │       └── ExportButton.tsx/.css
│   └── templates/
│       ├── index.ts                # template registry
│       ├── TemplateRenderer.tsx    # switcher
│       └── modern/
│           ├── config.ts
│           ├── Preview.tsx/.css    # DOM-measured paginated preview
│           ├── ResumeDocument.tsx  # @react-pdf/renderer PDF
│           ├── paginate.ts         # shared estimate helpers for PDF
│           └── sections/
│               ├── Header.tsx/.css
│               ├── Summary.tsx
│               ├── Experience.tsx
│               ├── Education.tsx
│               ├── Projects.tsx
│               ├── Skills.tsx
│               ├── Awards.tsx
│               └── section-shared.css
├── .github/
│   ├── ISSUE_TEMPLATE/
│   │   ├── bug_report.yml
│   │   ├── feature_request.yml
│   │   └── config.yml
│   └── pull_request_template.md
├── CLAUDE.md
├── CONTRIBUTING.md
├── SECURITY.md
├── CODE_OF_CONDUCT.md
├── LICENSE
├── eslint.config.js
├── tsconfig.json / tsconfig.app.json / tsconfig.node.json
├── vite.config.ts
├── vercel.json
└── package.json
```

<br>

## 🛠 Tech Stack

### Languages

![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)
![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)

### Frameworks & Libraries

![React](https://img.shields.io/badge/React-19-61DAFB?style=for-the-badge&logo=react&logoColor=black)
![Vite](https://img.shields.io/badge/Vite-8-646CFF?style=for-the-badge&logo=vite&logoColor=white)

### DevOps / CI / Tools

![ESLint](https://img.shields.io/badge/ESLint-10-4B32C3?style=for-the-badge&logo=eslint&logoColor=white)
![Node.js](https://img.shields.io/badge/Node.js-18+-339933?style=for-the-badge&logo=node.js&logoColor=white)
![Vercel](https://img.shields.io/badge/Vercel-Deploy-000000?style=for-the-badge&logo=vercel&logoColor=white)

### Cloud / Hosting

![Vercel](https://img.shields.io/badge/Vercel-Hosting-000000?style=for-the-badge&logo=vercel&logoColor=white)

<br>

## 📦 Dependencies & Packages

### Runtime Dependencies

| Package | Badge | Description |
|---------|-------|-------------|
| react | <a href="https://www.npmjs.com/package/react"><img src="https://img.shields.io/npm/v/react?style=for-the-badge&label=react"></a> | UI framework |
| react-dom | <a href="https://www.npmjs.com/package/react-dom"><img src="https://img.shields.io/npm/v/react-dom?style=for-the-badge&label=react--dom"></a> | DOM renderer for React |
| @dnd-kit/core | <a href="https://www.npmjs.com/package/@dnd-kit/core"><img src="https://img.shields.io/npm/v/@dnd-kit/core?style=for-the-badge&label=%40dnd-kit%2Fcore"></a> | Drag-and-drop core |
| @dnd-kit/sortable | <a href="https://www.npmjs.com/package/@dnd-kit/sortable"><img src="https://img.shields.io/npm/v/@dnd-kit/sortable?style=for-the-badge&label=%40dnd-kit%2Fsortable"></a> | Sortable dnd extension |
| @dnd-kit/utilities | <a href="https://www.npmjs.com/package/@dnd-kit/utilities"><img src="https://img.shields.io/npm/v/@dnd-kit/utilities?style=for-the-badge&label=%40dnd-kit%2Futilities"></a> | dnd coordinate helpers |
| @react-pdf/renderer | <a href="https://www.npmjs.com/package/@react-pdf/renderer"><img src="https://img.shields.io/npm/v/@react-pdf/renderer?style=for-the-badge&label=%40react-pdf%2Frenderer"></a> | PDF generation |
| lucide-react | <a href="https://www.npmjs.com/package/lucide-react"><img src="https://img.shields.io/npm/v/lucide-react?style=for-the-badge&label=lucide--react"></a> | Icon library |
| @rolldown/binding-linux-x64-gnu | <a href="https://www.npmjs.com/package/@rolldown/binding-linux-x64-gnu"><img src="https://img.shields.io/npm/v/@rolldown/binding-linux-x64-gnu?style=for-the-badge&label=%40rolldown%2Fbinding--linux-x64-gnu"></a> | Rolldown native binding (linux) |

### Dev / Build / Test Dependencies

| Package | Badge | Description |
|---------|-------|-------------|
| vite | <a href="https://www.npmjs.com/package/vite"><img src="https://img.shields.io/npm/v/vite?style=for-the-badge&label=vite"></a> | Bundler |
| typescript | <https://img.shields.io/npm/v/typescript?style=for-the-badge&label=typescript"><a href="https://www.npmjs.com/package/typescript"></a> | Type compiler |
| @types/react | <a href="https://www.npmjs.com/package/@types/react"><img src="https://img.shields.io/npm/v/@types/react?style=for-the-badge&label=%40types%2Freact"></a> | React types |
| @types/react-dom | <a href="https://www.npmjs.com/package/@types/react-dom"><img src="https://img.shields.io/npm/v/@types/react-dom?style=for-the-badge&label=%40types%2Freact--dom"></a> | React DOM types |
| @types/node | <a href="https://www.npmjs.com/package/@types/node"><img src="https://img.shields.io/npm/v/@types/node?style=for-the-badge&label=%40types%2Fnode"></a> | Node types |
| @vitejs/plugin-react | <a href="https://www.npmjs.com/package/@vitejs/plugin-react"><img src="https://img.shields.io/npm/v/@vitejs/plugin-react?style=for-the-badge&label=%40vitejs%2Fplugin--react"></a> | Vite + React (Oxc) |
| eslint | <a href="https://www.npmjs.com/package/eslint"><img src="https://img.shields.io/npm/v/eslint?style=for-the-badge&label=eslint"></a> | Linter |
| @eslint/js | <a href="https://www.npmjs.com/package/@eslint/js"><img src="https://img.shields.io/npm/v/@eslint/js?style=for-the-badge&label=%40eslint%2Fjs"></a> | ESLint flat config |
| typescript-eslint | <a href="https://www.npmjs.com/package/typescript-eslint"><img src="https://img.shields.io/npm/v/typescript-eslint?style=for-the-badge&label=typescript--eslint"></a> | TS ESLint integration |
| eslint-plugin-react-hooks | <a href="https://www.npmjs.com/package/eslint-plugin-react-hooks"><img src="https://img.shields.io/npm/v/eslint-plugin-react-hooks?style=for-the-badge&label=eslint--plugin--react--hooks"></a> | React hooks lint rules |
| eslint-plugin-react-refresh | <a href="https://www.npmjs.com/package/eslint-plugin-react-refresh"><img src="https://img.shields.io/npm/v/eslint-plugin-react-refresh?style=for-the-badge&label=eslint--plugin--react--refresh"></a> | Vite HMR lint rule |
| postcss | <a href="https://www.npmjs.com/package/postcss"><img src="https://img.shields.io/npm/v/postcss?style=for-the-badge&label=postcss"></a> | CSS processor |
| globals | <a href="https://www.npmjs.com/package/globals"><img src="https://img.shields.io/npm/v/globals?style=for-the-badge&label=globals"></a> | ESLint env globals |

> Versions shown are the latest published on npm at time of writing. The installed versions follow the ranges declared in `package.json`.

<br>

## 🤝 Contributing

See [CONTRIBUTING.md](./CONTRIBUTING.md). Bug reports and feature requests go through [GitHub Issues](https://github.com/H0NEYP0T-466/renderCV/issues) using the templates under `.github/ISSUE_TEMPLATE/`.

Quick summary:
- Fork → branch → change → lint → test → PR
- Match existing code style (plain CSS, TypeScript ES2023, immutable patterns)
- Open for "good first issue" labelled issues for newcomers

<br>

## 📜 License

Distributed under the **MIT License** — see [LICENSE](./LICENSE).

<br>

## 🛡 Security

Vulnerability reporting and handling policy: see [SECURITY.md](./SECURITY.md).

<br>

## 📏 Code of Conduct

All contributors and participants agree to the [Contributor Covenant 2.1](./CODE_OF_CONDUCT.md).

<br>

<p align="center">Made with ❤ by <a href="https://github.com/H0NEYP0T-466">H0NEYP0T-466</a></p>

反馈内容错误