# CLAUDE.md

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

## Project Overview

Static website for Vandevliet Aerial Shots (drone videography business), built with plain HTML, SCSS, and vanilla JavaScript. Uses Apache-style Server Side Includes (SSI) via Nginx for templating — there is no backend framework or static site generator.

## Build & Dev Commands

Package manager is **pnpm** (v10.11.0).

```sh
pnpm run build          # Full build: Sass → PostCSS autoprefixer → Terser JS minify
pnpm run css-compile    # Sass only
pnpm run css-prefix     # PostCSS autoprefixer only
pnpm run js-minify      # Terser JS minify only
pnpm run server         # Start local Nginx container (docker compose up -d)
pnpm start              # Build + start server
```

Lint JavaScript:
```sh
pnpm exec eslint src/js/
```

Local dev server runs at **http://localhost:8080** via Docker (nginx:stable-alpine with SSI enabled).

## Architecture

### SSI Templating

Pages use Nginx SSI directives for composition. Variables are set per page and consumed by shared includes:

```html
<!--# set var='title' value='Page Title' -->
<!--# set var='description' value='Meta description' -->
<!--# include file='/includes/partials/head-content.html' -->
```

### Routing

Nginx `try_files` resolves URLs without extensions: `/vastgoed` → `pages/vastgoed.html`. The `/includes/` directory is marked `internal` and not directly accessible.

### Directory Layout

- `public/` — All served files (HTML pages, compiled assets, static media)
  - `includes/components/` — Reusable UI components (nav, contact row)
  - `includes/partials/` — Layout fragments (head, footer)
  - `includes/pricing/` — Pricing card components
  - `pages/` — Service sub-pages (routed via Nginx)
  - `assets/css/` — Compiled CSS (do not edit, generated from src)
  - `assets/js/` — Compiled JS (do not edit, generated from src)
  - `assets/static/` — Images, videos, PDFs
- `src/scss/styles.scss` — Master stylesheet (imports Bootstrap + custom styles)
- `src/js/scripts.js` — All client-side JavaScript

### Styling

Bootstrap 5.3.8 customized via SCSS variables. Primary color overridden to `#cc2929`. Custom fonts: Century Gothic (headers) and Eras ITC (subheaders) loaded from `assets/font/`. Notable custom CSS: parallax scrolling, navbar transparency with scroll detection, grayscale image hover effects, anchor link generation.

### JavaScript

Single source file (`src/js/scripts.js`) with vanilla ES6+. Handles parallax scrolling, mobile nav collapse, auto-generated anchor links, and scroll-state tracking. No frameworks or module bundler.

## Code Style

### JavaScript (ESLint enforced)

- **Allman brace style** (opening brace on its own line)
- 2-space indentation, single quotes, always semicolons
- Unix line endings (`\n`), no trailing whitespace, no final newline (`eol-last: ["error", "never"]`)
- Arrow functions preferred, `const` preferred, no `var`
- Template literals preferred over string concatenation
- Trailing commas in multiline constructs (`comma-dangle: always-multiline`)

### HTML

- Semantic HTML5 with Schema.org microdata (FAQPage markup)
- OpenGraph meta tags on all pages
- SSI variables for per-page title/description

## CI/CD

GitHub Actions workflow (`.github/workflows/build-and-deploy.yml`) runs `pnpm run build`, appends version query strings for cache busting, minifies HTML, then deploys to Nginx. Version format: `YYMM.DD.HHMMSS`. Git LFS is used for `.mp4` video files.

## Nginx Config

Located at `.volumes/nginx/conf/conf.d/default.conf`. SSI is enabled (`ssi on`). The config defines rewrite rules and internal locations — changes here affect routing behavior.