fix: improve track progress visibility and UI interactions

[Bivek01]

Summary [required]

This PR fixes multiple UI/UX issues reported in Issue #812. The changes improve accessibility and readability in the Track Progress section, add active navigation highlighting while scrolling through the page, fix synchronization between popular skill tags and the skills input field, and improve overall theme-related UI consistency. These updates enhance user experience and make the homepage interactions more intuitive and accessible.

Related Issue [required]

Closes #812

Type of Change [required]

• Bug fix — resolves a broken behaviour
• Feature — adds new functionality
• Data — adds new projects to data/projects.json
• Documentation — updates docs, README, or code comments only
• Style — CSS or visual changes only, no logic change
• Refactor — restructures code without changing behaviour
• Test — adds or updates tests

What Was Changed [required]

File	Change made
static/style.css	Improved Track Progress visibility, text contrast, card readability, and active navbar styles
static/script.js	Fixed navbar scroll highlighting and skill tag synchronization
templates/index.html	Updated theme-related behavior and removed conflicting UI logic

How to Test This PR [required]

1. Checkout this branch:
   git checkout fix/issue-812-ui-ux-bugs

2. Install dependencies:
   pip install -r requirements.txt

3. Run the application:
   python app.py

4. Open:
   http://127.0.0.1:5000

5. Verify:

   • Track Progress section is clearly visible in Light Mode.
   • Navbar highlights the active section while scrolling.
   • Clicking skill tags updates the skills input field.
   • Theme toggle works correctly.

6. Run tests:
   python tests/test_basic.py

Expected Output:
All tests passed

Test Results [required]

All tests passed

Screenshots (if UI change)

Added before and after screenshots showing:

• Improved Track Progress visibility
• Active navbar highlighting
• Skill tag synchronization
  ##Before

##After

Self-Review Checklist [required]

• I have read CONTRIBUTING.md and followed all guidelines
• My branch name follows the convention: fix/issue-812-ui-ux-bugs
• I have run python tests/test_basic.py and all tests pass
• I have run flake8 . locally and there are no errors
• I have not introduced any print() or console.log() debug statements
• I have not modified files outside the scope of the linked issue
• If I changed the UI, I tested it at 375px (mobile) and 1280px (desktop)
• If I added a project to the dataset, it has all required JSON fields

Notes for Reviewer

This PR focuses on resolving the UI/UX issues reported in Issue #812, including accessibility improvements, navbar interaction enhancements, and skill input synchronization. No backend recommendation logic or dataset files were modified.

[vercel]

@bivekm01 is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for submitting your first pull request to DevPath.

Before review:

• Complete the PR template fully
• Ensure all tests pass
• Link your PR to an issue
• Keep changes scoped to the issue

A maintainer will review your contribution soon.

[Bivek01]

Hi @komalharshita ,

I have addressed all the issues mentioned in #812 and submitted the fixes under GSSoC 2026.

Implemented fixes include:

• Improved Track Progress section visibility and accessibility
• Added active navbar highlighting while scrolling
• Fixed skill tag synchronization with the skills input field
• Improved theme-related UI behavior and consistency

The changes have been tested locally and are working as expected.

Kindly review the PR and merge it if everything looks good.

Thank you!