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