< 1 > 第一次接触

记得那是上大学时，第一次看到同学展示前端开发项目。随之映入眼帘的就是那清晰、让人舒服的布局和颜色风格设计。之后，又看到及其流畅的页面操作交互。这给我留下了深刻的影响。

后来才知道，原来好的设计和优秀的代码结合，才诞生了我们今天如此之多的用户界面。

在此基础上，本着对设计的喜爱和对代码逻辑的着迷，我踏进了前端的殿堂。

< 2 > 个人网站的制作

个人网站是前端开发人员设计功底和代码能力最好的体现。于是乎，我开始了前后三个版本的网站开发，直到今天你看到的最新版本。

2.1 version 1.0

如图所示，第一次尝试开发还比较生疏。对页面布局和代码逻辑掌握的不太好，甚至没有考虑数据库！

技术栈就是 Vue.js 和它的配套库。

2.2 version 2.0

分别进行了主页、文章页、文章详情页、友链页、关于页的设计。在设计上也尝试了新的布局，也考虑用了数据库。

技术栈，前端是 Vue.js 及其配套库，后端是 Node.js + express.js，数据库 mongodb。

首页

文章详情页

友链页

日记页

2.3 version 3.0 ~ version 4.0

就是当前看到的版本。这一次认真构思了一个主题，关于笔记本+大海的简约清晰风格。并按照严格的流程，在PS做好了各个页面的设计稿，包括首页、文章、文章详情、友链、关于。

在程序技术方面做了大量升级。

• 前端：Next.js + antd + react.js 及其配套库，做了一个服务端渲染。
• 后端：Node.js + koa2.js + 自研 orm 框架。
• 数据库：Mongodb。
• 运维：阿里云服务器 + 日志管理 + githubWebHook + 自动化部署脚本。

部分PS设计稿

< 3 > 主题设计

业务上的前端毕竟还是以交互为主，设计风格较为统一，主要看重代码和数据。

不过同样喜欢设计的我并不甘心，我想一定有其他的方式可以在设计上展露拳脚。这不就发现了手机主题这一种方式。手机主题的开发注重设计，同时兼并流畅度和一定的代码能力，这正合我的口味。于是马上着手了解，就从自己的oppo手机上的主题商店开始。并使用官方的编辑器设计了一套主题。

设计的成品不展示了，最近用这个作品申请资质，希望能通过啊。主题是关于卡通兔子的，还给它取了个名，叫"兔小新"。

< 4 > 结语

希望自己能在设计与代码的路上越走越远。

爱设计，也爱代码，加油啊！