0015

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 모던 인터랙티브 포트폴리오 웹사이트를 만들어줘. 스튜디오 이름은 "STUDIO"이고, 전체적으로 블랙 다크 테마에 화이트 포인트를 활용한 시네마틱 미니멀 디자인으로 만들어줘.

프로그램 개요
총 5개 섹션으로 구성된 원페이지 스크롤 웹사이트야. 섹션 순서는 아래와 같아.

(1) Hero / Image Gallery (전체화면 3D 이미지 슬라이더) (2) About (스튜디오 소개 카드 그리드) (3) Portfolio (작업물 그리드) (4) Services (서비스 소개 카드) (5) Contact (문의 폼)

하단에 별도 Footer는 없고, 상단에 고정 네비게이션 바와 커스텀 커서를 포함해줘.

기능
2-1. 커스텀 커서 마우스 포인터를 흰색 원형 테두리(40px)로 대체해줘. mix-blend-mode: difference 적용해줘. 안쪽에 4px짜리 작은 흰색 점(dot)도 같이 따라다니게 해줘. 링크, 버튼, 카드, 화살표 등 인터랙티브 요소 위에 올리면 커서가 1.5배로 커지면서 반투명 흰색 배경이 채워지게 해줘. body에 cursor: none 적용해서 기본 커서 숨겨줘. 768px 이하 모바일에서는 커스텀 커서 숨기는 건 선택사항이야.

2-2. 네비게이션 상단 고정 네비게이션 바를 만들어줘. 왼쪽에 "STUDIO" 로고(굵게, letter-spacing -1px), 오른쪽에 메뉴 링크들(Home, About, Portfolio, Services, Contact) 배치해줘. 스크롤 50px 이상 내려가면 네비게이션 배경이 좀 더 불투명한 검정 + backdrop-filter blur로 바뀌면서 패딩이 줄어드는 효과 넣어줘. 기본 상태에서도 반투명 검정 배경 + blur 적용해줘. 768px 이하 모바일에서는 메뉴 링크 숨기고 햄버거 버튼(가로선 3개) 보여줘. 햄버거 누르면 메뉴 토글되게 해줘. 모든 앵커 링크에 부드러운 스크롤 적용해줘. 메뉴 링크에 호버 시 밑줄이 왼쪽에서 오른쪽으로 펼쳐지는 효과 넣어줘.

2-3. Hero 이미지 갤러리 (3D 카드 슬라이더) 전체화면(100vh) 섹션에 3D 원근감(perspective) 있는 이미지 슬라이더를 만들어줘. 이미지 15장을 돌려볼 수 있어. 현재 활성 슬라이드는 정면에 크게, 양옆 슬라이드는 Y축으로 회전되어 비스듬히 보이고, 그 다음 것은 더 작고 더 회전되어 멀리 보이는 구조야(active, prev, next, far-prev, far-next 5단계). 전환 애니메이션은 cubic-bezier(0.4, 0, 0.2, 1)로 부드럽게. 활성 슬라이드 하단에는 프로젝트 제목과 설명이 그라디언트 오버레이 위에 슬라이드업으로 나타나게 해줘. 좌우에 원형 반투명 화살표 버튼 배치하고, 하단 중앙에 도트 인디케이터(활성 도트는 펄스 링 애니메이션) 넣어줘. 키보드 좌우 화살표로도 조작 가능하게 해줘. 갤러리 영역 클릭하면 다음 슬라이드로 넘어가게 해줘(화살표/도트 클릭은 제외). 하단에 "Scroll to explore" 텍스트와 세로 라인 안에서 빛이 위에서 아래로 반복 흐르는 스크롤 인디케이터 넣어줘. 배경에 50개의 작은 흰색 파티클이 아래에서 위로 천천히 떠오르는 애니메이션 넣어줘.

2-4. 스크롤 애니메이션 IntersectionObserver로 About 카드와 Portfolio 아이템이 뷰포트에 들어오면 애니메이션이 재생되게 해줘. About 카드는 아래에서 위로 페이드인, Portfolio 아이템은 작은 크기에서 원래 크기로 스케일인. 각 아이템마다 인덱스 기반 딜레이를 줘서 순차적으로 나타나게 해줘.

