做了个超好看的个人网站

206 天前
 bingVV22

以往到了求职面试的季节免不了要做一套动辄 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 的容量。

好喜欢我的网站!

8033 次点击
所在节点    分享创造
72 条回复
LavaC
206 天前
最后一部分似乎有问题,内容显示不全,但既没有添加横向滚动也没有像另一些主页一样有纵向滚动带动的横向滚动事件。
oneisall8955
206 天前
不错,好看
bingVV22
206 天前
@LavaC hh 不是 bug 但是理解你的意思。这里做的就是微动效 scale + 滚动 + 不完全显示。本身就没有拉动,最后这部分的实现我可能会多试试
bingVV22
206 天前
@oneisall8955 谢谢🙏
13240284671
206 天前
头像是你吗
Chad0000
206 天前
@13240284671 #5
我猜你是帮你朋友问的,对吧 🐶
qqjt
206 天前
挺好看,👍
sangmingming
206 天前
色彩风格挺好看的
bingVV22
206 天前
@qqjt 谢谢哈!
bingVV22
206 天前
@sangmingming 谢谢~
MrDarnell
206 天前
审美在线,很牛
cruzzz
206 天前
https://img.199881.xyz/file/445efe237845f4a7fb2f9.jpg
图片一倾斜,这个波纹我是真受不了,但似乎是个无解的东西。
bingVV22
206 天前
@MrDarnell 哇 谢谢!
bingVV22
206 天前
@cruzzz 无解,你写信给 Framer 让他们改。
cpstar
206 天前
黄色的饱和度太高了,相关配色调一调吧
iphantom
206 天前
支持一下 看着网站风格挺好
bingVV22
206 天前
@iphantom 💛
watzds
206 天前
@cruzzz #12 原页面打开,我的电脑上看不出来锯齿,很不明细
hi2hi
206 天前
色彩配合的不错;很传统的页面设计风格,全是外企网站吗?
用了 Gmail 但依旧暴露 QQ 的邮箱 🤣
oksocool
206 天前
这个页面是模板修改的吗?还是自己设计的呀?(礼貌了解一下难度)

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1035281

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX