AI Technical Consultant / GenAI Pre-Sales 포지션을 위한 개인 포트폴리오 사이트.
고객 요구사항을 RAG/LLM 기반 PoC, 데모, 제안서, 솔루션 아키텍처로 연결하는 컨설팅 역량을 보여주는 정적 사이트입니다.
- Live: www.hajaehwan.com
- Portfolio PDF: hajaehwan.com/portfolio.pdf
- LinkedIn: linkedin.com/in/hajaehwan
- GitHub: github.com/hwan96-ai
- AI Technical Consultant
- GenAI Pre-Sales
- RAG / LLM PoC 기획 및 구현
- Demo / Proposal / Solution Architecture
- LLM-assisted Rapid Prototyping
이 포지셔닝에서 벗어나는 표현(AI 모델 연구자, 풀스택 전문가, 딥러닝 연구자, 모든 것을 혼자 만든 사람 등)은 사용하지 않습니다.
- Next.js 16 (App Router)
- TypeScript (strict)
- Tailwind CSS v4
- lucide-react
외부 백엔드, 데이터베이스, 헤비 애니메이션 라이브러리는 사용하지 않습니다.
src/app/page.tsx 기준 순서:
- Hero
- About
- What I Do
- Featured Projects
- All Projects
- Case Studies (12-블록 구조)
- Consulting & Proposal Experience
- Technical Stack
- Awards & News
- Certifications
- GitHub & Demo
- Contact
/— 메인 포트폴리오 (위 12개 섹션 단일 페이지)/projects— 모든 9개 프로젝트 인덱스 (P5)/projects/[slug]— 프로젝트별 정적 상세 페이지 (P5,generateStaticParams로 9개 사전 생성)
이 사이트의 표시 콘텐츠는 아래 규칙을 절대 위반하지 않습니다.
- 내부 고객사명은 공개 사이트에 노출하지 않는다. 필요한 경우 공개 표기는
Wall Pad K사로 통일한다. - AI Champion 주최 표기는 반드시
과학기술정보통신부로 유지한다. Coming Soon, placeholder anchor links,[needs review],needsReview는 공개 렌더링되어서는 안 된다.- 사실(기간, 역할, 주최, 수치)은
src/data/의 원본을 수정 없이 그대로 사용한다.
PR 또는 콘텐츠 수정 시 위 규칙을 위반하지 않는지 검증한다.
npm install
npm run dev기본 포트는 http://localhost:3000 입니다.
npm run lint
npm run typecheck
npm run build또는 한 번에:
npm run check배포 전 반드시 모두 통과해야 합니다.
추가 안전 검사 (배포 전 권장):
grep -r "Coming Soon" src/
grep -rE 'href="#[^"]*"' src/
grep -rn "needsReview" src/app src/components모두 0건이어야 합니다.
src/
app/ # Next.js App Router (layout, page, globals.css)
components/ # 섹션 컴포넌트 (Header, Hero, Projects, ...)
components/ui/ # 재사용 UI (ButtonLink, Card, SectionHeader, TagChip)
data/ # 사이트 콘텐츠 단일 소스 (profile, projects, awards, ...)
public/ # favicon, og-image, profile, portfolio PDF
_references/ # 작업 참고용 (PRD, work orders) — 빌드 미포함
모든 텍스트, 링크, 프로젝트, 자격증 등은 src/data/ 내의 타입된 파일에 모여 있습니다:
profile.ts— Hero, About, nav, contactprojects.ts— Featured / All / Consulting 프로젝트caseStudyBodies.ts— Case Studies 12-블록 본문awards.ts/certifications.ts/technicalStack.ts
UI 구조 변경 없이 내용만 갱신하려면 이 파일들만 수정하면 됩니다.
src/app/layout.tsx에 다음이 포함되어 있습니다.
- Open Graph 메타데이터 (1200×630 OG 이미지)
- Twitter Card 메타데이터
- Robots (index, follow)
- Canonical URL
- JSON-LD
Person스키마 (sameAs: GitHub / LinkedIn, jobTitle, knowsAbout) - JSON-LD
WebSite스키마 (inLanguage: ko-KR)
배포 후 Google Rich Results Test로 검증 가능합니다.
Vercel 기본 설정으로 배포됩니다. 별도 환경 변수, 빌드 커맨드 변경은 필요 없습니다.
main 브랜치에 머지하면 production이 자동 배포됩니다.
- P0 / P1 / P2 / P3 / P4 / P5 완료. 각 단계의 변경 내역은
_references/profile/work-orders/의 work-order 문서를 참조. - P2: Consulting & Proposal 섹션, 브랜드 OG 이미지, SEO 메타데이터 보강.
- P3: JSON-LD Person/WebSite 스키마, 키보드 focus-visible 링,
prefers-reduced-motion지원, README 정비. - P4: 키보드 focus ring 색상 일관성 개선 (
outline-color를 브랜드 teal로 강제하여 일부 링크가 텍스트 색상을 상속하던 문제 해결). 외부 수동 검증 체크리스트는_references/profile/work-orders/P4_COMPLETION_CHECKLIST.md참조. 브랜드 색상 토큰 값은 변경하지 않았다. - P5: (a) 본문용 다크 teal 토큰
--color-teal-text: #0f766e신설 (흰색 대비 4.93:1, teal-bg 대비 4.72:1 — WCAG AA 통과). 기존--color-teal/--color-teal-dark/ focus ring / 버튼 fill 값은 변경하지 않음. (b)/projects인덱스 +/projects/[slug]정적 상세 라우트 9개 추가 (generateStaticParams로 빌드 시 사전 생성, 페이지별 OG/Twitter/JSON-LDCreativeWork메타데이터 포함). 홈페이지 카드 링크는 변경하지 않음 — 상세 페이지는/projects인덱스와 직접 URL로 접근. 자세한 내용 및 잔여 항목(언어 토글은 의도적으로 보류)은_references/profile/work-orders/P5_COMPLETION_CHECKLIST.md참조. - 알려진 후속 작업 (P6 후보):
ButtonLinkprimary variant (bg-teal text-white)는 여전히 2.4:1로 AA 미달. 버튼 배경 변경은 브랜드 결정 필요.- 홈페이지 카드에서
/projects/[slug]상세로 연결할지 여부 (현재는 의도적으로 미연결, IA 결정 필요). - 한국어/영어 언어 토글 — 원천 데이터에 승인된 영문 사본이 필요 (CLAUDE.md §4 source fidelity).
ai-agent-proposal이 Case Studies와 Consulting 양쪽에 의도적으로 노출됨. 두 framings(역할+임팩트 vs 산출물)가 다르고 Consulting 그리드 4-카드 균형이 유지되므로 유지.
- 프로필 원본 사실:
_references/profile/PROFILE_SOURCE.md - 프로젝트 가이드:
CLAUDE.md - 작업 흐름 가이드:
_references/profile/work-orders/WORKFLOW_GUIDE.md