Skip to content

feat: Hero AI 활용 소개·Repository 링크 + 프로젝트 표지 aspect fill #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ShapeKim98 wants to merge 1 commit into
base: feat/27-editorial-redesign
Choose a base branch
from
Open

feat: Hero AI 활용 소개·Repository 링크 + 프로젝트 표지 aspect fill #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions src/app/components/HeroSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,33 @@ export function HeroSection() {
iOS 개발자입니다.
</p>

{/* AI 활용 역량 선언 — 웹 전용 (PDF에서는 숨김) */}
<p
data-print-hide
className="text-sm md:text-base font-normal text-muted-foreground/80 leading-relaxed max-w-2xl"
>
이 포트폴리오 사이트는{" "}
<a
href="https://claude.com/product/claude-code"
target="_blank"
rel="noopener noreferrer"
className="underline decoration-dotted underline-offset-4 hover:opacity-70 transition-opacity"
>
Claude Code
</a>
를 활용한{" "}
<strong className="font-medium text-foreground">바이브 코딩</strong>
으로 직접 만들었습니다. 기획·디자인 시스템·편집 레이아웃·PDF 자동 출력까지 AI를 도구로 활용해 빠르게 구현했습니다.{" "}
<a
href="https://github.com/ShapeKim98/portfolio"
target="_blank"
rel="noopener noreferrer"
className="underline decoration-dotted underline-offset-4 hover:opacity-70 transition-opacity"
>
소스 보기 →
</a>
</p>

{/* Actions */}
<div className="flex flex-wrap items-center gap-x-5 gap-y-2 text-sm">
<a
Expand All @@ -43,6 +70,16 @@ export function HeroSection() {
<span>GitHub</span>
<ArrowUpRight size={12} className="opacity-60" />
</a>
<a
href="https://github.com/ShapeKim98/portfolio"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1.5 text-foreground hover:opacity-70 transition-opacity"
>
<Github size={14} />
<span>Repository</span>
<ArrowUpRight size={12} className="opacity-60" />
</a>
<a
href="mailto:shapekim98@gmail.com"
className="inline-flex items-center gap-1.5 text-foreground hover:opacity-70 transition-opacity"
Expand All @@ -59,6 +96,13 @@ export function HeroSection() {
<Download size={14} />
<span>PDF</span>
</a>
{/* 프린트 전용: PDF 독자가 웹 버전 위치를 알 수 있게 */}
<span
data-print-only
className="items-center gap-1.5 text-muted-foreground tabular-nums"
>
Web · shapekim98.github.io/portfolio
</span>
</div>
</div>

Expand Down Expand Up @@ -92,6 +136,19 @@ export function HeroSection() {
</a>
),
},
{
label: "Repository",
value: (
<a
href="https://github.com/ShapeKim98/portfolio"
target="_blank"
rel="noopener noreferrer"
className="hover:opacity-70 transition-opacity break-all"
>
ShapeKim98/portfolio
</a>
),
},
]}
/>
</div>
Expand Down
10 changes: 5 additions & 5 deletions src/app/components/ProjectLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,12 +84,12 @@ export function ProjectCover({
data-print-keep
data-print-cover
>
<div className="relative overflow-hidden border-y border-border bg-muted/40 group">
{/* Image — natural aspect ratio preserved, clickable for detail view */}
<div className="relative overflow-hidden border-y border-border bg-muted/40 group max-h-[85vh]">
{/* Image — aspect fill: 자연 비율 유지, 85vh 초과분은 하단에서 잘림 */}
<ClickableImage
src={imageSrc}
alt={imageAlt ?? title}
className="block w-full h-auto max-h-[85vh] object-contain"
className="block w-full h-auto object-cover"
/>
{/* Readable gradient overlay — kept in PDF too to match web design */}
<div
Expand Down Expand Up @@ -168,11 +168,11 @@ export function UseCaseCover({
}) {
return (
<section className={cn("relative w-full", className)} data-print-keep>
<div className="relative overflow-hidden border-y border-border bg-muted/40 group">
<div className="relative overflow-hidden border-y border-border bg-muted/40 group max-h-[85vh]">
<ClickableImage
src={imageSrc}
alt={imageAlt ?? name}
className="block w-full h-auto max-h-[85vh] object-contain"
className="block w-full h-auto object-cover"
/>
<div
className="absolute inset-0 pointer-events-none"
Expand Down
7 changes: 7 additions & 0 deletions src/styles/print.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,14 @@

/* 인쇄 시 숨김 플래그 */
[data-print-hide] { display: none !important; }

/* 인쇄 시에만 표시 플래그 (웹에서는 숨김) */
[data-print-only] { display: inline !important; }
}

/* 웹 모드 기본값: data-print-only 요소는 숨김 */
[data-print-only] { display: none; }

/* ───────────────────────────────────────────────────────────
* 수동 print 모드: ?print=1 로 접근 시 <html> 에 .print-mode 클래스 부여
* Puppeteer 기반 PDF 추출은 이 경로를 주로 사용한다.
Expand All @@ -66,6 +72,7 @@ html.print-mode [class*="h-screen"] { height: auto !important; }
html.print-mode main { padding-left: 0 !important; padding-top: 0 !important; }
html.print-mode section[id="hero"] { min-height: 0 !important; padding-top: 24px !important; padding-bottom: 24px !important; }
html.print-mode [data-print-hide] { display: none !important; }
html.print-mode [data-print-only] { display: inline !important; }

/* 테마 배경/장식 레이어 제거 */
html.print-mode { background: transparent !important; }
Expand Down
Loading