feat(portfolio): 기술 스택을 SimpleIcons 로고 무한 캐러셀로 표시

LogoLoop 컴포넌트를 추가해 카테고리별(언어/프레임워크/인프라/도구) 4줄
가로 스크롤 캐러셀로 skill 로고를 표시. simpleicons CDN을 사용하며
매칭 안 되는 항목(APScheduler, KIS Open API)은 텍스트 칩으로 자동 fallback.
편집 모드에서는 기존 칩 UI를 유지해 편집·삭제 가능.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-28 02:43:57 +09:00
parent 1bd680e47f
commit c68cee502a
4 changed files with 573 additions and 9 deletions

View File

@@ -378,6 +378,39 @@
color: #06b6d4;
}
/* ── Skill Logo Loop ─────────────────────────────────────────────────── */
.pf-skill-loop {
background: var(--surface-card);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 14px 0;
overflow: hidden;
}
.pf-skill-logo {
height: 36px;
width: auto;
display: block;
object-fit: contain;
pointer-events: none;
}
.pf-skill-fallback {
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 14px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--text-bright);
background: rgba(6, 182, 212, 0.12);
border: 1px solid rgba(6, 182, 212, 0.35);
border-radius: 999px;
white-space: nowrap;
}
/* ── Filter Bar ──────────────────────────────────────────────────────── */
.pf-filter-bar {