Folio 테마 디자인 시스템
방향
최고의 개발자 블로그 및 포트폴리오(leerob.com, overreacted.io, brittanychiang.com, antfu.me)와 같은 개인 웹사이트를 구축하세요. 한 사람, 한 목소리, 그리고 글이 가장 먼저입니다. 사이트는 잘 정리된 노트처럼 조용하고 빠르며, 텍스트와 경쟁하는 요소가 없어야 합니다. 구체적인 숫자와 코드로 구축하고 배운 것을 보여주세요. 스톡 사진, 마케팅 주장, 장식 효과는 사용하지 마세요.
기초
./theme/views/에 제공된 마크업과 클래스, 그리고 테마의article,blog,code,text,blog레이아웃 및main뷰만 사용하세요.- 시스템 sans-serif, serif, monospace 글꼴과 기존
--pico-*변수를 사용하세요. - 따뜻한 중성 색조(
#2B2924,#6B665E,#E4E0D9,#FBFAF8)와 녹색(#1F7A4D, 다크 모드에서는#4FBF87)을 링크와 첫 번째 버튼에만 사용하고, 코드 블록은 항상 어둡게 유지하세요. - 라이트 모드와 다크 모드를 지원하며, 테마 가능한 배경에 고정된 라이트 색상을 절대 배치하지 마세요.
- 그림자 대신
0.5rem모서리와 얇은 테두리를 사용하세요.
구조
- 홈(
page): 아바타를 이미지로, 역할을 부제목으로, 한 문장 소개와 두 개의 버튼이 있는hero,list레이아웃의blog요소와 "최근 글" 제목, 2열 프로젝트cards, 연락처를 위한cta로 구성됩니다. - 글쓰기(
page): 어떤 주제로 글을 쓰는지에 대한 짧은 설명과 이 페이지를 부모 페이지로 하는 모든 포스트의blog목록입니다. - 포스트(
blog): 글쓰기 아래에 위치하며, 트리에서 가장 최신순으로 정렬됩니다. 각 포스트는article요소(제목, 두 문장 리드, 커버 이미지)로 시작하며, 이어서text, 레벨 2heading,code요소가 옵니다. - 소개, 프로젝트, 사용 도구, 현재 상태 페이지(
page): 레벨 1heading으로 시작합니다. 소개 페이지에는 직무의vertical타임라인이, 사용 도구 페이지에는 카테고리별 도구 목록이, 현재 상태 페이지에는 이번 달에 하는 일과 마지막 업데이트 날짜가 포함됩니다. - 홈 페이지의
folio::profile설정을 작성하세요: 이름, 직함, 회사, 위치, 정사각형 사진, 한 문장 소개, 이메일 주소 및 프로필 링크.
컴포넌트
- 포스트 리드: 문제와 독자가 얻을 수 있는 것을 설명하는 두 문장입니다. 목록 카드에서 이를 소개로 사용합니다.
- 제목: 짧고 구체적인 레벨 2 제목(예: "배치 단위로 백필"); 레벨 3은 그 아래에만 사용합니다. 개요가 표시되도록 최소 두 개 이상 사용하세요.
- 코드: 각 스니펫당 하나의
code요소, 언어 설정, 최대 약 15줄, 실제 실행 가능한 코드. - 콜아웃: 텍스트 요소 내 GitHub 알림(
[!NOTE],[!TIP],[!WARNING]), 포스트당 최대 한두 개. - 프로젝트: 각 프로젝트당 하나의 카드, 이름을 제목으로, 저장소 또는 데모를 링크로, 숫자(별표, 설치 수, 사용자 수)를 포함한 한 문장 설명, 그리고 별도 줄에 인라인 코드 태그로 스택을 표시(예:
`PHP` `Laravel`). - 경험: 타임라인 항목으로 "2023 — 현재" 레이블, "역할, 회사" 제목, 숫자가 포함된 한 문장의 영향 설명, 코드 태그로 스택 표시.
- 수치: 세 가지 핵심 숫자를 위한
figures레이아웃의cards요소 (최대).
접근성
- 건너뛰기 링크, 의미론적 제목, 레이블이 지정된 모드 전환 스위치, 보이는
:focus-visible아웃라인을 유지하세요. - 두 색상 체계(코드 토큰 포함)에서 WCAG 2.2 AA 대비를 유지하세요.
- 커버 이미지와 이름 링크에 대해 대상 다음에 의미 있는 대체 텍스트를 작성하고, "여기를 클릭"과 같은 표현은 사용하지 마세요.
콘텐츠
1인칭으로 작성하고 독자를 "당신"으로 지칭하세요. 버전, 숫자, 실수를 구체적으로 언급하세요. 배경 설명 없이 문제로 포스트를 시작하고, 다음에 무엇을 할지에 대한 내용으로 끝맺으세요. 제목은 평이하고 설명적으로 유지하세요(예: "4억 행 테이블의 무중단 마이그레이션"). 과장된 용어, "간단히", "그냥", 채우기용 서문은 피하세요.