feat(a11y): add scroll-progress bar + normalize typography letter-spa…

[Shan7Usmani]

Summary

Adds a scroll-progress bar to the header and normalizes typography letter-spacing across the landing page for a more cohesive visual experience.

Closes #3222

Type of Change

• 🐛 Bug fix (non-breaking change that fixes an issue)
• ✨ New feature (non-breaking change that adds functionality)
• 💥 Breaking change (fix or feature that changes existing behavior)
• 📝 Documentation update
• ♻️ Refactor / code cleanup (no functional change)
• ⚡ Performance improvement
• 🔒 Security fix
• 🧪 Tests only

---

What Changed

• src/components/AppNavbar.tsx — Added scrollProgress state, extended existing scroll listener to calculate scrollTop / docHeight, added scroll-progress bar markup at header bottom edge, normalized nav link tracking-[0.08em], added translate-y-[1px] to triangle logo mark for optical alignment
• src/app/globals.css — Added .scroll-progress-track and .scroll-progress-bar CSS classes with cyan accent glow, transform-origin: left, scaleX animation, and prefers-reduced-motion media query to disable transition
• src/components/landing/LandingPage.tsx — Normalized letter-spacing to 0.08em on wLabel (was 0.1em), stat labels (was 0.12em), "ABOUT DEVTRACK" header (was 0.12em), heatmap label (was 0.1em), "OPEN SOURCE" header (was 0.12em), and stat tile labels (was 0.1em)

---

How to Test

1. Run pnpm dev and open the landing page
2. Scroll down slowly — the thin cyan bar at the bottom edge of the header should fill from left to right proportionally
3. Scroll back to top — bar should shrink back to 0% width
4. Inspect header: nav links, "OPEN SOURCE · FREE FOREVER" badge, and hero stat labels should all have consistent letter-spacing
5. Check the ▲ triangle logo mark — should appear optically aligned with the "DEVTRACK" wordmark baseline
6. Enable prefers-reduced-motion in OS settings and scroll — the progress bar should snap instantly without transition

Expected result: Progress bar fills smoothly with a subtle cyan glow as you scroll. All monospace labels share the same 0.08em letter-spacing. Logo mark is visually balanced with the wordmark. No layout shift or conflict with the sticky translucent header.

---

Checklist

• Linked the related issue above
• Self-reviewed my own diff
• No unnecessary console.log, debug code, or commented-out blocks
• npm run lint passes locally
• No TypeScript errors (npm run type-check)
• Added or updated tests where applicable
• Updated documentation / comments if behavior changed

---

Accessibility (UI changes only)

• Keyboard navigation works correctly
• Color contrast meets WCAG AA standard
• ARIA labels / roles added where needed
• Tested on mobile / responsive layout

---

Additional Context

The scroll progress bar uses transform: scaleX() for GPU-accelerated animation, avoiding layout thrash. The prefers-reduced-motion media query disables the CSS transition so the bar snaps instantly for users who prefer reduced animations. The progress bar is purely decorative (aria-hidden="true") and does not convey information to screen readers.

[github-actions]

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

• level:beginner — 20 pts
• level:intermediate — 35 pts
• level:advanced — 55 pts
• level:critical — 80 pts

Quality (optional):

• quality:clean — ×1.2 multiplier
• quality:exceptional — ×1.5 multiplier

Validation (required to score):

• gssoc:approved — counts for points
• gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

[Shan7Usmani]

Hi @Priyanshu-byte-coder! The \star-required\ check is failing due to a workflow bug — not because I haven't starred the repo.

The \GITHUB_TOKEN\ in \pr-star-required.yml\ gets a 403 when calling the stargazers API:

`
GET /repos/Priyanshu-byte-coder/devtrack/stargazers?per_page=100 - 403
You do not have permission to view the stargazers of this repository
`

This causes \hasStarred()\ to throw an unhandled error, which crashes the script before it can set the status. The \permissions\ block in the workflow only declares \pull-requests: write\ and \statuses: write\ — the stargazers endpoint likely needs \contents: read\ to work.

Quick fix options:

1. Add \contents: read\ to the workflow's \permissions\ block
2. Wrap \hasStarred()\ in a try/catch and default to success on API errors
3. Manually set the \star-required\ status to success on this PR

I've confirmed via the GitHub API that I have starred the repo. Thanks!

[Shan7Usmani]

Hi! All 4 of my PRs (#3225, #3226, #3227, #3233) are failing the Star required check with Resource not accessible by integration.

The issue is in .github/workflows/pr-star-required.yml - the permissions block only declares pull-requests: write and statuses: write, but the listStargazersForRepo API call requires contents: read (or starring: read). Since the workflow uses pull_request_target, the GITHUB_TOKEN is scoped to only the explicitly declared permissions, which do not include stargazers access.

Could you add contents: read to the permissions block? This would fix the check for all fork contributors. Thanks!