7년차 PM의 전문성을 드러내는 포트폴리오(다크모드)

히어로 섹션을 만들어줘. 전체 화면(min-h-screen) 중앙 정렬이야. ■ 배경 - @shadergradient/react 패키지의 ShaderGradientCanvas + ShaderGradient 사용 - 3D 구체(sphere) 타입, 오렌지 톤 (color1: #ff9d00, color2: #ff810a, color3: #f78316) - animate="on", grain="on", lightType="env", envPreset="city" - cameraZoom: 15.1, uAmplitude: 3.2, uSpeed: 0.3 - 배경 위에 bg-black/50 반투명 오버레이를 깔아서 텍스트 가독성 확보 ■ 텍스트 색상 - 배경이 항상 어두우므로, 라이트/다크모드 관계없이 모든 텍스트를 흰색 계열로 고정 - 헤드라인: text-white - 서브텍스트: text-white/60 - 보조 텍스트: text-white/50, text-white/40 ``` ### 프롬프트 1-2: 히어로 상단 배지 ``` 히어로 헤드라인 위에 태그 배지를 넣어줘. - "Product Manager" + "· 7년 경력" 두 개의 인라인 블록 - 각각 뒤에 bg-primary 색상의 skew된 배경 블록이 있음 - framer-motion으로 scaleX: 0→1 애니메이션 (왼쪽에서 오른쪽으로 펼쳐지는 효과) - 첫 번째 블록: delay 0.3s, -skew-x-3 - 두 번째 블록: delay 0.5s, skew-x-2 - 텍스트: font-bold, text-sm, text-white