feat: say goodbey to 2022, CMP & CMDB

README.md

@@ -8,6 +8,8 @@
 
 ## How to use
 
+> Node v12
+
 0. Run `yarn add`
 1. Run `yarn run start`
 2. Edit `src`
@@ -17,4 +19,4 @@
 
 ## Reference
 
-> Fork & Learn from [@Cong Min](https://congm.in)
+> Fork & Learn from [@Cong Min](https://resume.congm.in/)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "resume",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": true,
   "homepage": "./",
   "dependencies": {

src/App.scss

@@ -3,6 +3,7 @@
 $color-gray: #d1d1d1;
 $color-green: #006047;
 $color-orange: #DA6437;
+$color-blue: #18569c;
 $font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei", sans-serif;
 
 .kill-ie {
@@ -68,11 +69,12 @@ a {
 
 .content-hd {
   width: 100%;
-  padding: 50px 50px;
+  padding: 20px;
   color: #fff;
   background-color: $color-orange;
-  background-image: url('./assets/header.png');
-  // background-position: 0px 500px;
+  background-image: url('./assets/header.webp');
+   //background-position: 0px 150px;
+  background-size: cover;
   overflow: hidden;
   @media screen and (max-width: 720px) {
     padding: 25px 30px;
@@ -215,7 +217,7 @@ a {
 .content-bd {
   width: 100%;
   min-height: 200px;
-  padding: 20px 30px 50px;
+  padding: 0px 10px;
   overflow: hidden;
   @media screen and (max-width: 720px) {
     padding: 20px 20px 50px;
@@ -239,7 +241,7 @@ a {
 
   section {
     overflow: hidden;
-    padding: 10px 15px;
+    padding: 0px 8px;
   }
 
   .section-hd {
@@ -411,17 +413,17 @@ a {
 .btn {
   display: inline-block;
   padding: 0 5px;
-  border: 1px solid #DA6537; // $color-green;
+  border: 1px solid $color-blue;
   border-radius: 3px;
-  color: #DA6537; // $color-green;
+  color: $color-blue;
   font-family: Menlo, $font-family;
   font-size: 14px;
   line-height: 18px;
   text-align: center;
 
   &:hover {
     color: #fff;
-    background-color: $color-orange;
+    background-color: $color-blue;
   }
 }
 
@@ -437,7 +439,7 @@ a {
   color: #fff;
   font-size: 16px;
   line-height: 26px;
-  background-color: $color-orange;
+  background-color: $color-blue;
   @media screen and (max-width: 1246px) {
     left: auto;
     right: 8px;
@@ -527,7 +529,7 @@ footer {
   }
 
   .content .content-hd {
-    padding: 40px 50px 20px;
+    padding: 20px;
   }
 
   .content .content-hd .title {
@@ -570,7 +572,7 @@ footer {
   }
 
   .content .content-bd {
-    padding: 25px 30px 50px;
+    padding: 0 10px;
   }
 
   .content .content-bd .item-hd {

src/App.tsx

@@ -13,19 +13,19 @@ function App() {
   return (
     <div>
       <a className="pdf" href="http://qiniu.ningo.cloud/hylerrix/resume.pdf"><i className="iconfont icon-pdf"></i> PDF 简历</a>
-      <p className="last-modified">最后更新时间：2021 年 02 月 23 日 - 版本号：v0.4.0</p>
+      <p className="last-modified">最后更新时间：2022 年 09 月 01 日 - 版本号：v0.5.0</p>
       <div className="content">
         <Header />
         <div className="content-bd">
           <div className="content-left">
             <CareerExperience />
             <ImportantProject />
-            <UniversityAward />
           </div>
           <div className="content-right">
             <ProfessionalSkill />
             <UniversityActivity />
-            <OpenSource />
+            <UniversityAward />
+            {/*<OpenSource />*/}
           </div>
         </div>
         <PrintFooter />

src/components/Basic.tsx

@@ -13,7 +13,7 @@ export const Header: React.FC = () => {
       </section>
       <section className="info">
         <h2>男 / 1997.10</h2>
-        <h3>本科 / 2019 年毕业 · 两年以上工作经验</h3>
+        <h3>本科 / 2019 年毕业 · 三年以上工作经验</h3>
         <h3>西安邮电大学 · 软件工程</h3>
       </section>
       <section className="contact">

src/components/career-experience.tsx

@@ -11,21 +11,19 @@ export const CareerExperience: React.FC = () => {
       <div className="section-bd">
         <div className="item">
           <header className="item-hd">
-            <span className="item-time">2019.07 ~ 至今</span>
+            <span className="item-time">2018.04 ~ 至今</span>
             <a className="btn item-more" href="https://www.didiglobal.com/" target="_blank">滴滴出行</a>
             <h3 className="item-name">北京嘀嘀无限科技发展有限公司</h3>
           </header>
           <div className="item-bd">
             <p className="section-content">
               <strong>基础平台部-系统部</strong>
-              在平台开发组中，参与过 7+ 个内部平台的前端工程实践。
-              包括独立完成裸金属管控平台的前端开发和部署，成功推进了数千台裸金属物理机的上云改造任务；
-              参与滴滴内云平台若干子控制台的需求开发等。
-              技术栈不止于
-              <strong>React</strong>、<strong>Vue</strong>、<strong>TypeScript</strong>、
-              <strong>AntD</strong>、<strong>Vuetify</strong>、<strong>iView</strong>、
-              <strong>Webpack</strong>、<strong>ExpressJS</strong>、<strong>NodeJS</strong>
-              等。
+              在平台研发组中，参与 <strong>CMP 云管平台</strong> 和 <strong>CMDB 平台</strong> 两大系统部核心平台体系的前端业务开发和工程实践。
+              其中重点负责迁移 <strong>CMP 全栈微服务同构架构</strong>，接入弹性云与诸多滴滴中台，并成功部署到国内和美东闭环环境上；
+              以及基于跨部门多成员合作交流结果，独立从零到一架构和设计 <strong>CMDB 微前端架构</strong>。
+              此前还独立完成 <strong>BMS 裸金属管控平台</strong> 前端任务，成功推进数千台裸金属物理机的上云改造；
+              以及负责<strong>监控平台</strong>部分前端任务，针对网络/机房/硬件/系统部分子功能提供报表维护和图表展示。
+              目前也在持续共建 <strong>FETK</strong>/<strong>DNODE</strong> 等内源生态中。
             </p>
           </div>
         </div>

src/components/important-project.tsx

@@ -9,50 +9,59 @@ export const ImportantProject: React.FC = () => {
         <span className="section-title-r"></span>
       </header>
       <div className="section-bd">
-        <div className="section-bd">
-          {/* 未来：Star 平台改造，可以和 BMS 合并 */}
-          <div className="item">
-            <header className="item-hd">
-              <span className="item-time">2020.06 ~ 至今</span>
-              <a className="btn item-more" href="https://www.didiglobal.com/" target="_blank">滴滴出行</a>
-              <h3 className="item-name">BMS (裸金属管控平台 - 内部上云)</h3>
-            </header>
-            <div className="item-bd">
-              <p className="section-content">
-                该平台为实现公司底层网络的云化、将自有业务和滴滴云之间的网络物理隔离转变为逻辑隔离，以灵活分配内外部业务、节省总体成本而建。
-                前端围绕<strong>React</strong>生态从零搭建，重视代码封装与模块复用并编写了大量<strong>React Hooks</strong>风格的函数组件。
-                熟练掌握了<strong>TypeScript</strong>、<strong>React Router</strong>、<strong>Axios</strong>等技术，对前端项目的开发有了更广泛的实践。
-              </p>
-            </div>
+        <div className="item">
+          <header className="item-hd">
+            <span className="item-time">2020.11 ~ 至今</span>
+            <a className="btn item-more" href="https://www.didiglobal.com/" target="_blank">滴滴出行</a>
+            <h3 className="item-name">CMP (云管平台)</h3>
+          </header>
+          <div className="item-bd">
+            <p className="section-content">
+              该平台覆盖公司内部 90% 的中后台服务资料，提供一站式成本/收入账单查看、年度预算报表等功能。
+              其中主动承担 <strong>前端基础设施</strong> 的线上线下维护，
+                以及 <strong>定价/分摊账单</strong>、<strong>用量明细</strong>、<strong>产品市场</strong>、<strong>产品视角</strong>
+                等关键模块的架构设计与需求开发任务。
+              技术栈基于公司内源的 <strong>Web 全栈一体化框架</strong> 和前端组件库构建，
+              Vue 生态的类 <strong>iView</strong> 层构建 UI 逻辑；
+              Node 生态的类 <strong>Koa</strong> 层构建后端逻辑来直连数据库或透传 API 给其它微服务。
+              同时基于公司内部一站式 CI/CD 平台来打通 <strong>测试环境物理机</strong> 和 <strong>线上环境弹性云</strong> 的项目全流程方案。
+                调试对接 <strong>主数据</strong> | <strong>RDS</strong> | <strong>Redis</strong>
+                | <strong>GUID</strong> | <strong>S3</strong> | <strong>Nginx</strong>
+                等诸多中台接口服务。
+            </p>
           </div>
         </div>
         <div className="item">
           <header className="item-hd">
-            <span className="item-time">2020.11 ~ 至今</span>
+            <span className="item-time">2020.06 ~ 至今</span>
             <a className="btn item-more" href="https://www.didiglobal.com/" target="_blank">滴滴出行</a>
-            <h3 className="item-name">Base (内云平台)</h3>
+            <h3 className="item-name">CMDB</h3>
           </header>
           <div className="item-bd">
             <p className="section-content">
-              该平台覆盖公司内部 90% 的中后台服务资料和开发工具，提供一站式成本/收入账单查看、年度预算报表等功能。其中主要负责了若干子控制台项目的前端需求开发。
-              使用公司自研 Web 框架和前端组件库构建<strong>Web 应用</strong>：
-              类<strong>iView</strong>层负责构建前端布局系统并处理用户端交互逻辑；
-              类<strong>Express</strong>层负责跟踪用户请求、监控用户行为并透传<strong>RPC</strong>服务接口请求。
-              同时基于公司内部一站式研发效能平台 OE 和一站式运维平台 Odin 来打通从<strong>自动化构建</strong>再到<strong>弹性云容器部署</strong>的上线全流程。
+              该平台全量支撑滴滴所有业务，建设多地数据中心集群和骨干网络，具备数十万台服务器规模的管理能力。
+              新版前端围绕 <strong>Single SPA</strong> 与 <strong>React</strong> 生态从零搭建微前端架构体系，
+              拆分出 <strong>服务器控制台</strong> | <strong>负载均衡</strong> | <strong>域名管理</strong>
+                | <strong>CMDB</strong> ｜ <strong>IT 资产管理</strong> | <strong>重装报障</strong>
+                | <strong>报表</strong> | <strong>工单</strong> 等十余个子应用。
+              独立设计从开发到部署的全链路规范，提供 <strong>沙箱隔离</strong>、<strong>权限设计</strong>、
+                <strong>通信机制</strong>、<strong>路由系统</strong>、<strong>资源共享</strong>
+                等微前端挑战的统一解决方案，对前端架构有了更广泛的实践。
             </p>
           </div>
         </div>
         <div className="item">
           <header className="item-hd">
-            <span className="item-time">2018.04 ~ 2020.04</span>
+            <span className="item-time">2018.04 ~ 2021.08</span>
             <a className="btn item-more" href="https://www.didiglobal.com/" target="_blank">滴滴出行</a>
-            <h3 className="item-name">Eagle (监控平台)</h3>
+            <h3 className="item-name">BMS & Monitor & ... </h3>
           </header>
           <div className="item-bd">
             <p className="section-content">
-              该平台涵盖网络基础设施、机房动环、服务器硬件以及系统与服务四大维度的全链路监控。
-              围绕<strong>Vue</strong>技术栈进行业务的开发工作。使用<strong>ECharts</strong>类库对多种图表进行了良好的封装和复用。
-              关注前端业务细节，提高了用户体验度，对网络监控运维业务有了一定的理解。
+              <strong>BMS</strong> 为实现公司底层网络的云化、将自有业务和滴滴云之间的网络物理隔离转变为逻辑隔离，以灵活分配内外部业务、节省总体成本而建。
+              <strong>Monitor</strong> 涵盖网络基础设施、机房动环、服务器硬件以及系统与服务四大维度的全链路监控。
+              前端重点围绕 <strong>React</strong> 和<strong>Vue</strong> 生态建设，重视封装与复用并编写了大量<strong>React Hooks</strong> 风格的函数组件。
+              熟练掌握了<strong>TypeScript</strong>、<strong>React Router</strong>、<strong>Redux</strong>、<strong>Axios</strong>、<strong>Sass</strong>、<strong>ECharts</strong> 等技术。
             </p>
           </div>
         </div>

src/components/professional-skill.tsx

@@ -8,14 +8,17 @@ export const ProfessionalSkill: React.FC = () => {
         <h2 className="section-title">专业技能</h2>
         <span className="section-title-r"></span>
       </header>
+      <div className="section-sub-title">
+        Github: A+, Follower: 410+, Total Commit: 470+, Total PR: 40+, Total Issues: 130+
+      </div>
       <div className="section-bd">
         <ul className="section-list">
           <li>
             <p className="section-content">
               <i className="iconfont icon-dot"></i>
               掌握 Web 前端开发基本技能，熟悉<strong>ECMAScript 基本特性</strong>、<strong>CSS 主流布局模型</strong>、
               <strong>HTML 标准规范</strong>、<strong>浏览器工作原理</strong>和<strong>浏览器兼容性处理</strong>等，
-              注重<strong>代码可维护性</strong>，有<strong>2 年</strong>的大前端开发经验。
+              注重<strong>代码可维护性</strong>，有<strong>3 年</strong>的大前端开发经验。
               掌握简单的<strong>产品原型设计</strong>技巧，懂些<strong>设计</strong>，重视<strong>用户体验</strong>。
             </p>
           </li>
@@ -31,13 +34,13 @@ export const ProfessionalSkill: React.FC = () => {
           <li>
             <p className="section-content">
               <i className="iconfont icon-dot"></i>
-              了解<strong>Node.js</strong>为主的后端开发基础技能，业余围绕<strong>Nest.js</strong>对<strong>TypeORM</strong>、<strong>GraphQL</strong>、<strong>MongoDB</strong>等技术写过一些 Demo。
+              了解<strong>Node.js</strong>为主的后端开发基础技能，围绕公司 <strong>Koa</strong> 生态写过简单的接口，目前参与集团 <strong>DNode</strong> 生态的共建。
             </p>
           </li>
           <li>
             <p className="section-content">
               <i className="iconfont icon-dot"></i>
-              熟练使用<strong>Git</strong>进行版本控制和代码托管、<strong>Markdown</strong>进行文档编写，并以<strong>Mac OS</strong>、<strong>Linux</strong>、<strong>VS Code</strong>、<strong>Postman</strong>等作为日常开发环境进行工作，熟悉开发调试工具的使用。
+              熟练使用<strong>Git</strong>进行版本控制和代码托管、<strong>Markdown</strong>进行文档编写，并以<strong>Mac OS</strong>、<strong>Linux</strong>、<strong>VS Code</strong>、<strong>Postman</strong>、<strong>Burp Suit</strong> 等作为日常开发环境进行工作，熟悉开发调试工具的使用。
             </p>
           </li>
           <li>

src/components/university-activity.tsx

@@ -18,7 +18,8 @@ export const UniversityActivity: React.FC = () => {
           <div className="item-bd">
             <p className="section-content">
               <strong>前端组组长</strong>
-              负责实验室前端项目的研发、维护及性能优化。还负责了实验室内部的人事调剂与项目分配，并参与了实验室日常技术分享、周年纳新筛选与不定期交流培训。参与过 ThoughtWorks 暑期特训营，坚定了在 JavaScript 大前端领域的发展方向。
+              负责实验室前端项目的研发、维护及性能优化。还负责了实验室内部的人事调剂与项目分配，并参与了实验室日常技术分享、周年纳新筛选与不定期交流培训。
+              大一暑假参与的 <strong>ThoughtWorks 暑期特训营</strong>，坚定了在 JavaScript 大前端领域的发展方向。
             </p>
           </div>
         </div>
@@ -35,19 +36,6 @@ export const UniversityActivity: React.FC = () => {
             </p>
           </div>
         </div>
-        {/* <div className="item">
-          <header className="item-hd">
-            <span className="item-time">2016.06 ~ 2017.06</span>
-            <a className="btn item-more" href="https://school.thoughtworks.cn/" target="_blank">校实验室</a>
-            <h3 className="item-name">ThoughtWorks 联合创新实验室</h3>
-          </header>
-          <div className="item-bd">
-            <p className="section-content">
-              <strong>前端学员</strong>
-              全程参与暑期特训营，对<strong>JavaScript 全栈开发</strong>、<strong>敏捷开发</strong>、<strong>编程教育</strong>等有较深的感悟，让自己开始步入大前端领域。
-            </p>
-          </div>
-        </div> */}
       </div>
     </section>
   )

src/components/university-award.tsx

@@ -16,7 +16,7 @@ export const UniversityAward: React.FC = () => {
           <header className="item-hd">
             <span className="item-time">2018.09</span>
             <span className="item-more">社区运营</span>
-            <h3 className="item-name">2018 西安 Web 前端交流大会</h3>
+            <h3 className="item-name">2018 西安 Web 前端交流大会 & Java 大会</h3>
           </header>
         </div>
         <div className="item">