Write a good-looking resume using only Markdown, and the online resume application is here!

Preface

Everyone knows that gold three silver four is the season of recruitment, and all major Internet companies have started spring recruitment. Recently, many people have come to me for help to read resumes. The templates of resumes are uneven and too cool. Some friends just throw the word over, and the typesetting seems messy.

After some research, the most common way to use resumes is still word, followed by Markdown.

As a worker on the Internet, Markdown can be said to be a common way to write documents. I wondered if I could design an online site to write Markdown and give Markdown diversified themes.

You always have to stand on the shoulders of giants when you do things. The best Markdown resume editor found on the Internet is <Lengxiong Resume>, but his template is relatively simple, and it seems that the maintenance is relatively ordinary. I also investigated my usual typesetting tool <mdnice>, which is based on writing articles. It can be said that using a concise Markdown to implement different typesettings will make the whole process easier.

And I went to the market to research some commonly used solutions

	Wood and resume	Cold Bear Resume	markdown-resume	Word	Five hundred ding/super resume
Paid	free	free	Open source	Paid activation	Paid export
Open source	Yes	no	Open source	no	no
Edit mode	Markdown	Markdown	Meshing+Markdown	word	Grid
Ease	⭐⭐️⭐️⭐️⭐️	⭐⭐️⭐️⭐️⭐️	⭐️⭐️⭐️	⭐️	⭐️⭐️⭐️
Export pdf	stand by	Poor support	Poor support	stand by	stand by
template	diversification	single	diversification	diversification	diversification
Custom template	Coming soon	not support	not support	stand by	not support

To sum up, at this stage resume editors have the following trade-offs:

• Simple template, typography is not good
• Complex template, good-looking but very time-consuming

Based on the above background, so I developed wood and resume . You only need to use pure Markdown to create a good-looking resume in a very simple way.

Online address: https://resume.mdedit.online/

Online address: https://resume.mdedit.online/

Online address: https://resume.mdedit.online/

The important thing is said three times!

Overview

Basic way

Let everyone appreciate how convenient this application is! Suppose we have the following Markdown resume file.

# 秋风 - 前端工程师

