resume-json-pdf

English | 简体中文

🔥 Feature

💕 Support Markdown Syntax

(The following syntax can be nested)

• Italic text: *Italic* will be rendered as Italic
• Bold text: **Bold** will be rendered as Bold
• Inline code blocks: `React` `TypeScript` `Tailwind CSS` will be rendered as React TypeScript Tailwind CSS
• Links: https:// github.com/RylanBot will be rendered as github.com/RylanBot

💕 Support Custom Styles

• Templates: Versions with and without photos
• Icons: Refer to the Font Awesome library
• Fonts: Select or input any local font
• Colors: Use a color picker
• Layout: Adjust margins for a reasonable page design

🧙🏻 Quick Start

🔮 Ready to Use

Export JSON template → Modify data locally → Upload modified JSON File → Export PDF / HTML resume

Tip

Introduced a simple online text editing feature → Click on the relevant text in the setting mode

The original intention of this project is to focus more on the content of the resume itself, without worrying about filling out page forms and formatting styles, and to achieve maximum dynamic expansion. It is recommended to fill out locally, fine-tune online, and currently does not support complex online adding and deleting functions.

Parameter

• Missing a certain field won't result in an error, but the corresponding part will be rendered as blank, potentially causing layout issues.

• Pay attention to JSON format specifications; missing parentheses, commas, etc., can lead to import failures.

Profile

Field	Meaning	Note
name
avatar		Uploaded online defaults to Base64 storage or modified locally to a image link
footnote[]
contact[]		{ "icon": "", "value": "" }

Experience[ ]

Field	Meaning	Note
section
icon
items[]		{ "title": "", "subtitle": "", "timeline": "", "tech": "", "details": ["", ""] }

Style

Field	Meaning	Note
template		avatar / plain
fontStyle		Any local font name (online selection limited)
color		Hexadecimal
pagePy	Resume Padding Y	Number
profileMb	Profile Margin bottom	Number
experienceMb	Experience Margin bottom	Number
plainFootPx	Footnote Padding X	Number (only valid for the plain template)
plainContactPx	Contact Padding X	Number (only valid for the plain template)
detailsFont	Experience Section Font Size	Number

🔮 For Development

If you are familiar with the Web frontend technologies and are interested in source code, you can run this program using the following commands:

npm install
npm run dev

🌷 Preview

---