├── demo.png
├── babel.config.js
├── public
    ├── favicon.ico
    ├── index.html
    └── conf.yml
├── src
    ├── assets
    │   ├── theme
    │   │   └── pure
    │   │   │   ├── variables.less
    │   │   │   ├── print.less
    │   │   │   └── core.less
    │   └── less
    │   │   └── common.less
    ├── util
    │   └── request.js
    ├── main.js
    ├── App.vue
    └── components
    │   ├── loading.vue
    │   └── pure.vue
├── .prettierrc
├── vue.config.js
├── .gitignore
├── package.json
└── README.md


/demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/17px/yaml-resume-page/HEAD/demo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/17px/yaml-resume-page/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/theme/pure/variables.less:
--------------------------------------------------------------------------------
1 | // 核心主题色
2 | :root {
3 |   --mainThemeColor: "red";
4 | }
5 | 
6 | // tip-color
7 | @tip-color: #ccc;
8 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "tabWidth": 2,
3 |   "semi": false,
4 |   "singleQuote": true,
5 |   "printWidth": 120,
6 |   "arrowParens": "avoid",
7 |   "endOfLine": "crlf"
8 | }
9 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   chainWebpack: config => {
 3 |     config.plugin('html').tap(args => {
 4 |       args[0].title = 'Choi 简历生成器'
 5 |       return args
 6 |     })
 7 |   },
 8 |   configureWebpack: {
 9 |     externals: {
10 |       vue: 'Vue',
11 |       axios: 'axios'
12 |     }
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/src/util/request.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | 
 3 | const baseUrl =
 4 |   process.env.NODE_ENV === "development" ? "/" : "./";
 5 | 
 6 | const ins = axios.create({
 7 |   timeout: 7000,
 8 |   baseURL: baseUrl,
 9 |   headers: {
10 |     "Cache-Control": "no-cache",
11 |   },
12 | });
13 | 
14 | export default ins;
15 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "./App.vue";
 3 | import yaml from "js-yaml";
 4 | import axios from "@/util/request";
 5 | import "font-awesome/css/font-awesome.css";
 6 | import "@/assets/less/common.less";
 7 | 
 8 | Vue.prototype.$Y = yaml;
 9 | Vue.prototype.$http = axios;
10 | 
11 | Vue.config.productionTip = false;
12 | 
13 | new Vue({
14 |   render: (h) => h(App),
15 | }).$mount("#app");
16 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
 9 |     <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
10 |     <title><%= htmlWebpackPlugin.options.title %></title>
11 |   </head>
12 |   <body>
13 |     <noscript>
14 |       <strong
15 |         >We're sorry but choi doesn't work properly without JavaScript enabled. Please enable it to continue.</strong
16 |       >
17 |     </noscript>
18 |     <div id="app"></div>
19 |     <!-- built files will be auto injected -->
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/src/assets/theme/pure/print.less:
--------------------------------------------------------------------------------
 1 | // chrome打印样式
 2 | @media print {
 3 |   body {
 4 |     padding-top: 0;
 5 |     #wrapper {
 6 |       width: 1024px;
 7 |       height: 1450px; // A4 大小
 8 |       margin: 0 auto;
 9 |       border-radius: 0;
10 |       box-shadow: none;
11 |       padding-bottom: 40px;
12 |       .basic {
13 |         section {
14 |           .left,
15 |           .right {
16 |             color: #333;
17 |             small {
18 |               color: #333;
19 |             }
20 |           }
21 |         }
22 |         .relative {
23 |           .left {
24 |             div {
25 |               color: #333;
26 |             }
27 |           }
28 |           .right {
29 |             a {
30 |               i {
31 |                 color: #333;
32 |               }
33 |               span {
34 |                 color: #333;
35 |               }
36 |             }
37 |           }
38 |         }
39 |       }
40 |     }
41 |     .pdf {
42 |       display: none;
43 |     }
44 |     .last-modify {
45 |       position: absolute;
46 |       z-index: 1;
47 |       width: 970px;
48 |       top: auto;
49 |       bottom: 25px;
50 |       text-align: left;
51 |       padding-left: 20px;
52 |       color: #d1d1d1;
53 |     }
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "choi",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.21.0",
12 |     "core-js": "^2.6.5",
13 |     "font-awesome": "^4.7.0",
14 |     "html2canvas": "^1.3.2",
15 |     "js-yaml": "^3.13.1",
16 |     "less": "^3.9.0",
17 |     "less-loader": "^5.0.0",
18 |     "vue": "^2.6.10"
19 |   },
20 |   "devDependencies": {
21 |     "@vue/cli-plugin-babel": "^3.9.0",
22 |     "@vue/cli-plugin-eslint": "^3.9.0",
23 |     "@vue/cli-service": "^3.9.0",
24 |     "babel-eslint": "^10.0.1",
25 |     "eslint": "^5.16.0",
26 |     "eslint-plugin-vue": "^5.0.0",
27 |     "vue-cli-plugin-axios": "^0.0.4",
28 |     "vue-template-compiler": "^2.6.10"
29 |   },
30 |   "eslintConfig": {
31 |     "root": true,
32 |     "env": {
33 |       "node": true
34 |     },
35 |     "extends": [
36 |       "plugin:vue/essential",
37 |       "eslint:recommended"
38 |     ],
39 |     "rules": {},
40 |     "parserOptions": {
41 |       "parser": "babel-eslint"
42 |     }
43 |   },
44 |   "postcss": {
45 |     "plugins": {
46 |       "autoprefixer": {}
47 |     }
48 |   },
49 |   "browserslist": [
50 |     "> 1%",
51 |     "last 2 versions"
52 |   ]
53 | }
54 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <p class="last-modify">最后更新时间：{{ lastModifyTime }}</p>
 4 |     <Pure :renderData="renderData" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | // 引入主题组件
