分享一下我刚做的个人站 /about

[LHRUN]

访问链接 : https://about.songlh.top/

vercel 部署的, 需要翻墙

从开始到结束大概历时半个月, 耗掉了三个周末时光... 要做这个个人站是因为突然有一天在小红书刷到了一个设计大佬的网站, 然后就一直给我推相关文章, 看的是真心痒痒, 认为自己一个做了好几年 C 端的, 搞一个这种酷炫的个人站应该是手拿把掐的 😂, 谁知道做下来才知道自己的动手能力跟不上脑补能力, 在还没开始做时, 脑补了好多高级特效的页面, 但是做的时候才发现自己是除了开发以外是真的菜鸡, 设计和配色太过于青涩, 我还专门在 B 站学了 blender, 但是费了好大劲捏了几个四不像就放弃了. 不过建模是真的有成就感, 如果有时间我是想要深入一下的, 说不定会碰撞出不一样的火花

截图贴下面了, 算是一个删删减减掉各种奇怪动效后自认为比较美观的版本, 欢迎访问提建议 👻, 建议 PC 端, 也欢迎大佬们贴一下你们的网站, 互相观摩学习 🐶

感谢 V 友支持, 代码已开源。欢迎魔改 😂
https://github.com/LHRUN/one-space

增加了一个深色模式的切换 👻 , 现在应该没有人会有深色模式的问题了

[matthewzhong]

漂亮，建议开源

[HMYDK]

不错呀 👍

[alphardex]

还不错，贴贴我的： https://haobinwang-2023.netlify.app/

[wogogoing]

你们的个人站都好酷

[Martinez]

实在太漂亮了！

[littlejackyxu]

这种风格我喜欢！

[miludeerKay]

哥们，这太艺术了

[EricYuan1]

歪，博客都用英文写的啊

[llllker]

很酷啊，想学习一下

[blakezhaothinks]

开源吗老哥

[zhuoyan]

好看

[geekareas]

@alphardex 你这个也好有创意，动画过渡太顺滑了，水波纹效果是不是很吃性能

[YvesX]

好看

[ashin]

我的 https://axiaoxin.com/ 😁

[LHRUN]

@matthewzhong
@blakezhaothinks
肯定的，不过是想着先发出来，看看大家的建议和看法， 省的是我审美自嗨 😂 ，这两天我会进行一些微调和优化，尽量把代码也调整的整洁一些，然后再开源

[LHRUN]

@alphardex 牛逼 我对 3D 是个小白，今年才接触，向你学习

[LHRUN]

@EricYuan1 这是当时那个开源想推一下海外，所以就写了一些发到了英文的论坛上了

[19960623lyf]

牛的

[LHRUN]

@HMYDK
@wogogoing
@Martinez
@littlejackyxu
@miludeerKay
@llllker
@zhuoyan
@YvesX
😘

[aladd]

别逼我球你哈！赶紧开源！我朋友说他很喜欢，他想要，不是我，我没别的意思，你别误会。

[xinyu391]

有点卡，电脑 cpu 飙升。

[piersonpeng]

期待开源，老哥

[LHRUN]

@ashin 可以的 很整洁 👍

[roma]

@ashin 网站访问极慢，

[forschers]

真的好看 高级

[JamesFisher]

太酷啦

[freemyspace]

真好看

[seamonster]

mark ，开源了哪位大哥踢我一脚

[blessingcr]

wc 太特么帅了 开源了踢我一下

[iyahd]

mark ，开源了哪位大哥踢我一脚

[edz]

说实话有个脑子一直在中间转转有点怪

[Clannad0708]

太厉害了，没开过的选手表示羡慕

[tinyzilan123]

蹲一个，期待开源

[iceblueCat]

进不去，一直在转圈

[shui14]

你的完成度还挺高的
https://doodle-beta.vercel.app/
烂尾了，没时间整。现在手机挺强的，一般的办公笔记本也可以。视觉效果可以重返 flash 时代，我看到别人做的 wgsl 比 glsles3 要好

[7gugu]

看截图很漂亮，但是 Chrome 和 Firefox 都进不去😂

[makizhang]

666 喜欢，等一个开源

[LHRUN]

@xinyu391 会尽可能的再优化一些细节

[LHRUN]

@iceblueCat
@7gugu
需要翻墙，然后有一个 glb 文件大概 2m 多，如果不稳定的话可能是要慢一些，最初是 18m ，慢的我都麻了 😂

[OrangeDark]

很酷诶

[LHRUN]

@shui14 你这个动效也可以的，我研究了好多这种，但总是做的不满意，最初我是想要做一个沙漠的巨型背景 3d, 但是能力跟不上 就放弃了 😂

[falcon05]

这个壁纸不错啊

[7gugu]

@LHRUN #39 我已经是外网环境了，但是连不上你的站点。会提示“连接到 about.songlh.top 时发生错误。SSL 接收到一个超出最大准许长度的记录。”

[7gugu]

@LHRUN #39 我知道了，是因为我本地的代理服务器配置有问题，用手机访问就可以了

[jatshw]

好看 🐴一个 等开源！

[ired]

