0025

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 실험적 타이포그래피 중심의 크리에이티브 포트폴리오 웹사이트를 만들어줘. 스튜디오 이름은 "CHAOS"이고, 전체적으로 사이버펑크/네온 느낌의 다크 테마에 마젠타·시안·옐로우 3원색 네온 포인트를 활용한 과감하고 파격적인 디자인으로 만들어줘. 영문 전용 사이트야.

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

(1) Hero (전체화면 인트로 — 히어로 타이포그래피) (2) Gallery (포트폴리오 이미지 그리드) (3) Video (영상 배경 + 타이포그래피 오버레이) (4) About (스튜디오 소개) (5) Contact (문의 폼)

그리고 맨 아래에 Footer 넣어줘. 페이지 진입 시 로딩 화면도 있어야 해. 마우스 커서를 crosshair로 바꿔줘.

기능
2-1. 로딩 화면 페이지 처음 열리면 검정 배경에 "LOADING" 텍스트가 글리치 폰트(Rubik Glitch)로 마젠타색으로 표시되면서 글리치 애니메이션이 반복 재생돼. 약 1초 후에 로딩 화면이 페이드아웃 되면서 사라지게 해줘.

2-2. 플로팅 타이포그래피 배경 페이지 전체에 걸쳐 고정(fixed) 위치로 "DESIGN", "CREATE", "IMAGINE", "EXPLORE", "INNOVATE" 같은 영감 키워드들이 거대한 사이즈(8rem)로 매우 낮은 투명도(0.1)로 표시되면서 화면을 느리게 가로질러 흘러가는 드리프트 애니메이션을 넣어줘. 홀수 번째는 시안, 짝수 번째는 마젠타 색상. 마우스를 움직이면 이 텍스트들이 마우스 위치에 따라 미세하게 패럴랙스 반응하게 해줘. pointer-events: none 처리.

2-3. 네비게이션 상단 고정 네비게이션 바를 만들어줘. 왼쪽에 "CHAOS" 로고(Rubik Glitch 폰트, 3rem, 마젠타·시안·옐로우·레드 4색 겹침 텍스트 쉐도우 + 글리치 흔들림 애니메이션), 오른쪽에 메뉴 링크들(HOME, WORK, ABOUT, CONTACT)을 배치해줘. 링크는 Bebas Neue 폰트, 큰 사이즈, letter-spacing 넓게. 호버 시 텍스트 위로 마젠타색 복제 텍스트가 왼쪽에서 오른쪽으로 와이프 형태로 덮이는 효과 넣어줘(::before + attr(data-text) + width 트랜지션). mix-blend-mode: difference를 네비게이션 전체에 적용해줘. 768px 이하에서는 메뉴 링크 숨겨줘. 모든 앵커 링크에 부드러운 스크롤 적용해줘.

2-4. 스크롤 반응 색상 변화 스크롤 위치에 따라 CSS 변수로 관리되는 3가지 포인트 컬러(primary, secondary, accent)의 hue 값이 동적으로 변하게 해줘. 스크롤 퍼센트 × 360도로 hue를 계산해서 페이지를 내리는 동안 네온 색상이 계속 변하는 사이키델릭 효과를 만들어줘.

2-5. 갤러리 아이템 스크롤 등장 애니메이션 IntersectionObserver를 사용해서 갤러리 아이템들이 뷰포트에 들어올 때 fadeInUp 애니메이션으로 등장하게 해줘.

2-6. 랜덤 글리치 이벤트 3초마다 한 번씩 로고, 히어로 타이틀 단어, 섹션 타이틀 글자 중 하나를 랜덤으로 골라서 글리치 애니메이션을 잠깐 리셋했다 다시 재생하는 효과를 넣어줘.

2-7. 커서 트레일 이펙트 마우스를 움직일 때 5% 확률로 마젠타·시안·옐로우 색상의 작은 원형 파티클이 생성되었다가 랜덤 방향으로 날아가면서 축소·페이드아웃되는 파티클 효과를 넣어줘. Web Animations API 사용.

2-8. 문의 폼 NAME(필수), EMAIL(필수), MESSAGE(필수) 3개 필드. 입력 필드는 투명 배경 + 마젠타 3px 보더 스타일. 포커스 시 보더가 시안으로 바뀌면서 전체 필드가 1.05배 확대 + 약간 회전(1deg)하는 과감한 효과. 제출하면 버튼 텍스트가 "SENT!"로 바뀌면서 배경이 옐로우로 채워지고, 3초 후 원래대로 복구되면서 폼 리셋해줘.

