18Original Static HTML / Portfolio surface Astro + JSON data

Hugh Archive Case

정적 HTML 블로그 아카이브를 그대로 노출하지 않고, Astro 페이지와 데이터 기반 분석 카드로 재포장한 공개 사례.

OriginalStatic HTML

원본 스타일을 보존한 snapshot

Portfolio surfaceAstro + JSON data

목록, 분석 카드, drawer UI로 재구성

Case / CaseHugh Archive Case 기준선

html archive brief · portfolio detail

01작업 요약

정적 HTML 블로그 아카이브를 그대로 노출하지 않고, Astro 페이지와 데이터 기반 분석 카드로 재포장한 공개 사례.

이 기준이 흐려지면 페이지가 설명 자료로만 남고, 독자는 어떤 근거와 산출물을 확인해야 하는지 다시 물어봐야 합니다.

Signal	Severity	Meaning	First response
`01_html에서_astro로`	high	HTML에서 Astro로	원본 HTML: /hugh 아래 snapshot으로 보존
`02_포트폴리오_의미`	medium	포트폴리오 의미	이 사례는 HTML을 단순 복사한 것이 아니라, 외부 자료를 공개 가능한 아카이브와 해설 UI로 바꾸는 변환 패턴을 보여준다.

이 페이지를 처음 읽을 때

원본 HTML은 보존 가치가 있을 때만 static archive로 남기고, 독자가 실제로 읽는 화면은 Astro layout, JSON data, 분석 카드로 다시 구성한다.

원본 HTML: /hugh 아래 snapshot으로 보존목록 데이터: JSON으로 관리해설 카드: sanitized HTML로 렌더링외부 레퍼런스임을 명확히 표기

세부 기준을 검토할 때

이 사례는 HTML을 단순 복사한 것이 아니라, 외부 자료를 공개 가능한 아카이브와 해설 UI로 바꾸는 변환 패턴을 보여준다.

포트폴리오 의미OriginalHugh Archive 열기

이 페이지가 어떤 판단을 돕는지 제목, 요약, 첫 절차에서 바로 읽혀야 합니다.

설명만 남기지 않고 기준, 결과물, 다음 페이지가 같은 맥락으로 이어져야 합니다.

내부 경로, 계정, 고객 정보, 미검증 아이디어가 섞이지 않아야 합니다.

읽은 사람이 어디를 보고 무엇을 검토하면 되는지 링크와 체크 항목으로 남아야 합니다.

Next read

Astro로 구성된 공개 아카이브 화면

외부 레퍼런스와 Keystone-native 산출물 분리