陈帅华的个人网站 - 探索技术艺术与国学之美

个站全端研发日志

全篇共 1514 字。按500字/分钟阅读,预计用时 3.0 分钟。

日志形式记录我的个人网站的前端用户界面和后端功能的更新。功能日志包括在线体验独立作品;按年月想法数量可视化;主题想法泡泡;涂鸦配音;文章搜索,GIF小动画和文章分类图标设计。

2020年2月

  • 前端 - 首页添加 UI/UED 作品的入口。

2020年1月

  • 后端 - 重构代码使用 Async/Await 语法。
  • 前端 - 页面侧边栏增加“前端帅华君”的 Bilibili 直播房间入口。

2019年9月 - 2019年12月

2019年9月,我成功注册了新的域名 shuaihuajun.com,当月作为我个人网站的新域名正式启用。旧域名 shuaihua.cc 于2019年12月底正式废弃。重新设计了我的个站的UI以及重新规划了我的个站的板块划分。我的个站板块大体可分为3部分:

  1. 代码片段。在线体验式。绝大多作品是在读书的过程中灵光乍现,有想做点有趣的东西出来。个别作品是受工作中参与的商业项目的启发而开发的带有技术预研性质的非完整作品,比如“极坐标配置雷达地图”就是在某所任职期间参与的某网络安全竞赛项目设计和开发的排布赛题的部分功能。独立作品或试验性代码片段
    陈帅华个人网站的独立作品与试验性代码片段

  2. 文章和想法。为了方便个站的访客,也为了方便我自己迅速找到某篇文章。我规定了几种文章排序方式:修改日期、发布日期、总访问量、日访问量。用 Adobe Illustrator CC 设计了12枚矢量图标分别对应我的文章的12个大类别。受 GitHub 仓库主页的代码贡献频率启发,重新配色,用我的 airglass.js 库实现了按月份查询发布的文章的功能。因为我的想法包含在每一篇文章之中,想法分类成印象关键词,将关键字出现频率映射到字号大小,排列出“泡泡”的效果,就像海中越是深处的泡泡越小,随着泡泡向海平面上升,同类泡泡的合并,越靠近海面的泡泡越大。
    陈帅华个人网站文章与分类关键词和想法发布频率

  3. 有声涂鸦。受儿童绘本读物的启发。声音和涂鸦是人类比较原始的沟通方式。我尝试将用文字表达不清楚的想法认知和感动用涂鸦和声音表达出来。童趣、形象生动是我在做有声涂鸦时坚持的准则。用空格键播放声音,也可点击下方“睡觉的嘴巴”。左右键控制翻页,移动端访客在涂鸦上使用拖拽交互形式翻页,点击上、下一张涂鸦翻页或点就上一条下一条“鱼”翻页。顶部有涂鸦的页数指示器,仅供预览全部页数和当前页数信息,不容易点击所以我没有给指示器添加点击翻页功能。
    陈帅华的原创有声涂鸦使用指南

2018年11月 - 2019年9月

受《周易》和“中国二十四节气”的启发,我开始思考如何将个人网站的UI与板块划分和八卦、四季、阴阳等元素对应结合,让网站的文章、图片、视频、声音等媒体形式按照自己的理解与八卦的阴爻、阳爻相互对应起来。

将四季的少阳、太阳、少阴、太阴与我个站的四个板块对应起来,试图从春、夏、秋、冬的循环往复规律中找到我的个站的内容之间的和谐与统一方式。四个板块分别与四个季节对应,我给每一个板块起了一个名字:

  • 春 · 重返创始
  • 夏 / 浪花脚丫
  • 秋 : 心头好文
  • 冬 片刻永恒

板块名称是受苏打绿四季专辑和韦瓦第四季交响乐的启发所起。苏打绿的四季专辑。日光狂热,故事未了。《春 · 日光》专辑以乐章作曲目空档,《夏 / 狂热》专辑以诗歌作曲目空档,《秋 : 故事》专辑以文字独白作曲目空档,《冬 未了》专辑以无声作曲目空档。

陈帅华的个人网站UI与板块划分与太极八卦四季的对应转化关系

我写了一篇详细记录我的思路的文章,文章涉及的插图为原创,插图汇总在有声涂鸦中。