10 | import Pure from '@/components/pure'
11 | export default {
12 |   components: { Pure },
13 |   data() {
14 |     return {
15 |       renderData: {},
16 |       lastModifyTime: ''
17 |     }
18 |   },
19 |   methods: {
20 |     async getConfData() {
21 |       let [src, res] = [{}, '']
22 |       src = await this.$http.get('conf.yml')
23 |       try {
24 |         res = this.$Y.safeLoad(src.data)
25 |       } catch (e) {
26 |         throw e
27 |       }
28 |       return res
29 |     },
30 |     /**
31 |      * 设置全局根背景色
32 |      */
33 |     setThemeColor(color) {
34 |       document.getElementsByTagName('body')[0].style.setProperty('--mainThemeColor', color)
35 |     }
36 |   },
37 |   async created() {
38 |     this.renderData = await this.getConfData()
39 |     const { mainThemeColor, lastModifyTime, title } = this.renderData.conf
40 |     this.setThemeColor(mainThemeColor)
41 |     this.lastModifyTime = lastModifyTime
42 |     document.title = title
43 |   }
44 | }
45 | </script>
46 | 
47 | <style lang="less" scoped>
48 | body {
49 |   position: relative;
50 |   -webkit-font-smoothing: antialiased;
51 |   font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
52 |   font-size: 14px;
53 |   line-height: 1.57142857;
54 |   color: #333;
55 |   padding-top: 5px;
56 |   overflow: auto;
57 |   @media screen and (max-width: 1024px) {
58 |     padding-top: 0;
59 |   }
60 |   .last-modify {
61 |     position: absolute;
62 |     top: 30px;
63 |     left: 50%;
64 |     width: 1000px;
65 |     transform: translateX(-50%);
66 |     text-align: right;
67 |     font-size: 12px;
68 |     color: #bbb;
69 |     transition: all 0.2s ease-in-out;
70 |     animation: fade 1.6s;
71 |     @media screen and (max-width: 1024px) {
72 |       display: none;
73 |     }
74 |   }
75 | }
76 | </style>
77 | 


--------------------------------------------------------------------------------
/src/assets/less/common.less:
--------------------------------------------------------------------------------
 1 | @import "../theme/pure/variables.less";
 2 | 
 3 | html {
 4 |   background: whitesmoke;
 5 |   line-height: 1;
 6 |   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei",
 7 |     "微软雅黑", Arial, sans-serif;
 8 | }
 9 | 
10 | * {
11 |   transition: all 0.5s;
12 |   box-sizing: border-box;
13 |   color: #333;
14 | }
15 | 
16 | ul {
17 |   list-style-type: square;
18 | }
19 | 
20 | body,
21 | ul,
22 | p,
23 | h1,
24 | h2,
25 | h3,
26 | h4,
27 | h5,
28 | h6 {
29 |   margin: 0;
30 | }
31 | 
32 | a {
33 |   text-decoration: none;
34 | }
35 | 
36 | .tip {
37 |   display: inline-block;
38 |   background: var(--mainThemeColor);
39 |   padding: 1px 5px;
40 |   border-radius: 3px;
41 |   margin: 0 5px 5px 0;
42 |   font-size: 12px;
43 |   color: #fff;
44 |   letter-spacing: 1px;
45 | }
46 | 
47 | .tip-grey {
48 |   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei",
49 |     "微软雅黑", Arial, sans-serif;
50 |   font-size: 13px;
51 |   line-height: 15px;
52 |   font-weight: 500;
53 |   color: #494949;
54 |   margin: 0 3px;
55 |   padding: 0 4px;
56 |   border-bottom: 1px solid #eee;
57 |   box-shadow: inset 0 -8px #eee;
58 | }
59 | 
60 | .link {
61 |   line-height: 1.2;
62 |   padding: 1px 10px;
63 |   border-radius: 3px;
64 |   border: 1px solid var(--mainThemeColor);
65 |   color: var(--mainThemeColor);
66 |   font-family: "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3",
67 |     "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", "微软雅黑",
68 |     Arial, sans-serif;
69 | }
70 | 
71 | .pdf {
72 |   display: inline-block;
73 |   position: fixed;
74 |   z-index: 10;
75 |   bottom: 6px;
76 |   left: 50%;
77 |   margin-left: 520px;
78 |   padding: 0 8px;
79 |   border-radius: 3px;
80 |   font-size: 12px;
81 |   line-height: 26px;
82 |   color: #fff;
83 |   background-color: var(--mainThemeColor);
84 |   transition: all 0.2s ease-in-out;
85 |   animation: fade 1.6s;
86 |   i {
87 |     color: #fff;
88 |   }
89 |   @media screen and (max-width: 1246px) {
90 |     left: auto;
91 |     right: 8px;
92 |     margin-left: 0;
93 |   }
94 | }
95 | 


