auto-resume — Next.js 作品集模板

SHA-256: 06a9c5d31bb2f08666b0f1e98deb962892eba6082becef53966744abcee3b4bb

2026-10-14T19:02:42.834Z

<div align="center">

# ✨ AutoResume

### AI-Powered Resume Builder — Build ATS-Friendly Resumes in Minutes

[![Next.js](https://img.shields.io/badge/Next.js-16-black?style=for-the-badge&logo=next.js&logoColor=white)](https://nextjs.org/)
[![React](https://img.shields.io/badge/React-19-61DAFB?style=for-the-badge&logo=react&logoColor=black)](https://react.dev/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5-3178C6?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white)](https://tailwindcss.com/)
[![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)](LICENSE)

**AutoResume** is a modern, open-source resume builder that leverages AI to help you craft professional, ATS-optimized resumes. With real-time preview, multiple beautiful templates, drag-and-drop reordering, and full privacy — everything runs 100% in your browser.

[🚀 Live Demo](https://auto-resume-eight.vercel.app) · [📖 Documentation](#usage) · [🐛 Report Bug](../../issues) · [💡 Request Feature](../../issues)

</div>

---

## 🎯 Why AutoResume?

Most resume builders are either too simple, locked behind paywalls, or send your data to third-party servers. **AutoResume** is different:

- 🔒 **Privacy First** — All data is stored locally in your browser. Nothing is sent to any server.
- 🤖 **AI-Powered** — Bring your own API key (OpenAI or Gemini) to get intelligent content suggestions.
- 🎨 **Beautiful Templates** — Multiple professionally designed templates with real-time preview.
- 📱 **Fully Responsive** — Works seamlessly on desktop, tablet, and mobile.
- ⚡ **Blazing Fast** — Built with Next.js 16 and React 19 for optimal performance.
- 🆓 **100% Free & Open Source** — No paywalls, no subscriptions, no hidden fees.

---

## ✨ Features

<table>
<tr>
<td width="50%">

### 📝 Smart Resume Editor
- Intuitive form-based editor with validation
- Sections: Personal Info, Summary, Experience, Education, Skills
- Drag & drop reordering of sections
- Auto-save to browser local storage

</td>
<td width="50%">

### 🤖 AI Assistance
- AI-powered content suggestions (OpenAI & Gemini)
- Smart summary generation
- Skills recommendations
- ATS keyword optimization

</td>
</tr>
<tr>
<td width="50%">

### 🎨 Professional Templates
- **Modern** — Clean design with accent colors and left sidebar
- **Professional** — Classic corporate layout with structured sections
- **Minimalist** — Typography-focused elegant design
- Real-time preview while editing

</td>
<td width="50%">

### ⚙️ Customization
- Custom font selection (typeface & size)
- Template switching in real-time
- Multiple resume management
- Duplicate & delete resumes

</td>
</tr>
</table>

---

## 🛠️ Tech Stack

| Category | Technologies |
|---|---|
| **Framework** | Next.js 16, React 19, TypeScript 5 |
| **Styling** | Tailwind CSS 4, Radix UI, Lucide Icons |
| **State Management** | Zustand, React Hook Form, Zod |
| **Animation** | Motion (Framer Motion) |
| **AI Integration** | OpenAI API, Google Gemini API |
| **Data** | LocalForage, Browser LocalStorage |
| **DX Tools** | ESLint, Prettier, Husky, pnpm |

---

## 🚀 Getting Started

### Prerequisites

- **Node.js** 18+ ([Download](https://nodejs.org/))
- **pnpm** ([Install](https://pnpm.io/installation))

### Installation

```bash
# Clone the repository
git clone https://github.com/holymaiden/auto-resume.git

# Navigate to the project
cd auto-resume

# Install dependencies
pnpm install

# Start the development server
pnpm dev
```

Open [http://localhost:3000](http://localhost:3000) to see the app! 🎉

### AI Setup (Optional)

1. Click the ⚙️ **Settings** button in the header
2. Choose your AI provider: **OpenAI** or **Google Gemini**
3. Paste your API key
4. AI features will be activated instantly

> **Note:** AI features are optional. The app works perfectly without an API key — you just won't get AI-powered suggestions.

---

## 📁 Project Structure

```
auto-resume/
├── src/
│   ├── app/                    # Next.js App Router pages
│   │   ├── page.tsx            # Dashboard — resume list
│   │   └── editor/             # Resume editor page
│   ├── components/
│   │   ├── editor/             # Editor components
│   │   │   ├── form-builder/   # Form sections (personal, experience, etc.)
│   │   │   └── preview/        # Live preview & templates
│   │   ├── layout/             # App header, providers
│   │   ├── settings/           # Settings modal
│   │   └── ui/                 # Reusable UI components (Radix-based)
│   ├── lib/                    # Utilities, constants, storage
│   ├── schemas/                # Zod validation schemas
│   ├── stores/                 # Zustand state management
│   └── types/                  # TypeScript type definitions
├── public/                     # Static assets
├── package.json
└── tsconfig.json
```

---

## 📜 Available Scripts

| Script | Description |
|---|---|
| `pnpm dev` | Start development server with hot reload |
| `pnpm build` | Build for production |
| `pnpm start` | Start production server |
| `pnpm lint` | Run ESLint checks |
| `pnpm format` | Format code with Prettier |
| `pnpm format:check` | Check formatting without modifying files |

---

## 🤝 Contributing

Contributions are welcome! Here's how you can help:

1. **Fork** the repository
2. **Create** a feature branch (`git checkout -b feature/amazing-feature`)
3. **Commit** your changes (`git commit -m 'feat: add amazing feature'`)
4. **Push** to the branch (`git push origin feature/amazing-feature`)
5. **Open** a Pull Request

### Contribution Ideas

- 🌍 Add internationalization (i18n) support
- 📄 PDF export functionality
- 🎨 New resume templates
- 🧪 Unit & integration tests
- 📱 PWA support for offline usage

---

## 📄 License

This project is licensed under the **MIT License** — see the [LICENSE](LICENSE) file for details.

---

## ⭐ Show Your Support

If you find AutoResume helpful, please consider giving it a ⭐ on GitHub! It helps others discover this project.

<div align="center">

**Built with ❤️ by [holymaiden](https://github.com/holymaiden)**

[⬆ Back to Top](#-autoresume)

</div>