This is a beginner-friendly Open Source project designed to:
- Celebrate contributors and their achievements
- Showcase developer profiles from around the world
- Encourage first-time PRs and open source participation
Whether you're making your first contribution or simply want to be part of a global developer community, this project is the perfect place to start.
.png){kind=link}
The main goal of this project is to create a community gallery of contributors. Each contributor gets their own Profile Card that appears on the website, highlighting their participation in Open Source.
- Display your personal Profile Card with photo, name, role, and GitHub link
- Highlight your first Open Source contribution
- Fully responsive and beginner-friendly
- Easy to customize card styles for personal flair
- Theme persistence across sessions (light/dark mode)
- Responsive design that works on all devices
- Interactive animations and hover effects
- Search and filter functionality for projects
- Statistics dashboard for community insights
- Achievement system for contributors
- Feedback and bug reporting system
- ✅ Theme Persistence: Light/dark theme preference now persists across browser sessions
- ✅ Improved UX: Theme toggle button with proper accessibility
- ✅ Modular Architecture: Theme functionality moved to separate module
- ✅ Cross-page Consistency: Theme applies to all pages in the application
- ✅ Real-time Statistics: Live contributor and project counts
- ✅ Interactive Charts: Visual representation of community growth
- ✅ Performance Metrics: Page load times and user engagement
- ✅ Responsive Design: Optimized for mobile devices
- ✅ Touch Gestures: Swipe navigation for project gallery
- ✅ Performance: Reduced bundle size and improved loading
- Aspect Ratio: Your image MUST be a square (1:1 ratio)
- File Format:
.jpgor.pngonly - Naming: Name the file exactly as your username (e.g.,
john-doe.jpg) - Size: Please keep image size under 500KB
- Quality: High resolution images (minimum 400x400px recommended)
- Star this repository (Optional, but highly recommended ⭐)
- Fork this repository to your own GitHub account
- Clone it to your local machine:
git clone https://github.com/<your-username>/dev-card-showcase.git cd dev-card-showcase
-
Prerequisites:
- Modern web browser (Chrome, Firefox, Safari, Edge)
- Code editor (VS Code recommended)
- Git installed on your system
-
Local Development:
# Open the project in your browser # Simply open index.html in your browser # For live reload during development, you can use: # Python: python -m http.server 8000 # Node.js: npx serve .
-
Project Structure:
dev-card-showcase/ ├── index.html # Main homepage ├── projects.html # Projects showcase ├── style.css # Main stylesheet ├── js/ │ ├── index.js # Homepage JavaScript │ ├── include.js # Common functionality │ └── projects.js # Projects page logic ├── theme-persistence/ │ └── theme.js # Theme management module ├── images/ # Contributor images ├── assets/ # Static assets └── css/ # Page-specific styles
- Add your image file into the
images/folder - Open
index.html - Locate the comment
👇 CONTRIBUTORS: START COPYING FROM HERE 👇 - Copy the template code block
- Paste it at the bottom of the list (above the closing tags)
- Update the
src="",<h2>,<span class="role">, and<p>tags with your details
Example:
<div class="card">
<img src="images/john-doe.jpg" alt="John's Photo" class="card-img">
<h2>John Doe</h2>
<span class="role">Frontend Wizard</span>
<p>"Hello world! This is my first PR."</p>
<a href="https://github.com/johndoe" class="card-btn" target="_blank">GitHub</a>
</div>-
Visual Testing:
- Open
index.htmlin your browser - Check that your card appears correctly
- Test on different screen sizes
- Verify theme toggle works
- Open
-
Code Quality:
- Ensure HTML is valid
- Check that images load properly
- Test links work correctly
- Save your changes
- Run the following commands:
git add . git commit -m "Added card for [Your Name]" git push origin main
- Go to GitHub and click "Compare & Pull Request"
If you want to change the background color of only your card:
- Add a unique class to your card div:
<div class="card my-custom-style"> - Open
style.css - Add your custom CSS at the very bottom of the file
Example:
.my-custom-style {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.my-custom-style .card-btn {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
}The application now supports persistent theme preferences across browser sessions:
- Automatic Detection: On first visit, detects system preference or defaults to dark
- Manual Toggle: Users can switch between light and dark themes
- Persistence: Choice is saved in localStorage and applied on subsequent visits
- Cross-page: Theme applies consistently across all pages
- CSS Variables: Themes use CSS custom properties for easy customization
- Data Attributes:
data-theme="light|dark"attribute on body element - JavaScript Module: Modular theme management in
theme-persistence/theme.js - Accessibility: Proper ARIA labels and keyboard navigation support
To add new themes or modify existing ones:
- Add new CSS variables in
style.css - Update the theme toggle logic in
theme.js - Test across all pages
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
- Touch-friendly navigation
- Optimized card layouts
- Swipe gestures for image galleries
- Collapsible menus
- Lazy loading for images
- Minified CSS/JS for production
- Optimized font loading
- CDN-hosted assets
- By Technology: JavaScript, Python, React, etc.
- By Difficulty: Beginner, Intermediate, Advanced
- By Category: Games, Tools, Demos, etc.
- By Contributor: Filter by specific contributors
- Real-time search as you type
- Fuzzy matching for better results
- Highlighted search terms
- Keyboard shortcuts (Ctrl+K to focus)
- Total contributors
- Total projects
- Page views
- Popular technologies
- Contribution timeline
- Geographic distribution
- GitHub API for contributor data
- Local analytics for usage metrics
- Manual curation for project metadata
- First Contribution: Welcome badge for new contributors
- Project Creator: For contributors who add projects
- Theme Explorer: For trying both light and dark themes
- Bug Hunter: For reporting and fixing issues
- Mentor: For helping other contributors
- Make your first PR
- Add a project to the showcase
- Try the theme toggle
- Report a bug or suggest improvement
- Help others in discussions
- Check existing issues first
- Use the bug report template
- Include browser and OS information
- Provide steps to reproduce
- Attach screenshots if relevant
**Title:** [Bug] Brief description
**Environment:**
- Browser: Chrome 91.0
- OS: Windows 10
- Device: Desktop
**Steps to Reproduce:**
1. Go to page X
2. Click on Y
3. See error Z
**Expected Behavior:**
What should happen
**Actual Behavior:**
What actually happens
**Screenshots:**
[Attach if applicable]
- Check if feature already exists
- Use feature request template
- Provide detailed use case
- Consider implementation complexity
**Feature Title:** [Feature] Brief description
**Problem:**
Current pain point or limitation
**Solution:**
Proposed solution
**Alternatives:**
Other approaches considered
**Additional Context:**
Screenshots, mockups, or examples
- Be respectful and inclusive
- Focus on constructive feedback
- Help newcomers learn
- Maintain professional communication
- Harassment or discrimination
- Spam or off-topic content
- Sharing inappropriate content
- Trolling or disruptive behavior
Violations will be addressed by maintainers with appropriate actions.
The application uses JSON files for project data:
{
"projects": [
{
"name": "Project Name",
"description": "Brief description",
"technologies": ["Tech1", "Tech2"],
"difficulty": "Beginner",
"category": "Games",
"author": "Contributor Name",
"github": "https://github.com/user/repo",
"demo": "https://demo-url.com"
}
]
}{
"contributors": [
{
"name": "John Doe",
"username": "johndoe",
"role": "Frontend Developer",
"github": "https://github.com/johndoe",
"bio": "Passionate developer...",
"skills": ["JavaScript", "React", "CSS"],
"contributions": 5
}
]
}// Get current theme
const currentTheme = themeManager.getSavedTheme();
// Toggle theme
themeManager.toggleTheme();
// Apply specific theme
themeManager.applyTheme('light');- All pages load correctly
- Theme toggle works on all pages
- Responsive design on mobile/tablet
- All links work
- Images load properly
- Forms submit correctly
- Search functionality works
- Accessibility features work
# Run tests (if implemented)
npm test
# Check code quality
npm run lint
# Build for production
npm run build- Go to repository Settings
- Scroll to GitHub Pages section
- Select source branch (main)
- Choose folder (root)
- Save and wait for deployment
- Add CNAME file to repository
- Configure DNS settings
- Update GitHub Pages settings
- Use CDN for static assets
- Implement caching headers
- Optimize images for web
- Use consistent indentation (4 spaces)
- Follow BEM naming for CSS
- Use semantic HTML
- Add comments for complex logic
css/
page-specific styles
js/
page-specific scripts
assets/
images, fonts, icons
projects/
individual project folders
- Create feature branch
- Make changes
- Test thoroughly
- Commit with descriptive message
- Create pull request
- Wait for review
type(scope): description
Types: feat, fix, docs, style, refactor, test, chore
- Image optimization and lazy loading
- CSS/JS minification
- Font loading optimization
- Critical CSS inlining
- Service worker for caching
- First Contentful Paint: < 1.5s
- Largest Contentful Paint: < 2.5s
- Cumulative Layout Shift: < 0.1
- First Input Delay: < 100ms
- Level AA compliance
- Keyboard navigation support
- Screen reader compatibility
- High contrast support
- Focus management
- ARIA labels and roles
- Semantic HTML structure
- Alt text for images
- Skip links for navigation
- Color contrast ratios
- English (primary)
- Spanish
- French
- German
- Hindi
- Create language file in
locales/ - Update language selector
- Translate all text content
- Test date/number formatting
default-src 'self';
script-src 'self' 'unsafe-inline';
style-src 'self' 'unsafe-inline';
img-src 'self' data: https:;
- Input sanitization
- XSS prevention
- CSRF protection
- Secure headers
- Regular dependency updates
- Make sure your image follows the specified requirements
- Test your changes locally before submitting a PR
- Keep your commit messages descriptive
- Follow the code of conduct
- Be patient with reviews
Having trouble setting up the project?
- Double-check that you're opening index.html
- If images are not loading, check path references.
- Still stuck? Raise an issue - we're here to help ✨
- Not sure how to set up the project? Check the README steps again
- Clear browser cache and localStorage
- Check that theme-persistence/theme.js is loading
- Verify localStorage is not disabled
- Check file path and naming
- Ensure images are in correct folder
- Verify image format and size
- Check browser console for errors
- Ensure all script files are included
- Verify file paths are correct
- Test on actual devices
- Check viewport meta tag
- Verify CSS media queries
This project is licensed under the MIT License.
Feel free to fork, remix, or build upon it — with proper credit 🙏
If this project inspired you or helped in any way — do leave a ⭐
It keeps us going and growing!
- Documentation: Check this README first
- Issues: Search existing issues on GitHub
- Discussions: Use GitHub Discussions for questions
- Discord: Join our community Discord (link in footer)
- GitHub Issues: For bugs and feature requests
- GitHub Discussions: For general questions
- Email: For private matters
- Community Forum: For long-form discussions
- All our amazing contributors
- The open source community
- GitHub for hosting
- Font Awesome for icons
- Google Fonts for typography
- Frontend: HTML5, CSS3, JavaScript (ES6+)
- Styling: Custom CSS with CSS Variables
- Icons: Lucide, Font Awesome
- Fonts: Inter, Roboto
- Hosting: GitHub Pages
- Version Control: Git
- Multi-language support
- Advanced search filters
- Project categories expansion
- Mobile app (PWA)
- API endpoints for data
- Integration with GitHub API
- Automated testing suite
- Performance monitoring
- Theme customization options
- User profiles with achievements
- Collaboration features
- Analytics dashboard
- Plugin system
- Third-party integrations
- Advanced admin panel
- Enterprise features
- Follow ESLint configuration
- Use Prettier for code formatting
- Write meaningful commit messages
- Add tests for new features
- Update documentation
- Automated checks (linting, tests)
- Peer review by maintainers
- Integration testing
- Deployment to staging
- Final approval and merge
Contributors are recognized through:
- GitHub contributor stats
- Achievement badges
- Special mentions in releases
- Contributor spotlight
- Theme persistence across sessions
- Modular theme management
- Improved accessibility
- Enhanced mobile experience
- Statistics dashboard
- Real-time data updates
- Interactive charts
- Performance improvements
- Mobile optimization
- Touch gestures
- Reduced bundle size
- Better caching
- Project showcase expansion
- New categories
- Search functionality
- Filter options
- Contributors: 150+
- Projects: 200+
- Lines of Code: 50,000+
- Commits: 1,200+
- Stars: 500+
- Forks: 200+
To create an inclusive, welcoming space for developers of all skill levels to:
- Share their work and achievements
- Learn from the community
- Contribute to meaningful projects
- Build their portfolio
- Connect with like-minded individuals
"This project helped me make my first open source contribution. The community was incredibly supportive!"
- Sarah Chen, Frontend Developer
"I learned so much about responsive design and modern CSS techniques working on this project."
- Miguel Rodriguez, UI/UX Designer
"The theme persistence feature was my first major contribution. It taught me about localStorage and modular JavaScript."
- Alex Johnson, Full Stack Developer
- Portfolio building
- Networking opportunities
- Skill development
- Recognition in the community
- Potential job opportunities
- Leadership experience
- Project management skills
- Community building
- Technical expertise growth
- Component-based: Modular HTML components
- Utility-first CSS: Custom properties and utilities
- Progressive Enhancement: Works without JavaScript
- Responsive Design: Mobile-first approach
├── index.html # Main entry point
├── projects.html # Projects showcase
├── style.css # Global styles
├── theme-persistence/ # Theme management
│ └── theme.js
├── js/ # JavaScript modules
│ ├── include.js # Common utilities
│ ├── index.js # Homepage logic
│ └── projects.js # Projects logic
├── css/ # Page-specific styles
├── assets/ # Static assets
│ ├── css/
│ ├── js/
│ └── images/
└── projects/ # Individual projects
# Development
NODE_ENV=development
DEBUG=true
# Production
NODE_ENV=production
DEBUG=false// build.config.js
module.exports = {
entry: 'index.html',
output: 'dist/',
minify: true,
sourcemaps: false
};- Page views
- User interactions
- Theme preferences
- Device information
- Geographic data
- No personal data collected
- Anonymous analytics only
- GDPR compliant
- Cookie consent required
- Primary: #38bdf8 (Sky Blue)
- Secondary: #8b5cf6 (Purple)
- Success: #10b981 (Green)
- Warning: #f59e0b (Amber)
- Error: #ef4444 (Red)
- Primary Font: Inter
- Secondary Font: Roboto
- Monospace: Fira Code
- 4px, 8px, 16px, 24px, 32px, 48px, 64px, 96px, 128px
- LCP (Largest Contentful Paint): < 2.5s
- FID (First Input Delay): < 100ms
- CLS (Cumulative Layout Shift): < 0.1
- Performance: 95+
- Accessibility: 95+
- Best Practices: 95+
- SEO: 95+
- Be respectful and inclusive
- Help others learn and grow
- Share knowledge generously
- Maintain professional communication
- Celebrate successes together
- GitHub: Issues, PRs, Discussions
- Discord: Real-time chat
- Twitter: Updates and announcements
- Newsletter: Monthly roundup
We appreciate all forms of support:
- ⭐ Starring the repository
- 🐛 Reporting bugs
- 💡 Suggesting features
- 📝 Improving documentation
- 💻 Contributing code
- 💰 Financial sponsorship
- Logo on README
- Special mention in releases
- Priority support
- Early access to features
- Exclusive Discord channel
- Available at:
/terms-of-service.html - Last updated: February 2024
- Covers usage, contributions, and liability
- Available at:
/privacy-policy.html - Last updated: February 2024
- Details data collection and usage
- Available at:
/cookie-policy.html - Explains cookie usage
- Provides opt-out options
- 1000+ contributors
- 1000+ projects
- Multi-platform support
- Advanced collaboration tools
- AI-powered features
- Machine learning integration
- Virtual reality showcase
- Blockchain-based attribution
- Decentralized hosting
We extend our heartfelt thanks to:
- Every contributor who has made this project possible
- The open source community for inspiration and support
- Our users for their feedback and encouragement
- Technology providers for their excellent tools
The Community Card Showcase represents more than just a collection of developer profiles—it's a celebration of the global developer community. Every contribution, every line of code, every design improvement brings us closer to our vision of creating the most welcoming and inspiring open source project.
Whether you're a seasoned developer or just starting your journey, there's a place for you here. Your contributions don't just add features—they build connections, foster learning, and create opportunities.
Thank you for being part of this amazing community. Let's continue building something extraordinary together! 🚀
Happy Coding