2-5. 문의 폼 Name(필수), Email(필수), Message(textarea, 필수) 3개 필드로 만들어줘. 입력 필드는 반투명 어두운 배경에 미세한 테두리, 포커스 시 배경이 살짝 밝아지고 테두리도 밝아지는 미니멀 스타일. 제출하면 기본 동작 막고 alert로 감사 메시지 표시해줘.

디자인
3-1. 컬러 팔레트 메인 배경: #000000 (순수 블랙) 보조 배경: #0a0a0a, #0f0f0f, #1a1a1a, #1f1f1f, #2d2d2d (다양한 농도의 다크 그레이) 텍스트: #ffffff (흰색) 보조 텍스트: rgba(255,255,255,0.8) (반투명 흰색) 포인트/강조: #ffffff (흰색, 테두리·커서·인디케이터 등) 카드 배경: rgba(255,255,255,0.03)~rgba(255,255,255,0.1) (매우 옅은 반투명 흰색) 카드 테두리: rgba(255,255,255,0.1)~rgba(255,255,255,0.3)

3-2. 서체 시스템 서체 스택 사용: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif. 외부 폰트 CDN 불필요.

3-3. 전체 톤앤무드 어둡고 시네마틱한 디지털 스튜디오 느낌. 블랙 배경에 흰색 텍스트, 반투명 유리질감(glassmorphism) 카드, 미세한 테두리로 공간감을 표현해줘. 섹션마다 미묘하게 다른 배경 그라디언트를 적용해서 단조롭지 않게 해줘. 모든 섹션 뒤에 아주 옅은 도트 그리드 패턴이 천천히 움직이는 배경 애니메이션을 넣어줘.

3-4. 반응형 768px 이하에서 네비게이션 햄버거 전환, 화살표 크기 축소, 이미지 컨테이너 크기 조정, 제목 크기 축소 등 기본적인 반응형 처리 해줘.

3-5. 각 섹션 디자인 상세

(1) Hero / Image Gallery 전체화면(100vh), 순수 블랙 배경. 중앙에 perspective 2000px 적용된 3D 이미지 슬라이더 배치. 이미지 컨테이너는 화면의 80% 너비(최대 1200px), 80% 높이. 각 슬라이드는 border-radius 20px, 강한 그림자(box-shadow 0 50px 100px rgba(0,0,0,0.8)) 적용. 활성 슬라이드 호버 시 45도 대각선 방향 흰색 반투명 광택(sheen) 효과. 좌우 화살표는 60px 원형, 반투명 배경 + 반투명 테두리 + backdrop-filter blur, 호버 시 밝아지고 살짝 커짐. 화살표 아이콘은 CSS border로 만든 꺾쇠(chevron). 하단 도트 인디케이터는 반투명 검정 배경의 알약 모양 컨테이너 안에 배치. 파티클은 4px 크기 반투명 흰색 원, 20~40초 주기로 떠오름.

사용 이미지:

