V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
bingVV22
V2EX  ›  分享创造

做了个超好看的个人网站

  •  
  •   bingVV22 · 51 天前 · 6331 次点击
    这是一个创建于 51 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    70 条回复
    LavaC
        1
    LavaC  
       51 天前
    最后一部分似乎有问题,内容显示不全,但既没有添加横向滚动也没有像另一些主页一样有纵向滚动带动的横向滚动事件。
    oneisall8955
        2
    oneisall8955  
       51 天前
    不错,好看
    bingVV22
        3
    bingVV22  
    OP
       51 天前
    @LavaC hh 不是 bug 但是理解你的意思。这里做的就是微动效 scale + 滚动 + 不完全显示。本身就没有拉动,最后这部分的实现我可能会多试试
    bingVV22
        4
    bingVV22  
    OP
       51 天前
    @oneisall8955 谢谢🙏
    13240284671
        5
    13240284671  
       51 天前   ❤️ 1
    头像是你吗
    Chad0000
        6
    Chad0000  
       51 天前 via iPhone   ❤️ 1
    @13240284671 #5
    我猜你是帮你朋友问的,对吧 🐶
    qqjt
        7
    qqjt  
       51 天前
    挺好看,👍
    sangmingming
        8
    sangmingming  
       51 天前
    色彩风格挺好看的
    bingVV22
        9
    bingVV22  
    OP
       51 天前
    @qqjt 谢谢哈!
    bingVV22
        10
    bingVV22  
    OP
       51 天前
    @sangmingming 谢谢~
    MrDarnell
        11
    MrDarnell  
       51 天前
    审美在线,很牛
    cruzzz
        12
    cruzzz  
       51 天前
    https://img.199881.xyz/file/445efe237845f4a7fb2f9.jpg
    图片一倾斜,这个波纹我是真受不了,但似乎是个无解的东西。
    bingVV22
        13
    bingVV22  
    OP
       51 天前
    @MrDarnell 哇 谢谢!
    bingVV22
        14
    bingVV22  
    OP
       51 天前
    @cruzzz 无解,你写信给 Framer 让他们改。
    cpstar
        15
    cpstar  
       51 天前   ❤️ 1
    黄色的饱和度太高了,相关配色调一调吧
    iphantom
        16
    iphantom  
       51 天前
    支持一下 看着网站风格挺好
    bingVV22
        17
    bingVV22  
    OP
       51 天前
    @iphantom 💛
    watzds
        18
    watzds  
       51 天前
    @cruzzz #12 原页面打开,我的电脑上看不出来锯齿,很不明细
    hi2hi
        19
    hi2hi  
       51 天前
    色彩配合的不错;很传统的页面设计风格,全是外企网站吗?
    用了 Gmail 但依旧暴露 QQ 的邮箱 🤣
    oksocool
        20
    oksocool  
       51 天前
    这个页面是模板修改的吗?还是自己设计的呀?(礼貌了解一下难度)
    bingVV22
        21
    bingVV22  
    OP
       51 天前
    @oksocool 自己设计的,设计比较快,搭建花了些时间
    didyoudo
        22
    didyoudo  
       51 天前
    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
        23
    northquq  
       51 天前
    挺好看的
    zhiyu1998
        24
    zhiyu1998  
       51 天前
    交互挺流畅的,会开源吗
    bingVV22
        25
    bingVV22  
    OP
       51 天前
    @zhiyu1998 framer 模版吗,这个估计开不了,后面会在 figma 设计开源一些网页视觉
    jackerbauer
        26
    jackerbauer  
       51 天前
    这个小妹妹不错
    cssk
        27
    cssk  
       51 天前
    看一眼就视觉疲劳,还好看
    iwfan
        28
    iwfan  
       51 天前
    确实好看, 麻烦也指点一下我的: https://iwfan.site/
    Pierro
        29
    Pierro  
       51 天前
    自己写的前端吗
    Eninsslei
        30
    Eninsslei  
       51 天前
    这个不需要服务器存储吗?域名解析在哪呀
    katwalk
        31
    katwalk  
       51 天前
    用 Framer 做的网站有一种这个网站不属于我的感觉
    cssk
        32
    cssk  
       51 天前
    @iwfan 你这个比楼主好看多了
    kangyue9999
        33
    kangyue9999  
       51 天前 via Android
    @13240284671 直球
    @Chad0000 查得你好
    Shuashua
        34
    Shuashua  
       51 天前
    看标题以为又是个标题党,看了我同意你的超好看。
    Motorola3
        35
    Motorola3  
       51 天前
    在很渣的速度下显得很奇怪
    bingVV22
        36
    bingVV22  
    OP
       51 天前
    @iwfan 谢谢客气啦,排版比较散可以着重看下这块
    bingVV22
        37
    bingVV22  
    OP
       51 天前
    @cssk 看一眼就疲劳啦,是不是视力有啥问题,你是特地来没礼貌的吗?
    bingVV22
        38
    bingVV22  
    OP
       51 天前
    @Shuashua 哈哈哈哈谢谢!!
    bingVV22
        39
    bingVV22  
    OP
       51 天前
    @Eninsslei 你看看 Framer 介绍
    heoizokdung
        40
    heoizokdung  
       51 天前   ❤️ 2
    好看,可惜不是用代码写的,不然就点个 star
    最近我也在整个人网站(xzd.me),作为码农,设计真的让人头大🥲
    forblackking
        41
    forblackking  
       51 天前
    @heoizokdung #40 突发奇想拖了一下首页的照片集发现居然能拖动😂 惊艳到了,点个赞
    bingVV22
        42
    bingVV22  
    OP
       51 天前
    @heoizokdung 哈哈哈哈看你做得挺好的呀
    jjplay
        43
    jjplay  
       51 天前
    @cpstar 其实就是这种风格哇 ,https://cash.app/ 例如
    Themyth
        44
    Themyth  
       51 天前
    我以为你开源了……
    Liftman
        45
    Liftman  
       51 天前
    我感觉越往后。颜色衔接的越不对。。。顶部的颜色也过于饱和,太亮了。也太单调了。容易抓不到观看者的视觉重点。
    BeijingBaby
        46
    BeijingBaby  
       51 天前
    用户名都是 996 ,只怕有点累哦……
    ixixi
        47
    ixixi  
       51 天前
    设计一个网站首页一般多少钱
    haxk4201
        48
    haxk4201  
       51 天前
    非常好看!
    bingVV22
        49
    bingVV22  
    OP
       51 天前
    @haxk4201 谢谢🙏
    zywscq
        50
    zywscq  
       51 天前
    很不错
    jeffpan
        51
    jeffpan  
       51 天前
    为什么有一个单独页面介绍 Zilliz Database ,我以为你是他们的员工,但是看了其他帖子,貌似是自由职业者
    bingVV22
        52
    bingVV22  
    OP
       51 天前
    @jeffpan 我是员工啊.... 离职了呀,不做区分。
    gogogo1203
        53
    gogogo1203  
       51 天前
    @heoizokdung framer 到底还是 css, 喜欢就设计扒拉下来。 我也放一下我的网站 https://www.calmly.ing/ 码农还是要买些漂亮的 UI figma
    fzcf
        54
    fzcf  
       50 天前
    @forblackking #41 这个效果很好, 不过下一秒就是我的了
    echoyangjx
        55
    echoyangjx  
       50 天前
    风格挺不错
    xzh654321
        56
    xzh654321  
       50 天前
    @iwfan 你这个比楼主的好看啊
    Delevea
        57
    Delevea  
       50 天前
    @iwfan 不错,好看
    kosmgco
        58
    kosmgco  
       50 天前
    @iwfan Raycase extension -> Raycast extrension
    ackii
        59
    ackii  
       50 天前
    shaojz2005
        60
    shaojz2005  
       50 天前
    是设计师自己做网站的正确路子,用建站平台搭,也有自己的心得。
    yuankui
        61
    yuankui  
       50 天前
    不错,对于一个非技术人员来说。

    就是网站有点太亮了,晃眼睛
    pxiphx891
        62
    pxiphx891  
       50 天前
    “Visual concepts that I made for fun!

    Your product can looks like ”

    look 应该不加 s
    MonkeyJon
        63
    MonkeyJon  
       50 天前
    开源么。想要
    D2h0VL89HMAU417B
        64
    D2h0VL89HMAU417B  
       50 天前
    figma 风格
    nicoljiang
        65
    nicoljiang  
       50 天前
    欢迎用我们的服务来优化 Framer 在大陆地区的速度: https://framer.bitiful.com/
    honeycyj
        66
    honeycyj  
       49 天前
    猜猜看,是海外留学硕士么~太酷了执行力拉满!
    laobobo
        67
    laobobo  
       49 天前
    我只能说不同人的审美不一样!
    bingVV22
        68
    bingVV22  
    OP
       49 天前
    @shaojz2005 谢谢
    bingVV22
        69
    bingVV22  
    OP
       49 天前
    @shaojz2005 谢谢你
    JohnTsuxi
        70
    JohnTsuxi  
       38 天前 via Android
    ![]( https://imgur.com/V7eopXP.png)


    这个楼里某几个人丢人丢大发了,已经被别人挂到小红书了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1098 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 23:16 · PVG 07:16 · LAX 16:16 · JFK 19:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.