【项目记录】我的主页设计和实现

思路

但愿有一个站点能够归并技术文章、产品探索、生活记录和项目代码。

技术文章
Hexo活跃齐全的生态的确很诱人，但经过Github管理文章、图片资源其实并非很优雅。再者，存在流通和传播上的问题。现有的专栏平台支持标签和交流功能，也可手动设计标题代替类别目录，够够的，因而选择了segmentfault。

产品探索
研究一些好用的应用，我的对产品的思考，记在知乎专栏。

生活记录
日志、画、书音影，豆瓣再合适不过。

项目代码
天然是GitHub。

我的站点即一个集中入口，简单明了的首页+我的介绍页，完毕。

开发流程

在iPad上画了个草图，四个明晃晃的入口，要有Logo。

各类分辨率的屏上表现不差劲，用SVG。

资源请求尽可能简单，SVG样式可控，svg-sprite，那得上gulp了。

gulp处理完的symbol要插入页面，加上入口项复用，用模板吧，熟悉的是handlebars。

既然上了gulp，干脆SCSS，livereload，dev-server都搞一搞。

为何一个简单的页面要搞那么复杂，练手而已。

开发记录

gulp4 的更新

gulp默认装了4.0.0的版本，好久没关注。

增长gulp.series和gulp.parallel

gulp默认最大化并行执行任务，以往须要顺序执行任务时，须要借助辅助插件run-sequence之类。上述两个方法提供串行和并行选择，同时gulp4中再也不支持[task]写法，必须使用上述两个方法代替。

gulp.series('clean', 'build'); // 先执行clean task，再执行build task
gulp.series('clean', function () {
    // do some things
});

gulp.parallel('watch', 'connect') // 同时执行watch和connect
gulp.series('clean', gulp.parallel('styles', 'scripts')) // 先执行clean，而后styles + scripts

gulp.watch('src/**/*.js', ['scripts']) // error: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)

异步任务须要结束信号

当任务中可能有异步代码（好比watch，好比dev-server），须要显示发出异步完成信号

在Gulp 3.x中，你能够在不这样作的状况下离开。若是您没有显式地发出异步完成信号，则只会假设您的任务是同步的，而且在任务函数返回后当即完成。 Gulp 4.x在这方面更加严格。您必须明确表示任务完成。

支持的写法挺潮的

卡片布局

思路

svg须要设定宽度和高度，若是跟随卡片变化，卡片不能使用padding-bottom实现宽高比（没有高度），因此卡片必须指定宽高。可使用媒体查询调整卡片尺寸，目前使用固定宽度实现（未测试大屏下状况）。
实现四张卡片对齐排布，四列两列到一列分布。flexbox搭配flex-wrap属性能够实现自动换行，结合媒体查询控制容器宽度实现列数控制。

卡片动画

typing效果
右边框模拟光标，一个边框颜色透明->实色->透明的无限动画
宽度控制字符显示长度，使用step函数将动画分段，产生间隔效果

DONE

项目仓库：https://github.com/curlywater...
线上效果：https://curlywater.github.io/...

1. 主内容区布局
2. 豆瓣卡片动画
3. 页脚设计
4. Github卡片动画