厳選・オープン・無料
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 会社名と説明を2カラムレイアウトで表示する職歴セクション
- hero 浮遊する3D球体を装飾要素として配置した大きな名前ヘッドライン
09
文体と禁止事項
- トーン 自信がありながらも親しみやすい、プロフェッショナルで個性のあるトーン
- 見出し タイトな字間を持つ大胆で大規模なステートメント
- CTA ボタンコンポーネントではなく、アンダーライン付きテキストリンク
- 明るい背景を使用しない — スクリーンショットでは通してダーク(#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