a dynamic resume
介绍
发现一款开源的动画简历工程, 很是吸引眼球, 分享出来。
技术:
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的更多相关文章
- 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 ...
- debian下使用dynamic printk分析usb网卡驱动
在<debian下使用dynamic printk分析usb转串口驱动执行流程>中使用了usb转串口,当前例子使用usb网卡分析驱动(dm9601芯片). 仍然需要使能dynamic pr ...
- debian下使用dynamic printk分析usb转串口驱动执行流程
看了一篇文章<debug by printing>,文中提到了多种通过printk来调试驱动的方法,其中最有用的就是"Dynamic debugging". “Dyna ...
- var和dynamic的区别
1.var 1.均是声明动态类型的变量. 2.在编译阶段已经确定类型,在初始化的时候必须提供初始化的值. 3.无法作为方法参数类型,也无法作为返回值类型. 2.dynamic 1.均是声明动态类型的变 ...
- 遍历dynamic的方式
一.遍历ExpandoObject /// <summary> /// 遍历ExpandoObject /// </summary> [TestMethod] public v ...
- C# dynamic 动态创建 json
1. 如何通过C# 的dynamic 创建如下json 对象? { "query": { "match": [{ "name": " ...
- BZOJ 1901: Zju2112 Dynamic Rankings[带修改的主席树]【学习笔记】
1901: Zju2112 Dynamic Rankings Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 7143 Solved: 2968[Su ...
- 当类型为dynamic的视图模型遭遇匿名对象
当年在ASP.NET MVC 1.0时代我提到,在开发时最好将视图的Model定制为强类型的,这样可以充分利用静态检查功能进行排错.不过有人指出,这么做虽然易于静态检查,但是定义强类型的Model类型 ...
- 动态规划 Dynamic Programming
March 26, 2013 作者:Hawstein 出处:http://hawstein.com/posts/dp-novice-to-advanced.html 声明:本文采用以下协议进行授权: ...
随机推荐
- JFrog杰蛙DevOps平台
https://www.jfrog.com/confluence/display/XRAY/Welcome+to+JFrog+Xray
- 如何学习numpy
可以通过官方中文文档 NumPy 中文文档
- DFS 算法模板
dfs算法模板: 1.下一层是多节点的dfs遍历 def dfs(array or root, cur_layer, path, result): if cur_layer == len(array) ...
- 20180516模拟赛T2——string
题解 对于一个字符串A,我们只能把其首字符取出,故如果我们想让A串与B串相等,能重复利用的部分只能是A串结尾与B串开头相等的部分.对于取出的字符,我们可以把'o'放在一个容器中,把'x'放在另一个容器 ...
- 关于Python文件读写
Python中文件操作可以通过open函数,这的确很像C语言中的fopen.通过open函数获取一个file object,然后调用read(),write()等方法对文件进行读写操作. 1.open ...
- python基础语法3 整形,浮点,字符串,列表
整形: ========================基本方法===========================用途: 一般用于定义整数:年龄.身份证号.qq号定义方式:age = 18 # a ...
- react navite 学习资料
react 学习资料 https://github.com/crazycodeboy/GitHubPopular crazycodeboy/GitHubPopular https://github.c ...
- [Algorithm] 171. Excel Sheet Column Number
Given a column title as appear in an Excel sheet, return its corresponding column number. For exampl ...
- Ansible自动部署tomcat
1.首先准备3台机器 ansible机器:192.168.52.34 目标主机:192.168.52.35 目标主机:192.168.52.36 2.关闭防火墙 [root@localhost ~]# ...
- [转载]sql server死锁
SQL Server Deadlocks by Examplehttps://www.red-gate.com/simple-talk/sql/performance/sql-server-deadl ...