Resumify — Vite 作品集模板

SHA-256: 975478aa6b5946b06879c8ed92cfb1107293b9b7e14b287c607fefc66aa93dcb

2026-10-04T15:05:24.743Z

# 🧠 Resumify — Free, Privacy-First Resume Maker

![React](https://img.shields.io/badge/React-18-61DAFB?logo=react&logoColor=black)
![TypeScript](https://img.shields.io/badge/TypeScript-5-3178C6?logo=typescript&logoColor=white)
![Vite](https://img.shields.io/badge/Vite-Latest-646CFF?logo=vite&logoColor=white)
![TailwindCSS](https://img.shields.io/badge/Tailwind%20CSS-3-06B6D4?logo=tailwindcss&logoColor=white)
![License](https://img.shields.io/badge/License-MIT-green)
![Stars](https://img.shields.io/github/stars/Afif718/Resumify?style=social)
![Forks](https://img.shields.io/github/forks/Afif718/Resumify?style=social)

> **Build a professional, ATS-ready resume in minutes — 6 templates, full customization, zero sign-up, zero data collection.**

### 🌐 [Try the Live Demo →](https://resumify-by-afif.netlify.app/)
*No installation. No account. Open in browser and start building.*

---

## 🔍 Why Resumify?

Most resume builders track your data, lock features behind paywalls, or require an account just to get started. **Resumify does none of that.**

Everything runs locally in your browser. Your personal information never leaves your device. No backend, no database, no surveillance — just a fast, beautiful resume builder that respects your privacy and gets out of your way.

---

## ✨ Features

- 🪄 **6 modern templates** — designed for tech, business, creative, and academic roles
- 🔒 **Zero data collection** — no sign-up, no backend, your data never leaves your browser
- 📄 **ATS-friendly PDF export** — clean exports optimized for applicant tracking systems
- 💾 **JSON import/export** — save your resume data and reload it anytime, across sessions
- 🎨 **Full customization** — colors, fonts, page format (US Letter / A4), and section order
- 📐 **Flexible layouts** — single-column, two-column, and sidebar options
- 🔄 **Section management** — show, hide, and reorder sections without losing data
- 🖼️ **Profile photo support** — available on selected templates
- 🌐 **Works offline** — fully functional after the initial page load
- ⚡ **Instant preview** — see every change reflected in real time as you type

---

## 🧰 Tech Stack

| Technology | Purpose |
|---|---|
| React 18 + TypeScript | Frontend framework for fast, type-safe SPA rendering |
| Vite | Lightning-fast dev server and production bundler |
| Tailwind CSS | Utility-first styling for responsive, modern design |
| Shadcn/UI | Accessible, elegant pre-built component library |
| Lucide React | Clean, scalable icon set |
| @react-pdf/renderer | Client-side PDF generation for resume downloads |

---

## 🎨 Available Templates

| # | Template | Style | Best For |
|---|---|---|---|
| 1 | **Tech Sidebar** | Two-column, sidebar | Software developers, engineers |
| 2 | **Business Professional** | Single-column, formal | Corporate, management, traditional industries |
| 3 | **Modern Minimal** | Two-column, bold | Versatile roles, modern companies |
| 4 | **Elegant Timeline** | Single-column, timeline | Senior professionals, career changers |
| 5 | **Creative Modern** | Two-column, vibrant | Designers, marketers, creative industries |
| 6 | **B-JET Professional** | Table-based, formal | Academic, research, formal applications |

> ✅ All templates are ATS-friendly, fit on one page, and fully customizable — switch templates anytime without losing your data.

---

## 📁 Project Structure

```
Resumify/
│
├── src/
│   ├── components/        # UI components (form sections, template renderers)
│   ├── templates/         # Individual resume template definitions
│   ├── hooks/             # Custom React hooks
│   ├── types/             # TypeScript type definitions
│   └── utils/             # Helper functions (PDF export, JSON handling)
│
├── public/                # Static assets
├── index.html
├── tailwind.config.ts
├── vite.config.ts
├── components.json        # Shadcn/UI config
└── resume-2025-10-12.json # Sample resume data for quick preview
```

---

## 🚀 Getting Started

### Option A — Use Online (No Setup)

👉 **[resumify-by-afif.netlify.app](https://resumify-by-afif.netlify.app/)** — open and start building instantly.

### Option B — Run Locally

**Prerequisites:** Node.js v16+ and npm or yarn

```bash
# 1. Clone the repo
git clone https://github.com/Afif718/Resumify.git
cd Resumify

# 2. Install dependencies
npm install

# 3. Start the dev server
npm run dev
```

App runs at **http://localhost:5173**

```bash
# Build for production
npm run build
npm run preview
```

### ⚡ Quick Start with Sample Data

Want to see all 6 templates immediately with real content?

1. Download **`resume-2025-10-12.json`** from the repo root
2. Open the app
3. Click **Import**
4. Select the JSON file
5. All templates are now populated and ready to preview

---

## 📝 How to Use

**1. Pick a Template** — Browse 6 designs and choose what fits your industry

**2. Fill in Your Details** — Personal info, summary, experience, projects, education, skills, and custom sections

**3. Customize** — Fonts, color presets (Professional Blue, Modern Teal, Creative Orange, Elegant Purple, Corporate Gray, Tech Green), page size

**4. Manage Sections** — Drag to reorder, toggle visibility, hidden sections retain your data

**5. Export** — Download as ATS-ready PDF or save as JSON for later

---

## 🔒 Privacy & Security

| What we do | What we don't do |
|---|---|
| ✅ Run entirely in your browser | ❌ Never collect personal data |
| ✅ Store data in local browser memory | ❌ No backend server |
| ✅ Open source — full transparency | ❌ No accounts or sign-ups |
| ✅ Works offline after first load | ❌ No third-party tracking |

---

## 🤝 Contributing — You're Invited!

Resumify is open source and **actively welcoming contributors**. Whether you're a designer, developer, or just someone who found a bug — your input makes this better for thousands of job seekers.

### 🌱 Good First Issues

Looking for a place to start? Here are some great entry points:

- 🎨 **Design a new resume template** — add your own style to the template library
- 🌍 **Add multilingual support** — help non-English speakers build resumes
- 🌙 **Dark mode for the editor UI** — the builder itself, not the resume
- 🐛 **Bug fixes** — check open [issues](https://github.com/Afif718/Resumify/issues)
- 📝 **Improve documentation** — clearer setup guides, contribution docs
- ♿ **Accessibility improvements** — keyboard navigation, screen reader support

### 📋 How to Contribute

```bash
# 1. Fork the repository
# 2. Create your feature branch
git checkout -b feature/your-feature-name

# 3. Make your changes and commit
git commit -m "Add: brief description of what you did"

# 4. Push your branch
git push origin feature/your-feature-name

# 5. Open a Pull Request on GitHub
```

### 💬 Before You Start

For significant changes, please **open an issue first** to discuss your idea — this avoids duplicate work and ensures your contribution fits the project direction.

Every contribution — no matter how small — is appreciated and credited. ⭐

---

## 💼 Use Cases

- 🎯 Fresh graduates building their first professional resume
- 🔁 Professionals tailoring resumes for different job applications
- 🧾 Anyone who wants ATS-ready PDFs without paying or signing up
- 🌐 Users in low-connectivity environments needing an offline tool
- 📐 Applicants needing region-specific formats (US Letter vs A4)

---

## 🔮 Future Roadmap

- [ ] Additional resume templates (contributions welcome!)
- [ ] Multilingual UI and resume content support
- [ ] Dark mode for the editor
- [ ] Cover letter builder
- [ ] LinkedIn profile import
- [ ] More color themes and font pairings
- [ ] Resume scoring / ATS keyword checker

---

## 📄 License

This project is licensed under the [MIT License](LICENSE).

---

## 🙏 Acknowledgments

- [Vite](https://vitejs.dev/) — for the blazing fast build tooling
- [Shadcn/UI](https://ui.shadcn.com/) — for beautiful accessible components
- [Lucide](https://lucide.dev/) — for the icon set
- [@react-pdf/renderer](https://react-pdf.org/) — for client-side PDF generation

---

## 👤 Author

**M. H. A. Afif** — [@Afif718](https://github.com/Afif718)

---

<div align="center">

**⭐ If Resumify helped you land a job or saved you time, please star the repo — it helps others find it too!**

*Made with ❤️ for job seekers everywhere*

</div>