Enhance contributor cards UI and improve responsive layout #739
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Author
|
Improved the contributor cards with a modern design and fixed responsive layout issues. Cards now display properly on all screen sizes with better visual appeal! 🎨✨ Feedback welcome! 👍" |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR significantly improves the visual design and functionality of the contributor cards on the /allcontributors page, making them more professional and responsive across all devices.
✨ Key Changes
🎯 UI/UX Improvements
Modern Card Design: Added gradient headers (blue-to-purple) with professional styling
Enhanced Avatar System: Implemented fallback avatar system with ring borders and better positioning
Professional Layout: Clean typography hierarchy with proper spacing and icons
Interactive Elements: Smooth hover effects and modern social media buttons
Dark Mode Support: Consistent theming for both light and dark modes
Responsive Layout Fixes
Full Screen Utilization: Fixed layout to properly use available screen width
Better Breakpoints: Improved responsive grid (1 col mobile, 2 col tablet, 3 col desktop)
Dynamic Sizing: Cards now resize properly based on screen size
Content Visibility: Increased card height (360px) to ensure all content is visible
Technical Enhancements
Alphabetical Sorting: Contributors now display in alphabetical order by name
Improved Search: Enhanced search functionality across name, college, and branch
Avatar Reliability: Added fallback system ensuring every card shows an avatar
Performance: Optimized grid rendering with better calculations
Visual Impact
Cards now resemble modern professional profiles (similar to LinkedIn)
No more cut-off content or floating elements
Consistent spacing and professional appearance
Better visual hierarchy and readability
Testing
✅ Responsive design tested on mobile, tablet, and desktop
✅ All 295+ contributors display correctly
✅ Search functionality works properly
✅ Avatar fallback system tested
✅ Dark mode compatibility verified
Before/After
The contributor cards have been transformed from basic gray boxes to modern, professional cards with gradient headers, proper spacing, and enhanced interactivity.
Type: Enhancement
Impact: UI/UX Improvement
Breaking Changes: None