About this blog
关于这个博客
这是一个主要用来记录前端相关笔记、实验和一些乱七八糟想法的小站, 也是一个用来折腾 UI / 主题 / 动效 的前端练习场。
初衷
这个博客本来是准备简单地写一些笔记,把日常开发中遇到的坑和思路记录下来。 结果真正开始做页面之后,就一不小心在前端细节上花了太多时间, 一会儿改布局,一会儿玩动效,一不留神主题都做了三个。
现在的网站还远远算不上“完成品”,只能先这样上线,后续再慢慢完善。 不管是功能还是样式,只要有新的想法,可能都会在这里先试一试。
目前主要用来做什么
- 记录与前端相关的学习笔记、踩坑记录和一些碎碎念;
- 尝试不同的布局、配色和交互方式,把有趣的效果落地出来;
- 把从别的优秀项目和文章里学到的东西,整理成自己的理解;
- 顺便当作一个持续重构的前端练习项目。
技术和主题
项目基于 Next.js、TypeScript 和 Tailwind CSS,配合一些自定义的样式变量。为了好玩,也做了三个不同的主题, 从比较朴素的“纸张风”,到极光星空,再到略带霓虹感的卡片布局。
致谢
做这个网站的过程中,参考和使用了很多前辈分享的内容和案例, 才能这么快把原型搭出来,非常感谢这些大佬的公开分享。
灵感与参考来源
WeChat
@前端 Hardy
公众号里分享了大量前端知识点和案例,对布局和动效设计帮助很大。
UI Gallery
CodeMyUi
一个收集前端动效和交互案例的网站,本项目中有不少小动效直接参考了这里的实现。
访问网站↗Blog Theme
Shoka
第三个主题中,有一些布局和视觉元素参考了 Shoka 博客项目,非常感谢作者的分享和开源。
访问博客↗如果这个博客里的某个布局、动效或者想法对你有一点点参考价值,那就已经非常值得了。 也欢迎你在自己的项目里继续魔改、折腾属于你的版本。