介绍

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

技术：

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. go mod开发模式设置

    文章要解决的仅仅是一个问题 当你使用go get 无论如何get不到所需的包的问题 第一步就是下载goland 新手极其推荐goland,因为直接使用gland几乎没有挫败感,使用其他工具可能要折腾好 ...

  2. upd

    今天是中华人民共和国成立70周年,先祝我的祖国母亲生日快乐 由于最近嗓子不太好使,我就不发歌了 分割线 在学校挤了一点本来应该发呆的时间写了点没用的 前一部分是对一点OI知识的复习,后一部分是最近高中 ...

  3. P3398 仓鼠找sugar[LCA]

    题目描述 小仓鼠的和他的基(mei)友(zi)sugar住在地下洞穴中,每个节点的编号为1~n.地下洞穴是一个树形结构.这一天小仓鼠打算从从他的卧室(a)到餐厅(b),而他的基友同时要从他的卧室(c) ...

  4. vue实现分页组件

    创建pagination.vue /* * 所需参数 * total Number 总页数 * current Number 当前页面下标 * pageSize Number 页面显示条数 * siz ...

  5. Python 鼠标键盘操作

    1.鼠标操作 from pymouse import PyMouse myMouse = PyMouse() #获取当前的鼠标位置 # nowP = myMouse.position() # prin ...

  6. day39线程

    复习: C/S架构: 客户端     服务器模式 B/S架构: 浏览器     服务器模式 B/S架构的客户端对PC机的性能要求比较低.统一了应用的接口 B/S架构隶属于C/S架构 TCP UDP的区 ...

  7. 面试15--strcmp,strcpy,memmove实现

    一. strcmp strcmp是用于比较两个字符串的大小的.   int strcmp( const char *string1, const char *string2 ) char *strin ...

  8. ArrayList ：货物库存管理（遍历）

        package com.oracle.demo01; import java.util.ArrayList; import java.util.Scanner; public class De ...

  9. 理解 IO_WAIT 并且了解利用包括 top htop iotop iostat 工具来查看 IO 性能

    今天继续拜读「深入浅出计算机组成原理」专栏,觉得讲 IO_WAIT 这篇很有意思,正好可以结合前面的一篇讲物理硬件存速度的一块儿看. 现在我们看硬盘厂商出品的性能报告,通常会看到两个指标,一个是响应时 ...

  10. 一起学Makefile（六）

    命令的回显: 通常,make在执行命令之前都会把执行的命令进行输出,例如: 关闭命令回显有以下几种方式: 每个需要关闭回显的命令行之前加上”@”符号: 执行make时机上参数-s 或 –slient进 ...