yena shared this post · Jun 27
Amto

developer-portfolios 在 GitHub 上已经攒了 23.3k+ Star,里面收录了 1600 多位开发者的真实个人作品站。

不是模板合集,也不是设计稿仓库。

全是已经落地在线的真实网站。

从 3D 动画、WebGL 交互相应,到极简主义、终端命令行风、AI 产品风,基本上把当下开发者圈子里流行的网站设计流派一网打尽。

它最实用的场景,是给 AI 工具当参照库。

以前做页面最怕听到一句话:

“帮我优化一下。”

问题是自己脑子里也没个具体的画面,不知道该往哪个方向调。

现在看到顺眼的案例,直接把链接甩给 AI:

照这个首页布局来一版

照着这个入场动画做

按这套视觉风格重构 Landing Page

复刻一个类似质感的页面

实操效果比纯靠嘴描述要扎实得多。

我随手点开了几个,感受挺直观:

毛玻璃叠加粒子动态,质感直接顶满

终端模拟器 UI,代码审美拉满

WebGL 配合 3D 交互,看完就想把自己官网重写一遍

极简、暗黑、赛博朋克、实验艺术,各种调性基本全覆盖。

🔗https://github.com/emmabostian/developer-portfolios

GLM 4.7 Flash · Summary · Jun 27

GitHub 저장소 'developer-portfolios'는 23.3k+의 별을 받으며 1,600명 이상의 개발자의 실제 온라인 포트폴리오를 수집하고 있습니다.

이 저장소는 템플릿이나 디자인 초안이 아닌, 이미 구현된 실제 웹사이트를 다양한 스타일(3D 애니메이션, WebGL, 터미널 UI, AI 제품 스타일 등)로 보여줍니다.

이 저장소는 AI 도구의 참고 라이브러리로 활용하기에 유용하며, 구체적인 링크를 공유하여 레이아웃, 애니메이션, 시각적 스타일 등을 AI에 전달하기 쉽습니다.

Cloud AI · Glossary · Jul 3

WebGL (Web Graphics Library)
웹 브라우저에서 플러그인 없이 2D·3D 그래픽을 렌더링하는 JavaScript API. 인터랙티브 애니메이션, 셰이더 효과, 3D 인터랙션 구현에 사용된다. 출처

글래스모피즘 (Glassmorphism) / 毛玻璃 效果 (Frosted Glass Effect)
배경 블러, 반투명도, 미세한 테두리를 조합해 유리처럼 보이는 UI 레이어를 구현하는 디자인 스타일. macOS Big Sur·iOS 26에서 Apple이 대중화했다. 출처

파티클 모션 (Particle Motion / 粒子动态)
수많은 작은 점(파티클)이 움직이며 만들어내는 동적 시각 효과. 주로 WebGL이나 Canvas API로 구현되며, 사이버펑크·SF 분위기 포트폴리오에서 자주 사용된다.

터미널 시뮬레이터 UI (Terminal Simulator UI / 终端命令行风)
실제 CLI(명령줄 인터페이스) 터미널처럼 보이도록 디자인된 웹 UI 스타일. 모노스페이스 폰트, 어두운 배경, 타이핑 애니메이션이 특징이며 개발자 포트폴리오에서 코딩 감성을 표현하는 데 쓰인다.

랜딩 페이지 (Landing Page)
특정 목적(서비스 소개, 전환 유도 등)을 위해 독립적으로 설계된 단일 웹 페이지. 포트폴리오의 첫 화면이자 방문자의 첫인상을 결정하는 핵심 페이지다.

29