爱意满满的作品展示区。
leedarmau

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

  •  3
     
  •   leedarmau · Oct 8, 2022 · 9477 views
    This topic created in 1497 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
    chihiro2014
    Oct 8, 2022
    1
    访问不了=。=?
    me221
    me221
    Oct 8, 2022
    2
    在 1080 屏幕上有横向滚动条
    dandycheung
    dandycheung
    Oct 8, 2022 via Android
    3
    很好!
    leedarmau
    leedarmau
    OP
    Oct 8, 2022
    4
    @chihiro2014 …… 我临时把大陆请求打开了,现在应该可以了。

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

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

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

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

    @cais 可以有

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

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

    @thulof 静态网站本来就快

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

    @duan602728596 已上

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

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

    不学小程序了
    criag
    criag
    Oct 9, 2022
    92
    同为设计师会点前端的来点赞,很棒
    Prideeeeee
    Prideeeeee
    Oct 9, 2022
    93
    棒极了
    DuDuDu0o0
    DuDuDu0o0
    Oct 10, 2022
    94
    真棒
    DuDuDu0o0
    DuDuDu0o0
    Oct 10, 2022
    95
    个人感觉字体可能稍微小了点
    alw
    alw
    Oct 12, 2022
    96
    妈的,这设计师 写程序的能力似乎比我还强(狗头
    我也想多学些设计。
    Daniel17
    Daniel17
    Oct 12, 2022
    97
    很棒!
    Vipcw95
    Vipcw95
    Oct 14, 2022
    98
    坏了,前端感觉到一丝危机
    laravel
    laravel
    Oct 14, 2022
    99
    设计学前端优势非常大
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1807 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 175ms · UTC 16:07 · PVG 00:07 · LAX 08:07 · JFK 11:07
    ♥ Do have faith in what you're doing.