update time

src/blog/en/portfolio-update.md

@@ -0,0 +1,142 @@
+---
+title: "A Homepage Redesign"
+pubDate: 2026-10-09
+description: "But I don't know the first thing about design?!"
+author: "Cloverta"
+image:
+    url: "https://files.seeusercontent.com/2026/10/08/6Cnw/pasted-image-1791493186458.webp"
+    alt: "screenshot"
+tags: ["Reflections"]
+---
+
+<p style="font-size: 0.85rem;"><i><sub>Content translated by <a href="https://chatgpt.com/">ChatGPT</a>.</sub></i></p>
+
+Homepage: <b>[Cloverta -More About Me-](https://cloverta.top)</b>
+
+My old homepage had been around for quite a long time.
+
+No... It may feel like a long time ago, but it was actually only last year, when I happened to come across an article by the great <b>[Idealclover](https://idealclover.top/)</b> on WeChat.
+
+<img src="https://files.seeusercontent.com/2026/10/08/3liR/pasted-image-1791493374282.webp" alt="pasted-image-1791493374282.webp" title="pasted-image-1791493374282.webp" style="zoom: 25%; display: block; margin: 0 auto;" >
+
+It immediately caught my eye. More importantly, it was <b>[open source on GitHub](https://github.com/idealclover/Homepage)</b>!
+
+At the time, I thought, “I want a personal homepage of my own too.”
+
+So I simply forked his website and used it. (
+
+<img src="https://files.seeusercontent.com/2026/10/08/y4yD/pasted-image-1791493630195.webp" alt="pasted-image-1791493630195.webp" title="pasted-image-1791493630195.webp" style="zoom:20%; display: block; margin: 0 auto;" >
+
+DeepSeek was all the rage at the time. With AI's help, I made many changes to the source code, including displaying the GitHub Star count in real time through an API I had built myself, as well as updating posts in real time through the WordPress API. (I was still using WordPress for my blog back then.)
+
+At that point, I was a complete beginner when it came to deploying websites. I did not even know what a build was or how servers worked.
+
+The only thing I knew came from a sophomore-year web frontend class, where our teacher from India taught us `npm run dev` in curry-flavored English.
+
+Then I directly reverse-proxied `localhost:4321` to port `80`.
+
+Absolutely cursed.
+
+After I excitedly showed it to a classmate, they asked me, “Why is there this thing called Astro Dev Toolbar at the bottom of your website?”
+
+That was when I realized something was wrong. So I went to ask Mr. D.
+
+Mr. D told me that an Astro project had to be built first, after which the static pages should be placed on the server.
+
+What are you even talking about? You mean `npm` can also `run build`?
+
+So I pulled the code onto the server. Every time I finished editing locally, I would `ssh` into the server, run `git pull`, then `npm run build`, and finally `cp ./dist /www/wwwroot/cloverta.top`.
+
+Absolutely cursed...
+
+I must have thought I was so clever back then.
+
+But gradually, the Java server running the API expired, and I forgot all about it. Later still, I stopped using WordPress. My (questionably) personal homepage entered a half-dead state.
+
+## It Was Time for a Change!
+
+I had wanted to redesign my homepage for quite some time.
+
+But as I am sure everyone can tell from the frontend of this blog, my taste in design is terrible. (covers face) (holds head) (crouches down)
+
+For a website whose main purpose is publishing articles, all of that is secondary. But for a personal homepage...
+
+**Looking good** is its primary function.
+
+So I went to Bilibili to watch some graphic design courses.
+
+Wow, that is long. Is there a TL;DR version?
+
+Oh, this one looks good. It is only four minutes long: <b>[Typography Knowledge Even Non-Designers Should Learn: Visual Flow - oooooohmygosh](https://www.bilibili.com/video/BV1FZ4y1g74Y/)</b>
+
+Hmmm...
+
+I used to have a bad habit whenever I worked on frontend development: I would jump straight into writing code! Design? Come on, art students are a dime a dozen in China! (gets beaten up)
+
+That was until I took a course called <b>[Human Computer Interaction](https://opas.peppi.oulu.fi/en/course/521145A/4249?period=2025-2026)</b> while I was on exchange in Finland.
+
+In class, our teacher had us work step by step: first, use <b>[Figma](figma.com)</b> to put our design inspirations—that is, a collection of images matching our concept—together; then sketch the rough structure of the webpage by hand; then assemble a visual mockup of the website in Figma; and finally turn it into an actual webpage with code.
+
+I was pretty confused at first. Why were we being asked to register for a graphic-design website right at the start? Where was my IDE? Where was my code? I was studying engineering, not art... right?
+
+But only after the course ended did I realize that websites made with this workflow—even ones thrown together just to get an assignment done—looked better than the ones I made on my own... (oof!)
+
+After all that rambling, what I mean is that this time, I decided to start with Canva.
+
+<img src="https://files.seeusercontent.com/2026/10/08/g1mH/pasted-image-1791495660551.webp" alt="pasted-image-1791495660551.webp" title="pasted-image-1791495660551.webp" style="zoom:20%;  display: block; margin: 0 auto;" >
+
+<p align="center"><sup>I had only ever used Canva to make flyers for student clubs and... some mysterious Photoshops.</sup></p>
+
+I have always liked card-based web design. I wanted my personal homepage to look like a postcard.
+
+Postcards feel full of stories. I like that.
+
+So I tried dragging in that profile picture I like.
+
+<img src="https://files.seeusercontent.com/2026/10/08/Ucx9/pasted-image-1791496175202.webp" alt="pasted-image-1791496175202.webp" title="pasted-image-1791496175202.webp" style="zoom:20%;  display: block; margin: 0 auto;" >
+
+Canva showed me a suggested placement box. That was nice—the position carefully designed by actual designers was bound to look better than somewhere I picked out of thin air.
+
+What next?
+
+Since this was a personal homepage, what I wanted most was for people to see my name as soon as they arrived. So I needed to put this screen name in the most prominent position!
+
+<img src="https://files.seeusercontent.com/2026/10/08/q1Za/pasted-image-1791496417144.webp" alt="pasted-image-1791496417144.webp" title="pasted-image-1791496417144.webp" style="zoom:20%;  display: block; margin: 0 auto;">
+
+The bottom-left corner felt empty, so I added a corner brace (for real) to give it a stronger sense of boundaries!
+
+<img src="https://files.seeusercontent.com/2026/10/08/Mpd2/pasted-image-1791496616095.webp" alt="pasted-image-1791496616095.webp" title="pasted-image-1791496616095.webp " style="zoom: 33%; display: block; margin: 0px auto;">
+
+It looked strange, and none of it felt connected at all, did it?!
+
+In that four-minute crash course, the uploader mentioned a theory of visual flow. In other words, people's attention is first captured by the most prominent element, after which their gaze gradually sweeps across the page along with the content. This means that we need to create some continuity in the content so visitors can comfortably browse the entire website.
+
+Should I adjust the positions a little, then?
+
+<img src="https://files.seeusercontent.com/2026/10/08/kk9L/pasted-image-1791496902690.webp" alt="pasted-image-1791496902690.webp" title="pasted-image-1791496902690.webp" style="zoom: 33%; display: block; margin: 0px auto;">
+
+Placing the social links below the profile picture should feel more intuitive. Beneath that, I added a brief introduction. This was essential: visitors needed to know whose website they were looking at.
+
+Below the introduction, I used the footnote and ICP registration box to create the lower boundary.
+
+Then came the feature modules. Since this was a homepage, it naturally needed navigation leading to other content.
+
+<img src="https://files.seeusercontent.com/2026/10/08/u5Fj/pasted-image-1791497256787.webp" title="pasted-image-1791497178528.webp" style="zoom: 33%; display: block; margin: 0px auto;">
+
+Done!
+
+At least it looked pretty good!
+
+This way, visitors would first notice the big “ClovertaTheTrilobita” and the only colorful, eye-catching profile picture. Their gaze would then naturally move downward along the profile picture, notice the introduction, gain a basic understanding, and finally turn to the left and discover the navigation menu.
+
+Alternatively, their eyes could follow the prominent black text from the profile picture, through the nickname, to the menu, and finally arrive at the faintest element: the introduction.
+
+The empty space in the middle could be reserved for interactive elements.
+
+<img src="https://files.seeusercontent.com/2026/10/08/0kBt/pasted-image-1791497576419.webp" alt="pasted-image-1791497576419.webp" title="pasted-image-1791497576419.webp" style="zoom:20%;  display: block; margin: 0 auto;">
+
+Now the only—and most troublesome—problem was...
+
+I had no idea what I should put in the “About Me” section. (falls over)
+
+Yes, I sat in front of my computer and racked my brain for more than an hour, only to come up with absolutely nothing...

src/blog/zh/portfolio-update.md

@@ -0,0 +1,141 @@
+---
+title: "记一次主页重新设计"
+pubDate: 2026-10-09
+description: '但是我一点设计都不会？！'
+author: "三叶"
+image: 
+    url: "https://files.seeusercontent.com/2026/10/08/6Cnw/pasted-image-1791493186458.webp"
+    alt: "screenshot"
+tags:  ["随笔"]
+---
+
+主页网址：<b>[三叶草 -More About Me-](https://cloverta.top)</b>
+
+我之前那个主页已经是很久以前弄的了。
+
+不……虽然感觉是很久以前，但其实就是去年的时候，我偶然在微信公众号上刷到了<b>[翠翠](https://idealclover.top/)</b>大佬发的一篇文章。
+
+<img src="https://files.seeusercontent.com/2026/10/08/3liR/pasted-image-1791493374282.webp" alt="pasted-image-1791493374282.webp" title="pasted-image-1791493374282.webp" style="zoom: 25%; display: block; margin: 0 auto;" >
+
+十分的眼前一亮，并且值得注意的是，<b>[在GitHub上开源](https://github.com/idealclover/Homepage)</b>！
+
+当时我就想着，我也想要一个自己的个人主页。
+
+于是我就直接把他的网站fork过来用了（
+
+<img src="https://files.seeusercontent.com/2026/10/08/y4yD/pasted-image-1791493630195.webp" alt="pasted-image-1791493630195.webp" title="pasted-image-1791493630195.webp" style="zoom:20%; display: block; margin: 0 auto;" >
+
+当时正值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分钟。<b>[非设计师也该学的排版知识：视觉动线篇 - oooooohmygosh](https://www.bilibili.com/video/BV1FZ4y1g74Y/)</b>
+
+Hmmm...
+
+我之前在写前端的时候一直有一个毛病，那就是——直接上手写代码！设计？老钟的美术生最不值钱了！（挨打）
+
+直到我在芬兰交换的时候上了一门课，叫做<b>[Human Computer Interaction](https://opas.peppi.oulu.fi/en/course/521145A/4249?period=2025-2026)</b>。
+
+在课上老师叫我们一步步先用<b>[Figma](figma.com)</b>把设计灵感（就是一系列符合构思的图片）贴在一起，再手绘网页大致框架，然后用Figma拼出网站的样式图，最后再用代码把网页写出来。
+
+最开始还挺懵的，怎么一上来让我们注册一个平面设计网站？我的IDE呢？我的代码呢？我学的是工科不是艺术对吧？
+
+但结束后才发现，用这样的工作流完成的网站，就算是随便应付作业的也比我自己写的好看……（呃！）
+
+碎碎念了这么多，我想说的是，我这一次决定从可画开始。
+
+<img src="https://files.seeusercontent.com/2026/10/08/g1mH/pasted-image-1791495660551.webp" alt="pasted-image-1791495660551.webp" title="pasted-image-1791495660551.webp" style="zoom:20%;  display: block; margin: 0 auto;" >
+
+<p align="center"><sup>我以前只拿可画做过协会宣传单和……一些神秘的p图</sup></p>
+
+我一直很喜欢卡片的网页设计，我想让我的个人主页像一张明信片一样。
+
+明信片很有故事感，我喜欢。
+
+于是我尝试把我喜欢的那张头像拖上去
+
+<img src="https://files.seeusercontent.com/2026/10/08/Ucx9/pasted-image-1791496175202.webp" alt="pasted-image-1791496175202.webp" title="pasted-image-1791496175202.webp" style="zoom:20%;  display: block; margin: 0 auto;" >
+
+Canva给出了设计提示框，这很好，设计师们精心设计出来的位置肯定比我凭空一放要好看。
+
+那之后呢？
+
+既然是个人主页，那么我最希望的，就是人们一进来就看到我的名字，于是，我要把这个网名放在最显眼的位置！
+
+<img src="https://files.seeusercontent.com/2026/10/08/q1Za/pasted-image-1791496417144.webp" alt="pasted-image-1791496417144.webp" title="pasted-image-1791496417144.webp" style="zoom:20%;  display: block; margin: 0 auto;">
+
+感觉左下角空荡荡的，放一个角撑（迫真）让它更有边界感吧！
+
+<img src="https://files.seeusercontent.com/2026/10/08/Mpd2/pasted-image-1791496616095.webp" alt="pasted-image-1791496616095.webp" title="pasted-image-1791496616095.webp " style="zoom: 33%; display: block; margin: 0px auto;">
+
+怪怪的，而且这样子完全备有连接起来吧？！
+
+在那个四分钟的速成课，up有提到一个视觉动线理论，也就是说，人们会被最显眼的东西抓住注意力，随后视线会随着内容逐渐划过页面。也就是说，我们需要创造一些连续的内容，使得访问者们能舒适地阅览完整个网站的内容。
+
+那我是不是应该稍微调整一下位置？
+
+<img src="https://files.seeusercontent.com/2026/10/08/kk9L/pasted-image-1791496902690.webp" alt="pasted-image-1791496902690.webp" title="pasted-image-1791496902690.webp" style="zoom: 33%; display: block; margin: 0px auto;">
+
+把社交链接放到头像下方，应该更加符合直觉，在此之下加上一个简短的介绍。这非常有必要，访问者需要知道他们在看谁的网站。
+
+介绍下方，用脚注和ICP备案框处下边界。
+
+然后是功能模块。既然是主页，肯定需要通往其他内容的导航。
+
+<img src="https://files.seeusercontent.com/2026/10/08/u5Fj/pasted-image-1791497256787.webp" title="pasted-image-1791497178528.webp" style="zoom: 33%; display: block; margin: 0px auto;">
+
+完成！
+
+至少看上去还不错！
+
+这样访问者会首先注意到大大的"ClovertaTheTrilobita"和唯一有色彩而瞩目的头像，随后视线沿着头像自然向下，察觉到介绍，有初步了解之后再看向左边，发现导航栏。
+
+也可以顺着醒目的黑色字体，从头像出发，经过昵称，到菜单，最后看到最淡的介绍。
+
+中间空出来的留白可以作为交互预留空间。
+
+<img src="https://files.seeusercontent.com/2026/10/08/0kBt/pasted-image-1791497576419.webp" alt="pasted-image-1791497576419.webp" title="pasted-image-1791497576419.webp" style="zoom:20%;  display: block; margin: 0 auto;">
+
+现在唯一也是最头疼的问题是……
+
+我不知道应该在"About Me"里面写什么内容（跌倒）
+
+是的，我坐在电脑前冥思苦想了一个多小时，最后什么也没想出来，，
+