CURATED · OPEN · FREE

Danny Garcia

A dark, sophisticated developer portfolio featuring bold typography and 3D floating spheres

PortfolioDeveloperBold TypographyDark Mode3D

↓ Download design system (6 MB)Open in OpenDesign

Visit: https://danny-garcia.com

📦 Browse pack contents →

Identity DNA

developer portfolio3D interactivedark thememinimalistcreative engineering

A creative engineer's digital business card with 3D abstract art

Color

#d1c5adInk

#c8c8c8Ink soft

#0f0f10BG

#a0a0a0Muted

rgba(200,200,200,0.85)Line

Dark void with warm cream typography and vibrant 3D sphere accents

Typography

geometric-sans

display104px · 700
heading48px · 600
subheading32px · 600
body24px · 400
small16px · 400

Display sizes use tight leading (0.9) for dramatic impact · Body text maintains comfortable 1.5 line-height · Semi-bold (600) used for emphasis and subheadings

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

4px base grid with generous 48-96px vertical spacing between major sections

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 96px

rgba(200,200,200,0.85) used as text color and border color

0 0 120px rgba(80,120,200,0.15) — subtle colored glow behind 3D spheres

Layout

1200container

2columns

48pxgutter

768 / 1024breakpoints

Asymmetric layout with large 3D visuals overlapping text sections

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

3D spheres float with subtle parallax/rotation · Smooth scroll transitions between sections · Hover states on interactive elements

Cursor changes to pointer on clickable elements · Smooth navigation to section anchors

Components

button No traditional buttons; text links with underline styling
card Work experience sections with company name and description in two-column layout
hero Large name headline with floating 3D spheres as decorative elements

Voice & Don'ts

Tone Confident yet approachable, professional with personality
Headlines Bold, large-scale statements with tight letter-spacing
CTAs Underlined text links rather than button components

Don't use light backgrounds — screenshot shows dark (#0f0f10) background throughout
Don't add multiple accent colors — screenshot relies on 3D sphere gradients, not UI accent colors
Don't use tight line-height for body text — screenshot shows generous 1.5 leading
Don't add visible card borders — screenshot uses dark-on-dark layering without borders
Don't center all text — screenshot shows left-aligned typography consistently
Don't use small type for headlines — screenshot features 104px display size for name
Avoid: Corporate jargon
Avoid: Excessive self-promotion
Avoid: Cluttered layouts

Inside the pack — real screenshots

Danny Garcia — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

This is a senior developer portfolio site with a dark, sophisticated aesthetic. Key colors are very dark background (#0f0f10), warm cream text (#d1c5ad), and muted gray (#c8c8c8) for body text. Typography uses Avenir Next, a geometric sans-serif, with bold display sizes up to 104px. The design features interactive 3D floating spheres with purple, blue, and teal gradients as decorative elements against the dark void. Critical donts: never use light backgrounds, never add visible card borders, never center all text, always maintain generous spacing (48-96px), never use small display sizes. The layout is asymmetric with content flowing around 3D visual elements. This site represents the intersection of engineering skill and visual creativity, making it valuable as a premium portfolio reference.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

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