fix: improve responsive skill strip marquee behavior

[185xak]

Summary [required]

This PR fixes the responsive overflow issue in the skills strip section where some skill tags extended beyond the container boundary on smaller screen sizes. It also completes the intended marquee animation behavior by implementing smooth automatic scrolling with hover pause interaction. Additionally, hover shadow clipping was resolved to improve the overall UI responsiveness and user experience.

Related Issue [required]

Closes #392

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	Fixed responsive overflow issue in the skills strip section, implemented smooth marquee animation behavior, added hover pause interaction, and resolved hover shadow clipping.

How to Test This PR [required]

1. Checkout this branch:
   git checkout fix/skills-tags-overflow

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

3. Run the application:
   python app.py

4. Open:
   http://127.0.0.1:5000

5. Navigate to the skills strip section on the homepage.

6. Resize the browser window to smaller screen widths and verify:

   • skill tags remain inside the container
   • marquee animation works smoothly
   • hover pause interaction works
   • hover shadows are not clipped

7. Run tests:
   python tests/test_basic.py

Test Results [required]

PASS test_projects_json_loads
PASS test_each_project_has_required_fields
PASS test_find_project_by_id_found
PASS test_find_project_by_id_missing
PASS test_parse_skills_basic
PASS test_parse_skills_empty_string
PASS test_parse_skills_single_entry
PASS test_score_single_project_full_match
PASS test_score_single_project_no_match
PASS test_get_recommendations_returns_results
PASS test_get_recommendations_max_three
PASS test_get_recommendations_no_match_returns_empty
PASS test_get_recommendations_result_format
PASS test_validate_all_valid
PASS test_validate_missing_skills
PASS test_validate_missing_level
PASS test_validate_missing_interest
PASS test_validate_missing_time
PASS test_validate_all_missing
PASS test_home_route
PASS test_recommend_api_valid
PASS test_recommend_api_missing_field
PASS test_recommend_api_empty_body
PASS test_project_detail_found
PASS test_project_detail_not_found
PASS test_internal_server_error_page
PASS test_view_code_found
PASS test_download_code_found
PASS test_health_check
PASS test_scoring_weights_has_all_keys

30 passed, 0 failed out of 30 tests

Screenshots (if UI change)

Before	After

|
| |

Self-Review Checklist [required]

• I have read CONTRIBUTING.md and followed all guidelines
• My branch name follows the convention: feat/, fix/, docs/, data/, style/, test/
• 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
• Every new function I wrote has a docstring
• 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

The skills strip section now includes smooth automatic marquee scrolling behavior with hover pause interaction in addition to the responsive overflow fix.

[vercel]

@185xak 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.

[185xak]

Hi @komalharshita ,

Just a gentle follow-up on this PR. The responsive overflow issue and marquee behavior improvements have been implemented, tested, and aligned with the issue requirements.

Kindly review it whenever possible. Thank you!