介绍

发现一款开源的动画简历工程， 很是吸引眼球， 分享出来。

技术：

1、 npm工程管理

2、 vuejs

设计上，将工程分为两个组件：

0、程序入口组件

1、 编辑器组件

2、 简历展示组件

流程上：

0、 程序入口组件，引入另外两个组件

1、 程序入口组件， 将样式 和  样式内容 每隔1ms填入 编辑器组件， 编辑器组件不仅仅显示样式内容， 并将样式生效。

每隔1ms一段时间，实现了动态效果。

2、 开始显示简历， 将简历内容（markdown）填入 简历组件，

3、 然后将简历的样式，填入编辑器组件， 将简历组件的样式生效， 这个过程也是一个每隔1ms的填入一部分的样式的动态过程， 结果为动画形式。

工程文件：

https://github.com/fanqingsong/aboutme/

效果

访问如下链接

https://fanqingsong.github.io/aboutme/

a dynamic resume的更多相关文章

  1. Oracle Dynamic Performance Views Version 12.2.0.1

    Oracle Dynamic Performance ViewsVersion 12.2.0.1 https://www.morganslibrary.org/reference/dyn_perf_v ...

  2. debian下使用dynamic printk分析usb网卡驱动

    在<debian下使用dynamic printk分析usb转串口驱动执行流程>中使用了usb转串口,当前例子使用usb网卡分析驱动(dm9601芯片). 仍然需要使能dynamic pr ...

  3. debian下使用dynamic printk分析usb转串口驱动执行流程

    看了一篇文章<debug by printing>,文中提到了多种通过printk来调试驱动的方法,其中最有用的就是"Dynamic debugging". “Dyna ...

  4. var和dynamic的区别

    1.var 1.均是声明动态类型的变量. 2.在编译阶段已经确定类型,在初始化的时候必须提供初始化的值. 3.无法作为方法参数类型,也无法作为返回值类型. 2.dynamic 1.均是声明动态类型的变 ...

  5. 遍历dynamic的方式

    一.遍历ExpandoObject /// <summary> /// 遍历ExpandoObject /// </summary> [TestMethod] public v ...

  6. C# dynamic 动态创建 json

    1. 如何通过C# 的dynamic 创建如下json 对象? { "query": { "match": [{ "name": " ...

  7. BZOJ 1901: Zju2112 Dynamic Rankings[带修改的主席树]【学习笔记】

    1901: Zju2112 Dynamic Rankings Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 7143  Solved: 2968[Su ...

  8. 当类型为dynamic的视图模型遭遇匿名对象

    当年在ASP.NET MVC 1.0时代我提到,在开发时最好将视图的Model定制为强类型的,这样可以充分利用静态检查功能进行排错.不过有人指出,这么做虽然易于静态检查,但是定义强类型的Model类型 ...

  9. 动态规划 Dynamic Programming

    March 26, 2013 作者:Hawstein 出处:http://hawstein.com/posts/dp-novice-to-advanced.html 声明:本文采用以下协议进行授权: ...

随机推荐

  1. Codeforces Round #601 (Div. 2) E2. Send Boxes to Alice (Hard Version)

    Codeforces Round #601 (Div. 2) E2. Send Boxes to Alice (Hard Version) N个盒子,每个盒子有a[i]块巧克力,每次操作可以将盒子中的 ...

  2. 解决Mac OS X 系统在home文件夹下面操作不支持的方法

    解决Mac OS X 系统在home文件夹下面操作不支持的方法   最近需要使用Mac OS X 系统尝试安装使用appium程序,安装过程中发现,Mac OS X 系统在home文件夹下面操作不支持 ...

  3. 爬取前程无忧网站上python的招聘信息。

    本文获取的字段有为职位名称,公司名称,公司地点,薪资,发布时间 创建爬虫项目 scrapy startproject qianchengwuyou cd qianchengwuyou scrapy g ...

  4. 在linux系统中如何通过shell脚本批量设置redis键值对

    业务逻辑:批量设置redis中手机号的验证码为888888: 准备shell脚本如下:将18888888100~18888888110的手机号验证码设置为888888: #!/bin/bash ;i& ...

  5. Appium连接夜神模拟器，模拟手势点击（tap）

    # -*- coding:utf-8 -*- from appium import webdriver from time import sleep desired_caps ={ 'platform ...

  6. JavaScrip学习之路

    本文参考资料:<JavaScript权威指南> 第六章:对象 6.1 创建对象 var book={ "main title":"javaScript&quo ...

  7. includes方法 使用 Object.defineProperty 扩展 ，解决不兼容问题

    原文链接 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes ...

  8. React Core Features

    React Core Features Here is a summary of the core features. We will cover each feature in detail thr ...

  9. 使用cookie登录网盘账号

    ①使用Chrome浏览器登录百度网盘网页版 https://pan.baidu.com/ ②查看当前使用的cookie ③获取BDUSS 注意是全选复制,不要直接复制,会不全的. ④获取STOKEN ...

  10. C++ auto 完成类型自动推导与使用

    c++11 允许声明一个变量或对象(object)而不需要指明其类型,只需说明它是auto. 1.如: auto i = 42: //i是整型 double   f(); auto d=f(); // ...