4

做了个超好看的个人网站

 1 week ago
source link: https://www.v2ex.com/t/1035281
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

V2EX  ›  分享创造

做了个超好看的个人网站

  bingVV22 · 56 分钟前 · 432 次点击

以往到了求职面试的季节免不了要做一套动辄 20-30 页的作品集。除了痛苦还是痛苦。

自由职业一年后悟到,PDF 还是太干瘪了,不如网站更能直观地展示项目成果,更重要的是能及时更新作品进去。两者都可以有,但如果只取一个的话,我认为还是做网站!

同时也把个人网页当成一个项目去完成。调研 > 风格探索 > Responsive 一个不能少。

最终成品 👉 https://echozhang.framer.website/

因为最近半年都在做活泼快乐的视觉风格,我个人的网站也延续了这种快乐风格。也许过几年就整个换头。

使用的建站工具是:Framer ,在 Webflow 和 Framer 考虑了一阵后还是选择了 Framer 。原因 👇

搭建难度:整体上手还比较快。(也踩了不少坑)建议开始搭建之前先大致看一遍教程,有很多细节自己很难探索出来。

Figma 导入流程:基本我在 Figma 完成整个设计,再复制到 Framer ,整个过程还比较顺畅。小 tips 是:需要分 Frame 去导入,一整个页面是导不过来的。

Responsive:这个是最麻烦的地方。Framer 里的 Responsive 是子母级的关系,比如 1440 Desktop 标准版是母亲,那其他 Breakpoints 是「子」。Desktop 的 Responsive 设置得好,其他的 Breakpoints 只需要一些细节的调整。整个 Responsive 需要一定时间的探索和试错。我最后舍弃了完美,Responsive 整体效果 ok 就 ok (是进步...

缺点我个人觉得只有 2 个: Responsive:布局复杂的话,responsive 会很难做,所以第一次尝试就往简单了做吧,重点是一个完成的动作。

尺寸:也因为好 Responsive 的关系,我很多元素都选择了切图,大家千万不要切太高清的图,1440 的网页差不多切 1.5x 即可,因为 Framer Pro 以下的版本只有 5mb 的容量。

好喜欢我的网站!

3-1.png
3-2.png
3-3.png

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK