mingle-website/CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

This is the official website for 밍글 스튜디오 (Mingle Studio), a motion capture studio located in Incheon, South Korea. The website is a multi-page static site built with vanilla HTML, CSS, and JavaScript, showcasing motion capture services, studio galleries, and client portfolios.

Architecture & Structure

Page Architecture

The site follows a modular component-based structure:

• Main Pages: index.html, about.html, services.html, portfolio.html, gallery.html, contact.html, qna.html, 404.html
• Shared Components: components/header.html, components/footer.html
• Page-specific Assets: Each page has dedicated CSS (css/[page].css) and JavaScript (js/[page].js) files
• Common Assets: css/common.css and js/common.js provide shared functionality

Component Loading System

The site uses a dynamic component loading system implemented in js/common.js:

• Header and footer are loaded via fetch() API from components/ directory
• Fallback system: Static backup footer is hidden when dynamic loading succeeds
• Components are initialized after DOM load with proper error handling

CSS Architecture

• CSS Variables: Defined in :root of common.css with motion capture/VTuber orange theme
• Modular Approach: Common styles in common.css, page-specific styles in separate files
• Responsive Design: Mobile-first approach with breakpoints at 768px and 1200px
• Color Scheme: Primary orange (#ff8800) with gradient variations for modern tech aesthetic

Development Commands

Quick Start (권장)

Windows:

# 더블클릭으로 실행
start-server.bat

macOS/Linux:

# 터미널에서 실행
./start-server.sh

Manual Server Start

Node.js (권장):

npm run dev          # http://localhost:8000
npm start           # 같은 기능
npm run serve       # 같은 기능
npm test           # 도움말 + 서버 시작

Python:

python server.py    # 커스텀 서버 (추천)
python -m http.server 8000  # 기본 서버

Development Features

• 자동 브라우저 열기: 서버 시작 시 자동으로 브라우저에서 사이트 열림
• Clean URLs: .html 확장자 없이 접근 가능 (/about, /services 등)
• 개발 최적화: 캐시 비활성화, CORS 헤더 추가
• 오류 처리: 포트 충돌 및 기본적인 오류 상황 처리

Available URLs

• Homepage: http://localhost:8000/
• About: http://localhost:8000/about
• Services: http://localhost:8000/services
• Portfolio: http://localhost:8000/portfolio
• Gallery: http://localhost:8000/gallery
• Contact: http://localhost:8000/contact
• Q&A: http://localhost:8000/qna

Key Technical Details

SEO Optimization

• Structured data (JSON-LD) with LocalBusiness schema for search engines
• Comprehensive meta tags including Open Graph, Twitter Cards, and Korean platform-specific tags
• Sitemap.xml without lastmod dates to prevent unwanted date display in search results
• Favicon system: Both ICO (mingle-logo.ico) and WebP (mingle-logo.webp) formats

Image Management

• Studio images stored in Studio_Image/ directory using WebP format for optimization
• Gallery system dynamically references these images with descriptive alt text
• Logo assets: mingle-logo.webp (primary) and mingle-logo.ico (favicon)

Form Handling & Interactivity

• Contact form with real-time validation in js/contact.js
• Lazy loading implementation for performance optimization
• Scroll animations and intersection observers for modern UX

Content Management

Adding Gallery Images

1. Add new WebP images to Studio_Image/ directory
2. Update gallery.html with new gallery items following the existing pattern:

   <div class="gallery-item">
       <img src="Studio_Image/[filename].webp" alt="descriptive text" class="gallery-img" loading="lazy">
       <div class="gallery-caption">Caption Text</div>
   </div>
   

Adding Portfolio Videos

• YouTube videos: Update portfolio.html with iframe embed using data-src for lazy loading
• SOOP/streaming VODs: Direct iframe source for broadcast examples

Navigation Updates

When adding new pages, update components/header.html navigation links and ensure corresponding CSS/JS files follow the naming convention.

Business Context

This website represents a motion capture studio business with:

• Primary Service: OptiTrack-based motion capture studio rental (22만원/hour)
• Target Market: VTubers, game developers, content creators
• Location: Incheon Techno Valley, unique positioning as Incheon's only motion capture facility
• Technical Specs: 28 OptiTrack cameras, 8×7m capture space

Understanding this context helps with content updates, SEO optimization, and feature development that aligns with the studio's business objectives.