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 声明:本文采用以下协议进行授权: ...
随机推荐
- 项目Beta冲刺--5/7
项目Beta冲刺--5/7 作业要求 这个作业属于哪个课程 软件工程1916-W(福州大学) 这个作业要求在哪里 项目Beta冲刺 团队名称 基于云的胜利冲锋队 项目名称 云评:高校学生成绩综合评估及 ...
- flutter 项目中,开发环境、多接口域名、多分支的配置
flutter 项目中,开发环境.多接口域名.多分支的配置 开发环境:配置成多个入口文件.比如:main.dart.main_develop.dart.main_preview.dart 多域名:每个 ...
- 15、Python面向对象基础
和其它编程语言相比,Python 在尽可能不增加新的语法和语义的情况下加入了类机制. Python中的类提供了面向对象编程的所有基本功能:类的继承机制允许多个基类,派生类可以覆盖基类中的任何方法,方法 ...
- MongoDB shell 4 用户管理方法
方法名 描述 db.getUsers() db.dropAllUsers() db.updateUser() db.createUser() db.revokeRolesFromUse ...
- kafk设计要点
kafka的设计目标是高吞吐量,所以kafka自己设计了一套高性能但是不通用的协议,他是仿照AMQP( Advanced Message Queuing Protocol 高级消息队列协议)设计的 ...
- Nginx+Php-fpm运行原理 代理与反向代理
一.代理与反向代理 现实生活中的例子 1.正向代理:访问google.com 如上图,因为google被墙,我们需要vpnFQ才能访问google.com.Virtual Private Networ ...
- A1016 | 磨人的大模拟
这题写得头晕……明天我再评价 #include <stdio.h> #include <memory.h> #include <math.h> #include & ...
- 高考数学答卷策略[K12论坛转载]
一.试卷上给你的启发 1.试卷上有参考公式,80%是有用的,它为你的解题指引了方向: 2.解答题的各小问之间有一种阶梯关系,通常后面的问要使用前问的结论.如果前问是证明,即使不会证明结论,该结论在后问 ...
- kernel 获取ntoskrnl.exe基址
标题: kernel shellcode之寻找ntoskrnl.exe基址 http://scz.617.cn:8/windows/201704171416.txt 以64-bits为例,这是Eter ...
- MSSQL随机修改时间
GO DECLARE @BDate datetime, @EDate datetime SET @BDate = '20190801' --上限 SET @EDate = '20190819 23:5 ...