当设计师学了前端……看看我这个博客什么水平 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
爱意满满的作品展示区。
leedarmau

当设计师学了前端……看看我这个博客什么水平

  •  3
     
  •   leedarmau Oct 8, 2022 8767 views
    This topic created in 1300 days ago, the information mentioned may be changed or developed.

    之前连载了两篇文章,为啥没动静了呢,因为我忙着去弄网站了。。。

    前阵子花了半个月的时间,利用 Strapi+Gatsby 做了一个全新的个人网站。

    做这个网站的初衷就是市面上的 CMS 和主题都不能满足我的需求,我想要展示更多的内容类型,更符合我想法的设计。

    于是我选择了 Headless CMS 作为后端和内容源。这种 CMS 只提供接口和数据,你需要自己把数据获取到并自己决定如何展示。数据库是 Postgresql ,不过除了最开始的创建数据库、授权用户,后面我再没管过。

    因为更新频率可能是两周一次,所以我选择了 Gatsby 这种静态网站方案。

    设计完全是我自己搞定的,因为本来就是设计师。其实开发的成品跟设计稿也是有些偏差的,开发中也会不断调整设计。首页的小动效也是自己想的。

    内容分为三块:文章、摄影和视频。其中视频支持切换视频源。(但是 YouTube 源好像有问题,待修复。西瓜和 B 站是好的)

    网站支持响应式布局,会自动根据系统主题切换明暗,支持 RSS ,支持搜索。

    另外如果你网络状况良好的话(我是说在境外,或者梯子够好。备案通过后会给国内加 CDN ),会感到网站速度非常快,极其块,秒开。

    目前还有一些设计细节需要优化,“关于本站”放了链接但还没开发。但基本的框架和内容都具备了。

    本来正式发布是要等备案通过,所以目前是禁止解析境内请求的。不过既然你能看到这篇帖子,说明你应该能正常访问我的网站。

    国内 ip 是打不开的!需要用代理

    做完以后还是挺有成就感的,因为这是我开发的第一个网站。后面也会把我设计、开发这个网站的过程写成文章发表在上面。

    说了这么多放出链接:https://darmau.design

    希望能得到各位的反馈和建议。谢谢!

    Supplement 1    Oct 8, 2022
    关于大陆用户请访问这个链接 https://beta.darmau.com

    主域名还在备案,就停止对大陆访问的解析了,境外没问题。

    至于为什么要备案,因为后面还想弄个小程序版,必须得是备案域名。另外 Gatsby Cloud 速度虽然还行,但可能还是有不稳定,所以想加个 CDN 。
    Supplement 2    Oct 8, 2022
    手滑打错了,上面的地址应该是 https://beta.darmau.design
    Supplement 3    Oct 18, 2022
    备案完成,beta 子域名停止访问。境内主域名将会解析到阿里云 CDN 。
    另外又更新了一大波优化。
    99 replies    2022-10-14 20:27:37 +08:00
    chihiro2014
        1
    chihiro2014  
       Oct 8, 2022
    访问不了=。=?
    me221
        2
    me221  
       Oct 8, 2022
    在 1080 屏幕上有横向滚动条
    dandycheung
        3
    dandycheung  
       Oct 8, 2022 via Android
    很好!
    leedarmau
        4
    leedarmau  
    OP
       Oct 8, 2022
    @chihiro2014 …… 我临时把大陆请求打开了,现在应该可以了。

    访问不了是因为你的代理不够智能,没有把我的域名当成境外 IP 。。。
    keepeye
        5
    keepeye  
       Oct 8, 2022
    还阔以哦
    pendulum
        6
    pendulum  
       Oct 8, 2022
    不错,想扒
    leedarmau
        7
    leedarmau/a>  
    OP
       Oct 8, 2022
    @pendulum 那就给个 star 吧 https://github.com/Darmau/darmau-gatsby

    @me221 应该跟屏幕没关系吧。我知道在移动端点击搜索再切回来会有滚动条,缩一下就可以了。暂时懒得修这个。
    wakarimasen
        8
    wakarimasen  
       Oct 8, 2022 via Android   1
    简体中文博客拒绝大陆请求是什么用意
    leedarmau
        9
    leedarmau  
    OP
       Oct 8, 2022 via iPhone
    @angrylid ……备案
    p8YFk4f3E8SJ3aEv
        10
    p8YFk4f3E8SJ3aEv  
       Oct 8, 2022   1
    确实有横向滚动条,是你的 width: 100vw;属性造成的,原因是有个纵向滚动条占用了宽度,所以实际视窗宽度不足 100vw
    xilou31
        11
    xilou31  
       Oct 8, 2022
    @leedarmau #9 跟备案有啥关系,如果你的境外服务器的话,根本就不需要备案吧。
    hhacker
        12
    hhacker  
       Oct 8, 2022
    不要备案
    不要备案
    不要备案
    leedarmau
        13
    leedarmau  
    OP
       Oct 8, 2022 via iPhone
    @xilou31 可我想保证大陆访问速度啊

    @f056917 的确是那个搜索的锅
    hhacker
        14
    hhacker  
       Oct 8, 2022
    @xilou31 OP 设置了 DNS 区域解析, 等备案了就能解析到国内服务器上
    leedarmau
        15
    leedarmau  
    OP
       Oct 8, 2022 via iPhone
    @hhacker 后面还想弄个小程序,域名必须备案
    xilou31
        16
    xilou31  
       Oct 8, 2022
    另外做的确实挺有意思的。
    CSGO
        17
    CSGO  
       Oct 8, 2022
    牛蛙!我也花了一周学了标注语言 wangyifang.com 然后到了 js 就看不下去了。
    C64NRD
        18
    C64NRD  
       Oct 8, 2022
    清爽干净,操作丝滑,爱了爱了
    296727
        19
    296727  
       Oct 8, 2022
    @leedarmau windows 上也有滚动条,应该是有个地方多了
    index-module--cover-block--rECgE width 100vw ,别用 vw ,用 100%就可以了
    Rache1
        20
    Rache1  
       Oct 8, 2022
    让我见识到了 border-image-slice 这个属性
    danc
        21
    danc  
       Oct 8, 2022
    首页图片有点糊,是压缩太过了吗?
    cvooc
        22
    cvooc  
       Oct 8, 2022
    很棒, 这个呼吸动画相当赞了
    leedarmau
        23
    leedarmau  
    OP
       Oct 8, 2022
    @296727
    @f056917
    @me221 已修复
    silencil
        24
    silencil  
       Oct 8, 2022
    很漂亮
    protonme
        25
    protonme  
       Oct 8, 2022
    Developer 部分可以设置一下 CSS 字体?并且空格好像不等宽?
    rabsicBot
        26
    rabsicBot  
       Oct 8, 2022
    Star 下~~回头考虑迁移下 Hexo 的
    silencil
        27
    silencil  
       Oct 8, 2022
    收藏了,提个意见,我点了下视频的封面图,没法点进去,建议图也做成个链接。
    kinboy
        28
    kinboy  
       Oct 8, 2022 via Android
    这个 403 果然不一般
    KMpAn8Obw1QhPoEP
        29
    KMpAn8Obw1QhPoEP  
       Oct 8, 2022 via Android
    不愧是设计师
    gimp
        30
    gimp  
       Oct 8, 2022
    看着真不错
    kongkx
        31
    kongkx  
       Oct 8, 2022 via iPhone
    访问不了啊
    cssk
        32
    cssk  
       Oct 8, 2022 via iPhone
    65-70 分
    xiaoluoboding
        33
    xiaoluoboding  
       Oct 8, 2022
    好像 Header Menu 没有居中,额,有点点别扭
    shenqi
        34
    shenqi  
       Oct 8, 2022
    让我想起可可托海的牧羊人
    leedarmau
        35
    leedarmau  
    OP
       Oct 8, 2022
    @kinboy
    @kongkx 看 append
    haozi3156666
        36
    haozi3156666  
       Oct 8, 2022
    看起来不错
    eycode
        37
    eycode  
       Oct 8, 2022   1
    比较喜欢这段话:“我就是个普通人,没啥能力目光也短浅。我只想好好生活,那些虚幻的未来对我来说没有意义”,我也是回家后才慢慢明白
    shenqi
        38
    shenqi  
       Oct 8, 2022   2
    设计师的设计就是有点牛。
    witcat
        39
    witcat  
       Oct 8, 2022
    牛 前端学了多久啊
    leedarmau
        40
    leedarmau  
    OP
       Oct 8, 2022
    @witcat 俩月
    gps949
        41
    gps949  
       Oct 8, 2022
    照片拍得不错
    Tanix2
        42
    Tanix2  
       Oct 8, 2022
    右边的心跳真的很有感觉!
    laolaowang
        43
    laolaowang  
       Oct 8, 2022
    不错,和一些人相反,我不喜欢那个“呼吸动画”
    makelove
        44
    makelove  
       Oct 8, 2022   7
    作为程序员身份 90 分
    作为设计师身份 50 分
    KillPaul
        45
    KillPaul  
       Oct 8, 2022
    同为设计师,然而我还在学 CSS 基础啊哈哈哈哈.... 老粉了,立马 rss 订阅一个。坐等大佬的网站开发教程~
    另外提一个小建议,希望摄影作品可以点开看全屏大图~
    swirling
        46
    swirling  
       Oct 8, 2022
    上方没居中对齐
    首页右边那个块一直动和左边没对齐
    然后左边 I create and build things on screen 右边是 I create and build things for screen
    还有就是 Header 上的对齐和 内容部分的对齐不太一致
    (强迫症
    cais
        47
    cais  
       Oct 8, 2022
    建议文章和图片模块里 图片也支持点击事件
    falost
        48
    falost  
       Oct 8, 2022
    过来人告诉你 备案了也不能做小程序 这属于未开放类目
    wzdsfl
        49
    wzdsfl  
       Oct 8, 2022
    https://beta.darmau.design/article/qinghai-galaxy-3
    这个页面里有 <br> 标签没渲染哦
    LavaC
        50
    LavaC  
       Oct 8, 2022
    我 7 月 20 开始做的博客每隔几天写几行代码,以这进度写到年末都不一定能把想要的功能实现完,看到 op 每天熬夜肝,感到很惭愧。
    Innovatino
        51
    Innovatino  
       Oct 8, 2022
    挺好的,不过感觉好像没啥设计

    最好搞点个人风格进来
    LavaC
        52
    LavaC  
       Oct 8, 2022
    之前在 B 站看过另一位设计师的做法,借用现成游戏引擎来实现页面,把个人网站当游戏做,也是个降低前端代码学习难度的法子。
    leedarmau
        53
    leedarmau  
    OP
       Oct 8, 2022 via iPhone
    @makelove 有没可能是程序员分不够实现不了一些想法

    @cais 可以有

    @Innovatino 明年大改版再考虑吧。之前弄了好几天设计,后来觉得应该先上线再优化。而且内容为主的话,不太好搞太个性的风格。比如不同视频网站的视频卡片基本都差不多。

    @LavaC 那不是更难了吗?我这个说实话就是取数据,展示数据。没啥难度。
    allgy
        54
    allgy  
       Oct 8, 2022
    非设计观点:杂,图片可以弄成影集,不要平铺
    CHXX
        55
    CHXX  
       Oct 8, 2022
    页面过于杂乱,不够简洁。https://dribbble.com/search/blog
    Arrowing
        56
    Arrowing  
       Oct 8, 2022
    整体色彩搭配比较和谐。
    我有强迫症,导航栏的标题下划线没居中!
    vivipure
        57
    vivipure  
       Oct 8, 2022
    顶部导航应该高亮当前路由
    duan602728596
        58
    duan602728596  
       Oct 8, 2022
    图片何不上 webp 和 avif ?
    KevinDo2
        59
    KevinDo2  
       Oct 8, 2022
    难受,导航栏 hover 出现的下划线不是和文字居中对齐的。。
    如果是特意设计的左对齐,那有感觉长度太短。
    文章仅支持点击标题,不太符合第一直觉
    thulof
        60
    thulof  
       Oct 8, 2022
    性能很好啊,Lighthouse 94 分,应该是专门做了性能优化?
    dongtingyue
        61
    dongtingyue  
       Oct 8, 2022
    ???我访问的为啥头部一大块是广告
    AllenCai
        62
    AllenCai  
       Oct 8, 2022
    作为一个没有艺术细胞的前端, 我觉得挺不错的
    camillo
        63
    camillo  
       Oct 8, 2022
    搜索框的内阴影感觉可以再优化下 有点 too much
    anychuan
        64
    anychuan  
       Oct 8, 2022
    网站没法留言,这里说一下,感觉分享深圳回成都的文章,对我个人很有参考意义
    fkdtz
        65
    fkdtz  
       Oct 8, 2022
    整挺好
    GeekJason
        66
    GeekJason  
       Oct 8, 2022
    很好看!
    ch3nOr
        67
    ch3nOr  
       Oct 8, 2022
    挺好看的,如果有个夜间模式,那就更加酷了
    leedarmau
        68
    leedarmau  
    OP
       Oct 8, 2022
    @dongtingyue 链接错了

    @thulof 静态网站本来就快

    @ch3nOr 有,只是没支持手动切换,跟系统来的。
    sarlanori
        69
    sarlanori  
       Oct 8, 2022 via Android
    博客到没啥感觉,照片是拍的真好
    Donahue
        70
    Donahue  
       Oct 8, 2022
    酷 好看 有设计感
    ahxsong
        71
    ahxsong  
       Oct 8, 2022 via iPhone
    很赞
    Vesper
        72
    Vesper  
       Oct 8, 2022
    syfless
        73
    syfless  
       Oct 8, 2022
    safari 下有内存泄漏问题,一开网站风扇狂转
    leedarmau
        74
    leedarmau  
    OP
       Oct 8, 2022
    @KevinDo2 @Arrowing 查到原因了。设置了 letter-spacing ,但是这个 space 是加在每个字的后面,导致右边多出来了一个空隙

    @duan602728596 已上

    @syfless 没有遇到这种情况
    littlewing
        75
    littlewing  
       Oct 8, 2022
    “视频” 给个建议,点击图片也能跳转
    littlewing
        76
    littlewing  
       Oct 8, 2022
    “配乐:RICHNOMADIC - Dirty Snow ,购于网易云”

    购于网易云没必要,非商业用途注明一下这是什么歌就行了,商业用途的话,你这网易云购买的也不是商业授权
    niuoh
        77
    niuoh  
       Oct 8, 2022
    体验挺不错 提交一个优化建议 首页 可以鼠标下滑的时候自动慢慢滑动到对应的栏目增加一点丝滑感
    niuoh
        78
    niuoh  
       Oct 8, 2022
    看的出来网站各方面都用了很多心思 之前我写尝试过些自己的记事博客但最终没有坚持下去 现在虽然初步实现了时间自由但也没有心思做这个事了 希望楼主坚持吧
    leedarmau
        79
    leedarmau  
    OP
       Oct 8, 2022
    wanacry
        80
    wanacry  
       Oct 8, 2022
    没啥卵用,还是内容为王
    litesoar
        81
    litesoar  
       Oct 9, 2022
    简洁美观。
    youshh
        82
    youshh  
       Oct 9, 2022
    很赞呀~
    ZeroDu
        83
    ZeroDu  
       Oct 9, 2022
    摄影详情页,可以加个左右切图片
    Eagleyes
        84
    Eagleyes  
       Oct 9, 2022
    摄影作品不错,非常喜欢那篇《来了不是深圳人,拜拜了深圳》
    xzh654321
        85
    xzh654321  
       Oct 9, 2022
    内容不错,设计需加强,不过能做出来就是成功
    chuyik
        86
    chuyik  
       Oct 9, 2022
    看了几篇深圳的文章,有理有据
    TomPig0216
        87
    TomPig0216  
       Oct 9, 2022
    看起来真的不错
    cais
        88
    cais  
       Oct 9, 2022
    @leedarmau 不错不错
    tyrad
        89
    tyrad  
       Oct 9, 2022
    访问速度挺不错
    someonedeng
        90
    someonedeng  
       Oct 9, 2022
    不愧是设计师,好看
    leedarmau
        91
    leedarmau  
    OP
       Oct 9, 2022
    @falost 查了一下还真是。了

    不学小程序了
    criag
        92
    criag  
       Oct 9, 2022
    同为设计师会点前端的来点赞,很棒
    Prideeeeee
        93
    Prideeeeee  
       Oct 9, 2022
    棒极了
    DuDuDu0o0
        94
    DuDuDu0o0  
       Oct 10, 2022
    真棒
    DuDuDu0o0
        95
    DuDuDu0o0  
       Oct 10, 2022
    个人感觉字体可能稍微小了点
    alw
        96
    alw  
       Oct 12, 2022
    妈的,这设计师 写程序的能力似乎比我还强(狗头
    我也想多学些设计。
    Daniel17
        97
    Daniel17  
       Oct 12, 2022
    很棒!
    Vipcw95
        98
    Vipcw95  
       Oct 14, 2022
    坏了,前端感觉到一丝危机
    laravel
        99
    laravel  
       Oct 14, 2022
    设计学前端优势非常大
    About     Help     Advertise     Blog     API     FAQ     Solana     2378 Online   Highest 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 186ms UTC 01:37 PVG 09:37 LAX 18:37 JFK 21:37
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86