디자인
3-1. 컬러 팔레트 메인 배경: #0a0a0a (거의 순 검정) 프라이머리(마젠타): #ff00ff 세컨더리(시안): #00ffff 액센트(옐로우): #ffff00 텍스트: #ffffff (순백) 이 컬러들은 CSS 변수로 관리하고, 스크롤에 따라 hue가 동적으로 변해.

3-2. 서체 Google Fonts에서 아래 8개를 불러와줘. Bebas Neue → 네비게이션, UI 텍스트 Playfair Display (400, 900, italic) → 세리프 제목 Space Mono (400, 700) → 본문, 모노스페이스 텍스트 Rubik Glitch → 글리치 효과 로고, 로딩 Creepster → 공포/과감한 느낌 섹션 타이틀 Bungee Shade → 3D 느낌 장식 타이틀 Monoton → 네온사인 느낌 아웃라인 타이틀 Righteous → 플로팅 텍스트, 푸터 아트

기본 body 서체는 'Space Mono', monospace.

3-3. 전체 톤앤무드 실험적이고 파격적인 타이포그래피 중심 디자인. 하나의 섹션 안에서도 여러 폰트를 혼합하고, 텍스트에 회전·기울임·크기 변화·-webkit-text-stroke 아웃라인·mix-blend-mode·겹침 텍스트 쉐도우 등 과감한 타이포그래피 실험을 적용해줘. 스크롤바는 2px 얇은 마젠타색. ::selection 없이 crosshair 커서만 적용.

3-4. 이미지 처리 스타일 갤러리 이미지: 호버 시 1.1배 확대 + 어두운 오버레이 등장 + 텍스트 스케일인. 어바웃 이미지: grayscale(100%) contrast(1.5) + mix-blend-mode: luminosity 적용, 이미지 위에 "CREATE" 글리치 텍스트 오버레이(Rubik Glitch, 마젠타, mix-blend-mode: difference).

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

(1) Hero 전체 화면(100vh), 배경 이미지 위에 콘텐츠. 타이틀은 3줄로 구성하되 각 줄마다 완전히 다른 폰트와 스타일을 적용해줘:

1줄 "BREAK": Bungee Shade 폰트, 투명 배경에 마젠타 2px 아웃라인(-webkit-text-stroke), -5도 회전, 왼쪽으로 밀림, 위아래 부유(float) 애니메이션
2줄 "THE": Monoton 폰트, 시안 단색, 3도 회전 + 1.2배 확대, 오른쪽으로 밀림, 마젠타 반투명 텍스트 쉐도우, 펄스(확대/축소) 애니메이션
3줄 "RULES": Playfair Display 이탤릭 900, 옐로우, -2도 회전, 깊은 그림자, mix-blend-mode: screen, 좌우 흔들림(shake) 애니메이션 하단에 "EXPERIMENTAL DESIGN STUDIO" 서브타이틀(Space Mono, letter-spacing 10px, 타자기 + 깜빡이는 커서 애니메이션). 배경 이미지:
Hero 배경: https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_3.png (contrast 1.2, brightness 0.8 필터)
(2) Gallery 섹션 타이틀 "OUR WORK"을 글자 하나하나 span으로 감싸서, 홀수 글자는 Creepster 폰트 + 마젠타 + skewY(-10deg) + 상하 흔들림 애니메이션, 짝수 글자는 Bebas Neue 폰트 + 시안 + skewY(10deg) + 역방향 흔들림 애니메이션을 적용해줘. auto-fit minmax(300px, 1fr) 반응형 그리드로 9개 이미지 카드를 2px 갭으로 배치. 각 카드 400px 높이, 호버 시 이미지 확대 + 검정 80% 오버레이 페이드인 + 텍스트(프로젝트명 Bungee Shade 옐로우 -5도 회전 + 카테고리 Space Mono) 스케일인 등장. 갤러리 이미지:

