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).

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:

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:

<!--# 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.

3.7 KiB Raw Blame History