介绍

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

技术：

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. Vmware克隆Centos6.5虚拟机网卡无法启动问题

    1.编辑eth0的配置文件:vi /etc/sysconfig/network-scripts/ifcfg-eth0,删除HWADDR地址那一行及UUID的行如下: #HWADDR=:0c::::9f ...

  2. PAT甲级1019水题飘过

    题目分析: 将n转成对应大小的b进制数之后判断是否为回文串,是则Yes,否则No #include<iostream> using namespace std; ]; //存放从0开始b进 ...

  3. 转换复杂的JSON对象为 Map对象

    最近项目需要跟客户对接一个webservice接口,客户那传json串过来,属于比较复杂的json串,这里跟大家分享下我项目中所用的解析方法: 该方法需要以下jar package com.test; ...

  4. openstack环境下搭建的keepalived 两台服务器直接无法ping通VIP ALLOWED-ADDRESS-PAIRS

    真的是搞了很久 结果一问人才知道真的是neutron的问题 当然前提是设置unicast 而不是默认设置 先贴出来后面再更新图片 [root@haproxy1 ~]# cat /etc/keepali ...

  5. The Role of View Controllers

    https://developer.apple.com/library/content/featuredarticles/ViewControllerPGforiPhoneOS/index.html# ...

  6. es6 -- rest 参数

    es6 引入了rest参数(形式:...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了.rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中. function ...

  7. podium layout 说明

    layout 主要是进行podlets 的组合,同时也提供了context ,fallback,以及传递参数的处理 基本代码 const express = require('express'); c ...

  8. 【JZOJ6246】【20190627】B

    题目 求逆续对个数为\(k\)的\(n\)阶排列个数\(mod \ 1e9+7\) $1 \le n  ,  k \le 10^5 $ 题解 $f_{i,j} = \sum_{k=0}^{i-1} f ...

  9. Macbook Pro A1398 換電池手札

    前不久老MBP总是风扇狂转,cpu 100%,一直觉得有问题,就买了工具想着把機器拆開看一下. 結果,不拆不知道,一拆開發現機器變成下面醬紫了: 整個一炸藥包啊!此時我腦中只有一個念頭:得趕緊馬上立刻 ...

  10. 如何使用git把本地代码上传到远程仓库上

    初始化 git init 查看当前仓库状态 git status 将项目的文件添加到仓库中 git add test.txt git add -A git add . 将add的文件commit到仓库 ...