为了写简历,我用React+TS写了一个开源可视化简历生成器!

1,086 阅读3分钟

项目体验地址:evanryuu.github.io/simple-resu…

代码仓库:github.com/evanryuu/si…

项目来源

前两天,我准备开始起笔写简历了。

我的要求也不算很多:

  1. 我不想要扫码登录和注册
  2. 我希望部分地方能加一点点颜色
  3. 我不想要手动拖拽调整排版
  4. 我需要markdown的功能
  5. 我可能还需要 Iconify 的图标

我寻思网上一定有不少的开源项目,于是我就开始了几个小时的寻找。当然最后也确实让我找着了,在下面放两个我认为很好的项目

  • Visiky's Resume(Antv团队的国人大佬写的,省心配置化,有3个样式干净整洁的模板)
  • RxResume(这个虽然要登录,不过直接用google账号就可以了,还算是方便)

但是在使用前者的时候,我希望能够多点图标让我选择,在使用后者的时候呢我又碰到了一个样式上的问题

image.png

而且我还想写md (markdown) 😤

这个时候我就寻思——有这个时间我自己写不是已经写完了?

一拍大腿,开始敲代码,写了下面这个简历生成器。

功能介绍

1. 可视化,指哪儿改哪儿

你只需要点一下任意一个你想编辑的地方,左侧就会自动弹出来对应的输入框。输入结果会同步反应到模板里。

1.gif

2. 基本的主题颜色及样式修改

因为我比较喜欢简单一点,所以主打一个基础的模板和设置,自己也认为算是能够满足一些自定义的需求了。

style.gif

3. 头像上传

可以在本地选择图片上传成为头像

如果不需要头像的话直接在编辑样式的时候把头像大小拉为0就可以了

auto-save.gif avatar.gif

4. Iconify图标支持

你可以自由选择 Iconify 上的图标描述你的信息。

icon-guide.gif

5. 导入/导出设置,可以分享给朋友

可以通过导航栏上方的 保存 -> 保存简历 导出配置json文件,然后再通过 导入简历 导入该json就可以获得一样的简历了。

share-resume.gif

6. 自动保存简历设置,无需手动保存

所有设置会自动保存在本地(localStorage),所以不用担心刷新后数据丢失。

auto-save.gif

7. 导出PDF

在导航栏右上方选择 导出 -> 导出PDF 即可导出PDF文件。所见即所得。

export-pdf.gif

感谢

非常感谢下面的这些开源库和贡献者,是他们让我的这次开发体验无比愉快与轻松。

也感谢Visiky大佬的授权😄

更要感谢下我的女朋友在本次开发中作为我的甲方给我提出的各种建议和鼓励 😤

结束

再在结尾放一下项目的地址以及repo地址。也欢迎各位 fork 或者 clone 到自己本地进行开发和设置。

项目体验地址:evanryuu.github.io/simple-resu…

代码仓库:github.com/evanryuu/si…

如果对各位有帮助的话,求求动动小手点个赞和star,非常感谢🎈