<!-- web-practice/portfolio/projects.html (project-grid 내부, 카드 6개) -->
<div class="project-grid">
  <article class="project-card">
    <img src="images/project-01.svg" alt="오늘의 날씨 프로젝트 화면" width="1200" height="800" />
    <h2>오늘의 날씨</h2>
    <p>위치 기반 날씨를 카드로 보여주는 웹앱입니다. 오프라인에서도 마지막 데이터를 보여줍니다.</p>
    <p>핵심 파일은 <code>weather-app/src/geo.js</code>입니다.</p>
    <pre><code>navigator.geolocation.getCurrentPosition((pos) => {
  fetchWeather(pos.coords.latitude, pos.coords.longitude);
});</code></pre>
    <blockquote cite="https://example.com/reviews/weather">
      <p>실제 위치 기반 정보가 정확해서 매일 씁니다.</p>
      <footer>— 박서연, <cite>같은 팀 동료</cite></footer>
    </blockquote>
    <a href="https://example.com/weather" target="_blank" rel="noopener noreferrer">바로가기</a>
  </article>
 
  <article class="project-card">
    <img src="images/project-02.svg" alt="독서 기록 bookshelf 프로젝트 화면" width="1200" height="800" />
    <h2>독서 기록 bookshelf</h2>
    <p>읽은 책과 별점을 기록하고 통계를 보는 React 앱입니다.</p>
    <p>통계는 <code>booksReducer.js</code>의 <code>reduce</code> 호출로 계산합니다.</p>
    <blockquote cite="https://example.com/reviews/bookshelf">
      <p>다 읽은 책을 한눈에 정리해 주니 독서 습관 관리가 쉬워졌습니다.</p>
      <footer>— 김도윤, <cite>베타 사용자</cite></footer>
    </blockquote>
    <a href="https://example.com/bookshelf" target="_blank" rel="noopener noreferrer">바로가기</a>
  </article>
 
  <article class="project-card">
    <img src="images/project-03.svg" alt="메모 앱 notes 프로젝트 화면" width="1200" height="800" />
    <h2>메모 앱 notes</h2>
    <p>브라우저 저장소만으로 동작하는 메모 앱입니다. 검색은 Worker가 담당합니다.</p>
    <p>검색 로직은 <code>search.worker.js</code>에 있습니다.</p>
    <blockquote cite="https://example.com/reviews/notes">
      <p>메모가 몇백 개여도 검색이 즉시 됩니다.</p>
      <footer>— 이하은, <cite>베타 사용자</cite></footer>
    </blockquote>
    <a href="https://example.com/notes" target="_blank" rel="noopener noreferrer">바로가기</a>
  </article>
 
  <article class="project-card">
    <img src="images/project-04.svg" alt="접근성 체크리스트 프로젝트 화면" width="1200" height="800" />
    <h2>접근성 체크리스트</h2>
    <p>WCAG 항목을 하나씩 점검하는 정적 사이트입니다.</p>
    <p>항목마다 <code>role</code>과 <code>aria-*</code> 속성 예시를 보여줍니다.</p>
    <blockquote cite="https://example.com/reviews/a11y">
      <p>사내 접근성 교육 자료로 그대로 썼습니다.</p>
      <footer>— 정민재, <cite>같은 팀 동료</cite></footer>
    </blockquote>
    <a href="https://example.com/a11y" target="_blank" rel="noopener noreferrer">바로가기</a>
  </article>
 
  <article class="project-card">
    <img src="images/project-05.svg" alt="디자인 토큰 미리보기 프로젝트 화면" width="1200" height="800" />
    <h2>디자인 토큰 미리보기</h2>
    <p>CSS 변수로 만든 색·간격 토큰을 한 화면에서 비교합니다.</p>
    <p>토큰은 <code>--color-primary</code>처럼 커스텀 속성으로 정의합니다.</p>
    <blockquote cite="https://example.com/reviews/tokens">
      <p>디자인 시스템 문서로 참고하기 좋습니다.</p>
      <footer>— 오지훈, <cite>디자이너</cite></footer>
    </blockquote>
    <a href="https://example.com/tokens" target="_blank" rel="noopener noreferrer">바로가기</a>
  </article>
 
  <article class="project-card">
    <img src="images/project-06.svg" alt="todo-cli 프로젝트 화면" width="1200" height="800" />
    <h2>todo-cli</h2>
    <p>터미널에서 쓰는 할 일 관리 도구입니다. 파일에 저장하고 통계를 냅니다.</p>
    <p>
      터미널에 <kbd>todo add "책 읽기"</kbd>를 입력하면 <samp>할 일이 추가되었습니다</samp>가 출력됩니다.
    </p>
    <blockquote cite="https://example.com/reviews/todo-cli">
      <p>마우스 없이 할 일을 관리하니 더 빠릅니다.</p>
      <footer>— 최유나, <cite>베타 사용자</cite></footer>
    </blockquote>
    <a href="https://example.com/todo-cli" target="_blank" rel="noopener noreferrer">바로가기</a>
  </article>
</div>