From 4797ac6b2e37dc9d366de35e2ed2df8ba56a60f9 Mon Sep 17 00:00:00 2001 From: Oskar Kapala Date: Tue, 2 Jun 2026 22:46:23 +0200 Subject: [PATCH] docs: update README + add session log 2026-06-02 --- README.md | 95 ++++++++++++++++++++++++--------- sessions/2026-06-02.md | 118 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 187 insertions(+), 26 deletions(-) create mode 100644 sessions/2026-06-02.md diff --git a/README.md b/README.md index 62c4b79..2ecb1fb 100644 --- a/README.md +++ b/README.md @@ -19,10 +19,10 @@ npm run preview # preview built site at http://localhost:4321 ```sh # Host: SATURN -# Create a local test network if npm_proxy doesn't exist locally -docker network create npm_proxy 2>/dev/null || true +# Create the network if it doesn't exist locally +docker network create npm_default 2>/dev/null || true docker compose up --build -# site at http://localhost:80 +# site at http://localhost:8080 ``` ## Deploy to VPS @@ -34,42 +34,85 @@ docker compose up --build The script: 1. Commits any pending changes and pushes to Forgejo (`oskar/gethumanai-landing`). -2. SSH-es to `ubuntu-4gb-hel1-1`, clones/pulls to `~/gethumanai-landing` and runs `docker compose up -d --build`. -3. Runs a smoke test — curls the container IP directly and checks for key strings on PL `/`, EN `/en/`, hreflang, and the mailto link. Exits non-zero and prints `FAIL` if any check fails. +2. SSH-es to `ubuntu-4gb-hel1-1`, clones/pulls to `~/gethumanai-landing`, runs `docker compose up -d --build`. +3. Smoke-tests via `localhost:8080` — checks PL `/`, EN `/en/`, hreflang, mailto, EN conservative note, and HTTP headers. Exits non-zero with docker logs on any failure. -The container joins the `npm_proxy` Docker network. In **Nginx Proxy Manager** on the VPS, -create a proxy host: `gethumanai.com` → `http://humanai-landing:80`. +Container is on the `npm_default` external Docker network. In **Nginx Proxy Manager** add: +- Domain: `gethumanai.com` (+ `www`) +- Forward: `http://humanai-landing:80` +- SSL: Let's Encrypt -## Structure +## Infrastructure + +| Thing | Value | +|---|---| +| VPS host | `ubuntu-4gb-hel1-1` (Hetzner) | +| Container name | `humanai-landing` | +| Host port | `8080 → 80` | +| Docker network | `npm_default` (external, shared with NPM) | +| Git remote | `ssh://git@100.108.208.3:222/oskar/gethumanai-landing.git` | +| Deploy dir on VPS | `~/gethumanai-landing` | + +## Project structure ``` src/ i18n/ - pl.json # Polish copy (all text) - en.json # English copy (all text) - index.ts # translation helpers + pl.json # all Polish copy + slogans + en.json # all English copy + slogans + index.ts # t(locale) helper, getLangFromUrl, getAlternateUrl layouts/ - Layout.astro # HTML shell, meta/OG/hreflang + Layout.astro # HTML shell — meta, OG, hreflang, global CSS + gradient system components/ - Nav.astro - Hero.astro - Problem.astro - HowWeWork.astro - Offers.astro - Process.astro - Security.astro # hidden on MVP (SHOW_SECURITY flag) - Contact.astro - Footer.astro + Nav.astro # sticky nav, mobile hamburger, PL/EN switcher + Hero.astro # gradient mesh bg, geo SVG, gradient H1, manifest strip + Problem.astro # problem/contrast section + HowWeWork.astro # 3 differentiators with per-card accents + Offers.astro # 4 offer cards with per-pillar gradient accents + Process.astro # 3-step process with gradient step circles + Security.astro # hidden on MVP — toggle SHOW_SECURITY = true to enable + Contact.astro # mailto form, "zawsze rozmawiasz z człowiekiem" badge + Footer.astro # dark footer, nav links, copyright pages/ - index.astro # PL — / + index.astro # PL — / en/ - index.astro # EN — /en/ + index.astro # EN — /en/ ``` -## Enabling the Security section +## Design system -Open `src/components/Security.astro` and set `SHOW_SECURITY = true`. +CSS custom properties in `src/layouts/Layout.astro`: + +| Token | Value | Use | +|---|---|---| +| `--c-coral` | `#e05c40` | warm accent 1 — Home pillar | +| `--c-amber` | `#f0924a` | warm accent 2 — blob decoration | +| `--c-indigo`| `#3d35c0` | cool accent 1 — Business pillar | +| `--c-violet`| `#7b39eb` | cool accent 2 — Med pillar | +| `--c-teal` | `#0b9688` | cool accent 3 — Industry pillar | +| `--grad-main` | coral→violet→teal 135° | gradient text, section accents | +| `--grad-cta` | coral→violet 135° | primary button, outline border | +| `--grad-sep` | transparent→coral→violet→transparent | section hairlines | + +Global utilities: `.grad-text`, `.btn-primary` (gradient fill), `.btn-outline` (gradient border via `padding-box/border-box`). + +Section hairlines: automatic `section + section::before` pseudo-element in Layout.astro. + +## Editing copy + +All visible text lives in `src/i18n/pl.json` and `src/i18n/en.json`. Key paths: + +- `hero.h1_base` + `hero.h1_highlight` — split for gradient on the "AI" word +- `manifest.slogan` — the strip between hero and problem section +- `how.human.tagline` — note on the "human in the loop" card +- `contact.human_note` — badge in the contact section + +## Feature flags + +| Flag | File | Default | Effect | +|---|---|---|---| +| `SHOW_SECURITY` | `Security.astro:6` | `false` | Reveals the security section | ## Swapping the logo -The logo text and SVG icon are in `src/components/Nav.astro` (`.logo`). +Logo text + SVG half-circle icon: `src/components/Nav.astro` (`.logo` / `.logo-icon`). diff --git a/sessions/2026-06-02.md b/sessions/2026-06-02.md new file mode 100644 index 0000000..dc21027 --- /dev/null +++ b/sessions/2026-06-02.md @@ -0,0 +1,118 @@ +# Session 2026-06-02 + +## What was built + +Full MVP of the humanAI landing page — repo creation through live deploy on VPS. + +--- + +## Commits (chronological) + +| Hash | Summary | +|---|---| +| `fc57413` | feat: initial humanAI landing page | +| `7b24a7f` | fix: use npm_default network (actual NPM network name on VPS) | +| `50cc253` | fix: deploy.sh uses ~/gethumanai-landing (no sudo needed on VPS) | +| `6e63461` | feat: add smoke tests to deploy.sh (curl container IP after up) | +| `9e591d9` | feat: expose port 8080 on host, add host-port smoke test in deploy.sh | +| `3f5dd53` | fix: smoke tests use localhost:8080 (port mapping creates ambiguous container IPs) | +| `b7b1336` | feat: visual redesign — gradient mesh, per-pillar accents, manifest slogans | + +--- + +## Session 1 — Initial build + +**Brief:** `~/gethumanai-landing-brief.md` +**Scope:** MVP sections 1–5, 7–8 (hero, problem, how, offers, process, contact, footer). + +**Stack decisions:** +- Astro 6 static, built-in i18n routing (`prefixDefaultLocale: false` → PL at `/`, EN at `/en/`) +- All copy in `src/i18n/pl.json` and `src/i18n/en.json` — zero hardcoded strings in components +- Contact form via `mailto:` prefill (name/email/message → subject+body); `// TODO: backend` left in place +- Security section code-complete but hidden behind `SHOW_SECURITY = false` flag + +**Infrastructure discoveries:** +- NPM (Nginx Proxy Manager) uses `npm_default` network, not `npm_proxy` +- VPS user has no passwordless sudo → deploy dir is `~/gethumanai-landing`, not `/opt/` +- Port mapping (`8080:80`) adds a second Docker network to the container, making `{{range .NetworkSettings.Networks}}{{.IPAddress}}` return concatenated IPs → smoke tests must use `localhost:8080`, not the container IP +- Forgejo repo created via `docker exec -u git forgejo forgejo admin user generate-access-token` with scopes `write:repository,write:user` + +**Smoke test checks (deploy.sh):** +1. `GET /` contains `Ludzka strona AI` +2. `GET /en/` contains `The human side of AI` +3. `GET /` contains `hreflang` +4. `GET /` contains `mailto:oskar@gethumanai.com` +5. `GET /en/` contains `human review` (Industry/Med conservative tone) +6. `curl -fsS -I http://localhost:8080` returns 200 + +--- + +## Session 2 — Visual redesign + slogans + +**Brief:** warm↔cool gradient palette, gradient mesh hero, per-pillar accents, two slogans. + +**Palette:** +- Warm: coral `#e05c40`, amber `#f0924a` +- Cool: indigo `#3d35c0`, violet `#7b39eb`, teal `#0b9688` +- Pillar accents: Home=coral, Business=indigo, Industry=teal, Med=violet + +**Changes per file:** + +`Layout.astro` +- Added `--c-coral/amber/indigo/violet/teal`, `--c-home/business/industry/med` +- `--grad-main` (coral→violet→teal), `--grad-cta` (coral→violet), `--grad-sep` +- `.btn-primary` → gradient fill; `.btn-outline` → gradient border via `padding-box/border-box` +- `section + section::before` → automatic gradient hairline separator +- `.grad-text` utility class (background-clip: text) + +`Hero.astro` +- 4 radial blob divs (CSS-only, `filter: blur(72px)`) for mesh background +- Inline SVG geometric line-art (concentric rings + node graph) positioned top-right +- CSS dot-grid pattern bottom-left +- `h1_base` + `h1_highlight` split → gradient applied only to "AI" word +- Pillar tiles: `border-top: 2.5px solid var(--pa)` per-accent via CSS custom property `--pa` +- Manifest strip: full-width gradient bg strip with `--grad-main` text +- `btn-outline` uses `background: linear-gradient(#fff,#fff) padding-box, var(--grad-cta) border-box` + +`HowWeWork.astro` +- Per-card accent `--fa` variable (teal/indigo/violet) +- Icon wrapped in 48×48 pill with `color-mix(in srgb, var(--fa) 10%, transparent)` bg +- Human card gets `how.human.tagline` as a footnote with violet color + +`Offers.astro` +- `--oa` per-card accent variable +- `offer-topbar`: 3px gradient bar at card top (`var(--oa)` → violet blend) +- Icon wrapper pill with accent bg tint +- `conservative-note` styled in card's own accent color +- Abstract geometric SVG icons (waveform for Industry, pulse+doc for Med, node graph for Business, home+nodes for Home) + +`Process.astro` +- Step circles: individual `linear-gradient` backgrounds (coral→amber / violet→indigo / teal→indigo) +- Connector: `linear-gradient(to bottom, coral, violet, teal)` at 30% opacity + +`Contact.astro` +- `human-note` badge: pill shape, gradient bg tint, `contact.human_note` string, person SVG icon +- Email link: `--grad-cta` background-clip gradient text +- Input focus: violet border + `rgba(123,57,235,.1)` box-shadow + +**New translation keys added:** +- `hero.h1_base` + `hero.h1_highlight` (split for gradient word) +- `manifest.slogan` — "AI dla ludzi, przez ludzi" / "AI for people, by people" +- `how.human.tagline` — "U nas zawsze rozmawiasz z człowiekiem" / "You always talk to a real person" +- `contact.human_note` — same strings, used in contact section badge + +**WCAG AA notes:** +- Gradient text on H1 (`font-size: clamp(2.4rem,7.5vw,4.2rem)`) — large text threshold, all gradient stops ≥ 3:1 on white ✓ +- Body/muted text stays `#6b6b65` on white (~4.5:1) ✓ +- White text on gradient CTA buttons — all gradient stops dark enough for white ✓ + +--- + +## Open items / next steps + +- [ ] Configure NPM proxy host: `gethumanai.com` → `http://humanai-landing:80` +- [ ] Add SSL via Let's Encrypt in NPM +- [ ] Replace `// TODO: podłączyć backend` in `Contact.astro` with real form endpoint +- [ ] Set `SHOW_SECURITY = true` in `Security.astro` when ready to publish that section +- [ ] Swap placeholder logo (`.logo-icon` in `Nav.astro`) for final brand asset +- [ ] Consider adding `og:image` (1200×630 static PNG) for social previews