큐레이션 · 오픈 · 무료

Danny Garcia

대담한 타이포그래피와 3D 떠다니는 구체를 특징으로 하는 어두운, 정제된 개발자 포트폴리오

01

디자인 DNA

3D 추상 아트가 포함된 크리에이티브 엔지니어의 디지털 명함

02

컬러

따뜻한 크림 타이포그래피와 생동감 있는 3D 구체 포인트가 더해진 어두운 배경

03

타이포그래피

geometric-sans

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

디스플레이 사이즈는 드라마틱한 임팩트를 위해 좁은 자간(0.9)을 사용합니다 · 본문 텍스트는 편안한 1.5 행간을 유지합니다 · 강조 및 소제목에는 세미볼드(600)를 사용합니다

04

여백

4px 기본 그리드를 사용하며, 주요 섹션 간 넉넉한 48-96px 수직 간격을 둡니다

05

표면 (라운드 / 그림자 / 경계선)

rgba(200,200,200,0.85)를 텍스트 색상과 테두리 색상으로 사용합니다

0 0 120px rgba(80,120,200,0.15) — 3D 구체 뒤쪽의 은은한 컬러 글로우

06

레이아웃

큰 3D 비주얼이 텍스트 영역과 겹쳐 보이는 비대칭 레이아웃

07

모션과 인터랙션

3D 구체의 미세한 팔락스/회전을 통한 부유 · 섹션 간 부드러운 스크롤 트랜지션 · 인터랙티브 요소의 호버 상태

클릭 가능한 요소에서 커서가 포인터로 변경됩니다 · 섹션 앵커로의 부드러운 네비게이션

08

컴포넌트

• button 전통적인 버튼 없음; 밑줄 스타일의 텍스트 링크 사용
• card 회사명과 설명이 2단 레이아웃으로 표시되는 업무 경험 섹션
• hero 장식용 요소로 떠다니는 3D 구체가 포함된 큰 이름 헤드라인

09

보이스와 금지 목록

• 톤 자신감 있으면서도 친근하고, 개인적인 느낌이 담긴 전문적 어조
• 헤드라인 좁은 자간의 굵고 큰 스케일의 문장
• CTA 버튼 컴포넌트 대신 밑줄 텍스트 링크

• 밝은 배경을 사용하지 마세요 — 스크린샷에서는 전체적으로 어두운(#0f0f10) 배경을 사용합니다
• 여러 포인트 색상을 추가하지 마세요 — 스크린샷은 UI 포인트 색상이 아닌 3D 구체 그래디언트에 의존합니다
• 본문 텍스트에 좁은 행간을 사용하지 마세요 — 스크린샷에서는 넉넉한 1.5 행간을 보여줍니다
• 눈에 띄는 카드 테두리를 추가하지 마세요 — 스크린샷은 테두리 없이 어두운 색상 위에 어두운 색상을 레이어링하여 사용합니다
• 모든 텍스트를 중앙 정렬하지 마세요 — 스크린샷에서는 일관되게 왼쪽 정렬된 타이포그래피를 보여줍니다
• 헤드라인에 작은 타입을 사용하지 마세요 — 스크린샷에서는 이름에 104px 디스플레이 사이즈를 사용합니다
• 피하기: 기업형 전문 용어
• 피하기: 지나친 자기 홍보
• 피하기: 지저분한 레이아웃

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

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