介绍

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

技术:

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. docker学习7-Dockerfile制作自己的镜像文件

    前言 如果你是一个python自动化测试人员,某天你在公司终于完成了一个项目的接口自动化脚本工作,在你自己常用的本机或者服务器上调试完成了脚本,稳稳地没问题. 可是晚上下班回家,你自己找了个linux ...

  2. Vcode的生成工具类,生成制定长度验证码,图文验证码工具类

    public class VCodeUtils { // 使用到Algerian字体,系统里没有的话需要安装字体,字体只显示大写,去掉了1,0,i,o几个容易混淆的字符 public static f ...

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

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

  4. 设置hystrix的熔断时间

    hystrix的熔断时间默认为1秒,这对于一个要部署的服务器来说太短了,所以可以把这个时间设置大一点 这个时间设置在yml中没有提示,下面是设置的代码: hystrix: command: defau ...

  5. day001-在Windows下python环境的搭建

    一.Python下载 1.Python最新源码,二进制文档,新闻资讯等可以在Python的官网查看到: 2.Python官网:https://www.python.org/ 3.你可以在以下链接中下载 ...

  6. LeetCode 301. Remove Invalid Parentheses

    原题链接在这里:https://leetcode.com/problems/remove-invalid-parentheses/ 题目: Remove the minimum number of i ...

  7. Scrapy爬虫案例 | 数据存储至MySQL

    首先,MySQL创建好数据库和表 然后编写各个模块 item.py import scrapy class JianliItem(scrapy.Item): name = scrapy.Field() ...

  8. s3-sftp-proxy goreleaser rpm &&deb 包制作

    上次写过简单的s3-sftp-proxy基于容器构建以及使用goreleaser构建跨平台二进制文件的,下边演示下关于 rpm&&deb 包的制作,我们只需要简单的配置就可以生成方便安 ...

  9. JS函数基础

    一.函数 1.函数是什么 具有特定功能的n条语句的封装体. 只有函数是可执行的,其它类型的数据是不可执行的. 函数也是对象. 2.为什么要用函数 提高代码复用 便于阅读和交流 3.如何定义函数 函数声 ...

  10. nginx 篇

    nginx 安装 下载必要组件 nginx下载地址 http://nginx.org/en/download.html pcre库下载地址,nginx需要 http://sourceforge.net ...