十分的眼前一亮，并且值得注意的是，[在GitHub上开源](https://github.com/idealclover/Homepage)！
当时我就想着，我也想要一个自己的个人主页。
于是我就直接把他的网站fork过来用了（
当时正值DeepSeek大火，在AI的帮助下，我对源代码做出了很多改造，包括GitHub Star数量通过当时自己做的一个API实时显示，还有文章也实时通过Wordpress API实时更新（那时候我还在使用Wordpress搭建博客）。
当时我对网页部署完全是小白，也不知道什么是构建服务器是怎么运作的。
唯一知道的就是大二web前端课，印度来的老师操着咖喱味的英语教我们`npm run dev`。
然后我直接把`localhost:4321`反代到了`80`端口。
神必。
兴冲冲地展示给同学之后，同学问我：“为什么你的网站下面有这个叫Astro开发工具的东西啊。”
我这才意识到不对劲。于是乎就去问大D老师。
D老师说Astro项目要先构建然后把静态的页面放到服务器上。
什么跟什么啊，原来`npm`还可以`run build`吗？
于是我把代码拉到服务器上，本地每次编辑完再`ssh`到服务器上，先`git pull`再`npm run build`最后`cp ./dist /www/wwwroot/cloverta.top`。
神必，，，
我当时一定觉得自己可聪明了。
但后面逐渐的，那台运行API的Java服务器到期了，我也忘记了这件事情。再后来，我也不用Wordpress了，我的（存疑）个人主页进入了半死不活的状态。
## 该做出改变了！
我从有一段时间之前就想重新设计一个主页。
但是想必大家从这个博客的前端都能看出来，我的设计品味非常糟糕（捂脸）（抱头）（蹲下）。
对于一个主要功能是发布文章的网站来说，这些都是次要的，但是对于个人主页来说。
**好看**，是它的首要功能。
于是我跑到B站上去看平面设计课。
哇好长，有没有省流版的。
哦这个不错，只有4分钟。[非设计师也该学的排版知识：视觉动线篇 - oooooohmygosh](https://www.bilibili.com/video/BV1FZ4y1g74Y/)
Hmmm...
我之前在写前端的时候一直有一个毛病，那就是——直接上手写代码！设计？老钟的美术生最不值钱了！（挨打）
直到我在芬兰交换的时候上了一门课，叫做[Human Computer Interaction](https://opas.peppi.oulu.fi/en/course/521145A/4249?period=2025-2026)。
在课上老师叫我们一步步先用[Figma](figma.com)把设计灵感（就是一系列符合构思的图片）贴在一起，再手绘网页大致框架，然后用Figma拼出网站的样式图，最后再用代码把网页写出来。
最开始还挺懵的，怎么一上来让我们注册一个平面设计网站？我的IDE呢？我的代码呢？我学的是工科不是艺术对吧？
但结束后才发现，用这样的工作流完成的网站，就算是随便应付作业的也比我自己写的好看……（呃！）
碎碎念了这么多，我想说的是，我这一次决定从可画开始。
我以前只拿可画做过协会宣传单和……一些神秘的p图
我一直很喜欢卡片的网页设计，我想让我的个人主页像一张明信片一样。 明信片很有故事感，我喜欢。 于是我尝试把我喜欢的那张头像拖上去
Canva给出了设计提示框，这很好，设计师们精心设计出来的位置肯定比我凭空一放要好看。
那之后呢？
既然是个人主页，那么我最希望的，就是人们一进来就看到我的名字，于是，我要把这个网名放在最显眼的位置！
感觉左下角空荡荡的，放一个角撑（迫真）让它更有边界感吧！
怪怪的，而且这样子完全没有连接起来吧？！
在那个四分钟的速成课，up有提到一个视觉动线理论，也就是说，人们会被最显眼的东西抓住注意力，随后视线会随着内容逐渐划过页面。也就是说，我们需要创造一些连续的内容，使得访问者们能舒适地阅览完整个网站的内容。
那我是不是应该稍微调整一下位置？
把社交链接放到头像下方，应该更加符合直觉，在此之下加上一个简短的介绍。这非常有必要，访问者需要知道他们在看谁的网站。
介绍下方，用脚注和ICP备案框处下边界。
然后是功能模块。既然是主页，肯定需要通往其他内容的导航。
完成！
至少看上去还不错！
这样访问者会首先注意到大大的"ClovertaTheTrilobita"和唯一有色彩而瞩目的头像，随后视线沿着头像自然向下，察觉到介绍，有初步了解之后再看向左边，发现导航栏。
也可以顺着醒目的黑色字体，从头像出发，经过昵称，到菜单，最后看到最淡的介绍。
中间空出来的留白可以作为交互预留空间。
现在唯一也是最头疼的问题是……
我不知道应该在"About Me"里面写什么内容（跌倒）
是的，我坐在电脑前冥思苦想了一个多小时，最后什么也没想出来，，