Add search bar for filtering projects by name and description

[1234-ad]

Description

This PR implements a search bar for filtering projects by name and description, addressing the remaining part of issue #8 (Project Sorting and Filtering).

Changes Made

1. Created SearchBar component (src/components/SearchBar.tsx)

• Reusable search input component with clear functionality
• Clean, accessible design with clear button (✕) that appears when text is entered
• Matches the existing dark theme aesthetic
• Fully responsive design

2. Added SearchBar styles (src/styles/components/SearchBar.css)

• Consistent styling with existing filter buttons
• Smooth transitions and hover effects
• Focus states for better accessibility
• Mobile-responsive layout

3. Enhanced Projects page (src/pages/Projects.tsx)

• Integrated search functionality that filters by both name and description
• Search works in combination with existing language filters and sorting
• Added results counter showing "Showing X of Y projects"
• Real-time filtering as user types
• Case-insensitive search for better UX

4. Updated Projects layout (src/styles/pages/Projects.css)

• New search-sort-row layout for search bar and sort dropdown
• Responsive design that stacks on mobile devices
• Added styling for results info text

Features

✅ Real-time Search: Filters projects instantly as you type
✅ Multi-field Search: Searches both project name and description
✅ Case-insensitive: Works regardless of capitalization
✅ Clear Button: Easy way to reset search with ✕ button
✅ Combined Filtering: Works seamlessly with language filters and sorting
✅ Results Counter: Shows how many projects match current filters
✅ Responsive Design: Works perfectly on mobile and desktop

User Experience

Before: Users could only filter by language and sort by stars/forks/name
After: Users can now quickly find specific projects by typing keywords

Example searches:

• "gyft" → finds the GYFT project
• "timetable" → finds timetable-related projects
• "api" → finds all projects with "api" in name or description

Technical Details

• Search is performed client-side for instant results
• No external dependencies added
• Maintains existing sorting and filtering logic
• Follows existing code patterns and styling conventions
• Fully typed with TypeScript

Testing Checklist

• Search filters projects by name
• Search filters projects by description
• Search is case-insensitive
• Clear button works correctly
• Search works with language filters
• Search works with sorting
• Results counter updates correctly
• Responsive on mobile devices
• No console errors
• Follows existing code style

Screenshots

Will be added after testing on live site

Related Issue

Partially resolves #8 (specifically the "filter by name (search bar)" requirement)

Additional Notes

• The search also includes descriptions, making it more powerful than just name filtering
• The implementation is performant even with many projects since it's client-side filtering
• Future enhancement: Could add debouncing if the project list grows significantly
• The search bar placeholder text clearly indicates it searches both name and description