diff --git a/AGENTS.md b/AGENTS.md index 759cad4..f99343b 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -57,7 +57,7 @@ All of these must pass before a change is done. CI (`.github/actions/check/`) ru - **Client code.** Keep content in Server Components. Add `"use client"` only where interaction needs it. - **Section links.** In-page section links go through `scrollToSection`, which moves focus to the section's heading. Off the home page they point to `/#id`. - **Per-page metadata.** Every page sets it with `pageMetadata()` from `src/lib/metadata.ts`. New public pages also belong in `src/app/sitemap.ts` (the Playwright suite checks the sitemap matches `PAGES`). -- **Dark bands.** Inside `.band` (header row, hero, approach, Now building card) the generic tokens already hold band values. Use `--text`, `--surface`, `--accent` and so on; don't hard-code band colours, or the Terminal skin can't reset them. +- **Dark bands.** Inside `.band` (header row, hero, approach, Car Brain card) the generic tokens already hold band values. Use `--text`, `--surface`, `--accent` and so on; don't hard-code band colours, or the Terminal skin can't reset them. The light theme pairs a light TheEventa card with dark Car Brain; root card-surface tokens preserve the dark and Terminal palettes. - **Car Brain gate.** `CAR_BRAIN_PUBLISHED` in `src/content/carBrainLinks.ts` stays `false` until Tomasz says the App Store listing is live. The independent-product card is visible during development; keep the store links behind the gate, and never import `src/content/carBrain.ts` into client code, or the links reach the build while unpublished. - **Accessibility.** Keyboard access, visible focus, reduced motion, and no sideways scroll at 320px are all required. The axe scans must stay at zero violations. diff --git a/README.md b/README.md index 24f8b9a..034c336 100644 --- a/README.md +++ b/README.md @@ -69,7 +69,7 @@ GitHub Actions runs all of these on Node 24.21.0, through the shared steps in `. All CSS is imported in `src/components/Document.tsx` and nowhere else, with `skin-terminal.css` last. The Terminal rules use `:where()`, so they win on order, not specificity. Next.js loads page-level CSS after layout CSS, so a component importing its own stylesheet would load after the skin and override it. -The standard skin keeps the CV's palette and fonts. The header, the hero, the approach section and the Now building card are dark bands in both themes, and contact is a teal band. Inside a `.band` (and the header's inner row) `src/index.css` re-points the generic tokens (`--text`, `--surface`, `--accent`, …) to band values, so components inside need no colours of their own; the Terminal skin resets them to its own tokens. +The standard skin keeps the CV's palette and fonts. The header, hero and approach section are dark bands in both themes, and contact is a teal band. Light mode pairs a light TheEventa card with a dark Car Brain card; root card-surface tokens preserve the dark-mode palette. Inside a `.band` (and the header's inner row) `src/index.css` re-points the generic tokens (`--text`, `--surface`, `--accent`, …) to band values, so components inside need no colours of their own; the Terminal skin resets them to its own tokens. Below 640px, the standard architecture panel uses tighter spacing while retaining all nodes and explanations. ## Versions diff --git a/src/components/Hero/Hero.css b/src/components/Hero/Hero.css index 889bbd3..421b0bf 100644 --- a/src/components/Hero/Hero.css +++ b/src/components/Hero/Hero.css @@ -286,6 +286,38 @@ } } +/* Keep every node and its explanation visible without a tall mobile panel. */ +@media (max-width: 639px) { + :where(html:not(.skin-terminal)) .hero-grid { + gap: 20px; + } + + :where(html:not(.skin-terminal)) .arch-body { + padding: 12px; + } + + :where(html:not(.skin-terminal)) .arch-node { + min-height: 54px; + padding: 8px 10px; + } + + :where(html:not(.skin-terminal)) .arch-grid { + gap: 6px; + } + + :where(html:not(.skin-terminal)) .arch-wire { + height: 14px; + overflow: hidden; + } + + :where(html:not(.skin-terminal)) .arch-caption, + :where(html:not(.skin-terminal)) .arch-footer { + min-height: 0; + margin-top: 8px; + padding: 8px 10px; + } +} + @media (min-width: 801px) { .hero { padding: 44px 0 52px; diff --git a/src/content/carBrain.ts b/src/content/carBrain.ts index 8a75981..38da866 100644 --- a/src/content/carBrain.ts +++ b/src/content/carBrain.ts @@ -39,8 +39,7 @@ export const carBrain: CarBrain = { title: "Car Brain", role: "Creator & Developer", text: "A vehicle-management app I’m building for iOS, Android and the web around a shared Appwrite backend.", - architecture: - "React Native powers the mobile app and Next.js the web client under development. Both use TypeScript. Cloud functions handle AI insights and VIN decoding.", + architecture: "Cloud functions handle AI insights and VIN decoding.", features: "Vehicle management · Maintenance, fuel & costs · Reports & analytics", automation: @@ -99,8 +98,7 @@ export const carBrainFor = (locale: "en" | "pl"): CarBrain => { eyebrow: "Własny produkt", role: "Twórca i programista", text: "Rozwijam aplikację do zarządzania pojazdami na iOS, Androida i przeglądarkę, ze wspólnym backendem Appwrite.", - architecture: - "Aplikacja mobilna korzysta z React Native, a powstająca wersja webowa z Next.js. Obie używają TypeScriptu. Funkcje chmurowe obsługują analizę AI i dekodowanie VIN.", + architecture: "Funkcje chmurowe obsługują analizę AI i dekodowanie VIN.", features: "Zarządzanie pojazdami · Serwis, paliwo i koszty · Raporty i analityka", automation: diff --git a/src/content/publicProfile.ts b/src/content/publicProfile.ts index d9df69b..638bf2d 100644 --- a/src/content/publicProfile.ts +++ b/src/content/publicProfile.ts @@ -187,7 +187,7 @@ export const profile: Profile = { number: "02", topic: "Quality and mentoring", period: "Since 2022", - title: "From days of manual regression to under an hour", + title: "From days of manual regression to about an hour", summary: "Instead of writing a proposal, I built a working Cypress suite. My manager hired an automation tester; I trained two testers and reviewed every change in the first year.", outcome: "1–3 days → about an hour on Orange TV GO.", diff --git a/src/content/work/studies.ts b/src/content/work/studies.ts index 63e3f15..036ad04 100644 --- a/src/content/work/studies.ts +++ b/src/content/work/studies.ts @@ -43,9 +43,9 @@ export const caseStudies: CaseStudy[] = [ { slug: "orange-e2e-testing", contributionId: "orange-e2e", - title: "From days of manual regression to under an hour", + title: "From days of manual regression to about an hour", description: - "How I introduced automated end-to-end testing at Orange Polska, trained two testers, and cut regression checks from days to under an hour.", + "How I introduced automated end-to-end testing at Orange Polska, trained two testers, and cut regression checks from days to about an hour.", company: "Orange Polska", role: "I introduced automated end-to-end testing, built the test architecture and trained two testers", period: "Since 2022", @@ -120,9 +120,9 @@ const polish: Record< }, }, "orange-e2e-testing": { - title: "Od dni ręcznej regresji do mniej niż godziny", + title: "Od dni ręcznej regresji do około godziny", description: - "Jak wprowadziłem automatyczne testy end-to-end w Orange Polska, przeszkoliłem dwie osoby i skróciłem regresję z dni do mniej niż godziny.", + "Jak wprowadziłem automatyczne testy end-to-end w Orange Polska, przeszkoliłem dwie osoby i skróciłem regresję z dni do około godziny.", role: "Wprowadziłem automatyzację E2E, zbudowałem architekturę testów i przeszkoliłem dwie osoby", period: "Od 2022", team: "Ja, nowo zatrudniony tester automatyzujący i tester manualny przechodzący do automatyzacji", diff --git a/src/design/skin-terminal.css b/src/design/skin-terminal.css index 8193e8c..7012c35 100644 --- a/src/design/skin-terminal.css +++ b/src/design/skin-terminal.css @@ -46,6 +46,8 @@ html.skin-terminal { --band-node-active: color-mix(in srgb, var(--accent) 12%, transparent); --band-panel: var(--surface); --teal-band: var(--canvas); + --building-card: var(--surface); + --product-card: var(--surface); } @media (prefers-color-scheme: dark) { diff --git a/src/i18n/profile.ts b/src/i18n/profile.ts index 3c0e2f4..5827dba 100644 --- a/src/i18n/profile.ts +++ b/src/i18n/profile.ts @@ -89,7 +89,7 @@ const polish: Profile = { ...profile.contributions[1], topic: "Jakość i mentoring", period: "Od 2022", - title: "Od dni ręcznej regresji do mniej niż godziny", + title: "Od dni ręcznej regresji do około godziny", summary: "Zamiast pisać propozycję, zbudowałem działający zestaw testów Cypress. Mój przełożony zatrudnił testera automatyzującego; przeszkoliłem dwie osoby i przez pierwszy rok przeglądałem każdą zmianę.", outcome: "1–3 dni → około godziny w Orange TV GO.", diff --git a/src/index.css b/src/index.css index 1212e9e..2193f1e 100644 --- a/src/index.css +++ b/src/index.css @@ -1,7 +1,7 @@ /* The standard skin keeps the CV's palette and type (cv.devthomas.pl): warm paper, one teal accent, pill controls, 20px cards, and Fraunces / Geist / Geist Mono. Its own layout adds dark brand bands (header, hero, approach, - the "Now building" card) that stay dark in both themes, and a teal contact + the Car Brain card in light mode), and a teal contact band. The Terminal skin redefines every token it uses. */ :root { --canvas: #f7f5f0; @@ -25,6 +25,8 @@ --band-node-active: #17292b; --band-panel: #121918; --teal-band: #0f6b75; + --building-card: var(--surface); + --product-card: var(--band); --space-1: 4px; --space-2: 8px; --space-3: 12px; @@ -62,10 +64,14 @@ --band: #0a0e0d; --band-line: #2a3531; color-scheme: dark; + --building-card: var(--band); + --product-card: var(--surface); } } html.dark-theme { + --building-card: var(--band); + --product-card: var(--surface); --canvas: #0f1413; --surface: #161d1b; --text: #e8eeeb; diff --git a/src/sections/Background/Background.css b/src/sections/Background/Background.css index 9f8b480..199fcda 100644 --- a/src/sections/Background/Background.css +++ b/src/sections/Background/Background.css @@ -37,7 +37,7 @@ .timeline-period { color: var(--text-secondary); font-family: var(--font-mono); - font-size: 12px; + font-size: 13px; letter-spacing: 0.04em; } diff --git a/src/sections/Now/NowSection.tsx b/src/sections/Now/NowSection.tsx index 6319261..38c7c02 100644 --- a/src/sections/Now/NowSection.tsx +++ b/src/sections/Now/NowSection.tsx @@ -16,7 +16,7 @@ const Building = ({ locale = "en" }: { locale?: Locale }) => {

{building.eyebrow} @@ -73,7 +73,7 @@ const IndependentProduct = ({

diff --git a/src/sections/Now/now.css b/src/sections/Now/now.css index 31e6732..37d0878 100644 --- a/src/sections/Now/now.css +++ b/src/sections/Now/now.css @@ -15,7 +15,8 @@ } .now-card--building { - border: 1px solid var(--band-line); + background: var(--building-card); + border: 1px solid var(--separator); } .now-meta { @@ -40,7 +41,7 @@ border-radius: var(--radius-control); color: var(--text-soft); font-family: var(--font-mono); - font-size: 11px; + font-size: 12px; letter-spacing: 0.04em; } @@ -54,7 +55,7 @@ .now-years { color: var(--text-secondary); font-family: var(--font-mono); - font-size: 11px; + font-size: 13px; letter-spacing: 0.04em; } @@ -68,7 +69,7 @@ } .now-card--building .now-title { - color: var(--band-strong); + color: var(--text); } .now-text { @@ -104,7 +105,7 @@ .pipeline-step.is-key { border-color: var(--accent); - color: var(--band-strong); + color: var(--text); } .now-link { @@ -116,6 +117,7 @@ .now-card--shipped { display: grid; gap: 24px; + background: var(--product-card); } .now-shipped-copy { @@ -264,7 +266,7 @@ .now-shot-caption { max-width: 30ch; color: var(--text-secondary); - font-size: 12px; + font-size: 13px; line-height: 1.5; text-align: center; }