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


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 resumeCold Bear Resumemarkdown-resumeWordFive hundred ding/super resume
PaidfreefreeOpen sourcePaid activationPaid export
Open sourceYesnoOpen sourcenono
Edit modeMarkdownMarkdownMeshing+MarkdownwordGrid
Export pdfstand byPoor supportPoor supportstand bystand by
Custom templateComing soonnot supportnot supportstand bynot 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!


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) 

邮箱: [qiufenghyf@163.com](mailto:qiufenghyf@163.com)

微信: qiufengblue

## 介绍


## 工作
### 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


\# 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.


\## 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.


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 qiufenghyf@163.com](mailto:qiufenghyf@163.com)

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 qiufenghyf@163.com](mailto:qiufenghyf@163.com)

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. ❤️


+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



2.9k 声望
3.9k 粉丝
0 条评论
用Colab免费部署自己的AI绘画云平台—— Stable Diffusion
AI绘画门槛又又又降低了,从最开始需要花半天时间折腾的 Disco-Diffusion ,紧接着 Stable Diffusion 在 github 上开源,各家平台都推出了云平台,让用户通过轻松的点击、选择、输入就能生成一张张AI图。

程序员秋风8阅读 3.3k评论 4

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木148阅读 12.1k评论 10

平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.3k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan42阅读 2.9k评论 14



2.9k 声望
3.9k 粉丝