web_marszalekarchitekten/CLAUDE.md

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.

Download gallery images from old site

node download-gallery-images.js

Downloads all extra project gallery images from old.marszalekarchitekten.at into images/. Safe to re-run — skips files that already exist.

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 (120+ 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
download-gallery-images.js           ← Node script: fetches gallery images from old WP site
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 with full-viewport background photo
• #projekte — 3-column portfolio grid; clicking a card opens the lightbox
• #leistungen — services (2-column grid)
• #ueber-uns — single team member (Florian Marszalek)
• #kontakt — contact details + Google Maps iframe + PDF download banner

All images are served from the local images/ folder — do not use WordPress CDN URLs, as the WordPress server blocks hotlinking on mobile.

Project lightbox

Clicking any .p-item[data-project] in the portfolio grid opens a modal (#lightbox). All project data (title, description, image list, optional before/after pair) lives in the projects object in the inline <script>. The lightbox has:

• A main image stage with ‹ / › arrow navigation and keyboard arrow-key support
• A scrollable thumbnail strip
• A before/after comparison slider (#ba-section) shown only for projects that define beforeAfter: { before, after } — currently 5 renovation projects: Sanierung, Landhaus, Winzerhaus Neusiedlersee, Dachausbau, Winzerhaus 14. Jhdt.

To add a new project: add a .p-item card with data-project="slug" in the HTML grid, and add a matching entry to the projects JS object.

Navigation

The nav bar has a white (#ffffff) background with the logo image (images/MarszalekLogoGrau.jpg). The green accent (#99cc00) is used only in the PDF header and favicon — not in the nav.

Third-party integrations

• Analytics: Matomo at analytics.stranto.com, site ID 3 — snippet in <head> of index.html.
• Map: Google Maps iframe embed (no API key) in #kontakt, centred on 48.1176923, 16.2631144 (Elisabethstraße 14, Perchtoldsdorf).
• Fonts: Google Fonts (Cormorant Garamond + Inter) — the only remaining external dependency.

Brand colours

• Green accent: #99cc00 — PDF header, favicon background
• Near-black: #0f0f0f — body text, footer, favicon M lettermark
• Grey-mid: #999 — secondary labels; CSS var --grey-mid

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 (including any new images), and redeploy the stack in Portainer.