--------------------------------------------------------------------------------
/public/conf.yml:
--------------------------------------------------------------------------------
 1 | # 配置
 2 | conf:
 3 |   #页面标题
 4 |   title: 陈睿 | 前端开发
 5 |   # 主体色
 6 |   mainThemeColor: '#00b38a'
 7 |   # 最后更新时间
 8 |   lastModifyTime: 2021年1月19日 14点31分
 9 |   # pdf简历url
10 |   pdf: https://www.mozzie.cn/resume.pdf
11 |   # 模块
12 |   modules:
13 |     skill: 技能
14 |     exp: 项目经验
15 |     project: 作品
16 | 
17 | # 基础信息
18 | basic:
19 |   cnName: 陈睿
20 |   enName: Rui Chen
21 |   sex: 男
22 |   birth: 1994年01月
23 |   objective: Web前端开发
24 |   city: 南京
25 |   overall: 3年前端开发经验 · 2016年毕业
26 |   college: 南京信息工程大学滨江学院 / 本科
27 |   phone: 18061205553
28 |   email: himozzie@foxmail.com
29 |   # 别再前面加https和www
30 |   homepage: mozzie.cn
31 |   # 别再前面加https和www
32 |   git: github.com/chenrrrrrr
33 | 
34 | # 技能
35 | skill:
36 |   - 3 年多前端工作经验，熟练掌握 Javascript、具备 Typescript 项目经验
37 |   - 熟悉 Vue 全家桶，对`模板引擎`、`AST`等底层原理有一定理解
38 |   - 熟悉 Node、Java，具备 Springboot、Egg、Koa2 项目经验
39 |   - 掌握 Linux 基本命令，了解 nginx 基本配置，具备单机前后端分离应用部署能力
40 |   - 入门过 Electron、Flutter 等新技术
41 | 
42 | # 项目经验
43 | exp:
44 |   - name: PC/vue • 亚马逊测评系统
45 |     role: 前端TL • (2021.03 ~ 至今)
46 |     bg: 跨境电商测评业务线从零开荒
47 |     des:
48 |       - js全栈项目，重构2个版本，Egg.js 为移动端、pc端，提供服务，前后整体开发架构设计
49 |       - 招聘，带新人，辅助组员解决Bug、业务逻辑梳理、控制研发进度，软著申请
50 |       - 接入层、业务层设计，e.g 环境切换、api网关层(登录鉴权、动态角色路由、全局状态提示)
51 |       - 技术难点疏通，e.g 数据库敏感字段加密算法、邮件、短信SDK、文件上传、excel报表
52 |     ps: 难点：小组整体研发能力有限，解决方案：重构，集中解决硬编码、路由去中心化等问题，使用装饰器，扩展egg.ts，实现类、方法级的路由装饰器
53 |     link: youam.co
54 |     stack: egg vue全家桶 ElementUI
55 | 
56 |   - name: PC/web · docat文档系统
57 |     role: 核心开发
58 |     des:
59 |       - vue开发的运行时文档应用，对比 vuepress，省去静态编译过程，配合 githooks 实现 markdown 文件同步
60 |       - 引用cdn即可构建，内置代码高亮，扩展 markdown 原生语法，解决公司内部技术沉淀，项目文档交接问题。
61 |     ps: 难点：文档目录与内容的同步滚动
62 |     stack: markdown vue webpack
63 |     link: mozzie.cn
64 | 
65 |   - name: 小程序/Wepy • 危运超级号
66 |     role: 核心开发
67 |     des:
68 |       - 小程序wepy开发架构设计
69 |       - 全局跨页面消息提示设计、骨架屏的组件便携，网络、持久化等模块封装
70 |     ps: 难点：小程序多入口分发问题，解决方案：
71 |     stack: 小程序API 组件 wepy
72 | 
73 |   - name: PC/web • 开源博客系统typecho
74 |     role: 贡献者
75 |     des:
76 |       - 基于vue、webpack构建，将typecho二次开发由ssr改造为spa，为社区贡献了3套spa开发框架
77 |       - 开发4个免费主题到社区，github，100+ star
78 |     stack: vue webpack gulp
79 |     link: github.com/chenrrrrr/typecho-theme-Moz/tree/feature1.0
80 | 
81 | # 作品
82 | project:
83 |   - title: Docat
84 |     link: https://www.mozzie.cn
85 |     des: 一个基于Vue开发的运行时类博客文档，用于代码笔记
86 | 
87 |   - title: typecho-theme-moz
88 |     link: https://github.com/chenrrrrr/typecho-theme-Moz
89 |     des: 博客typecho系统主题，100+ star
90 | 
91 |   - title: choi
92 |     link: https://resume.mozzie.cn
93 |     des: 基于yaml，自动化构建响应式简历，适配网页A4打印
94 | 
95 |   - title: Yuna
96 |     link: https://github.com/chenrrrrr/Yuna
97 |     des: 基于vue、webpack构建，对typecho主题由ssr服务器端渲染，改造成了spa应用，从而使得typecho主题开发、迭代版本、功能时，变得更加得心应手。
98 | 


