디자인 포트폴리오 카탈로그

이 포트폴리오를 본 누구나 글과 코드를 남길 수 있는 공개 게시판. 방문자끼리 실제로 공유되며, 코드 문법 하이라이트·복사·좋아요를 지원합니다.

회사 망 Sonnet으로 상위 모델급 결과를 내기 위한 실전 도구 15종. 프롬프트 5 + 에이전트 구성 5 + MD 파일 5, 전부 원클릭 복사.

발표자료 기반 데이터 모션그래픽 영상을 GUI 편집이 아닌 코드로 생성하고 학습하는 팀의 레퍼런스 보드. 이징·스태거·stroke 애니를 페이지에서 직접 시연.

웹 보고서 → 편집 가능한 .pptx를 목표로 하는 에디터의 Step 2 보드. 와이어프레임 + 작동 시뮬레이션(mm 좌표계, 마그네틱 스냅, 클립보드 이미지) + 클론용 상세 스펙, 탭 3개 구성.

A4 가로 캔버스에 텍스트·이미지·표를 자유 배치하고 PPT/PDF로 내보내는 웹 에디터. 단일 데이터 모델(비율 좌표) 아키텍처 + 전체 소스코드 수록.

우주정거장 배경 위에 인물 오빗샷을 원형 프레임으로 띄우는 게임 캐릭터 소개 화면. 팀이 바뀔 때만 배경이 크로스페이드되고, 이름은 글자별로 blur가 풀리며 올라옵니다. 프레이밍은 얼굴 검출로 자동 계산해 전원의 얼굴 크기·위치를 맞춥니다.

위 인물소개에 쓴 디자인 요소를 뜯어 정리한 레퍼런스. 팔레트 8색, 회전 글로우 링·눈금 틱·홀로 시머, 비네트·스캔라인·라이트 스윕, 글자별 stagger, 원형 비디오 크롭 역산식까지. 각 블록은 그대로 복사해 쓸 수 있습니다.

제네시스 시험1실 타운홀용 팀리더 트레이딩 카드. 마크업은 100% 동일, 루트 data-theme만 바꿔 만든 3개 테마(midnight·copper·circuit) × 4인 아키타입 카드.

외부 라이브러리 없이 CSS·SVG·Canvas만으로 다루는 기하 9절. 회전 다면체 5종(라이브 컨트롤) → 홀로포일 카드 → 더블위시본 4절 링크를 실제로 풀어 캠버·롤센터를 계산하는 다이어그램 → G80·GV80·GV90 선 실루엣 → 카드 6축 스탯을 3D 육각 젬으로 세워 돌리기까지.

실 프로덕션 CSS 436KB 자동 수집. 컴포넌트 마켓플레이스의 풀 디자인 시스템.

CSS 토큰 + 렌더 HTML 결합 분석. shadcn/ui + Tailwind 유틸리티 우선 설계.

전체 Tailwind 팔레트 + shadcn HSL 시멘틱 토큰. 라이트/다크 테마 시스템.

파이프라인 검증용 샘플. 단일 HTML의 인라인 토큰 추출 데모.