oskar/gethumanai-landing
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

docs: update README + add session log 2026-06-02

Browse source
This commit is contained in:
Oskar Kapala 2026-06-02 22:46:23 +02:00
parent b7b133647c
commit 4797ac6b2e
2 changed files with 187 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
README.md
View file

@ -19,10 +19,10 @@ npm run preview # preview built site at http://localhost:4321
```sh ```sh
# Host: SATURN # Host: SATURN
# Create a local test network if npm_proxy doesn't exist locally # Create the network if it doesn't exist locally
docker network create npm_proxy 2>/dev/null || true docker network create npm_default 2>/dev/null || true
docker compose up --build docker compose up --build
# site at http://localhost:80 # site at http://localhost:8080
``` ```
## Deploy to VPS ## Deploy to VPS
@ -34,42 +34,85 @@ docker compose up --build
The script: The script:
1. Commits any pending changes and pushes to Forgejo (`oskar/gethumanai-landing`). 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`. 2. SSH-es to `ubuntu-4gb-hel1-1`, clones/pulls to `~/gethumanai-landing`, 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. 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, Container is on the `npm_default` external Docker network. In **Nginx Proxy Manager** add:
create a proxy host: `gethumanai.com` → `http://humanai-landing:80`. - 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/ src/
i18n/ i18n/
pl.json # Polish copy (all text) pl.json # all Polish copy + slogans
en.json # English copy (all text) en.json # all English copy + slogans
index.ts # translation helpers index.ts # t(locale) helper, getLangFromUrl, getAlternateUrl
layouts/ layouts/
Layout.astro # HTML shell, meta/OG/hreflang Layout.astro # HTML shell — meta, OG, hreflang, global CSS + gradient system
components/ components/
Nav.astro Nav.astro # sticky nav, mobile hamburger, PL/EN switcher
Hero.astro Hero.astro # gradient mesh bg, geo SVG, gradient H1, manifest strip
Problem.astro Problem.astro # problem/contrast section
HowWeWork.astro HowWeWork.astro # 3 differentiators with per-card accents
Offers.astro Offers.astro # 4 offer cards with per-pillar gradient accents
Process.astro Process.astro # 3-step process with gradient step circles
Security.astro # hidden on MVP (SHOW_SECURITY flag) Security.astro # hidden on MVP — toggle SHOW_SECURITY = true to enable
Contact.astro Contact.astro # mailto form, "zawsze rozmawiasz z człowiekiem" badge
Footer.astro Footer.astro # dark footer, nav links, copyright
pages/ pages/
index.astro # PL — / index.astro # PL — /
en/ 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 ## 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`).

118
sessions/2026-06-02.md Normal file
View file

@ -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