--------------------------------------------------------------------------------
/src/components/loading.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="la-loading la-ball-scale" v-show="show">
  3 |     <div></div>
  4 |   </div>
  5 | </template>
  6 | 
  7 | <script>
  8 | export default {
  9 |   data() {
 10 |     return {};
 11 |   },
 12 |   mounted() {},
 13 |   methods: {},
 14 |   props: {
 15 |     show: {
 16 |       type: Boolean,
 17 |       default: false,
 18 |     },
 19 |   },
 20 | };
 21 | </script>
 22 | 
 23 | <style lang="less" scoped>
 24 | .la-loading {
 25 |   position: fixed !important;
 26 |   z-index: 19940121;
 27 |   left: 50%;
 28 |   top: 50%;
 29 |   margin: -16px 0 0 -16px;
 30 | }
 31 | .la-ball-scale,
 32 | .la-ball-scale > div {
 33 |   position: relative;
 34 |   -webkit-box-sizing: border-box;
 35 |   -moz-box-sizing: border-box;
 36 |   box-sizing: border-box;
 37 | }
 38 | .la-ball-scale {
 39 |   display: block;
 40 |   font-size: 0;
 41 |   color: #fff;
 42 | }
 43 | .la-ball-scale.la-dark {
 44 |   color: #333;
 45 | }
 46 | .la-ball-scale > div {
 47 |   display: inline-block;
 48 |   float: none;
 49 |   background-color: currentColor;
 50 |   border: 0 solid currentColor;
 51 | }
 52 | .la-ball-scale {
 53 |   width: 32px;
 54 |   height: 32px;
 55 | }
 56 | .la-ball-scale > div {
 57 |   width: 32px;
 58 |   height: 32px;
 59 |   border-radius: 100%;
 60 |   opacity: 0;
 61 |   -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
 62 |   -moz-animation: ball-scale 1s 0s ease-in-out infinite;
 63 |   -o-animation: ball-scale 1s 0s ease-in-out infinite;
 64 |   animation: ball-scale 1s 0s ease-in-out infinite;
 65 | }
 66 | .la-ball-scale.la-sm {
 67 |   width: 16px;
 68 |   height: 16px;
 69 | }
 70 | .la-ball-scale.la-sm > div {
 71 |   width: 16px;
 72 |   height: 16px;
 73 | }
 74 | .la-ball-scale.la-2x {
 75 |   width: 64px;
 76 |   height: 64px;
 77 | }
 78 | .la-ball-scale.la-2x > div {
 79 |   width: 64px;
 80 |   height: 64px;
 81 | }
 82 | .la-ball-scale.la-3x {
 83 |   width: 96px;
 84 |   height: 96px;
 85 | }
 86 | .la-ball-scale.la-3x > div {
 87 |   width: 96px;
 88 |   height: 96px;
 89 | }
 90 | /*
 91 |  * Animation
 92 |  */
 93 | @-webkit-keyframes ball-scale {
 94 |   0% {
 95 |     opacity: 1;
 96 |     -webkit-transform: scale(0);
 97 |     transform: scale(0);
 98 |   }
 99 |   100% {
100 |     opacity: 0;
101 |     -webkit-transform: scale(1);
102 |     transform: scale(1);
103 |   }
104 | }
105 | @-moz-keyframes ball-scale {
106 |   0% {
107 |     opacity: 1;
108 |     -moz-transform: scale(0);
109 |     transform: scale(0);
110 |   }
111 |   100% {
112 |     opacity: 0;
113 |     -moz-transform: scale(1);
114 |     transform: scale(1);
115 |   }
116 | }
117 | @-o-keyframes ball-scale {
118 |   0% {
119 |     opacity: 1;
120 |     -o-transform: scale(0);
121 |     transform: scale(0);
122 |   }
123 |   100% {
124 |     opacity: 0;
125 |     -o-transform: scale(1);
126 |     transform: scale(1);
127 |   }
128 | }
129 | @keyframes ball-scale {
130 |   0% {
131 |     opacity: 1;
132 |     -webkit-transform: scale(0);
133 |     -moz-transform: scale(0);
134 |     -o-transform: scale(0);
135 |     transform: scale(0);
136 |   }
137 |   100% {
138 |     opacity: 0;
139 |     -webkit-transform: scale(1);
140 |     -moz-transform: scale(1);
141 |     -o-transform: scale(1);
142 |     transform: scale(1);
143 |   }
144 | }
145 | </style>
146 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ⚠️ This project is no longer maintained ⚠️
  2 | ---
  3 | 
  4 | # choi
  5 | 
  6 | 填写 yaml 配置文件，即可自动化构建一个简单的网页版简历
  7 | 
  8 | ## 示例
  9 | 
 10 | 演示地址：[https://resume.mozzie.cn/](https://resume.mozzie.cn)
 11 | 
 12 | ![演示图片](https://github.com/chenrrrrr/choi/blob/master/demo.png)
 13 | 
 14 | ## 项目结构
 15 | 
 16 | ```
 17 | ├── README.md
 18 | ├── package.json
 19 | ├── public
 20 | │   ├── conf.yml  # 配置文件
 21 | │   ├── favicon.ico # 站点图标
 22 | │   └── index.html
 23 | └── src
 24 | ```
 25 | 
 26 | 
 27 | ### 配置文件
 28 | 
 29 | 配置文件采用了简单易懂的`yaml`语法，当`yarn`打包后的`dist`文件部署打牌`nginx`之流的服务器上，会自动解析`conf.yml`并且渲染到页面中，可参考本例项目中的`conf.yml`配置
 30 | 
 31 | ```conf
 32 | # 配置
 33 | conf:
 34 |   # 站点标题
 35 |   title: '陈睿 | Web 前端开发'
 36 |   # 主题色
 37 |   mainThemeColor: '#00b38a'
 38 |   # 最后更新时间
 39 |   lastModifyTime: 2021年1月19日 14点31分
 40 |   # pdf简历url
 41 |   pdf: https://www.mozzie.cn/resume.pdf
 42 |   # 模块
 43 |   modules:
 44 |     skill: 技能
 45 |     exp: 项目经验
 46 |     project: 作品
 47 | 
 48 | # 基础信息
 49 | basic:
 50 |   cnName: 陈睿
 51 |   enName: Rui Chen
 52 |   sex: 男
 53 |   birth: 1994年01月
 54 |   objective: Web前端开发
 55 |   city: 南京
 56 |   overall: 3年前端开发经验 · 2016年毕业
 57 |   college: 南京信息工程大学滨江学院 / 本科
 58 |   phone: 18061205553
 59 |   email: himozzie@foxmail.com
 60 |   # 别再前面加https和www
 61 |   homepage: mozzie.cn
 62 |   # 别再前面加https和www
 63 |   git: github.com/chenrrrrrr
 64 | 
 65 | # 技能
 66 | skill:
 67 |   - 3 年多前端工作经验，熟练掌握 Javascript、具备 Typescript 项目经验
 68 |   - 熟悉 Vue 全家桶，对`模板引擎`、`AST`等底层原理有一定理解
 69 |   - 熟悉 Node、Java，具备 Springboot、Egg、Koa2 项目经验
 70 |   - 掌握 Linux 基本命令，了解 nginx 基本配置，具备单机前后端分离应用部署能力
 71 |   - 入门过 Electron、Flutter 等新技术
 72 | 
 73 | # 项目经验
 74 | exp:
 75 |   - name: PC/vue • 亚马逊测评系统
 76 |     role: 前端TL • (2021.03 ~ 至今)
 77 |     bg: 跨境电商测评业务线从零开荒
 78 |     des:
 79 |       - js全栈项目，重构2个版本，Egg.js 为移动端、pc端，提供服务，前后整体开发架构设计
 80 |       - 招聘，带新人，辅助组员解决Bug、业务逻辑梳理、控制研发进度，软著申请
 81 |       - 接入层、业务层设计，e.g 环境切换、api网关层(登录鉴权、动态角色路由、全局状态提示)
 82 |       - 技术难点疏通，e.g 数据库敏感字段加密算法、邮件、短信SDK、文件上传、excel报表
 83 |     ps: 难点：小组整体研发能力有限，解决方案：重构，集中解决硬编码、路由去中心化等问题，使用装饰器，扩展egg.ts，实现类、方法级的路由装饰器
 84 |     link: youam.co
 85 |     stack: egg vue全家桶 ElementUI
 86 | 
 87 |   - name: PC/web · docat文档系统
 88 |     role: 核心开发
 89 |     des:
 90 |       - vue开发的运行时文档应用，对比 vuepress，省去静态编译过程，配合 githooks 实现 markdown 文件同步
 91 |       - 引用cdn即可构建，内置代码高亮，扩展 markdown 原生语法，解决公司内部技术沉淀，项目文档交接问题。
 92 |     ps: 难点：文档目录与内容的同步滚动
 93 |     stack: markdown vue webpack
 94 |     link: mozzie.cn
 95 | 
 96 |   - name: 小程序/Wepy • 危运超级号
 97 |     role: 核心开发
 98 |     des:
 99 |       - 小程序wepy开发架构设计
100 |       - 全局跨页面消息提示设计、骨架屏的组件便携，网络、持久化等模块封装
101 |     ps: 难点：小程序多入口分发问题，解决方案：
102 |     stack: 小程序API 组件 wepy
103 | 
104 |   - name: PC/web • 开源博客系统typecho
105 |     role: 贡献者
106 |     des:
107 |       - 基于vue、webpack构建，将typecho二次开发由ssr改造为spa，为社区贡献了3套spa开发框架
108 |       - 开发4个免费主题到社区，github，100+ star
109 |     stack: vue webpack gulp
110 |     link: github.com/chenrrrrr/typecho-theme-Moz/tree/feature1.0
111 | 
112 | # 作品
113 | project:
114 |   - title: Docat
115 |     link: https://www.mozzie.cn
116 |     des: 一个基于Vue开发的运行时类博客文档，用于代码笔记
117 | 
118 |   - title: typecho-theme-moz
119 |     link: https://github.com/chenrrrrr/typecho-theme-Moz
120 |     des: 博客typecho系统主题，100+ star
121 | 
122 |   - title: choi
123 |     link: https://resume.mozzie.cn
124 |     des: 基于yaml，自动化构建响应式简历，适配网页A4打印
125 | 
126 |   - title: Yuna
127 |     link: https://github.com/chenrrrrr/Yuna
128 |     des: 基于vue、webpack构建，对typecho主题由ssr服务器端渲染，改造成了spa应用，从而使得typecho主题开发、迭代版本、功能时，变得更加得心应手。
129 | ```
130 | 
131 | ### 安装依赖
132 | 
133 | ```
134 | yarn install
135 | ```
136 | 
137 | ### 打包构建
138 | 
139 | ```
140 | yarn run build / yarn build
141 | ```
142 | 
143 | ### 部署到服务器
144 | 
145 | 将dist文件夹的静态文件上传到服务器中
146 | 
147 | 


--------------------------------------------------------------------------------
/src/components/pure.vue:
--------------------------------------------------------------------------------
  1 | <!-- pure主题 -->
  2 | <template>
  3 |   <div>
  4 |     <loading :show="loadingShow"></loading>
  5 |     <div id="wrapper" v-show="!loadingShow">
  6 |       <div class="basic">
  7 |         <section v-if="d.basic">
  8 |           <h1 class="left">
  9 |             {{ d.basic.cnName }}
 10 |             <small>{{ d.basic.enName }}</small>
 11 |           </h1>
 12 |           <h2 class="right">
 13 |             {{ renderData.basic.objective }}
 14 |             <small>/ {{ renderData.basic.city }}</small>
 15 |           </h2>
 16 |         </section>
 17 |         <div class="relative" v-if="d.basic">
 18 |           <div class="left">
 19 |             <div class="age">{{ renderData.basic.sex }} / {{ renderData.basic.birth }}</div>
 20 |             <div class="overall">{{ renderData.basic.overall }}</div>
 21 |             <div class="college">{{ renderData.basic.college }}</div>
 22 |           </div>
 23 |           <div class="right">
 24 |             <a :href="`tel:${renderData.basic.phone}`">
 25 |               <span>{{ renderData.basic.phone }}</span>
 26 |               <i class="fa fa-phone-square"></i>
 27 |             </a>
 28 |             <a :href="`https://www.${renderData.basic.git}`">
 29 |               <span>{{ renderData.basic.git }}</span>
 30 |               <i class="fa fa-git-square"></i>
 31 |             </a>
 32 |             <a :href="`https://www.${renderData.basic.homepage}`">
 33 |               <span>{{ renderData.basic.homepage }}</span>
 34 |               <i class="fa fa-h-square"></i>
 35 |             </a>
 36 |             <a :href="`Mailto:${renderData.basic.email}`">
 37 |               <span>{{ renderData.basic.email }}</span>
 38 |               <i class="fa fa-envelope-square"></i>
 39 |             </a>
 40 |           </div>
 41 |         </div>
 42 |       </div>
 43 |       <div class="skill" v-if="d.skill">
 44 |         <h5>{{ d.conf.modules.skill }}</h5>
 45 |         <ul>
 46 |           <li v-for="item in d.skill" :key="item" v-html="inlineCompiler(item)"></li>
 47 |         </ul>
 48 |       </div>
 49 |       <div class="exp" v-if="d.exp">
 50 |         <h5>{{ d.conf.modules.exp }}</h5>
 51 |         <ul>
 52 |           <li v-for="(item, index) in d.exp" :key="index">
 53 |             <div class="title">
 54 |               <span class="name">{{ item.name }} • {{ item.role }}</span>
 55 |               <a v-if="item.link" :href="item.link" target="_blank" class="link">link</a>
 56 |             </div>
 57 |             <div class="bg" v-if="item.bg">
 58 |               <p>背景：{{ item.bg }}</p>
 59 |             </div>
 60 |             <div class="des">
 61 |               <span v-if="d.conf.modules.l4 !== ''">{{ d.conf.modules.l4 }}</span>
 62 |               <ul>
 63 |                 <li v-for="(content, index) in item.des" :key="index">
 64 |                   <span>{{ index + 1 }}、 {{ content }}</span>
 65 |                 </li>
 66 |               </ul>
 67 |             </div>
 68 |             <div class="ps">
 69 |               <p>{{ item.ps }}</p>
 70 |             </div>
 71 |             <div class="stack" v-if="item.stack">
 72 |               <span v-html="stackCompiler(item.stack)"></span>
 73 |             </div>
 74 |           </li>
 75 |         </ul>
 76 |       </div>
 77 |       <div class="project" v-if="d.project">
 78 |         <h5>{{ d.conf.modules.project }}</h5>
 79 |         <ul>
 80 |           <li v-for="(item, index) in d.project" :key="index">
 81 |             <a :href="item.link" target="_blank" class="name">{{ item.title }}</a>
 82 |             <span>：</span>
 83 |             <span>{{ item.des }}</span>
 84 |           </li>
 85 |         </ul>
 86 |       </div>
 87 |       <a class="pdf" href="resume.pdf"> <i class="fa fa-file-pdf-o"></i> PDF简历 </a>
 88 |     </div>
 89 |   </div>
 90 | </template>
 91 | 
 92 | <script>
 93 | import loading from '@/components/loading'
 94 | export default {
 95 |   components: { loading },
 96 |   computed: {
 97 |     stackCompiler() {
 98 |       return str => {
 99 |         let list = str.split(' ')
100 |         list.forEach((item, index) => {
101 |           list[index] = `<label class='tip'>${item}</label>`
102 |         })
103 |         return list.join('')
104 |       }
105 |     },
106 |     inlineCompiler() {
107 |       let re = /`{1,2}[^`](.*?)`{1,2}/g
108 |       return str => {
109 |         let res = str
110 |         if (str.match(re)) {
111 |           let temp = res
112 |           str.match(re).forEach(item => {
113 |             temp = temp.replace(new RegExp(item, 'g'), `<label class='tip-grey'>${item.replace(/`/g, '')}</label>`)
114 |           })
115 |           res = temp
116 |         }
117 |         return res
118 |       }
119 |     }
120 |   },
121 |   watch: {
122 |     renderData: {
123 |       handler(n) {
124 |         this.d = n
125 |         // 隐藏loading
126 |         this.loadingShow = false
127 |       },
128 |       deep: true
129 |     }
130 |   },
131 |   data() {
132 |     return {
133 |       d: {},
134 |       loadingShow: true
135 |     }
136 |   },
137 |   props: {
138 |     renderData: {
139 |       type: Object
140 |     }
141 |   }
142 | }
143 | </script>
144 | 
145 | <style lang="less" scoped>
146 | // 核心样式表
147 | @import '../assets/theme/pure/core.less';
148 | // 打印样式表
149 | @import '../assets/theme/pure/print.less';
150 | </style>
151 | 