1번: https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_2.png / DIGITAL DREAMS / EXPLORING BOUNDARIES
2번: https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_1.png / NEON NIGHTS / URBAN AESTHETICS
3번: https://cdn.midjourney.com/e2961bd3-5f3e-4df5-97b0-372cde33881e/0_0.png / ABSTRACT REALITY / PERCEPTION SHIFT
4번: https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_1.png / CYBER PUNK / FUTURE VISION
5번: https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_0.png / GLITCH ART / DIGITAL DECAY
6번: https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_2.png / NEON DREAMS / ELECTRIC FEELS
7번: https://cdn.midjourney.com/921d92cb-996f-4d3a-aa06-257595ab9574/0_3.png / RETRO WAVE / NOSTALGIC FUTURE
8번: https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_0.png / MINIMAL CHAOS / ORGANIZED DISORDER
9번: https://cdn.midjourney.com/7e67b738-f518-4963-ab7f-0f6aee68631f/0_1.png / URBAN DECAY / BEAUTIFUL DESTRUCTION
(3) Video 전체 화면(100vh), 배경 비디오 자동재생·음소거·반복. 50% 어두운 오버레이 위에 "MOTION & EMOTION" 타이틀(Monoton 폰트, 투명에 흰색 3px 아웃라인, 마젠타·시안·옐로우 3색 네온 글로우 텍스트 쉐도우, 글로우 강도가 교대로 변하는 neon 애니메이션). 배경 비디오: https://cdn.midjourney.com/video/8c31b1e5-f7c1-488d-8eb2-3afff61b32a8/0.mp4

(4) About 2컬럼 그리드(텍스트 / 비주얼), 최대 1200px. 왼쪽 텍스트: "WE ARE / CHAOS / CREATORS" 3줄 제목, 각 줄 다른 폰트와 색상 처리(1줄 Playfair Display 900 마젠타 + 왼쪽 밀림, 2줄 Monoton 아웃라인 시안 + 오른쪽 밀림 -3도 회전, 3줄 Righteous 옐로우 + 마젠타 반투명 텍스트 쉐도우 + 2도 회전). 그 아래 설명문(Space Mono, 왼쪽 패딩 + 거대한 Bungee Shade 인용부호 장식 0.3 투명도). 오른쪽 비주얼: 이미지(grayscale + high contrast + luminosity 블렌드), 이미지 위에 "CREATE" 텍스트(Rubik Glitch, 8rem, 마젠타, -15도 회전, 중앙 배치, mix-blend-mode: difference, 글리치 애니메이션). 어바웃 이미지: https://cdn.midjourney.com/a727665f-52bb-4f12-8ab5-a14de7d37fa0/0_0.png

(5) Contact 체크무늬 패턴 배경(CSS gradient로 45도 다크 타일 패턴). 타이틀 "LET'S TALK"을 글자 하나하나 span으로 감싸서 Creepster 폰트 옐로우, 각 글자가 CSS 변수(--i)를 이용해 서로 다른 각도로 회전하면서 시차를 두고 바운스 애니메이션 적용. 폼은 위 2-8에서 설명한 대로. 제출 버튼은 Bungee Shade 폰트 2rem, 옐로우 5px 보더, 투명 배경. 호버 시 옐로우 배경이 왼쪽에서 슬라이드인(::before) + 텍스트 검정으로 변경 + 1.1배 확대 -2도 회전.

Footer 검정 배경, 중앙 정렬. 상단에 "BREAK•THE•RULES•CREATE•THE•FUTURE" 아트 텍스트(Righteous, 마젠타, perspective + rotateY 3D 기울임). 가운데에 소셜 링크 4개(INSTAGRAM, BEHANCE, DRIBBBLE, GITHUB) — Space Mono, 호버 시 마젠타 + 확대 + 회전. 하단에 저작권 텍스트.

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

4-2. CSS 관련 CSS 변수(Custom Properties)로 5가지 컬러 관리. 반응형은 768px 한 구간으로 미디어쿼리 작성해줘. 768px 이하: 네비게이션 메뉴 숨김, 히어로 타이틀 축소, 타이틀 단어 마진 제거, 어바웃 1컬럼, 갤러리 1컬럼, 섹션 타이틀 축소, 컨택트 타이틀 축소.

4-3. JavaScript 관련 로딩 화면 제어(setTimeout + classList), 부드러운 스크롤(scrollIntoView), 마우스 패럴랙스(mousemove), 스크롤 색상 변화(scroll + CSS 변수 동적 변경), IntersectionObserver 스크롤 reveal, 폼 제출 처리, 랜덤 글리치 이벤트(setInterval), 커서 트레일 파티클(Web Animations API). 별도 번들러 없이 전역 스코프에서 동작.

추가 조건 HTML lang="ko"로 설정해줘. 콘텐츠 최대 너비는 갤러리 1400px, 어바웃 1200px, 컨택트 800px. 모든 transition은 0.3~0.5초로 부드럽게. 코드에 영역별로 주석 넣어줘. 실제 서버 없이 로컬에서 HTML 파일 하나만 열어도 완전하게 동작해야 해.