magic-resume

<div align="center">

# ✨ Magic Resume ✨

[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
![TanStack Start](https://img.shields.io/badge/TanStack_Start-latest-black)
![Framer Motion](https://img.shields.io/badge/Framer_Motion-10.0-purple)

<a href="https://trendshift.io/repositories/13077" target="_blank"><img src="https://trendshift.io/api/badge/repositories/13077" alt="Magic Resume | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
<a href="https://hellogithub.com/repository/JOYCEQL/magic-resume" target="_blank"><img src="https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=51a0f545d0964a47a173794478119ec7&claim_uid=qMBAYh4ZFCgViJI" alt="Featured｜HelloGitHub" style="width: 250px; height: 54px;" width="250" height="54" /></a>

[简体中文](./README.zh-CN.md) | English

</div>

Magic Resume is a modern online resume editor that makes creating professional resumes simple and enjoyable. Built with TanStack Start and Framer Motion, it supports real-time preview and custom themes.

<p align="center">
  <a href="https://app.offerin.cn/r/aff_Wsk_9WRpwPmN">
    <img src="./images/offerin-banner.png" alt="Sponsored by Offerin AI - AI interview and assessment assistant" width="100%" />
  </a>
</p>

## ❤️ Other Sponsors

If you sponsored this project but are not listed here, please contact me.

<!-- GitHub sizes tables to their content; a wide first column fills the available width. -->
<table>
  <thead>
    <tr>
      <th width="10000" align="left">Sponsor</th>
      <th align="right">Amount (CNY)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="https://github.com/fbitalk"><img src="https://github.com/fbitalk.png?size=40" width="40" height="40" alt="@fbitalk" /> @fbitalk</a></td>
      <td align="right">¥20</td>
    </tr>
    <tr>
      <td><a href="https://github.com/yj147"><img src="https://github.com/yj147.png?size=40" width="40" height="40" alt="@yj147" /> @yj147</a></td>
      <td align="right">¥10</td>
    </tr>
    <tr>
      <td><a href="https://github.com/someone1128"><img src="https://github.com/someone1128.png?size=40" width="40" height="40" alt="@someone1128" /> @someone1128</a></td>
      <td align="right">¥10</td>
    </tr>
  </tbody>
</table>

## 📸 Screenshots

<img width="1920" height="1440" alt="336_1x_shots_so" src="https://github.com/user-attachments/assets/18969a17-06f8-4a4b-94eb-284ba8442620" />


## ✨ Features

- 🚀 Built with TanStack Start
- 💫 Smooth animations (Framer Motion)
- 🎨 Custom theme support
- 📱 Responsive design
- 🌙 Dark mode
- 📤 Export to PDF
- 🔄 Real-time preview
- 💾 Auto-save
- 🔒 Local storage

## 🛠️ Tech Stack

- TanStack Start
- TypeScript
- Motion
- Tiptap
- Tailwind CSS
- Zustand
- Shadcn/ui
- Lucide Icons

## 🚀 Quick Start

1. Clone the project

```bash
git clone git@github.com:JOYCEQL/magic-resume.git
cd magic-resume
```

2. Install dependencies

```bash
pnpm install
```

3. Start development server

``