--------------------------------------------------------------------------------
/src/assets/theme/pure/core.less:
--------------------------------------------------------------------------------
  1 | // 核心样式表
  2 | @import './variables.less';
  3 | #wrapper {
  4 |   position: relative;
  5 |   width: 1024px;
  6 |   margin: 50px auto 30px;
  7 |   border-radius: 5px;
  8 |   background-color: #fff;
  9 |   box-shadow: 0 0 15px #c0c0c0;
 10 |   overflow: hidden;
 11 |   transition: all 0.2s ease-in-out;
 12 |   animation: fadeUp 2s cubic-bezier(0.19, 1, 0.22, 1);
 13 |   @media screen and (max-width: 1024px) {
 14 |     margin: 0;
 15 |     box-shadow: none;
 16 |     width: auto;
 17 |     border-radius: 0;
 18 |   }
 19 |   .basic {
 20 |     padding: 20px 30px 20px 30px;
 21 |     background: var(--mainThemeColor);
 22 |     section {
 23 |       position: relative;
 24 |       display: flex;
 25 |       justify-content: space-between;
 26 |       align-items: center;
 27 |       padding-bottom: 20px;
 28 |       @media screen and (max-width: 720px) {
 29 |         display: block;
 30 |       }
 31 |       h1,
 32 |       h2 {
 33 |         @media screen and (max-width: 720px) {
 34 |           text-align: center;
 35 |         }
 36 |       }
 37 |       h2 {
 38 |         @media screen and (max-width: 720px) {
 39 |           padding-top: 20px;
 40 |         }
 41 |       }
 42 |       .left {
 43 |         font-weight: 400;
 44 |         font-size: 48px;
 45 |         color: #fff;
 46 |         small {
 47 |           color: #fff;
 48 |           font-size: 24px;
 49 |           font-family: 'Lucida Grande', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'Helvetica Neue', Helvetica,
 50 |             'PingFang SC', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
 51 |         }
 52 |       }
 53 |       .right {
 54 |         font-size: 20px;
 55 |         color: #fff;
 56 |         small {
 57 |           font-size: 14px;
 58 |           color: #fff;
 59 |         }
 60 |       }
 61 |     }
 62 |     .relative {
 63 |       @media screen and (max-width: 720px) {
 64 |         display: block;
 65 |       }
 66 |       display: flex;
 67 |       justify-content: space-between;
 68 |       .left {
 69 |         @media screen and (max-width: 720px) {
 70 |           text-align: center;
 71 |           line-height: 30px;
 72 |         }
 73 |         display: flex;
 74 |         flex-direction: column;
 75 |         justify-content: space-around;
 76 |         font-size: 14px;
 77 |         div {
 78 |           color: #fff;
 79 |         }
 80 |       }
 81 |       .right {
 82 |         @media screen and (max-width: 720px) {
 83 |           display: flex;
 84 |           justify-content: center;
 85 |         }
 86 |         line-height: 22px;
 87 |         font-size: 14px;
 88 |         a {
 89 |           display: flex;
 90 |           justify-content: flex-end;
 91 |           align-items: center;
 92 |           i {
 93 |             padding-left: 10px;
 94 |             color: #fff;
 95 |             font-size: 20px;
 96 |             @media screen and (max-width: 720px) {
 97 |               padding-right: 10px;
 98 |             }
 99 |           }
100 |           span {
101 |             color: #fff;
102 |             @media screen and (max-width: 720px) {
103 |               display: none;
104 |             }
105 |           }
106 |         }
107 |       }
108 |     }
109 |   }
110 |   .skill,
111 |   .exp,
112 |   .project {
113 |     padding: 10px 20px;
114 |     h5 {
115 |       padding-bottom: 10px;
116 |       border-bottom: 1px solid #f3f3f3;
117 |     }
118 |     ul {
119 |       padding: 10px 0 5px 20px;
120 |       li {
121 |         line-height: 1.5;
122 |         padding-bottom: 5px;
123 |         font-size: 14px;
124 |         &:last-of-type {
125 |           padding-bottom: 0;
126 |         }
127 |       }
128 |     }
129 |   }
130 |   .skill {
131 |     padding-top: 20px;
132 |     ul {
133 |       @media screen and (max-width: 720px) {
134 |         padding-left: 10px;
135 |       }
136 |     }
137 |   }
138 |   .exp {
139 |     ul {
140 |       @media screen and (max-width: 720px) {
141 |         padding-left: 10px;
142 |       }
143 |     }
144 |     li {
145 |       font-size: 14px;
146 |       position: relative;
147 |       margin-bottom: 10px;
148 |       .title {
149 |         display: flex;
150 |         justify-content: space-between;
151 |         align-items: center;
152 |         padding: 5px 0;
153 |         .name {
154 |           padding-right: 50px;
155 |           font-weight: bold;
156 |         }
157 |         a {
158 |           transition: all 0.5s;
159 |         }
160 |         a:hover {
161 |           cursor: pointer;
162 |           background: var(--mainThemeColor);
163 |           color: #fff;
164 |         }
165 |       }
166 |       .des {
167 |         padding: 5px 0;
168 |         line-height: 1.5;
169 |         ul {
170 |           padding: 0;
171 |           list-style: none;
172 |           li {
173 |             margin: 0;
174 |             padding: 0;
175 |           }
176 |         }
177 |       }
178 |       .bg {
179 |         p {
180 |           color: var(--mainThemeColor);
181 |         }
182 |       }
183 |       .ps {
184 |         padding-bottom: 10px;
185 |         p {
186 |           color: var(--mainThemeColor);
187 |         }
188 |       }
189 |       .stack {
190 |         text-align: left;
191 |       }
192 |     }
193 |   }
194 |   .project {
195 |     ul {
196 |       @media screen and (max-width: 720px) {
197 |         padding-left: 10px;
198 |       }
199 |       li {
200 |         a {
201 |           color: var(--mainThemeColor);
202 |           text-decoration: underline;
203 |         }
204 |       }
205 |     }
206 |   }
207 | }
208 | 


--------------------------------------------------------------------------------