diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..50ef665 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,121 @@ +# 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:** +```cmd +# 더블클릭으로 실행 +start-server.bat +``` + +**macOS/Linux:** +```bash +# 터미널에서 실행 +./start-server.sh +``` + +### Manual Server Start +**Node.js (권장):** +```bash +npm run dev # http://localhost:8000 +npm start # 같은 기능 +npm run serve # 같은 기능 +npm test # 도움말 + 서버 시작 +``` + +**Python:** +```bash +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: + ```html +
+ descriptive text +
Caption Text
+
+ ``` + +### 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. \ No newline at end of file diff --git a/Partners/메가메타.jpg b/Partners/메가메타.jpg new file mode 100644 index 0000000..f49d5d3 Binary files /dev/null and b/Partners/메가메타.jpg differ diff --git a/components/header.html b/components/header.html index 8f8a8bb..d5afa91 100644 --- a/components/header.html +++ b/components/header.html @@ -2,19 +2,19 @@