# CLAUDE.md This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. ## What this repo is Static one-page website for **Marszalek Architekten** (Perchtoldsdorf, Austria). No build system, no framework — the entire site is a single `index.html` served by nginx inside Docker. A 2-page A4 PDF info sheet lives alongside it as a pre-generated static asset. ## Key commands ### Regenerate the PDF Requires Node.js and Google Chrome installed locally. Close the PDF in any viewer first (Windows locks open files). ``` node generate-pdf.js ``` The script uses `puppeteer-core` with the system Chrome at `C:\Program Files\Google\Chrome\Application\chrome.exe`. If Chrome moves, update `executablePath` in `generate-pdf.js` and `generate-favicons.js`. ### Regenerate favicons ``` node generate-favicons.js ``` Reads `favicon.svg` and exports `favicon-16x16.png`, `favicon-32x32.png`, and `apple-touch-icon.png` via puppeteer. Run this whenever `favicon.svg` changes. ### Build and run via Docker ``` docker compose up --build -d # build image and start on port 8082 docker compose down # stop ``` ### Install Node deps (only needed to regenerate the PDF or favicons locally) ``` npm install ``` ## Architecture ``` index.html ← entire website (HTML + CSS + JS) images/ ← all portfolio photos, self-hosted (15 JPEGs) favicon.svg ← master favicon (M monogram, green #99cc00 bg) favicon-16x16.png ← ┐ favicon-32x32.png ← ├ generated from favicon.svg via generate-favicons.js apple-touch-icon.png ← ┘ infosheet-template.html ← HTML source rendered to PDF by Puppeteer generate-pdf.js ← Node script: opens template in Chrome → exports A4 PDF generate-favicons.js ← Node script: renders favicon.svg → PNG at 3 sizes marszalek-architekten-infosheet.pdf ← pre-generated output; committed to repo nginx.conf ← caching, gzip, PDF download header Dockerfile ← nginx:alpine; copies all static assets docker-compose.yml ← single service, host port 8082 → container port 80 ``` ### PDF workflow `infosheet-template.html` is a self-contained 2-page A4 HTML document (mm units, `print-color-adjust: exact`, `page-break-after: always` between pages). `generate-pdf.js` loads it via a `file:///` URL in headless Chrome, waits 1.5 s for Google Fonts, then calls `page.pdf()`. The output PDF is committed — Docker does **not** regenerate it at build time. ### Website structure `index.html` is a single-page site with five anchor-linked sections: `#home` (hero), `#projekte` (portfolio grid with JS category filter), `#leistungen` (services), `#ueber-uns` (team), `#kontakt` (contact + Google Maps iframe + PDF download banner). Portfolio images are served from the local `images/` folder — **do not revert to the WordPress CDN URLs**, as the WordPress server blocks hotlinking on mobile. Google Fonts (Cormorant Garamond + Inter) are the only remaining external dependency. ### Third-party integrations - **Analytics**: Matomo at `analytics.stranto.com`, site ID `3` — snippet is in `` of `index.html`. - **Map**: Google Maps iframe embed (no API key) in the `#kontakt` section, centred on `48.1176923, 16.2631144` (Elisabethstraße 14, Perchtoldsdorf). ### Brand colours - Green accent: `#99cc00` — nav bar background, PDF header, favicon background - Near-black: `#0f0f0f` — body text, footer, favicon M lettermark - Grey-mid: `#999` — used for secondary labels; defined as `--grey-mid` in `index.html` ## Deployment (Portainer) Stack points at `https://git.stranto.com/cgasser/web_marszalekarchitekten`, branch `master`. Site is available on the host at port **8082**. When content changes: edit `index.html` and/or `infosheet-template.html`, regenerate the PDF with `node generate-pdf.js`, commit all changed files, and redeploy the stack in Portainer.