个人主页搭建-kenjiendo
# 前因
前不久域名备案通过了,然后就想着用起来,计划建一个自己的主页,然后链接到其他模块,像什么Blog之类。想搞个具备风格的,也感受一下前端的魅力,后台管理平台做多了,审美真的急切追求突破。
# 历史
很久之前浏览过一个搜索链接,里面列举了几个主页,当时觉得真绚,竟然没再关注。最近想参考,各种关键字搜索,也没找到。当时这条记录分享给同事了,然后联系前同事,他竟然不一会儿就发给了我,真的好。然后才看到,关键字是你见过的最棒的个人博客
,在知乎问答里,链接如下:你见过的最棒的个人博客界面 (opens new window)。
# 发现
比较了问答里面列举的内容,觉得有两个项目非常吸引人。
1.我的世界3D立体博客 2.kenjiendo
# 我的世界3D立体博客 (opens new window)
我的世界我只见舍友玩过,略微有些熟悉。但是这种将游戏体验带到个人信息展示的形式让人感到喜悦。
# 简单介绍
1.将目录导航以3D立体形式展示在最中间位置,并通过屏幕最中间视线选择对应导航项进行访问。 2.用户可以在其他区域通过wasd/空格进行移动跳跃
# 问题
用户有时候会陷进石块里面,我陷进去几次,没能再跳回地面上来。
# 项目仓库地址
https://github.com/maxogden/slides.git (opens new window)
# 源码运行
clone下来之后,直接访问 nodepdx/index.html就能看到运行效果。打算作为示例展览放在个人主页中。因为要显示备案号,感觉一时半会儿也没办法加进去。
# Kenji endo (opens new window)
浏览这个主页时,给人的感觉就是绚丽,协调,大气又不失精致。有些动画让人第一看想不到实现方式,而且响应式布局处理的也很好。就想着基于这个项目学习学习,看看实现方式。
# 第一步
本来想着这么绚的项目应该有开源项目的,结果只搜索一个vue实现的半成品,不太如人意。然后就想着把整个官方主页copy下来,把资源都切换成本地的,方便本地调试。然后把主要的js文件利用js_beautify格式化一下,方便查看。
然后将个人主页中的几个页面都通过开发工具中的source选项卡,将整个个人主页的文件及目录结构拷贝至本地。
项目目录结构图如下:
# 第二步
替换本地资源,修改访问路径。基本上把Http://kenjiendo.com修改为.就行。
# 总结
在阅读代码时,看到一个网站 (opens new window)。进去看了一下,什么神仙网站,有很多炫酷的网站显示效果。
现在把这个项目作为一个demo上传到github,如果有人也想参考这个项目的话,就不用做这些事了。
kenjiendo_demo (opens new window)
# 接下来的计划
看一下kenjiendo的实现,希望用vue重新写一下。然后借鉴其他项目的效果,建个自己的个人主页。