Skip to content

Redesign homepage with continuous code-glyph storytelling - #50

Merged
msrivas-7 merged 4 commits into
mainfrom
dev/marketing-particle-study
Sep 8, 2026
Merged

Redesign homepage with continuous code-glyph storytelling#50
msrivas-7 merged 4 commits into
mainfrom
dev/marketing-particle-study

Conversation

@msrivas-7

@msrivas-7 msrivas-7 commented Sep 7, 2026

Copy link
Copy Markdown
Owner

Product outcome

Replace the public homepage with the user-approved continuous code-glyph field and a clear, interactive Read → Ask → Check walkthrough. The rest of CodeTutor stays unchanged.

User journey changes

Previously the homepage used separate illustrations and a compact mobile version. Now one coherent animated story surrounds a reversible example on all screen sizes, with a static version when system Reduce Motion is enabled. Large viewports get a denser background field. The cinematic artwork comes before the headline/CTA, so the primary action is below the initial screen on ordinary desktop heights; scrolling is never locked or delayed. Sign-in, first-lesson and returning-learner destinations are unchanged.

Phase ledger

Phase Commit Finding Verification Review / deployment
Approved homepage redesign 71096d1 UX-195 tall-screen initial dispersion fixed Actual Codex in-app browser, 569 frontend tests, 16 retry-disabled E2E checks, build/typecheck, asset and Lighthouse budgets Initial CI and failed-job E2E rerun green; deployed preview verified; production not deployed
Review correction ccbad6e UX-196 focus survives artwork removal Actual in-app reduced-motion, compact-resize and graphics-loss/retry checks; 569 frontend tests and all 17 marketing E2E checks, retries disabled Updated-head CI and Codex review requested
Approved CI correction 8ba0252 Windows test failures no longer hidden 1424 backend tests passed (29 existing skips), typecheck, baseline/governance, actionlint; native-command and pipeline failure controls All hosted checks green; Windows test logs verified; Codex returned no new findings
Approved responsive refinement f1535b7 Phone motion, bounded large-screen density, UX-197 compact glyph clarity Actual in-app responsive/focus/recovery checks; 570 frontend tests; 34 full Chromium/WebKit marketing checks, zero retries Final-head CI and Codex review requested

Evidence

  • Actual browser: pointer circles, scoped arrow rotation/Tab exit, forward/reverse scrolling, repeated Read/Ask/Check, 320–1440px layouts, tall-screen reload, system Reduce Motion/light preference, graphics-download failure and WebGL context loss/retry.
  • Real navigation: Continue → dashboard; sign out → Privacy → homepage → anonymous first lesson → skip welcome → enabled editor controls.
  • Verified rebuilt Docker source and optimized production build. Browser evidence is bound to release harness 79523664-9004-44ba-97b6-6ad58d64c4e2; detailed evidence and tradeoffs in the design/release ledger.
  • No budget increase: total JS 634,016 bytes gzip; largest chunk 90,640 (<120,000). Three remains behind the lazy graphics boundary. Initial optimized homepage Lighthouse: performance 0.98, LCP 2104ms, CLS 0, TBT 0.
  • Review correction: previously removing focused artwork could leave keyboard focus on the document; now it moves to the headline, with the first-lesson action next. Focus elsewhere and the selected walkthrough stage remain unchanged.
  • Responsive refinement: previously phones used static art; now they animate unless Reduce Motion is enabled. A fixed capped pool adds atmosphere with CSS viewport area (not DPR), without rebuilding the scene on resize. Compact assembled glyphs scale down to stay distinct. Physical phone/battery performance is not claimed.
  • The walkthrough is explicitly illustrative, not a live AI response. System reduced motion replaces continuous animation; no on-page pause button per approved direction. This is not a claim of complete accessibility conformance or low-end-device performance.

Optimized local-build screenshots

Approved glyph homepage
Readable interactive walkthrough

Release gates

