做了个超好看的个人网站

[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 的容量。

好喜欢我的网站！

[LavaC]

最后一部分似乎有问题，内容显示不全，但既没有添加横向滚动也没有像另一些主页一样有纵向滚动带动的横向滚动事件。

[oneisall8955]

不错，好看

[bingVV22]

@LavaC hh 不是 bug 但是理解你的意思。这里做的就是微动效 scale + 滚动 + 不完全显示。本身就没有拉动，最后这部分的实现我可能会多试试

[bingVV22]

@oneisall8955 谢谢🙏

[13240284671]

头像是你吗

[Chad0000]

@13240284671 #5
我猜你是帮你朋友问的，对吧 🐶

[qqjt]

挺好看，👍

[sangmingming]

色彩风格挺好看的

[bingVV22]

@qqjt 谢谢哈！

[bingVV22]

@sangmingming 谢谢～

[MrDarnell]

审美在线，很牛

[cruzzz]

https://img.199881.xyz/file/445efe237845f4a7fb2f9.jpg
图片一倾斜，这个波纹我是真受不了，但似乎是个无解的东西。

[bingVV22]

@MrDarnell 哇 谢谢！

[bingVV22]

@cruzzz 无解，你写信给 Framer 让他们改。

[cpstar]

黄色的饱和度太高了，相关配色调一调吧

[iphantom]

支持一下 看着网站风格挺好

[bingVV22]

@iphantom 💛

[watzds]

@cruzzz #12 原页面打开，我的电脑上看不出来锯齿，很不明细

[hi2hi]

色彩配合的不错；很传统的页面设计风格，全是外企网站吗？
用了 Gmail 但依旧暴露 QQ 的邮箱 🤣

[oksocool]

这个页面是模板修改的吗？还是自己设计的呀？（礼貌了解一下难度）

[bingVV22]

@oksocool 自己设计的，设计比较快，搭建花了些时间

[didyoudo]

This site is blocked due to a security threat.
Reason: This site has been identified as being a HIGH RISK SERVICE and has been blocked.

[northquq]

挺好看的

[zhiyu1998]

交互挺流畅的，会开源吗

[bingVV22]

@zhiyu1998 framer 模版吗，这个估计开不了，后面会在 figma 设计开源一些网页视觉

[jackerbauer]

这个小妹妹不错

[cssk]

看一眼就视觉疲劳，还好看

[iwfan]

确实好看， 麻烦也指点一下我的： https://iwfan.site/

[Pierro]

自己写的前端吗

[Eninsslei]

这个不需要服务器存储吗？域名解析在哪呀

[katwalk]

用 Framer 做的网站有一种这个网站不属于我的感觉

[cssk]

@iwfan 你这个比楼主好看多了

[kangyue9999]

@13240284671 直球
@Chad0000 查得你好

[Shuashua]

看标题以为又是个标题党，看了我同意你的超好看。

[Motorola3]

在很渣的速度下显得很奇怪

[bingVV22]

@iwfan 谢谢客气啦，排版比较散可以着重看下这块

[bingVV22]

@cssk 看一眼就疲劳啦，是不是视力有啥问题，你是特地来没礼貌的吗？

[bingVV22]

@Shuashua 哈哈哈哈谢谢！！

[bingVV22]

@Eninsslei 你看看 Framer 介绍

[heoizokdung]

好看，可惜不是用代码写的，不然就点个 star
最近我也在整个人网站(xzd.me)，作为码农，设计真的让人头大🥲

[forblackking]

@heoizokdung #40 突发奇想拖了一下首页的照片集发现居然能拖动😂 惊艳到了，点个赞

[bingVV22]

@heoizokdung 哈哈哈哈看你做得挺好的呀

[jjplay]

@cpstar 其实就是这种风格哇 ，https://cash.app/ 例如

[Themyth]

我以为你开源了……

[Liftman]

我感觉越往后。颜色衔接的越不对。。。顶部的颜色也过于饱和，太亮了。也太单调了。容易抓不到观看者的视觉重点。

[BeijingBaby]

用户名都是 996 ，只怕有点累哦……

[ixixi]

设计一个网站首页一般多少钱

[haxk4201]

非常好看！

[bingVV22]

@haxk4201 谢谢🙏

[zywscq]

很不错

[jeffpan]

为什么有一个单独页面介绍 Zilliz Database ，我以为你是他们的员工，但是看了其他帖子，貌似是自由职业者

[bingVV22]

@jeffpan 我是员工啊.... 离职了呀，不做区分。

[gogogo1203]

@heoizokdung framer 到底还是 css, 喜欢就设计扒拉下来。 我也放一下我的网站 https://www.calmly.ing/ 码农还是要买些漂亮的 UI figma

[fzcf]

@forblackking #41 这个效果很好， 不过下一秒就是我的了

[echoyangjx]

风格挺不错

[xzh654321]

@iwfan 你这个比楼主的好看啊

[Delevea]

@iwfan 不错，好看

[kosmgco]

@iwfan Raycase extension -> Raycast extrension

[ackii]

有点 Gumroad( https://gumroad.com/)的感觉

[shaojz2005]

是设计师自己做网站的正确路子，用建站平台搭，也有自己的心得。

[yuankui]

不错，对于一个非技术人员来说。

就是网站有点太亮了，晃眼睛

[pxiphx891]

“Visual concepts that I made for fun!

Your product can looks like ”

look 应该不加 s

[MonkeyJon]

开源么。想要

[zephyr1]

figma 风格

[nicoljiang]

欢迎用我们的服务来优化 Framer 在大陆地区的速度： https://framer.bitiful.com/

[honeycyj]

猜猜看，是海外留学硕士么～太酷了执行力拉满！

[laobobo]

我只能说不同人的审美不一样！

[bingVV22]

@shaojz2005 谢谢

[bingVV22]

@shaojz2005 谢谢你