create-claude-pipeline 0.1.0

package/template/.claude/skills/write-dockerfile/SKILL.md

@@ -0,0 +1,269 @@
+---
+name: write-dockerfile
+description: "인프라 엔지니어가 FE/BE용 Dockerfile을 작성할 때 멀티 스테이지 빌드와 레이어 캐싱 최적화를 적용하기 위해 참조하는 skill. Infra Agent가 Dockerfile을 새로 작성하거나, 기존 Dockerfile을 개선하거나, 컨테이너 이미지를 최적화할 때 반드시 사용한다. 'Dockerfile 작성', 'Docker 이미지 빌드', '컨테이너화', '멀티 스테이지 빌드', '이미지 크기 최적화', '.dockerignore', 'HEALTHCHECK' 등의 상황에서 트리거된다."
+---
+
+# Write Dockerfile
+
+인프라 엔지니어가 FE/BE 서비스용 Dockerfile을 작성할 때 따르는 패턴이다.
+
+Dockerfile은 한 번 작성하면 모든 빌드와 배포에서 반복 실행된다. 잘못된 레이어 순서는 매 빌드마다 불필요한 재설치를 유발하고, 단일 스테이지 빌드는 프로덕션 이미지에 빌드 도구를 포함시켜 이미지 크기와 보안 위험을 키운다. 이 skill은 "빌드는 빠르게, 이미지는 작게, 실행은 안전하게"를 달성하는 패턴을 제공한다.
+
+---
+
+## 멀티 스테이지 빌드 구조
+
+하나의 Dockerfile을 3개 스테이지로 나눈다. 각 스테이지는 자기 역할만 수행하고, 최종 이미지(runner)에는 실행에 필요한 것만 남긴다. 이렇게 하면 빌드 도구(TypeScript 컴파일러, devDependencies 등)가 프로덕션 이미지에 들어가지 않아 이미지 크기가 줄고 공격 표면이 줄어든다.
+
+```
+Stage 1 (deps)    → 의존성 설치만
+Stage 2 (builder) → 빌드만
+Stage 3 (runner)  → 실행에 필요한 것만 복사
+```
+
+### Next.js (FE) Dockerfile
+
+```dockerfile
+# ──── Stage 1: 의존성 설치 ────
+FROM node:20-alpine AS deps
+WORKDIR /app
+
+# 의존성 파일만 먼저 복사 — 소스가 바뀌어도 이 레이어는 캐시됨
+COPY package.json package-lock.json ./
+RUN npm ci --ignore-scripts
+
+# ──── Stage 2: 빌드 ────
+FROM node:20-alpine AS builder
+WORKDIR /app
+
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js standalone 모드 — 필요한 파일만 .next/standalone에 출력
+ENV NEXT_TELEMETRY_DISABLED=1
+RUN npm run build
+
+# ──── Stage 3: 실행 ────
+FROM node:20-alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+# 보안: root가 아닌 전용 유저로 실행
+RUN addgroup --system --gid 1001 nodejs \
+ && adduser --system --uid 1001 nextjs
+
+# standalone 빌드 결과만 복사
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+HEALTHCHECK --interval=30s --timeout=3s --start-period=10s --retries=3 \
+  CMD wget --no-verbose --tries=1 --spider http://localhost:3000/ || exit 1
+
+CMD ["node", "server.js"]
+```
+
+### Express/Fastify (BE) Dockerfile
+
+```dockerfile
+# ──── Stage 1: 의존성 설치 ────
+FROM node:20-alpine AS deps
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+RUN npm ci --ignore-scripts
+
+# ──── Stage 2: 빌드 ────
+FROM node:20-alpine AS builder
+WORKDIR /app
+
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+RUN npm run build
+
+# ──── Stage 3: 실행 ────
+FROM node:20-alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+
+# 보안: 전용 유저 생성
+RUN addgroup --system --gid 1001 appgroup \
+ && adduser --system --uid 1001 appuser
+
+# 프로덕션 의존성만 설치 — devDependencies 제외
+COPY package.json package-lock.json ./
+RUN npm ci --ignore-scripts --omit=dev
+
+# 빌드 결과물만 복사
+COPY --from=builder --chown=appuser:appgroup /app/dist ./dist
+
+# Prisma 사용 시 — 스키마와 클라이언트도 복사
+# COPY --from=builder /app/node_modules/.prisma ./node_modules/.prisma
+# COPY --from=builder /app/prisma ./prisma
+
+USER appuser
+
+EXPOSE 4000
+ENV PORT=4000
+
+HEALTHCHECK --interval=30s --timeout=3s --start-period=10s --retries=3 \
+  CMD wget --no-verbose --tries=1 --spider http://localhost:4000/health || exit 1
+
+CMD ["node", "dist/index.js"]
+```
+
+---
+
+## 레이어 캐싱 최적화
+
+Docker는 각 명령어를 레이어로 캐싱한다. 레이어가 변경되면 그 이후 모든 레이어가 무효화된다. 따라서 변경 빈도가 낮은 것을 위에, 높은 것을 아래에 배치해야 캐시 히트율이 높아진다.
+
+### 올바른 순서
+
+```dockerfile
+# 1. 베이스 이미지          — 거의 안 바뀜
+FROM node:20-alpine
+
+# 2. 시스템 패키지          — 거의 안 바뀜
+RUN apk add --no-cache curl
+
+# 3. 의존성 파일 복사       — 패키지 추가/삭제 시에만 바뀜
+COPY package.json package-lock.json ./
+
+# 4. 의존성 설치            — 3이 바뀔 때만 재실행
+RUN npm ci
+
+# 5. 소스 코드 복사         — 코드 수정마다 바뀜
+COPY . .
+
+# 6. 빌드                  — 5가 바뀔 때마다 재실행
+RUN npm run build
+```
+
+### 흔한 실수
+
+```dockerfile
+# ❌ 나쁜 예: 소스를 먼저 복사하면 코드 한 줄 바꿔도 npm ci가 다시 실행됨
+COPY . .
+RUN npm ci
+RUN npm run build
+
+# ✅ 좋은 예: 의존성 파일만 먼저 복사
+COPY package.json package-lock.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+```
+
+---
+
+## 보안 원칙
+
+### root 유저로 실행하지 않기
+
+컨테이너가 root로 실행되면 취약점을 통해 호스트 시스템까지 영향을 받을 수 있다. 전용 유저를 생성하고 해당 유저로 실행한다.
+
+```dockerfile
+RUN addgroup --system --gid 1001 appgroup \
+ && adduser --system --uid 1001 appuser
+USER appuser
+```
+
+### 시크릿을 이미지에 넣지 않기
+
+`ARG`나 `ENV`로 시크릿을 전달하면 이미지 레이어에 기록되어 누구나 `docker history`로 볼 수 있다.
+
+```dockerfile
+# ❌ 시크릿이 이미지에 기록됨
+ARG DATABASE_URL
+ENV DATABASE_URL=$DATABASE_URL
+
+# ✅ 런타임에 환경변수로 주입
+# docker run -e DATABASE_URL=... my-image
+# 또는 docker-compose의 env_file 사용
+```
+
+빌드 시 시크릿이 필요한 경우(예: private npm registry) `--mount=type=secret`을 사용한다:
+
+```dockerfile
+RUN --mount=type=secret,id=npmrc,target=/app/.npmrc npm ci
+```
+
+### .dockerignore 반드시 작성
+
+빌드 컨텍스트에 불필요한 파일이 포함되면 빌드 시간과 이미지 크기가 늘어나고, `.env` 같은 시크릿이 이미지에 포함될 수 있다.
+
+```
+# .dockerignore
+node_modules
+.next
+dist
+.git
+.env
+.env.*
+*.md
+.vscode
+.idea
+coverage
+__tests__
+```
+
+---
+
+## 헬스체크
+
+헬스체크가 없으면 Docker와 오케스트레이터(docker-compose, Kubernetes)가 컨테이너 상태를 알 수 없다. 서비스가 hang 상태여도 "healthy"로 판단되어 트래픽이 계속 들어온다.
+
+```dockerfile
+HEALTHCHECK --interval=30s --timeout=3s --start-period=10s --retries=3 \
+  CMD wget --no-verbose --tries=1 --spider http://localhost:PORT/health || exit 1
+```
+
+| 옵션 | 값 | 설명 |
+|------|-----|------|
+| `--interval` | 30s | 체크 간격 |
+| `--timeout` | 3s | 응답 대기 시간 |
+| `--start-period` | 10s | 시작 후 유예 시간 (앱 초기화 대기) |
+| `--retries` | 3 | 연속 실패 시 unhealthy 판정 |
+
+alpine 이미지에는 `curl`이 없으므로 `wget`을 사용한다. curl이 필요하면 `apk add --no-cache curl`로 설치한다.
+
+---
+
+## 이미지 크기 최소화
+
+| 기법 | 효과 |
+|------|------|
+| `alpine` 기반 이미지 사용 | ~120MB → ~50MB |
+| 멀티 스테이지로 빌드 도구 제외 | devDependencies, TypeScript 등 제거 |
+| `npm ci --omit=dev` (runner) | 프로덕션 의존성만 설치 |
+| Next.js `standalone` 모드 | 필요한 node_modules만 포함 |
+| `.dockerignore`로 불필요 파일 제외 | 빌드 컨텍스트 축소 |
+| `--no-cache` 플래그로 apk 캐시 제거 | 패키지 매니저 캐시 제거 |
+
+---
+
+## Dockerfile 작성 체크리스트
+
+Dockerfile을 작성한 후 아래를 확인한다:
+
+1. [ ] **멀티 스테이지** — deps / builder / runner 3단계 구성
+2. [ ] **레이어 캐싱** — package.json 먼저 복사 → npm ci → 소스 복사 순서
+3. [ ] **alpine 이미지** — `node:XX-alpine` 사용
+4. [ ] **비root 유저** — `adduser` + `USER` 지시어 설정
+5. [ ] **시크릿 미포함** — ARG/ENV에 비밀번호, API 키 없음
+6. [ ] **.dockerignore** — node_modules, .env, .git 등 제외
+7. [ ] **HEALTHCHECK** — 헬스체크 엔드포인트 설정
+8. [ ] **EXPOSE** — 사용하는 포트 명시
+9. [ ] **ENV NODE_ENV=production** — runner 스테이지에 설정
+10. [ ] **이미지 빌드 테스트** — `docker build` 성공 확인

