Portfolio Website Context

Quick Reference

섹션 구조

├── nav.navbar           # 네비게이션
├── section.hero         # 히어로 (인트로)
├── section.about        # 소개
├── section.experience   # 경력
├── section.education    # 학력
├── section.certificates # 수료/자격
├── section.awards       # 수상
├── section.licenses     # 면허
├── section.skills       # 기술 스택
├── section.projects     # 프로젝트
├── section.contact      # 연락처
└── footer               # 푸터

프로젝트 추가 워크플로우

Step 1: HTML 카드 추가

index.html의 #projects 섹션에 카드 추가:

<article class="project-card fade-in" data-project="project-id" data-category="educational">
  <div class="project-card__image-wrapper">
    <img src="images/projects/image.png" alt="Title" class="project-card__image">
  </div>
  <div class="project-card__content">
    <h3 class="project-card__title">
      <span class="project-card__category-text">[Category]</span>
      <span class="project-card__title-main">Title</span>
    </h3>
    <p class="project-card__description">Description</p>
    <div class="project-card__tags">
      <span class="project-card__tag">Tag1</span>
    </div>
  </div>
  <div class="project-card__footer">
    <a href="https://github.com/..." class="project-card__github-btn">
      <i class="fa-brands fa-github"></i> GitHub
    </a>
  </div>
</article>

Step 2: projectData 추가

scripts.js의 projectData 객체에 데이터 추가.

상세 템플릿: reference/project-template.md

BEM 네이밍 규칙

.block                 # 컴포넌트 (예: project-card)
.block__element        # 하위 요소 (예: project-card__title)
.block--modifier       # 상태/변형 (예: project-card--featured)

CSS 변수 (자주 사용)

모달 시스템

프로젝트 카드 클릭 시 scripts.js의 projectData에서 데이터를 읽어 모달 표시.

지원 기능

• meta: team, role, period, context, deployment
• disclaimer: 회사 프로젝트 면책 조항
• sections: title, content, list, image, gallery, subsections
• tags: 기술 태그 배열

카테고리

Related Files

• reference/project-template.md - projectData 상세 템플릿
• reference/section-styles.md - 섹션별 스타일 가이드