diff --git a/.gitignore b/.gitignore index 5efb8ba..0c68bba 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,7 @@ .claude/worktrees/* *.iml .DS_Store -.lighthouseci/ \ No newline at end of file +.lighthouseci/ + +# Superpowers brainstorming/spec artifacts — local working notes, not part of the site +/docs/superpowers/ \ No newline at end of file diff --git a/CLAUDE.md b/CLAUDE.md index 3464b67..769cd51 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -4,7 +4,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co ## Project Overview -Personal landing page for Gleb Gorelov (glebfox.com), hosted on GitHub Pages. A static HTML "coming soon" page — no build system, no templating, no backend. +Personal landing page for Gleb Gorelov (glebfox.com), hosted on GitHub Pages. A single static HTML page — hero (avatar + name + intro + GitHub/Email), a "What I do" block grid, a tech-stack row, and a footer. No build system, no templating, no backend. ## Development @@ -14,6 +14,10 @@ Personal landing page for Gleb Gorelov (glebfox.com), hosted on GitHub Pages. A **Force a theme when verifying:** set `localStorage.theme` to `light`/`dark` (or set `document.documentElement.style.colorScheme` inline on ``) and reload; clear it to follow the OS again. +**Preview screenshots clip on scroll (gotcha):** the Claude Preview `preview_screenshot` tool renders a blank band (≈ the scroll offset) when the page is scrolled. Verify scroll-dependent layout by reading computed values, or with a viewport tall enough to fit everything (no scroll). + +**`/theme-verify` screenshots are unreachable (gotcha):** the Playwright MCP `browser_take_screenshot` writes to the MCP server's own sandbox dir, not the repo — `Read` can't open them. Verify rendering via resolved computed values instead (`getComputedStyle`, or paint a CSS var onto a throwaway probe element to resolve it to rgb), which is also a stricter check than eyeballing pixels. Its local `npx serve -l 3000` is not persistent across turns — re-check and restart it before driving the browser. + **`modern-web-guidance` scope:** the mandatory search covers evolving CSS/JS APIs (this page's `light-dark()`/`oklch()`/animations) — it has no guides for static ``/SEO/meta tags (canonical, Open Graph, `theme-color`, `description`), so expect empty results there and rely on standard knowledge. **Deployment:** Push to the `master` branch — GitHub Pages serves it automatically at glebfox.com (configured via `CNAME`). @@ -22,6 +26,8 @@ Personal landing page for Gleb Gorelov (glebfox.com), hosted on GitHub Pages. A **Lighthouse CI:** `.github/workflows/lighthouse.yml` audits `index.html` on every push to `master` and on PRs, serving the repo root as a static site via `treosh/lighthouse-ci-action`. Budgets live in `lighthouserc.json`: accessibility / SEO / best-practices are hard-gated at 1.0; performance is warn-only (timing on shared CI runners fluctuates). Public repo → Actions minutes are free. +**Accepted Lighthouse warning:** "Properly size images" (`uses-responsive-images`) flags the avatar — the single 448² file is deliberately the 2× asset for the 224px retina box, but Lighthouse's emulated DPR reads it as oversized. Performance is warn-only so it never gates; don't add `srcset` densities for the single-digit-KB saving. + **Audit forces reduced motion (gotcha):** `lighthouserc.json` sets `chromeFlags: "--force-prefers-reduced-motion"`. The entrance animation (`@keyframes enter`) starts `header`/`main`/`footer` at `opacity: 0`, which never advances in headless Lighthouse → `NO_FCP` → the whole audit fails. Reduced motion makes content statically visible (the gated categories are motion-independent). Revisit this flag if that animation changes. **Run the audit locally:** `npx -y @lhci/cli@latest collect --config=./lighthouserc.json && npx -y @lhci/cli@latest assert --config=./lighthouserc.json` — needs Chrome; the config's `chromeFlags` handle headless + reduced motion, so it mirrors CI. `.lighthouseci/` is gitignored. @@ -31,19 +37,26 @@ Personal landing page for Gleb Gorelov (glebfox.com), hosted on GitHub Pages. A Single-page site. Zero external dependencies — pure HTML/CSS/JS only. **Files:** -- `index.html` — the entire page; all CSS is inline in `