Deployed preview checked in the actual in-app browser: preview. Hero renders, pointer/keyboard walkthrough works, 390px reduced-motion layout retains Check state without overflow, and the first-lesson CTA reaches the existing editor welcome flow. This is preview evidence, not final production verification.

  • Final actual-browser phase audit and finding-level UX-195 verification.
  • Relevant local deterministic checks, clean diff and harness commit gate.
  • Codex review complete on final head f1535b7; every actionable thread resolved.
  • CI green (46 passing, one intentionally skipped) and preview checked. Shard 5 passed its one isolated rerun after a logged shared-test-database connection-limit failure; assertions and coverage unchanged.
  • Merge, successful deployment and actual production-browser verification. Merge 690c767 is served by the public release endpoint; production release and independent deep health are green.

Production closeout: actual Codex-browser checks passed for the hero, repeated Read/Ask/Check, keyboard focus, reduced motion, graphics-loss/Retry, returning-learner dashboard and anonymous first-lesson handoff. Phone CSS layout retains animation/state without horizontal overflow. Compact visual evidence comes from the final local/preview build: the production emulated screenshot tool mis-scaled captures, so those images are not claimed as pixel-perfect phone proof. Harness 3b4049ff-862c-4beb-a7f9-621886a1cf05 records the observations and limits.

Approved CI correction: previously a failing Windows native command could be masked by subsequent successes. Build/test jobs now explicitly use fail-fast Bash, tested by negative controls on each OS. The filesystem test remains active everywhere (real directory creation and no re-chmod of existing paths); exact POSIX mode bits are checked on Linux/macOS, where supported. No production runtime behavior changed. Hosted Windows job 101894481739 passed its negative controls, all 31 localDocker tests, and complete backend/frontend suites.

@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Sep 7, 2026

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review Completed 2026-09-08T00:28:23.738464Z f1535b7 Manual request
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@msrivas-7

Copy link
Copy Markdown
Owner Author

@codex review

Please review the complete homepage redesign, especially production routing, lazy Three chunk boundaries, GPU lifecycle/recovery, scroll and pointer behavior, keyboard/reduced-motion accessibility, and acquisition regressions. Local unit/build/budget checks and actual in-app browser journeys pass. Please flag actionable correctness/regression issues; intentional design decisions and limitations are documented in the PR.

@github-actions

github-actions Bot commented Sep 7, 2026

Copy link
Copy Markdown

Azure Static Web Apps: Your stage site is ready! Visit it here: https://gentle-flower-093ba7e0f-50.eastus2.7.azurestaticapps.net

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 71096d1d2f

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread frontend/src/features/marketing/study/MarketingHomepage.tsx
@msrivas-7

Copy link
Copy Markdown
Owner Author

@codex review

Please review current head ccbad6e, including the focus-ownership correction and the complete homepage diff. The prior actionable thread has been fixed and browser-verified.

@github-actions

github-actions Bot commented Sep 8, 2026

Copy link
Copy Markdown

Azure Static Web Apps: Your stage site is ready! Visit it here: https://gentle-flower-093ba7e0f-50.eastus2.7.azurestaticapps.net

@msrivas-7

Copy link
Copy Markdown
Owner Author

@codex review

Latest head 8ba0252 includes the approved CI root-cause fix: fail-fast cross-platform commands and platform-correct filesystem assertions. Please review this head; local full backend checks and negative shell controls pass.

@github-actions

github-actions Bot commented Sep 8, 2026

Copy link
Copy Markdown

Azure Static Web Apps: Your stage site is ready! Visit it here: https://gentle-flower-093ba7e0f-50.eastus2.7.azurestaticapps.net

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. What shall we delve into next?

Reviewed commit: 8ba0252d6a

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

@msrivas-7

Copy link
Copy Markdown
Owner Author

@codex review

Please review f1535b7: user-approved phone animation and bounded viewport-based ambient density, with compact glyph sizing. Local full tests and real-browser checks pass; prior review threads are resolved.

@github-actions

github-actions Bot commented Sep 8, 2026

Copy link
Copy Markdown

Azure Static Web Apps: Your stage site is ready! Visit it here: https://gentle-flower-093ba7e0f-50.eastus2.7.azurestaticapps.net

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Keep it up!

Reviewed commit: f1535b784e

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

@msrivas-7
msrivas-7 merged commit 690c767 into main Sep 8, 2026
73 of 74 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant