📸 풀페이지 미리보기 (PC · 모바일)

1. index.html — 인트로 + 셀렉티드 작품

2. work.html — 전체 포트폴리오 (카테고리 필터)

3. project.html — 프로젝트 상세

4. about.html — 소개 · CV · 클라이언트

5. contact.html — 프로젝트 브리프 폼

Aria Folio — 조용히 강한 포트폴리오 템플릿

독립 디자이너 · 일러스트레이터 · 크리에이티브 프리랜서를 위한 다크 모드 미니멀 포트폴리오. 머스타드(#d4a373) 액센트와 IBM Plex Mono UI 텍스트로 작품 자체가 주인공이 되도록 설계했습니다.

구성된 페이지 (5종)

• index.html — 풀스크린 인트로 · 마퀴 텍스트 · 셀렉티드 작품 · 부킹 안내
• work.html — 전체 포트폴리오 그리드 + JS 카테고리 필터 (Identity / Web / Editorial / Type)
• project.html — 단일 프로젝트 케이스 스터디 (메타 · 본문 · 인용 · 다음 프로젝트)
• about.html — 자기소개 · CV 타임라인 · 클라이언트 리스트
• contact.html — 번호 매겨진 프로젝트 브리프 폼 (학과 + 예산 선택)

핵심 특징

• 다크 모드 — #0e0e0e 배경 + #d4a373 단일 액센트. 작품 색감 그대로 살리는 컨테이너
• 모노스페이스 UI — IBM Plex Mono 로 UI 텍스트 (네비 · 라벨 · 메타) 마킹. 작품 텍스트는 Inter
• JS 카테고리 필터 — work.html 의 필터 탭으로 즉시 필터링 (data attribute 기반)
• 마퀴 텍스트 애니메이션 — 무한 흐르는 서비스 라인업
• 0-radius 모서리 — 칼같은 모서리, 프리랜서 포트폴리오 트렌드
• 완전 반응형 — 작품 그리드 · CV · 폼 모두 모바일 최적화

사용 기술

• Bootstrap 5.3 (CDN)
• Bootstrap Icons 1.11
• Inter (300/400/500) + IBM Plex Mono (Google Fonts)
• Pure CSS Variables
• Vanilla JS (jQuery 없음)

이런 분께 추천

• 독립 그래픽 디자이너 · 브랜드 디자이너 · 일러스트레이터
• 타이포그래퍼 · 에디토리얼 디자이너
• UI/UX 프리랜서 · 웹 디자이너
• 사진작가 · 영상감독 (작품 중심 컨테이너)
• 적게, 잘 보여주고 싶은 모든 크리에이티브

커스터마이즈 가이드

:root {
  --af-bg: #0e0e0e;       /* 배경 */
  --af-text: #f5f3ee;     /* 본문 */
  --af-accent: #d4a373;   /* 머스타드 액센트 */
}

한 줄만 바꿔도 전혀 다른 분위기로 전환됩니다. 더 어두운 검정, 더 따뜻한 베이지, 또는 화이트 모드로도 손쉽게 전환 가능.

라이선스

단일 도메인 라이선스 — 1개 도메인/프로덕트에 무제한 사용. 재판매 · 재배포 · 템플릿 마켓플레이스 등록은 불가합니다.

지원

구매 후 12개월 업데이트 · 기술 지원 무료 제공.