Enhance Supported Skills Section with Auto-Scrolling Marquee

[Dushyantcoder07]

Summary [required]

Hey! I Added a subtle auto-scrolling marquee to the Supported Skills strip, with a duplicated track for seamless right-to-left motion, refreshed card-style styling, improved spacing and typography, and smoother hover behavior for the skill tags. It also includes a reduced-motion fallback so the section stays accessible and not distracting.

Validation passed on the touched files, with no reported errors.

Related Issue [required]

Closes #238

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]

| index.html | Wrapped the Supported Skills row in a marquee container and added a second track copy so the skills can scroll smoothly from right to left. |
| style.css | Reworked the Supported Skills section styling with a softer card-like surface, improved spacing and typography, pill-style skill tags, hover effects, responsive adjustments, and a reduced-motion fallback. |
| script.js | Added the client-side marquee initializer that clones the skill row once for a seamless looping animation. |

How to Test This PR [required]

1. Clone the branch and switch to it:
   git checkout Auto-Scrolling-Marquee
2. Install dependencies:
   py -m pip install -r requirements.txt
3. Start the app:
   py app.py
4. Open the app in your browser:
   http://127.0.0.1:5000
5. Verify the Supported Skills section:
   It should auto-scroll smoothly from right to left, pause on hover, and stay visually consistent on different screen sizes.
6. Run the tests:
   py tests/test_basic.py

Expected test output:

29 passed, 0 failed out of 29 tests

Test Results [required]

The test run passed.(29 passed, 0 failed out of 29 tests)

Screenshots (if UI change)

BEFORE:

AFTER:

Self-Review Checklist [required]

• [ x] I have read CONTRIBUTING.md and followed all guidelines
• [ x] My branch name follows the convention: feat/, fix/, docs/, data/, style/, test/
• [ x] I have run python tests/test_basic.py and all 27 tests pass
• [ x] I have run flake8 . locally and there are no errors
• [ x] I have not introduced any print() or console.log() debug statements
• [ x] Every new function I wrote has a docstring
• [ x] I have not modified files outside the scope of the linked issue
• [ x] If I changed the UI, I tested it at 375px (mobile) and 1280px (desktop)
• [ x] If I added a project to the dataset, it has all required JSON fields

Notes for Reviewer

This PR refreshes the Supported Skills strip on the home page by turning it into a subtle right-to-left marquee, improving the visual treatment to match DevPath’s design system, and adding smoother hover behavior plus responsive and reduced-motion fallbacks.

[vercel]

@Dushyantcoder07 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.

[Dushyantcoder07]

Please REVIEW it @komalharshita

[komalharshita]

Excellent UI enhancement overall. The marquee implementation is smooth, well-scoped, and thoughtfully handled with accessibility considerations like reduced-motion fallback and hover pause behavior.

The cloned-track approach for seamless looping is implemented cleanly, and the visual refresh improves the Supported Skills section without affecting core functionality. Responsive behavior and animation polish are also handled well.

Minor observation: the PR introduces a fairly large styling refresh in addition to the marquee behavior, but the changes remain cohesive and relevant to the section being enhanced.

Approved for merge.