介绍

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

技术：

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. [Doxygen].Docygen使用

    转自:https://www.cnblogs.com/chenyang920/p/5732643.html Doxygen是一种开源跨平台的,以类似JavaDoc风格描述的文档系统,可以从一套归档源文 ...

  2. Httpd服务进阶知识-调用操作系统的Sendfile机制

    Httpd服务进阶知识-调用操作系统的Sendfile机制 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.不用 sendfile 的传统网络传输过程 read(file, tm ...

  3. [TJOI2018]最长上升子序列

    Link 动态维护LIS? 观察题目:在第 i 轮操作时,将数字 i 插入 插入的数字是当前最大的 如果答案与上次不同,新的LIS必以 i 结尾 以 i 结尾的LIS无法再伸长(因为比 i 小的都插入 ...

  4. file size php

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. ssh ssm ssi 服务器平台架构

    1.spring + springmvc + mybatis 使用maven构建,数据库是oracle,主要是温习mybatis配置以及与spring集成.这种框架目前是使用最广泛的,这里就不多说 2 ...

  6. Struts2框架的搭建

    Struts2是WebWork框架的升级版本,替代了Servlet. 由于用IDEA下载jar包失败,直接创建手动导包. 1.导包: (1)Struts2的目录结构: (2)导入jar包: 2.书写A ...

  7. MSSQL复制表数据及表结构

    目标表存在: insert into 目标表 select * from 原表 目标表不存在: select * into 目标表 from 原表 复制表结构 select * into 目标表 fr ...

  8. 理解Docker ：Docker 网络

    本系列文章将介绍 Docker的相关知识: (1)Docker 安装及基本用法 (2)Docker 镜像 (3)Docker 容器的隔离性 - 使用 Linux namespace 隔离容器的运行环境 ...

  9. python 获取天气信息，并绘制曲线

    import urllib.request import gzip import json print('------天气查询------') def get_weather_data() : cit ...

  10. php error_reporting()关闭报错

    错误报告级别:指定了在什么情况下,脚本代码中的错误(这里的错误是广义的错误,包括E_NOTICE注意.E_WARNING警告.E_ERROR致命错误等)会以错误报告的形式输出. 一.常用设置说明 er ...