updating the ui/ux of the searching skills section

[ak-0283]

Related Issue

Fixes #138

Description:

In this section, I implemented user-friendly UI/UX enhancements to the skill-based job search form, focusing on improving interactivity and visual appeal. The changes include:

1. Interactive Hover Effects:

   • Label: On hover, the label text changes color, becomes bold, and features a subtle text-shadow effect for better visibility and engagement. It also slightly scales up, creating a dynamic feel.
   • Input Field: The input field now highlights with a subtle shadow and border color change on hover, enhancing interactivity.

2. Focus States for Input Fields:

   • When a user clicks or tabs into the input field, the border glows with a bright color, accompanied by a shadow effect for a glowing appearance, indicating focus clearly.
   • The background color of the input field subtly changes, offering a more refined user experience.

3. Button Styling and Interaction:

   • The "Search Jobs" button includes a hover effect where the background color changes and the button lifts slightly, signaling it is clickable and active.

4. Responsive Design:

   • The layout and hover effects are designed to work seamlessly on both desktop and mobile devices, ensuring accessibility across various screen sizes.

These enhancements make the form visually appealing, intuitive, and user-focused, encouraging engagement and simplifying the process of searching for jobs by skills. The subtle animations and transitions add polish, demonstrating attention to detail in UI/UX design.

Type of PR

• Bug fix
• Feature enhancement
• Documentation update
• Other (specify): _______________

Summary of Changes

[Briefly summarize what this pull request introduces or modifies.]

Screenshots / Videos (if applicable)

Checklist:

• [ X] Performed a self-review of my code.
• [ X] Followed the Contribution Guidelines.
• [ X] Tested the changes thoroughly before submitting this pull request.
• Provided relevant issue numbers, screenshots, and videos after making the changes.
• Commented on hard-to-understand areas of the code.

Testing Instructions

[Provide clear steps to test the functionality of your changes, if applicable.]

Additional Context

[Include any additional information or context that might be helpful for reviewers.]

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
scd-profile-score	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 17, 2025 7:57am

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTE.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[ak-0283]

Please review and merge it . @Ojas-Arora

[ak-0283]

first i have done the sync fork in the branch & then i have done the code and after that i have pushed @Ojas-Arora

Screen.Recording.2025-01-17.133400.mp4

---

[Ojas-Arora]

Approved