精選 · 開放 · 免費
Danny Garcia
一個深邃、精緻的開發者作品集，以大膽的字型排印與3D浮動球體為特色
PortfolioDeveloperBold TypographyDark Mode3D
01
設計氣質 DNA
開發者作品集3D互動暗色主題極簡主義創意工程
一位創意工程師的數位名片，結合3D抽象藝術
02
色彩
#d1c5adInk
#c8c8c8Ink soft
#0f0f10BG
#a0a0a0Muted
rgba(200,200,200,0.85)Line
以深邃暗色為基底，搭配溫潤奶油色文字與活躍的3D球體點綴色
03
字型
geometric-sans
- display
104px · 700 - heading
48px · 600 - subheading
32px · 600 - body
24px · 400 - small
16px · 400
標題尺寸採用緊湊的行距（0.9）以強化視覺張力 · 內文維持舒適的1.5行高 · 半粗體（600）用於強調與副標題
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
以4px為基礎網格，主要區塊間採用寬裕的48-96px垂直間距
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 96px
rgba(200,200,200,0.85) 同時作為文字顏色與邊框顏色
0 0 120px rgba(80,120,200,0.15) — 3D球體後方的細微彩色光暈
06
版面
1200container
2columns
48pxgutter
768 / 1024breakpoints
非對稱佈局，大型3D視覺元素疊加於文字區塊之上
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
3D球體以細微的視差/旋轉效果浮動 · 區塊間流暢的滾動過渡 · 互動元素的懸停狀態
可互動元素顯示指標游標 · 流暢導航至區塊錨點
08
組件
- button 無傳統按鈕；採用帶底線樣式的文字連結
- card 工作經歷區塊，以雙欄佈局呈現公司名稱與描述
- hero 大型名稱標題，搭配浮動的3D球體作為裝飾元素
09
文案語氣與禁用清單
- 語氣 自信而平易近人，專業且具備個人特色
- 標題風格 大膽、大規模的陳述，搭配緊湊的字距
- 按鈕文案 採用底線文字連結，而非按鈕元件
- 勿使用淺色背景——截圖顯示整體採用深色（#0f0f10）背景
- 勿添加多種點綴色——截圖依賴3D球體漸層，而非UI點綴色
- 勿為內文使用緊湊行高——截圖顯示採用寬裕的1.5行距
- 勿添加可見的卡片邊框——截圖採用深色層疊效果，無邊框
- 勿將所有文字置中——截圖顯示文字始終採用左對齊
- 勿為標題使用小字號——截圖名稱採用104px的展示尺寸
- 避免: 企業行話
- 避免: 過度自我宣傳
- 避免: 雜亂的佈局
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個具有深邃、精緻美學的資深開發者作品集網站。主要色彩為極暗背景（#0f0f10）、溫潤奶油色文字（#d1c5ad）以及用於內文的柔和灰色（#c8c8c8）。字型採用Avenir Next這款幾何無襯線體，標題尺寸粗體最大達104px。設計以互動式3D浮動球體為特色，搭配紫、藍、青綠漸層作為裝飾元素，襯托於深邃背景之上。關鍵禁忌：切勿使用淺色背景、切勿添加可見的卡片邊框、切勿將所有文字置中、務必維持寬裕間距（48-96px）、切勿使用小字號標題。佈局採用非對稱結構，內容圍繞著3D視覺元素流動。此網站代表了工程技術與視覺創意的交匯，是高品質作品集的優質參考。
en · zh-CN · zh-TW · ja · ko