博客: [https://qiufeng.blue](https://qiufeng.blue)

Gihtub: [https://github.com/hua1995116](https://github.com/hua1995116)

掘金: [https://juejin.cn/user/923245497557111](https://juejin.cn/user/923245497557111) 

邮箱: [[e-mail]](mailto:[e-mail])

微信: qiufengblue

## 介绍
于2015年开始接触前端，喜欢编码，有Geek精神，对代码有洁癖，喜欢接触前沿技术，爱折腾。

获得省、国家级竞赛奖项xx项，(包含浙江省大学生多媒体竞赛一等奖xx项)。
  
主持参与省、国家级项目xx项；发表论文xx篇，其中xx篇EI索引。

## 工作
### xxxx
打工中..

### xxxx
前端架构组
- 前端错误监控系统(基建)(负责人) 接入量pv:3000w
  - web端js-sdk开发,无侵入式接入,压缩后仅2kb。
  - 收集端Node开发,分布式存储日志。
  - 阿里云日志服务分析,以及常用的数据分析。
  - echart搭建可视化平台。
- 前端性能监控系统(负责人) 接入pv: 1000w
  - web端js-sdk开发,支持自定义上报以及自动上报,无侵入式。
  - 收集端Node开发,Elasticsearch集群存储日志。
  - Elasticsearch的Node模块开发，封装按时间维度的查询聚合模块。
  - 可视化平台,利用redis缓存优化查询,淘汰算法共同协作。
- 落地页截图(Node项目)
  - 利用puppeteer开发截图。
  - 利用clustor多线程开发,速度从原来60分钟提高至8分钟，提高约7倍（300张截图）。
  - 开发自定义队列模式,避免Node端丢失请求。
- webpack插件(webpack-plugin-inner-script)地址
  - 自动将外链形式改写成内敛形式。

## 技能
### Web基础
- 熟练掌握HTML5/CSS3,响应式布局和移动端开发
- 了解ES6/ES7,Webpack
- 有Antd Design,Element UI,Muse UI搭建项目经验
- 了解Hybrid开发以及Electron桌面开发,liunx服务器搭建经验,Nginx配置
- Mac开发用户，熟悉Git进行团队协作，对PS有一定基础

Based on the above Markdown following template styles can be quickly generated, and Markdown + pdf can be exported.

However, it should be noted that due to template limitations, you need to write a standardized title level.

first-level title to write at the beginning in the process of writing a resume. It is often used to describe the overall subject and title. The most commonly used is the name of the job applicant + the pattern of the job position

E.g:

\# Qiufeng-Front-end Engineer

This not only allows the interviewer to see the purpose of your resume at a glance, because in the actual process, many students do not clearly indicate the direction of delivery, which can easily lead to the wrong direction of delivery.

In the process of writing content, it is recommended to use secondary heading to write.

E.g:

\## Education background

\## work experience

\## Project experience

\## Basic skills

Rich templates

This project provides 4 default methods for everyone to choose, and more templates will be launched in the future.

Theme color change

Not only can we change the template, but when it contains color changeable templates, we can also change the overall theme color of the template.

<img src="https://s3.qiufengh.com/blog/image-20210315000636862.png" width="300">

Is it also very nice to change the theme color?

Left and right structure

In order to break through the traditional Markdown , a custom container was introduced, which was inspired by vuepress .

<img src="https://s3.qiufengh.com/blog/image-20210314235147407.png" alt="image-20210314235147407" style="zoom: 25%;" />

In our editor, using the left and right container pairs, you can easily realize the left and right layout.

:::left
xxxx
:::
:::right
xxx
:::

Rich icon

Currently supports some icon shortcuts, to help you be able to, can help you put good-looking icons, to beautify your resume.

[icon:blog https://qiufeng.blue](https://qiufeng.blue)

[icon:github https://github.com/hua1995116](https://github.com/hua1995116)

[icon:juejin 掘金](https://juejin.cn/user/923245497557111) 

[icon:email [e-mail]](mailto:[e-mail])

icon:weixin qiufengblue

Custom html

Insert picture

html is enabled in this project, so we can also use services like gihtub-readme-stats to insert a picture into our document.

# 秋风 - 前端工程师

::: left

<img style="display:block; margin: 0 0 0 30px" src="https://github-readme-stats.vercel.app/api?username=hua1995116&show_icons=true&icon_color=79ff97&text_color=fff&bg_color=39393a&hide_title=false&title_color=fff&disable_animations=true&hide_border=true">

:::

::: right
[icon:blog https://qiufeng.blue](https://qiufeng.blue)

[icon:github https://github.com/hua1995116](https://github.com/hua1995116)

[icon:juejin 掘金](https://juejin.cn/user/923245497557111) 

[icon:email [e-mail]](mailto:[e-mail])

icon:weixin qiufengblue

:::

You can also put this picture wherever you like.

Custom label

You can also add some custom label styles to make the writing of Markdown more free~, such as Tag

<span style="background: #ddd; padding: 5px">前端</span>

Export method

Support md import and export, but also support pdf export method. The back end adopts the puppeteer method, which can restore the html display mode to the greatest extent. Compared with the traditional front-end exporting image pdf, it has the following advantages:

• Text can be copied, links can be clicked
• Pagination is more friendly
• The content is clearer

Principle realization

The front end uses codemirror as the editor, and markdown-it performs Markdown rendering.

The back-end uses the method of serverless + puppeteer , which is billed according to the amount. The only disadvantage is that there will be function destruction (minimum 1 instance survives, configuration to be studied). When exporting, if the instance is destroyed, there will be a certain probability The export will fail. If it fails, it is recommended to try one more time. (This problem will be resolved as soon as possible)

Follow-up planning

• Support preview mode on A4 paper
• Cloud storage and synchronization
• Share and collaborate to modify your resume
• View resume online (compatible with mobile terminal)
• Expansion of official templates (4)
• Ability to customize and add templates (users can contribute templates)
• Template square (everyone can share their own DIY template to the square)

Written at the end

Finally, I am very grateful to my girlfriend @楠溪 for participating in the construction of the project and writing all the interfaces of the backend.

Open source address: https://github.com/hua1995116/react-resume-site

This project is young and there are still many problems. I hope you can give us your valuable opinions.

Everyone is also welcome to give ⭐️ support and encouragement.

I hope this project can help gold three silver four (you can also save them for later use. ❤️

Conclusion

+Like+Favorite+Comment+ , original is not easy, I encourage the author to create better articles

Pay attention to the notes of the Qiufeng, a front-end public account that focuses on front-end interviews, engineering, and open source