介绍

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

技术:

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. eval用法

    在shell的学习中,我们会遇到这两种符号:反引号(` `)和$(),那么它们之间有什么区别和联系呢? 我们都知道在bash中,反引号和$()都是用来做命令替换的,命令替换就是用来重组命令行,先完成引 ...

  2. 详解CentOS6.7部署Tomcat及主配置文件

    Java程序实现部署及应用 POSIX :可移植操作系统,编程操作系统接口规范,实现跨平台编译运行. API:应用程序编程接口 ABI:应用程序二进制接口 描述了应用程序和操作系统之间,一个应用和它的 ...

  3. seaborn---调色板

    一.样式控制 1.set([context,style,palette,font,...]) 一步设定美学参数. 2.axes_style([style,rc]) 返回参数字典,用于绘图的美学风格. ...

  4. 如何显示隐藏的文件在win7系统中

    点左下角“开始”菜单,再点击“计算机”. 点击窗口顶部靠左位置的“组织”菜单,选择其中的“文件夹和搜索选项”. 在弹出的窗口里点击切换到“查看”选项卡.   在窗口中部位置下拉滚动条,找到“显示隐藏的 ...

  5. 项目Beta冲刺(团队3/7)

    项目Beta冲刺(团队) --3/7 作业要求: 项目Beta冲刺(团队) 1.团队信息 团队名 :男上加男 成员信息 : 队员学号 队员姓名 个人博客地址 备注 221600427 Alicesft ...

  6. JUnit 5.x 知识点

    出处:https://blinkfox.github.io/2018/11/15/hou-duan/java/dan-yuan-ce-shi-zhi-nan/#toc-heading-14 表面上来看 ...

  7. 牛客NOIP暑期七天营-提高组6C:分班问题 (组合数)

    题意:A班有N个人,B班有M个人,现在要组成一个新的班级C班,为了公平,从AB班各抽相同人数的人. 现在求所有方案中,人数之和是多少. 思路:即求Σ k*C(N,k)*C(M,k);    先忽略这个 ...

  8. eclipse 中的注释 快捷键 多行注释快捷键 单行注释快捷键

    Eclipse 中的两种注释方法: (1)多行注释(2)单行注释 一. 多行注释快捷键 1:添加注释Ctrl+Shift+/ :    添加/* */注释 示例:选中代码块后按下快捷键即可 /* fl ...

  9. Opencv python图像处理-图像相似度计算

    一.相关概念 一般我们人区分谁是谁,给物品分类,都是通过各种特征去辨别的,比如黑长直.大白腿.樱桃唇.瓜子脸.王麻子脸上有麻子,隔壁老王和儿子很像,但是儿子下巴涨了一颗痣和他妈一模一样,让你确定这是你 ...

  10. java.util. Arrays.sort(scores);

    import java.util.*; public class ArraySortScore { //完成 main 方法 public static void main(String[] args ...