Habitat

A static site: black background, full-screen images with gentle zoom, and short stories that appear as you scroll. Sections snap into place.

Structure

• public/ – Deployable site: index.html, images/ (PNGs and optional images/webp/)
• scripts/ – optimize-images.js converts PNGs to WebP for smaller, faster loading

Local

Serve the public folder (e.g. with live-server):

npx live-server public

Open the URL it prints (e.g. http://127.0.0.1:8080).

Scripts (pnpm)

Command	Description
pnpm run optimize	Convert public/images/*.png to WebP in public/images/webp/. Uses sharp (installed on first run if needed).
pnpm run deploy	Rsync public/ to pgs.sh:/habtitat/.

Deploy

pnpm install   # optional, only if you use optimize
pnpm run deploy

Only the contents of public/ are synced (no .git, node_modules, or project files).

Tech

• Static HTML, CSS, and vanilla JS
• No build step; edit public/index.html and refresh
• Images: responsive, lazy-loaded; first image eager for LCP
• Scroll snap so each section aligns to the viewport
• Optional WebP via <picture> when public/images/webp/ exists