package/template/.claude/skills/write-plan-doc/SKILL.md

@@ -0,0 +1,164 @@
+---
+name: write-plan-doc
+description: "기획자 Agent가 Phase 1에서 기획안을 작성할 때 사용하는 skill. context/01_plan.md를 7개 섹션(개요, 유저 스토리, 기능 명세, 화면 목록, API 초안, 엣지케이스, 비기능 요구사항) 구조로 작성하고, 사람이 보기 편한 HTML 보고서(context/01_plan.html)도 함께 생성한다. '기획안 작성', '01_plan 생성', 'Phase 1 시작', '기획 문서 만들기' 등의 상황에서 반드시 사용한다."
+---
+
+# Write Plan Doc
+
+기획자 Agent가 `context/01_plan.md`를 작성하고, 같은 내용을 사람이 보기 편한 `context/01_plan.html`로 변환하는 skill이다.
+
+마크다운은 다른 Agent들이 기계적으로 읽는 용도이고, HTML은 사용자가 브라우저에서 검토하는 용도이다. 두 파일의 **내용은 동일**하되 **형식만 다르다**.
+
+---
+
+## Step 1: 입력 확인
+
+기획안을 작성하려면 `context/00_requirements.md`가 필요하다. 이 파일에서 다음을 추출한다:
+
+- 요청 내용 (무엇을 만드는지)
+- 작업 유형 (신규/수정/버그/리팩토링)
+- 영향 범위 (FE/BE/Infra)
+- 관련 기존 파일 목록
+
+`00_requirements.md`가 없으면 작성을 중단하고 "Phase 0이 아직 완료되지 않았습니다"라고 알린다.
+
+---
+
+## Step 2: context/01_plan.md 작성
+
+아래 7개 섹션을 **이 순서대로** 작성한다. 섹션을 건너뛰지 않는다.
+
+```markdown
+# 기획안: [기능명]
+
+## 1. 개요
+
+### 목적
+(이 기능이 왜 필요한지, 어떤 문제를 해결하는지)
+
+### 핵심 가치
+(사용자에게 어떤 가치를 제공하는지 1~3개 bullet)
+
+### 작업 범위
+(이번에 포함하는 것 / 포함하지 않는 것을 명확히 구분)
+
+---
+
+## 2. 유저 스토리
+
+| ID | 사용자 유형 | 스토리 | 우선순위 |
+|----|-----------|--------|---------|
+| US-01 | ... | ...로서 ...하고 싶다, ...하기 위해 | P0/P1/P2 |
+
+---
+
+## 3. 기능 명세
+
+| ID | 기능명 | 설명 | 관련 스토리 | 우선순위 |
+|----|-------|------|-----------|---------|
+| F-01 | ... | ... | US-01 | P0/P1/P2 |
+
+---
+
+## 4. 화면 목록
+
+| ID | 화면명 | 경로 | 주요 요소 | 관련 기능 |
+|----|-------|------|----------|----------|
+| S-01 | ... | /path | ... | F-01 |
+
+---
+
+## 5. API 초안
+
+| Method | Path | 설명 | 인증 여부 | 관련 기능 |
+|--------|------|------|----------|----------|
+| POST | /api/... | ... | Y/N | F-01 |
+
+---
+
+## 6. 엣지케이스 & 예외 처리
+
+| ID | 상황 | 예상 동작 | 관련 기능 |
+|----|------|----------|----------|
+| E-01 | ... | ... | F-01 |
+
+---
+
+## 7. 비기능 요구사항
+
+| 항목 | 기준 | 비고 |
+|------|------|------|
+| 성능 | ... | ... |
+| 보안 | ... | ... |
+| 접근성 | ... | ... |
+```
+
+### 작성 가이드
+
+**ID 체계** — 각 항목에 고유 ID를 부여한다(US-01, F-01, S-01, E-01). 섹션 간 상호 참조할 때 이 ID를 사용한다. 이렇게 하면 나중에 설계/구현 단계에서 "F-03 구현해" 같이 정확하게 지칭할 수 있다.
+
+**우선순위 기준:**
+- **P0**: 없으면 기능이 동작하지 않는 것
+- **P1**: 없어도 동작하지만 사용자 경험에 큰 영향
+- **P2**: 있으면 좋은 것 (nice-to-have)
+
+**API 초안의 수준** — 이 단계에서는 대략적인 엔드포인트와 역할만 정의한다. 요청/응답 상세 스키마는 Phase 2(BE 설계자)가 담당한다. 기획자가 API를 너무 상세하게 쓰면 설계자의 재량이 줄어들므로, 의도를 전달하는 수준으로 작성한다.
+
+**엣지케이스** — 이 섹션이 기획의 품질을 결정한다. "해피 패스만 생각하면 안 됨"이라는 원칙을 기억하고, 최소 3~5개의 경계 조건을 도출한다. 예: 동시 접근, 빈 입력, 권한 없는 사용자, 네트워크 끊김 등.
+
+---
+
+## Step 3: context/01_plan.html 생성
+
+`context/01_plan.md` 작성이 완료되면, 같은 내용을 HTML 보고서로 변환한다.
+
+### HTML 생성 방법
+
+`assets/plan_template.html` 파일을 읽어서 템플릿으로 사용한다.
+
+템플릿에는 두 개의 플레이스홀더가 있다:
+- `{{PLAN_TITLE}}` → 기획안 제목 (예: "소셜 로그인 기능")
+- `{{PLAN_CONTENT}}` → 마크다운을 HTML로 변환한 본문
+
+**변환 규칙:**
+1. 각 `## N. 섹션명`을 `<section>` 블록으로 감싼다
+2. 마크다운 표를 `<table>` 태그로 변환한다
+3. bullet 리스트를 `<ul><li>` 로 변환한다
+4. ID(US-01, F-01 등)를 `<code>` 태그로 감싼다
+
+변환 결과를 `context/01_plan.html`에 저장한다.
+
+---
+
+## Step 4: 완료 보고
+
+두 파일 모두 저장한 후 보고한다:
+
+```
+기획안 작성 완료:
+- context/01_plan.md (Agent용 마크다운)
+- context/01_plan.html (브라우저에서 열어 검토)
+
+섹션 요약:
+  1. 개요: [한 줄 요약]
+  2. 유저 스토리: N개
+  3. 기능 명세: N개
+  4. 화면 목록: N개
+  5. API 초안: N개
+  6. 엣지케이스: N개
+  7. 비기능 요구사항: N개 항목
+```
+
+---
+
+## 품질 체크리스트
+
+파일을 저장하기 전에 점검한다:
+
+- [ ] 7개 섹션이 모두 있는가?
+- [ ] 모든 항목에 고유 ID가 부여되었는가?
+- [ ] 섹션 간 상호 참조(관련 기능, 관련 스토리)가 올바른가?
+- [ ] 엣지케이스가 최소 3개 이상인가?
+- [ ] API 초안이 상세 스키마 없이 의도 전달 수준인가?
+- [ ] HTML 파일이 브라우저에서 깨지지 않는 완전한 문서인가?
+- [ ] MD와 HTML의 내용이 일치하는가?