https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_0.png (Project Alpha / Revolutionary design concept)
https://cdn.midjourney.com/ad9c548a-5a75-4743-8684-8cf99f7a5c93/0_1.png (Digital Dreams / Where imagination meets reality)
https://cdn.midjourney.com/ad9c548a-5a75-4743-8684-8cf99f7a5c93/0_3.png (Future Vision / Next generation interfaces)
https://cdn.midjourney.com/ad9c548a-5a75-4743-8684-8cf99f7a5c93/0_0.png (Creative Flow / Seamless user experiences)
https://cdn.midjourney.com/abc5e43f-d21c-41d0-b959-03f92393789d/0_3.png (Innovation Lab / Pushing boundaries daily)
https://cdn.midjourney.com/abc5e43f-d21c-41d0-b959-03f92393789d/0_2.png (Design System / Cohesive brand identity)
https://cdn.midjourney.com/abc5e43f-d21c-41d0-b959-03f92393789d/0_1.png (Motion Magic / Bringing ideas to life)
https://cdn.midjourney.com/abc5e43f-d21c-41d0-b959-03f92393789d/0_0.png (Tech Forward / Modern solutions for modern problems)
https://cdn.midjourney.com/a727665f-52bb-4f12-8ab5-a14de7d37fa0/0_1.png (User First / Design that speaks to people)
https://cdn.midjourney.com/a727665f-52bb-4f12-8ab5-a14de7d37fa0/0_2.png (Brand Evolution / Growing with purpose)
https://cdn.midjourney.com/a727665f-52bb-4f12-8ab5-a14de7d37fa0/0_3.png (Digital Art / Where code meets creativity)
https://cdn.midjourney.com/daf02e50-ae22-4e0e-87ab-e22a1a04e638/0_2.png (Web 3.0 / The future is now)
https://cdn.midjourney.com/daf02e50-ae22-4e0e-87ab-e22a1a04e638/0_1.png (Minimal Beauty / Less is more)
https://cdn.midjourney.com/daf02e50-ae22-4e0e-87ab-e22a1a04e638/0_3.png (Bold Moves / Taking risks, making impact)
https://cdn.midjourney.com/daf02e50-ae22-4e0e-87ab-e22a1a04e638/0_0.png (Color Theory / Psychology in design)
(2) About 배경은 135도 방향 그라디언트(#1a1a1a → #2d2d2d). 중앙 정렬 제목 "About Our Studio"와 소개 문구. 아래에 3컬럼 반응형 그리드(최소 300px)로 카드 3개 배치. 카드는 반투명 배경 + blur + 라운드 20px + 미세한 테두리, 호버 시 위로 떠오르면서 배경과 테두리가 밝아지는 효과. 카드 내용: Creative Vision, Technical Excellence, User-Centric Design 각각 제목 + 설명.

(3) Portfolio 배경 #0a0a0a. 중앙 정렬 제목 "Selected Works"와 소개 문구. 3컬럼 반응형 그리드(최소 350px)로 프로젝트 6개 배치. 각 아이템은 높이 400px, 라운드 15px, overflow hidden. 이미지는 object-fit cover로 꽉 채우고, 호버 시 1.1배 확대. 호버 시 어두운 오버레이(80% 불투명)가 페이드인 되면서 중앙에 프로젝트명과 카테고리가 아래에서 올라옴. 프로젝트: E-Commerce Platform(Web Development), Brand Identity(Branding), Mobile App UI(UI/UX Design), Marketing Campaign(Digital Marketing), Corporate Website(Web Design), 3D Animation(Motion Design). 이미지는 picsum.photos에서 랜덤으로.

(4) Services 배경은 180도 방향 그라디언트(#0f0f0f → #1f1f1f). 중앙 정렬 제목 "What We Do"와 소개 문구. flex wrap으로 4개 서비스 카드를 가로 배치(각 최대 300px). 카드는 매우 옅은 반투명 배경 + 미세한 테두리 + 라운드 20px, 패딩 넉넉하게. 호버 시 위로 떠오르고 배경 밝아지면서 그림자 생기고, 내부에 방사형 흰색 반투명 빛 효과 나타남. 서비스: Web Design, Development, Branding, Motion Design 각각 제목 + 설명.

(5) Contact 배경 #000에 좌우 대칭으로 옅은 회색 방사형 그라디언트 장식 2개. 중앙 정렬 제목 "Let's Create Together"와 소개 문구. 폼은 최대 600px, 중앙 정렬. 입력 필드 3개 + 제출 버튼("Send Message", 흰색 배경 검정 텍스트, 라운드 50px, 호버 시 위로 떠오르며 글로우 그림자 + 내부 ripple 효과).

기술
4-1. 기본 구조 단일 HTML 파일 하나에 CSS(style 태그)와 JavaScript(script 태그) 모두 포함해줘. 외부 라이브러리나 프레임워크 절대 사용하지 말고, 순수 HTML + CSS + Vanilla JS로만 만들어줘. 외부 CDN 불필요.

4-2. CSS 관련 clamp()로 반응형 타이폰 크기 조절. 모든 transition에 cubic-bezier 이징 커브 적용. 768px 브레이크포인트로 모바일 대응.

4-3. JavaScript 관련 DOMContentLoaded에서 초기화. 파티클 동적 생성, 이미지 슬라이드 동적 생성, 포트폴리오 아이템 동적 생성. IntersectionObserver로 스크롤 reveal. 키보드 이벤트로 슬라이더 조작. scroll 이벤트로 네비게이션 상태 변화.

추가 조건 HTML lang="ko"로 설정해줘. 콘텐츠는 영어로 작성. 버튼의 ripple 효과는 CSS ::before 가상요소로 구현. 코드에 영역별로 주석 넣어줘. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.