COOL

[kiroli]

字体不错

[needpp]

Application error: a client-side exception has occurred (see the browser console for more information).

[gogogo1203]

@needpp 你的浏览器应该是有什么插件照成的.

[SuperDaFu]

虽然很慢，但是很炫

[a67793581]

还是你们前端会玩,我觉得太花哨了.

[cue]

国内 HR：什么花里胡哨的，带简历了吗？带了是吧，好的，再把这个登记表填一下。

[lessurliu]

好像打不开，我已经转了快一分钟了，然后显示无法访问

[Tink]

https://tink.im/

[Tink]

前端智障的

[shui14]

@LHRUN 这就是现成的 boom 组件，调下参数。实际花心思的地方是鼠标，跟 gasp 一样，着色器变量加层 framer motion ，有个 shader 的播放器我没放出来，网页主动操作只有鼠标，拓展了一下
如果只是单一小场景，three 也可以做渲染器，都是现成的模块，慢慢就了解了。我记得 nasa 有个火星表面的场景，搜一下 nasa renderer 试试，就把它那个场景用 ai 套用风格生成沙漠就可以了

[SuXuan]

看了上面大佬们的都太酷了,希望有一天我也能整出来一个

[youngteam99]

期待开源🥰

[LHRUN]

@a67793581 哈哈 这就看取舍了， 我是由 堆特效 到 极简风 再到现在想找到一个设计风格过渡的。

[LHRUN]

@lessurliu vercel 对国内太不友好了，我可能会在开源前转到 github page

[LHRUN]

@cue 哈哈 已经想要放弃国内了， 也是想要做一些内容看看有没有机会转到海外 😂

[LHRUN]

@shui14 厉害，感谢指导。。我研究研究

[LHRUN]

@Tink 我好像之前看到过你的，这种风格也挺酷的

[LKsss]

不错的，喜欢，开源了踢踢我！

[flamehua]

我承认，你很 Nice

[hero1874]

等一个开源 太好看了

[WhateverYouLike]

厉害呀楼主，专业前端就该多搞一些这种有设计感的站点，请问技术栈主要是什么呢？我觉得我要是做的话，就多参考一些 codrops 和 gsap 的例子，就是不知道素材哪里找。

[LHRUN]

@WhateverYouLike 我感觉不用太过于关心技术栈，用你擅长的就行，主要是灵感和想法，我最近一直在看一些设计大佬们的个站，可以找找感觉，国外的一些做的是真的漂亮，艺术品不为过。

具体素材我也不知道在哪找，可以在小红书搜搜相关的关键词 😂

[hellodigua]

@alphardex 好酷

[c0okies]

好漂亮～～～

[nealHuang]

不错哟，文章字体很舒服，不过中文字体倒是一般般，期待开源

[armantang]

感觉这个脑子在正中间有点影响阅读体验😂

[From313]

哥们儿太帅了这个❤️

[dandycheung]

很不错。提个意见：滚动浏览时候，对浏览器历史的污染太严重了。

[shiny]

https://teal.press/zh-CN

[klamx]

@needpp 应该 config 关了啥功能，我的 firefox 也打不开，同样报错，chrome 我没动过设置，就能打开了。

[klamx]

@shiny 牛的，下划线做了好几个样式

[lizhenda]

效果很棒，很用心啊

[LHRUN]

感谢以上 V 友的捧场，最快今晚或者明天会开源，我到时候 @ 你们 😎

[Daotin]

赞👍

[Geraltt]

审美很棒

[duli950523]

打不开

[Alisson]

很好看，期待开源

[andforce]

@LHRUN #79 你就等着我 fork 然后吃灰去吧

[iceprosurface]

@alphardex 很漂亮，但是阅读体验太差了，感觉只适合做个展示

[heartdream]

那个头像模型是怎么生成的

[amber0317]

非常炫酷！

个人觉得文字排版还有优化空间，比如分段分行，不要全居中，字重稍微小一些，字距感觉也可以稍微拉大，方便阅读。行距很漂亮。

[0571panwell]

很不错啊 ，佩服！

[sayid]

OP 做的很不错。我也分享一下我的:

https://sayidhe.com

[sikuu2al]

很好看！蹲开源！

[WhateverYouLike]

@LHRUN 倒不是说 react 或者 angular 那种框架技术栈，而是类似滚动、视差、3d 动画、交互这些实现方式，从头手撸还是不如有趁手工具吧🤨

[loading]

挺好，贴下我的，主要看域名：

https://sync.sh

[itisqiang]

OP 做的很好看！

[ccbikai]

https://mt.ci/

[Amose2024]

英文水平稀烂啊🤨但挺好看

[gogogo1203]

@Amose2024 哎哟. 你的英语有多少来秀秀啊. 搞这种煤油灯, 没前途的.

[Amose2024]

@gogogo1203 话都说不流利，戾气这么重-.-

[gogogo1203]

@Amose2024 水平稀烂啊🤨ge 着职场 pua 呢

[gongquanlin]

127.0.0.1 了吗……

[shanejix]

期待开源 另外能分享下 “设计大佬的网站” 么😁