厳選・オープン・無料

Danny Garcia

大胆なタイポグラフィと3D浮遊球体を特徴とする、ダークで洗練された開発者ポートフォリオ

PortfolioDeveloperBold TypographyDark Mode3D
Danny Garcia のスクリーンショット
↓ デザインシステムをダウンロード (6 MB)OpenDesign で開く

オリジナル: https://danny-garcia.com

📦 パックの中身を見る →

01

デザイン DNA

開発者ポートフォリオ3Dインタラクティブダークテーマミニマリストクリエイティブエンジニアリング

3Dアブストラクトアートを用いたクリエイティブエンジニアのデジタル名刺

02

カラー

#d1c5adInk
#c8c8c8Ink soft
#0f0f10BG
#a0a0a0Muted
rgba(200,200,200,0.85)Line

ダークヴォイド背景にウォームクリームのタイポグラフィ、鮮やかな3D球体アクセント

03

タイポグラフィ

geometric-sans

ディスプレイサイズはドラマチックな効果のためにタイトな行間(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

コンポーネント

09

文体と禁止事項

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

これはダークで洗練された美学を備えた上級開発者ポートフォリオサイトです。主要カラーは非常に暗い背景(#0f0f10)、ウォームクリームのテキスト(#d1c5ad)、本文用のミュートグレー(#c8c8c8)です。タイポグラフィには幾何学的サンセリフのAvenir Nextを使用し、太字のディスプレイサイズは最大104pxです。デザインでは、ダークヴォイドを背景に紫、青、ティールのグラデーションを持つインタラクティブな3D浮遊球体を装飾要素として特徴としています。重要な禁止事項:明るい背景は絶対に使用しない、カードの目立つボーダーは追加しない、すべてのテキストを中央揃えにしない、常に広めの余白(48〜96px)を維持する、小さなディスプレイサイズは使用しない。レイアウトは非対称で、コンテンツが3Dビジュアル要素の周りに流れるよう設計されています。このサイトはエンジニアリングスキルとビジュアルクリエイティビティの交差点を表しており、プレミアムなポートフォリオリファレンスとして価値があります。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック(エージェント用) ↗

en · zh-CN · zh-TW · ja · ko