package/template/.claude/skills/write-plan-doc/assets/plan_template.html

@@ -0,0 +1,251 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{PLAN_TITLE}} — 기획안</title>
+  <style>
+    :root {
+      --bg: #f8f9fa;
+      --card-bg: #ffffff;
+      --border: #e2e8f0;
+      --text: #1a202c;
+      --text-muted: #718096;
+      --primary: #3182ce;
+      --primary-light: #ebf8ff;
+      --sidebar-width: 240px;
+      --p0: #e53e3e;
+      --p1: #dd6b20;
+      --p2: #38a169;
+    }
+
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.6;
+    }
+
+    /* Sidebar */
+    .sidebar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: var(--sidebar-width);
+      height: 100vh;
+      background: var(--card-bg);
+      border-right: 1px solid var(--border);
+      padding: 24px 16px;
+      overflow-y: auto;
+      z-index: 10;
+    }
+
+    .sidebar h2 {
+      font-size: 14px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--text-muted);
+      margin-bottom: 16px;
+    }
+
+    .sidebar nav a {
+      display: block;
+      padding: 8px 12px;
+      margin-bottom: 4px;
+      color: var(--text);
+      text-decoration: none;
+      font-size: 14px;
+      border-radius: 6px;
+      transition: background 0.15s;
+    }
+
+    .sidebar nav a:hover,
+    .sidebar nav a.active {
+      background: var(--primary-light);
+      color: var(--primary);
+    }
+
+    /* Main */
+    .main {
+      margin-left: var(--sidebar-width);
+      padding: 40px 48px;
+      max-width: 960px;
+    }
+
+    .main h1 {
+      font-size: 28px;
+      font-weight: 700;
+      margin-bottom: 8px;
+    }
+
+    .main .subtitle {
+      color: var(--text-muted);
+      font-size: 14px;
+      margin-bottom: 32px;
+    }
+
+    /* Section cards */
+    section {
+      background: var(--card-bg);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 28px 32px;
+      margin-bottom: 24px;
+    }
+
+    section h2 {
+      font-size: 20px;
+      font-weight: 600;
+      margin-bottom: 16px;
+      padding-bottom: 8px;
+      border-bottom: 2px solid var(--primary);
+      color: var(--primary);
+    }
+
+    section h3 {
+      font-size: 16px;
+      font-weight: 600;
+      margin: 16px 0 8px;
+    }
+
+    section p {
+      margin-bottom: 12px;
+    }
+
+    section ul, section ol {
+      margin: 8px 0 12px 20px;
+    }
+
+    section li {
+      margin-bottom: 4px;
+    }
+
+    /* Tables */
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 12px 0;
+      font-size: 14px;
+    }
+
+    thead th {
+      background: var(--bg);
+      font-weight: 600;
+      text-align: left;
+      padding: 10px 12px;
+      border-bottom: 2px solid var(--border);
+      white-space: nowrap;
+    }
+
+    tbody td {
+      padding: 10px 12px;
+      border-bottom: 1px solid var(--border);
+      vertical-align: top;
+    }
+
+    tbody tr:hover {
+      background: #f7fafc;
+    }
+
+    /* ID badges */
+    code {
+      background: var(--primary-light);
+      color: var(--primary);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 13px;
+      font-family: 'SF Mono', 'Fira Code', monospace;
+    }
+
+    /* Priority badges */
+    .badge {
+      display: inline-block;
+      padding: 2px 8px;
+      border-radius: 10px;
+      font-size: 12px;
+      font-weight: 600;
+      color: #fff;
+    }
+    .badge-p0 { background: var(--p0); }
+    .badge-p1 { background: var(--p1); }
+    .badge-p2 { background: var(--p2); }
+
+    /* Method badges */
+    .method {
+      display: inline-block;
+      padding: 2px 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 700;
+      font-family: monospace;
+    }
+    .method-get { background: #c6f6d5; color: #22543d; }
+    .method-post { background: #fefcbf; color: #744210; }
+    .method-put { background: #bee3f8; color: #2a4365; }
+    .method-patch { background: #e9d8fd; color: #44337a; }
+    .method-delete { background: #fed7d7; color: #742a2a; }
+
+    /* Auth badge */
+    .auth-y { color: var(--p0); font-weight: 600; }
+    .auth-n { color: var(--text-muted); }
+
+    /* Responsive */
+    @media (max-width: 768px) {
+      .sidebar { display: none; }
+      .main { margin-left: 0; padding: 20px 16px; }
+    }
+
+    /* Print */
+    @media print {
+      .sidebar { display: none; }
+      .main { margin-left: 0; max-width: 100%; }
+      section { break-inside: avoid; border: 1px solid #ccc; }
+    }
+  </style>
+</head>
+<body>
+
+<aside class="sidebar">
+  <h2>목차</h2>
+  <nav>
+    <a href="#sec-1">1. 개요</a>
+    <a href="#sec-2">2. 유저 스토리</a>
+    <a href="#sec-3">3. 기능 명세</a>
+    <a href="#sec-4">4. 화면 목록</a>
+    <a href="#sec-5">5. API 초안</a>
+    <a href="#sec-6">6. 엣지케이스</a>
+    <a href="#sec-7">7. 비기능 요구사항</a>
+  </nav>
+</aside>
+
+<main class="main">
+  <h1>{{PLAN_TITLE}}</h1>
+  <p class="subtitle">기획안 · 생성일: <span id="gen-date"></span></p>
+
+  {{PLAN_CONTENT}}
+</main>
+
+<script>
+  document.getElementById('gen-date').textContent = new Date().toLocaleDateString('ko-KR');
+
+  // Sidebar active state on scroll
+  const sections = document.querySelectorAll('section[id]');
+  const navLinks = document.querySelectorAll('.sidebar nav a');
+
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        navLinks.forEach(link => link.classList.remove('active'));
+        const active = document.querySelector(`.sidebar nav a[href="#${entry.target.id}"]`);
+        if (active) active.classList.add('active');
+      }
+    });
+  }, { rootMargin: '-20% 0px -60% 0px' });
+
+  sections.forEach(sec => observer.observe(sec));
+</script>
+
+</body>
+</html>