Skip to content

Comments

audit: WCAG, SEO, responsiveness, and optimization pass#138

Open
carsonSgit wants to merge 1 commit intomainfrom
claude/audit-wcag-seo-responsive-7Rzoo
Open

audit: WCAG, SEO, responsiveness, and optimization pass#138
carsonSgit wants to merge 1 commit intomainfrom
claude/audit-wcag-seo-responsive-7Rzoo

Conversation

@carsonSgit
Copy link
Owner

WCAG:

  • Add canvas to JSX with aria-hidden (was never rendered; grid highlight effect now works)
  • GuideModal: add role=dialog, aria-modal, aria-labelledby, focus trap, focus close button on open
  • Add .sr-only utility class to globals.scss
  • AsciiFooter: add sr-only "Thanks for stopping by!" for screen readers
  • BracketLink: inject sr-only "(opens in new tab)" when target=_blank
  • ExperienceList/EducationList: sr-only text on company links
  • All sections (Intro/Projects/Experience/Education): add aria-labelledby + ids on headings
  • Increase --text-muted from #71717a → #8a8a94 (WCAG AA 4.5:1 contrast on dark bg)
  • Remove !important from p/li color rule so detail-panel colors apply correctly
  • section-list__trigger: add :focus-visible outline
  • guide-trigger: split hover/focus, add :focus-visible outline
  • guide-modal__close: add :focus-visible outline

SEO:

  • Canonical URL via metadata.alternates
  • Richer page title and description mentioning Carson's role and schools
  • Add authors and keywords metadata fields
  • JSON-LD Person schema (name, jobTitle, sameAs, alumniOf, knowsAbout)
  • Move <Script> inside (valid HTML structure)
  • Add for cloud.umami.is
  • Create public/sitemap.xml
  • Update robots.txt with Sitemap directive

Responsiveness:

  • Portfolio max-width: 1600px (prevents extreme stretching on ultrawide)
  • New 1200px breakpoint: gap reduced from 12rem → 5rem (prevents cramped mid-range columns)
  • ASCII art: smaller font on ≤600px, hidden on ≤400px to prevent horizontal overflow

Optimization:

  • Avatar image: explicit width=56 height=56 to prevent CLS
  • Intro subtitle already had fetchpriority via Avatar component

https://claude.ai/code/session_01TnCck6GrSfEZeUWY7jDwfj

WCAG:
- Add canvas to JSX with aria-hidden (was never rendered; grid highlight effect now works)
- GuideModal: add role=dialog, aria-modal, aria-labelledby, focus trap, focus close button on open
- Add .sr-only utility class to globals.scss
- AsciiFooter: add sr-only "Thanks for stopping by!" for screen readers
- BracketLink: inject sr-only "(opens in new tab)" when target=_blank
- ExperienceList/EducationList: sr-only text on company links
- All sections (Intro/Projects/Experience/Education): add aria-labelledby + ids on headings
- Increase --text-muted from #71717a → #8a8a94 (WCAG AA 4.5:1 contrast on dark bg)
- Remove !important from p/li color rule so detail-panel colors apply correctly
- section-list__trigger: add :focus-visible outline
- guide-trigger: split hover/focus, add :focus-visible outline
- guide-modal__close: add :focus-visible outline

SEO:
- Canonical URL via metadata.alternates
- Richer page title and description mentioning Carson's role and schools
- Add authors and keywords metadata fields
- JSON-LD Person schema (name, jobTitle, sameAs, alumniOf, knowsAbout)
- Move <Script> inside <body> (valid HTML structure)
- Add <link rel="preconnect"> for cloud.umami.is
- Create public/sitemap.xml
- Update robots.txt with Sitemap directive

Responsiveness:
- Portfolio max-width: 1600px (prevents extreme stretching on ultrawide)
- New 1200px breakpoint: gap reduced from 12rem → 5rem (prevents cramped mid-range columns)
- ASCII art: smaller font on ≤600px, hidden on ≤400px to prevent horizontal overflow

Optimization:
- Avatar image: explicit width=56 height=56 to prevent CLS
- Intro subtitle already had fetchpriority via Avatar component

https://claude.ai/code/session_01TnCck6GrSfEZeUWY7jDwfj
@chatgpt-codex-connector
Copy link

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

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.

2 participants