【项目记录】个人主页设计和实现

hiYoHoo 发布于2019-08-30 15:54 / 3013人阅读

摘要：生活记录日志画书音影，豆瓣再合适不过。卡片动画效果右边框模拟光标，一个边框颜色透明实色透明的无限动画宽度控制字符显示长度，使用函数将动画分段，产生间隔效果项目仓库线上效果主内容区布局豆瓣卡片动画页脚设计卡片动画

思路

希望有一个站点可以归并技术文章、产品探索、生活记录和项目代码。

技术文章
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/...

~~主内容区布局~~

~~豆瓣卡片动画~~

~~页脚设计~~

~~Github卡片动画~~

GPU云服务器云服务器个人项目数据库设计搜索记录实现 java实现修改记录 php设计浏览记录表

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117108.html

解析Twitter前端架构学习复杂场景数据设计

摘要：总结本文分析了在采用架构下的数据设计结构，在一个复杂的场景下，希望引起读者对能有一个更深入的认识。前几天刷Twitter，发现Nicolas（Engineering at @twitter. Technical Lead for Twitter Lite）发布了这么一条推文： showImg(https://segmentfault.com/img/remote/1460000009...

csRyan 2019-08-20 16:08 评论0 收藏0
设计师的春天：中文WebFont解决方案Font-Spider(字蛛)

摘要：针对以上的问题，我们可以得出中文要解决的问题是压缩和转码。主页中文字体演示与工具使用请前往主页项目实践年接到的最后一个项目需求腾讯云解决方案改版。新的腾讯云解决方案采用了全新的排版方式，更加简洁大气。我们在日常需求中，经常会碰到视觉设计师对某个中文字体效果非常坚持的情况，因为页面是否高大上，字体选择是很重要的一个因素，选择合适的字体可以让页面更优雅。面对这种问题，我们通常以下方式来进...

dreambei 2019-08-29 12:57 评论0 收藏0
【Java EE】从零开始写项目【总结】

摘要：目前该功能并未完善，敬请期待。反正每次都会有新的东西补充上去一开始我本来想做的是可以使用微信登陆，也可以使用账户邮箱登陆，也可以使用短信登陆的。后来发现微信登陆要企业认证，做不了。从零开发项目概述最近这一直在复习数据结构和算法，也就是前面发出去的排序算法八大基础排序总结，Java实现单向链表，栈和队列就是这么简单，十道简单算法题等等... 被虐得不要不要的，即使是非常简单有时候绕半...

imtianx 2019-08-16 11:12 评论0 收藏0