Portfolio Preview Directions Implementation Plan
For Hermes: Use subagent-driven-development skill to implement this plan task-by-task.
Goal: Create two separate, non-production portfolio previews that share verified work evidence while presenting Kim Youngbin either as an individual publisher or as a publishing studio.
Architecture: Keep the current /portfolio/ archive unchanged. Build each preview as a standalone static route after this wireframe review: /portfolio-profile-preview/ and /publishing-studio-preview/. Reuse only factual project names and public destinations already present in /portfolio/; do not introduce metrics, client claims, contact details, or synthetic case evidence.
Tech Stack: Semantic HTML, scoped CSS, small progressive-enhancement JavaScript only when necessary, Python standard-library static assertions.
Shared positioning
웹 퍼블리셔로서 반응형 구현과 웹 접근성을 기반으로, 생성형 AI를 실무에 적용해 작업 속도와 품질을 함께 높입니다. 반복 업무는 n8n·Google Sheets·봇 연동 등으로 자동화하고, 구현 결과는 실제 동작하는 도구와 케이스 스터디로 검증·문서화합니다. 디자인 시안을 코드로 정확히 구현하는 데서 그치지 않고, QA와 협업 과정까지 개선하는 퍼블리셔를 지향합니다.
Direction A — Profile-led
Audience: Hiring managers scanning for role fit and working style.
Surface: Decide / Learn. The reader should understand the person, their judgment, and their evidence in a short first pass.
Wireframe order:
- Name + role statement
- Short professional profile
- Four working principles: implement, verify, document, automate
- Selected work with concise role/result descriptions
- Work method: request → implementation → QA → documentation
- Contact / public work routes only after the user confirms the contact detail
Visual posture: Editorial, human, calm. Ivory background, dark ink, one restrained green accent, Korean-led typography. Avoid terminal imagery and decorative metrics.
Direction B — Studio / service-led
Audience: Teams or clients deciding whether the capability is relevant to an assignment.
Surface: Decide / Learn. The reader should identify service scope, method, and proof before personal background.
Wireframe order:
- Studio name + service promise
- Four service areas: publishing, operational UI, accessibility QA, workflow automation
- Delivery method: discover → build → verify → hand off
- Evidence modules tied to actual public projects/tools
- Engagement boundary: no fabricated pricing, turnaround, or client roster
- Inquiry CTA only after the user confirms the destination
Visual posture: Structured, service-oriented, precise. Warm white field, charcoal rules, cobalt accent, denser information hierarchy than Direction A.
Implementation tasks after direction selection
Task 1: Create a profile preview route
Files:
- Create:
static/portfolio-profile-preview/index.html - Create:
static/portfolio-profile-preview/styles.css - Test:
tests/test_portfolio_preview_wireframes.py
Verification: Assert semantic landmarks and confirmed internal/public work targets; open desktop and 390px mobile views over HTTP.
Task 2: Create a studio preview route
Files:
- Create:
static/publishing-studio-preview/index.html - Create:
static/publishing-studio-preview/styles.css - Test:
tests/test_portfolio_preview_wireframes.py
Verification: Assert service-area headings, no invented commercial claims, and semantic landmarks; open desktop and 390px mobile views over HTTP.
Task 3: Review and publish only selected assets
Files:
- Modify only the selected preview route and its test.
Verification: Build the static site, copy only the approved preview route to its matching web root, then read the exact HTTPS URL back with HTTP 200. Do not invoke the project-wide deployment script while unrelated changes are present.