├── .nojekyll ├── .github ├── ISSUE_TEMPLATE │ ├── config.yml │ ├── 04-add-search-feature.md │ ├── 01-fix-documentation-typo.md │ ├── 02-remove-legacy-code.md │ ├── 03-fix-code-indentation.md │ ├── 05-add-dark-light-mode-toggle.md │ ├── 14-add-contributor-profile-modal.md │ ├── 15-add-export-contributors.md │ ├── 16-add-filter-by-badges.md │ ├── 06-add-contributor-statistics.md │ ├── 19-add-avatar-customization.md │ ├── 17-add-contribution-timeline.md │ ├── 18-add-random-spotlight.md │ ├── 20-add-statistics-page.md │ ├── 21-add-new-contributor-badge.md │ ├── 22-add-card-flip-animation.md │ ├── 08-add-animation-effects.md │ ├── 23-add-appreciation-system.md │ ├── 10-improve-mobile-responsiveness.md │ ├── 07-add-social-media-links.md │ ├── 11-add-contributor-badges.md │ ├── 09-add-sorting-options.md │ └── 12-add-scroll-to-top.md ├── workflows │ ├── validate.yml │ └── update-contributors.yml ├── PULL_REQUEST_TEMPLATE │ └── add-contributor.md ├── FEATURES_QUICK_REFERENCE.md ├── NEW_ISSUES_README.md ├── ISSUES_LIST.md ├── QUICK_REFERENCE.md ├── NEW_ISSUES_SUMMARY.md ├── NEW_FEATURES_SUMMARY.md ├── IMPLEMENTATION_GUIDE.md └── GOOD_FIRST_ISSUES.md ├── CODE_OF_CONDUCT.md ├── package.json ├── LICENSE ├── CONTRIBUTING.md ├── scripts ├── validate-contributors.js └── update-readme-contributors.js ├── stats.html ├── index.html └── data └── contributors.ndjson /.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: true 2 | contact_links: 3 | - name: 💬 Ask a Question 4 | url: https://github.com/Rohit-554/FirstLeaf/discussions 5 | about: Ask questions and discuss ideas with the community 6 | - name: 📖 Documentation 7 | url: https://github.com/Rohit-554/FirstLeaf/blob/master/README.md 8 | about: Read the documentation to learn how to contribute 9 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of Conduct 2 | 3 | We are committed to creating a welcoming and inclusive environment for everyone. 4 | 5 | - Be respectful and considerate. 6 | - Assume good intent and be patient with beginners. 7 | - No harassment, hate speech, or discrimination. 8 | - Keep discussions friendly and constructive. 9 | 10 | If you experience or witness unacceptable behavior, please open an issue or contact a maintainer. 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "firstleaf", 3 | "version": "1.0.0", 4 | "private": true, 5 | "description": "FirstLeaf: Beginner-friendly GitHub Pages repo to make your first pull request", 6 | "license": "MIT", 7 | "scripts": { 8 | "validate": "node scripts/validate-contributors.js", 9 | "start": "npx http-server -p 8080 -c-1 .", 10 | "update-readme": "node scripts/update-readme-contributors.js" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /.github/workflows/validate.yml: -------------------------------------------------------------------------------- 1 | name: Validate contributors file 2 | 3 | on: 4 | pull_request: 5 | paths: 6 | - 'data/contributors.ndjson' 7 | 8 | jobs: 9 | validate: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@v4 13 | - name: Use Node.js 14 | uses: actions/setup-node@v4 15 | with: 16 | node-version: '20' 17 | - name: Validate contributors.ndjson 18 | run: node scripts/validate-contributors.js 19 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE/add-contributor.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Add your name to contributors 3 | about: Create a simple PR to add yourself to the FirstLeaf site 4 | title: "Add to contributors" 5 | labels: beginner, good first issue 6 | assignees: '' 7 | --- 8 | 9 | Thank you for contributing! Please confirm: 10 | 11 | - [ ] I added exactly one new line to `data/contributors.ndjson`. 12 | - [ ] My line is valid JSON, all on one line. 13 | - [ ] I included `name` and `username`. 14 | 15 | Preview of my entry (optional): 16 | 17 | ```json 18 | {"name":"Your Name","username":"your-github-username","github":"https://github.com/your-github-username","message":"Excited to contribute!"} 19 | ``` 20 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/04-add-search-feature.md: -------------------------------------------------------------------------------- 1 | ~~---~~ 2 | ~~name: ✨ Add search/filter feature for contributors~~ 3 | ~~about: Add a search box to filter contributors by name or username~~ 4 | ~~title: "Add search functionality to filter contributors"~~ 5 | ~~labels: ["good first issue", "enhancement", "feature"]~~ 6 | ~~assignees: ''~~ 7 | ~~---~~ 8 | 9 | ~~## Description~~ 10 | ~~Add a search/filter feature that allows users to search through the contributors list by name or username. This will improve the user experience when there are many contributors.~~ 11 | 12 | ~~## Proposed Feature~~ 13 | ~~Add a search input box above the contributors grid that filters the displayed cards in real-time as users type.~~ 14 | 15 | ~~**Good first issue** - Great for learning DOM manipulation and event handling! 🔍~~ 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 FirstLeaf contributors 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to FirstLeaf 2 | 3 | Welcome! This project is designed to help you make your first pull request. 4 | 5 | ## Quick start 6 | 7 | 1. Fork the repository. 8 | 2. Create a branch named like `add/your-name`. 9 | 3. Edit `data/contributors.ndjson` and add a new line with your details. 10 | 4. Commit your change and open a Pull Request (PR). 11 | 12 | ## Editing the data file 13 | 14 | - Open `data/contributors.ndjson`. 15 | - Add ONE new line using valid JSON format. Example: 16 | 17 | ```json 18 | {"name":"Your Name","username":"your-github-username","github":"https://github.com/your-github-username","message":"Excited to contribute!"} 19 | ``` 20 | 21 | Notes: 22 | - `name` and `username` are required. 23 | - Keep everything on a single line (that’s how NDJSON works). 24 | - Don’t add commas at the end; each line is an independent JSON object. 25 | - We’ll add the `addedAt` timestamp during review if missing. 26 | 27 | ## Pull Request tips 28 | 29 | - Title suggestion: `Add to contributors` 30 | - Keep the PR to just one new line in the file. 31 | - The GitHub checks (if any) should pass automatically. If not, the maintainer will help. 32 | 33 | ## Code of Conduct 34 | 35 | Be kind and respectful. This is a learning space. 36 | -------------------------------------------------------------------------------- /.github/workflows/update-contributors.yml: -------------------------------------------------------------------------------- 1 | name: Update Contributors in README 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | - master 8 | paths: 9 | - 'data/contributors.ndjson' 10 | 11 | jobs: 12 | update-readme: 13 | runs-on: ubuntu-latest 14 | permissions: 15 | contents: write 16 | steps: 17 | - name: Checkout repository 18 | uses: actions/checkout@v4 19 | with: 20 | token: ${{ secrets.GITHUB_TOKEN }} 21 | 22 | - name: Setup Node.js 23 | uses: actions/setup-node@v4 24 | with: 25 | node-version: '20' 26 | 27 | - name: Update README with contributors 28 | run: node scripts/update-readme-contributors.js 29 | 30 | - name: Check for changes 31 | id: git-check 32 | run: | 33 | git diff --exit-code README.md || echo "changed=true" >> $GITHUB_OUTPUT 34 | 35 | - name: Commit and push if changed 36 | if: steps.git-check.outputs.changed == 'true' 37 | run: | 38 | git config --local user.email "github-actions[bot]@users.noreply.github.com" 39 | git config --local user.name "github-actions[bot]" 40 | git add README.md 41 | git commit -m "docs: update contributors section in README [skip ci]" 42 | git push 43 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/01-fix-documentation-typo.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🐛 Fix documentation typo in GitHub Pages URL 3 | about: Update incorrect repository name in README 4 | title: "Fix GitHub Pages URL in README" 5 | labels: ["good first issue", "documentation", "bug"] 6 | assignees: '' 7 | --- 8 | 9 | ## Description 10 | The README.md file contains an incorrect repository name in the GitHub Pages setup section. On line 66, it references `sicksticks` instead of `FirstLeaf`. 11 | 12 | ## Current Behavior 13 | ```markdown 14 | 4. Your site will be available at `https://.github.io/sicksticks`. 15 | ``` 16 | 17 | ## Expected Behavior 18 | ```markdown 19 | 4. Your site will be available at `https://.github.io/FirstLeaf`. 20 | ``` 21 | 22 | ## Location 23 | - **File**: `README.md` 24 | - **Line**: 66 25 | 26 | ## Steps to Fix 27 | 1. Fork this repository 28 | 2. Create a new branch: `git checkout -b fix/readme-typo` 29 | 3. Edit `README.md` and change `sicksticks` to `FirstLeaf` on line 66 30 | 4. Commit your changes: `git commit -m "Fix GitHub Pages URL in README"` 31 | 5. Push to your fork: `git push origin fix/readme-typo` 32 | 6. Open a Pull Request 33 | 34 | ## Additional Context 35 | This is a perfect first issue for beginners! It only requires changing one word in the documentation. 36 | 37 | --- 38 | **Good first issue** - Great for newcomers to open source! 🎉 39 | -------------------------------------------------------------------------------- /scripts/validate-contributors.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | /** 3 | * Simple validator for data/contributors.ndjson 4 | * Ensures each line is JSON with required fields and no duplicates. 5 | */ 6 | const fs = require('fs'); 7 | const path = require('path'); 8 | 9 | const file = path.join(__dirname, '..', 'data', 'contributors.ndjson'); 10 | const text = fs.readFileSync(file, 'utf8'); 11 | const lines = text.split(/\n/).map(l => l.replace(/\r$/, '')).filter(l => l.trim().length > 0); 12 | 13 | let ok = true; 14 | const seenUsernames = new Set(); 15 | let lineNo = 0; 16 | for (const line of lines) { 17 | lineNo++; 18 | try { 19 | const single = line.trim(); 20 | const obj = JSON.parse(single); 21 | if (!obj || typeof obj !== 'object') throw new Error('Not an object'); 22 | if (!obj.name || !obj.username) throw new Error('Missing required fields: name and username'); 23 | if (seenUsernames.has(obj.username)) throw new Error(`Duplicate username: ${obj.username}`); 24 | seenUsernames.add(obj.username); 25 | } catch (e) { 26 | console.error(`Error on line ${lineNo}: ${e.message}`); 27 | ok = false; 28 | } 29 | } 30 | 31 | if (!ok) { 32 | console.error('\nValidation failed. Please fix the errors above.'); 33 | process.exit(1); 34 | } 35 | 36 | console.log(`Validation passed: ${lines.length} entr${lines.length === 1 ? 'y' : 'ies'}.`); 37 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/02-remove-legacy-code.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🔧 Remove legacy code reference 3 | about: Remove SICKSTICKS reference from app.js 4 | title: "Remove legacy SICKSTICKS reference from app.js" 5 | labels: ["good first issue", "refactoring", "code-cleanup"] 6 | assignees: '' 7 | --- 8 | 9 | ## Description 10 | The `assets/app.js` file contains a legacy reference to `SICKSTICKS` which was likely from a previous version or template of this project. This should be cleaned up. 11 | 12 | ## Current Code (Line 17) 13 | ```javascript 14 | return (window.SICKSTICKS && window.SICKSTICKS.repoUrl) || ''; 15 | ``` 16 | 17 | ## Expected Code 18 | ```javascript 19 | return ''; 20 | ``` 21 | 22 | ## Location 23 | - **File**: `assets/app.js` 24 | - **Line**: 17 25 | 26 | ## Why This Change? 27 | - Removes confusing legacy code 28 | - Makes the codebase cleaner 29 | - `SICKSTICKS` is not defined or used anywhere in the current project 30 | 31 | ## Steps to Fix 32 | 1. Fork this repository 33 | 2. Create a new branch: `git checkout -b fix/remove-legacy-code` 34 | 3. Edit `assets/app.js` 35 | 4. Replace line 17 with: `return '';` 36 | 5. Test locally by opening `index.html` in your browser 37 | 6. Commit your changes: `git commit -m "Remove legacy SICKSTICKS reference"` 38 | 7. Push to your fork: `git push origin fix/remove-legacy-code` 39 | 8. Open a Pull Request 40 | 41 | ## Testing 42 | After making the change, open `index.html` in your browser and verify: 43 | - The page loads correctly 44 | - Contributors are displayed 45 | - The "View Repo" button works 46 | 47 | --- 48 | **Good first issue** - Perfect for learning code cleanup! 🧹 49 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/03-fix-code-indentation.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🎨 Fix code indentation 3 | about: Fix inconsistent indentation in app.js 4 | title: "Fix indentation in app.js detectRepoUrl function" 5 | labels: ["good first issue", "code-style", "bug"] 6 | assignees: '' 7 | --- 8 | 9 | ## Description 10 | There is an indentation issue in `assets/app.js` on line 13. The line declaring `const repo` has incorrect indentation, breaking the visual flow of the code. 11 | 12 | ## Current Code (Lines 11-14) 13 | ```javascript 14 | const owner = location.hostname.split('.')[0]; 15 | const parts = location.pathname.split('/').filter(Boolean); 16 | const repo = parts[0] || 'firstleaf'; 17 | return `https://github.com/${owner}/${repo}`; 18 | ``` 19 | 20 | ## Expected Code (Lines 11-14) 21 | ```javascript 22 | const owner = location.hostname.split('.')[0]; 23 | const parts = location.pathname.split('/').filter(Boolean); 24 | const repo = parts[0] || 'firstleaf'; 25 | return `https://github.com/${owner}/${repo}`; 26 | ``` 27 | 28 | ## Location 29 | - **File**: `assets/app.js` 30 | - **Line**: 13 31 | 32 | ## Why This Change? 33 | - Improves code readability 34 | - Follows consistent indentation style 35 | - Makes the code easier to maintain 36 | 37 | ## Steps to Fix 38 | 1. Fork this repository 39 | 2. Create a new branch: `git checkout -b fix/indentation` 40 | 3. Edit `assets/app.js` 41 | 4. Fix the indentation on line 13 (add 4 more spaces at the beginning) 42 | 5. Commit your changes: `git commit -m "Fix indentation in detectRepoUrl function"` 43 | 6. Push to your fork: `git push origin fix/indentation` 44 | 7. Open a Pull Request 45 | 46 | ## Additional Context 47 | This is a simple fix that helps you practice code style consistency - an important skill in software development! 48 | 49 | --- 50 | **Good first issue** - Great way to learn about code formatting! 📝 51 | -------------------------------------------------------------------------------- /scripts/update-readme-contributors.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | /** 3 | * Updates README.md with a contributors section showing avatars 4 | * Reads from data/contributors.ndjson and updates the README 5 | */ 6 | const fs = require('fs'); 7 | const path = require('path'); 8 | 9 | const contributorsFile = path.join(__dirname, '..', 'data', 'contributors.ndjson'); 10 | const readmeFile = path.join(__dirname, '..', 'README.md'); 11 | 12 | // Read contributors 13 | const text = fs.readFileSync(contributorsFile, 'utf8'); 14 | const lines = text.split(/\n/).map(l => l.replace(/\r$/, '')).filter(l => l.trim().length > 0); 15 | 16 | const contributors = lines.map(line => { 17 | try { 18 | return JSON.parse(line.trim()); 19 | } catch (e) { 20 | console.error(`Error parsing line: ${line}`); 21 | return null; 22 | } 23 | }).filter(Boolean); 24 | 25 | console.log(`Found ${contributors.length} contributors`); 26 | 27 | // Generate contributors section 28 | const contributorsSection = `## Thank you - Contributors 29 | 30 | Thank you to all the amazing contributors who have helped make this project better! 🎉 31 | 32 | 33 | ${generateContributorsTable(contributors)} 34 |
35 | `; 36 | 37 | function generateContributorsTable(contributors) { 38 | const rows = []; 39 | const perRow = 6; // 6 contributors per row 40 | 41 | for (let i = 0; i < contributors.length; i += perRow) { 42 | const rowContributors = contributors.slice(i, i + perRow); 43 | 44 | // Avatar row 45 | const avatarRow = rowContributors.map(c => { 46 | const avatarUrl = c.avatar || `https://avatars.githubusercontent.com/${c.username}`; 47 | const profileUrl = c.github || `https://github.com/${c.username}`; 48 | return ` ${c.name}`; 49 | }).join('\n'); 50 | 51 | // Name row 52 | const nameRow = rowContributors.map(c => { 53 | const profileUrl = c.github || `https://github.com/${c.username}`; 54 | return ` ${c.name}`; 55 | }).join('\n'); 56 | 57 | rows.push(' \n' + avatarRow + '\n '); 58 | rows.push(' \n' + nameRow + '\n '); 59 | } 60 | 61 | return rows.join('\n'); 62 | } 63 | 64 | // Read current README 65 | let readme = fs.readFileSync(readmeFile, 'utf8'); 66 | 67 | // Check if contributors section already exists 68 | const contributorsSectionRegex = /## Thank you - Contributors[\s\S]*?(?=\n## |$)/; 69 | 70 | if (contributorsSectionRegex.test(readme)) { 71 | // Replace existing section 72 | readme = readme.replace(contributorsSectionRegex, contributorsSection.trim()); 73 | console.log('Updated existing contributors section'); 74 | } else { 75 | // Add section at the end 76 | readme = readme.trimEnd() + '\n\n' + contributorsSection; 77 | console.log('Added new contributors section'); 78 | } 79 | 80 | // Write updated README 81 | fs.writeFileSync(readmeFile, readme, 'utf8'); 82 | console.log('README.md updated successfully!'); 83 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/05-add-dark-light-mode-toggle.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🌓 Add dark/light mode toggle 3 | about: Add a theme toggle button to switch between dark and light modes 4 | title: "Add dark/light mode toggle feature" 5 | labels: ["good first issue", "enhancement", "feature", "ui/ux"] 6 | assignees: '' 7 | --- 8 | 9 | ## Description 10 | Add a dark/light mode toggle button that allows users to switch between a light and dark theme. The current theme is dark, so we need to add a light theme and a toggle button. 11 | 12 | ## Proposed Feature 13 | Add a theme toggle button in the header that saves the user's preference to localStorage. 14 | 15 | ## Implementation Details 16 | 17 | ### 1. HTML Changes (index.html) 18 | Add a toggle button in the header (around line 21, before the closing nav tag): 19 | ```html 20 | 23 | ``` 24 | 25 | ### 2. CSS Changes (assets/styles.css) 26 | Add light theme variables and toggle button styles: 27 | 28 | **Add light theme colors (after line 12):** 29 | ```css 30 | [data-theme="light"] { 31 | --bg: #f5f7fa; 32 | --panel: #ffffff; 33 | --text: #1a202c; 34 | --muted: #4a5568; 35 | --accent: #0088cc; 36 | --accent-2: #00b894; 37 | --danger: #e74c3c; 38 | } 39 | ``` 40 | 41 | **Add toggle button styles (add near other button styles):** 42 | ```css 43 | .theme-toggle { 44 | padding: 0.5rem 0.75rem; 45 | cursor: pointer; 46 | font-size: 1.25rem; 47 | border: 1px solid rgba(255, 255, 255, 0.1); 48 | } 49 | 50 | [data-theme="light"] .theme-toggle { 51 | border-color: rgba(0, 0, 0, 0.1); 52 | } 53 | ``` 54 | 55 | **Update background for light mode (modify body background):** 56 | ```css 57 | body { 58 | /* existing styles */ 59 | background: radial-gradient( 60 | 1200px 600px at 80% -10%, 61 | rgba(107, 226, 255, 0.09), 62 | transparent 60% 63 | ), 64 | radial-gradient( 65 | 800px 400px at 10% -10%, 66 | rgba(125, 249, 212, 0.12), 67 | transparent 50% 68 | ), 69 | var(--bg); 70 | transition: background-color 0.3s ease, color 0.3s ease; 71 | } 72 | 73 | [data-theme="light"] body { 74 | background: linear-gradient( 75 | 135deg, 76 | rgba(107, 226, 255, 0.15) 0%, 77 | rgba(125, 249, 212, 0.15) 100% 78 | ), 79 | var(--bg); 80 | } 81 | ``` 82 | 83 | ### 3. JavaScript Changes (assets/app.js) 84 | Add theme toggle functionality at the end of the `boot()` function: 85 | 86 | ```javascript 87 | function boot() { 88 | fetchContributors(); 89 | initThemeToggle(); 90 | } 91 | 92 | function initThemeToggle() { 93 | const themeToggle = document.getElementById('themeToggle'); 94 | const themeIcon = document.getElementById('themeIcon'); 95 | const html = document.documentElement; 96 | 97 | // Check for saved theme preference or default to 'dark' 98 | const currentTheme = localStorage.getItem('theme') || 'dark'; 99 | html.setAttribute('data-theme', currentTheme); 100 | updateThemeIcon(currentTheme); 101 | 102 | // Toggle theme on button click 103 | themeToggle?.addEventListener('click', () => { 104 | const currentTheme = html.getAttribute('data-theme'); 105 | const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; 106 | 107 | html.setAttribute('data-theme', newTheme); 108 | localStorage.setItem('theme', newTheme); 109 | updateThemeIcon(newTheme); 110 | }); 111 | 112 | function updateThemeIcon(theme) { 113 | if (themeIcon) { 114 | themeIcon.textContent = theme === 'dark' ? '☀️' : '🌙'; 115 | } 116 | } 117 | } 118 | ``` 119 | 120 | ## Steps to Implement 121 | 1. Fork this repository 122 | 2. Create a new branch: `git checkout -b feature/theme-toggle` 123 | 3. Make the changes described above to the three files 124 | 4. Test locally by: 125 | - Opening `index.html` in your browser 126 | - Clicking the theme toggle button 127 | - Verifying the theme switches between light and dark 128 | - Refreshing the page and verifying the theme persists 129 | 5. Commit your changes: `git commit -m "Add dark/light mode toggle feature"` 130 | 6. Push to your fork: `git push origin feature/theme-toggle` 131 | 7. Open a Pull Request 132 | 133 | ## Expected Behavior 134 | - Theme toggle button appears in the header 135 | - Clicking toggles between light and dark themes 136 | - Theme preference is saved in localStorage 137 | - Theme persists across page refreshes 138 | - Icon changes based on current theme (sun for dark mode, moon for light mode) 139 | 140 | ## Testing Checklist 141 | - [ ] Toggle button is visible in the header 142 | - [ ] Clicking toggles between themes smoothly 143 | - [ ] Light theme has good contrast and readability 144 | - [ ] Theme preference persists after page refresh 145 | - [ ] Icon updates when theme changes 146 | - [ ] All text remains readable in both themes 147 | 148 | ## Design Tips 149 | - Keep light theme colors subtle and easy on the eyes 150 | - Ensure good contrast ratios for accessibility 151 | - Test with several contributors to ensure cards look good in both themes 152 | 153 | --- 154 | **Good first issue** - Perfect for learning about CSS variables, localStorage, and theming! 🎨 155 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/14-add-contributor-profile-modal.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🔍 Add contributor profile modal/popup 3 | about: Add a modal popup to view detailed contributor information when clicking on a card 4 | title: "Add contributor profile modal/popup feature" 5 | labels: ["good first issue", "enhancement", "feature", "ui/ux"] 6 | assignees: '' 7 | --- 8 | 9 | ## Description 10 | Add an interactive modal/popup that displays when users click on a contributor card. This modal will show expanded information about the contributor including their full profile, message, badges, and a larger avatar. 11 | 12 | ## Proposed Feature 13 | When a user clicks on a contributor card, open a modal popup with: 14 | - Large avatar image 15 | - Full name and username 16 | - GitHub profile link as a prominent button 17 | - Full message (with more space than the card) 18 | - All badges displayed prominently 19 | - "View on GitHub" call-to-action button 20 | - Close button to dismiss the modal 21 | 22 | **Good first issue** - Great for learning about modals, event handling, and DOM manipulation! 🔍 23 | 24 | ## Current Behavior 25 | - Contributor cards link directly to GitHub profiles 26 | - Limited information visible on cards 27 | - No way to see more details without leaving the page 28 | 29 | ## Expected Behavior 30 | - Clicking a contributor card opens a modal 31 | - Modal displays detailed contributor information 32 | - Modal can be closed by clicking close button, overlay, or pressing ESC 33 | - GitHub profile link is available as a button in the modal 34 | - Clean, accessible modal design 35 | 36 | ## Requirements 37 | 38 | ### Visual Design 39 | - Modal should have a semi-transparent dark overlay behind it 40 | - Modal content should be centered on screen 41 | - Modal should be responsive (works on mobile) 42 | - Modal should have smooth fade-in/fade-out animations 43 | - Close button should be easily visible (top-right corner) 44 | - Avatar should be larger than on the card (150px or 200px) 45 | 46 | ### Functionality 47 | - Click on contributor card to open modal 48 | - Click on overlay/backdrop to close modal 49 | - Press ESC key to close modal 50 | - Click close button (X) to close modal 51 | - Prevent body scrolling when modal is open 52 | - "View on GitHub" button opens profile in new tab 53 | 54 | ### Accessibility 55 | - Modal should have proper ARIA labels 56 | - Focus should trap inside modal when open 57 | - ESC key closes the modal 58 | - Focus should return to triggering element when closed 59 | - Screen readers should announce modal opening 60 | 61 | ## Testing Checklist 62 | - [ ] Modal opens when clicking a contributor card 63 | - [ ] Modal displays all contributor information correctly 64 | - [ ] Modal closes when clicking overlay 65 | - [ ] Modal closes when clicking close button 66 | - [ ] Modal closes when pressing ESC key 67 | - [ ] Body scrolling is prevented when modal is open 68 | - [ ] Body scrolling is restored when modal closes 69 | - [ ] Modal is responsive on mobile devices 70 | - [ ] Animations are smooth 71 | - [ ] GitHub button opens profile in new tab 72 | - [ ] Keyboard navigation works properly 73 | - [ ] Screen readers can access all information 74 | 75 | ## Expected Final Output 76 | 77 | ### When implemented: 78 | 1. User browsing sees contributor cards as normal 79 | 2. User clicks on any contributor card 80 | 3. Modal appears with fade-in animation 81 | 4. Modal shows: 82 | - Large avatar (150-200px) 83 | - Name in large text 84 | - GitHub username (@username) 85 | - Full message with more space 86 | - All badges displayed clearly 87 | - "View on GitHub" prominent button 88 | - Close X button in top-right 89 | 5. User can read full details 90 | 6. User clicks "View on GitHub" to open profile in new tab OR closes modal 91 | 7. Modal fades out and disappears 92 | 8. User can continue browsing contributors 93 | 94 | ### Example Modal Layout: 95 | ``` 96 | ┌──────────────────────────────────────┐ 97 | │ [X] │ 98 | │ ┌────────────┐ │ 99 | │ │ │ │ 100 | │ │ AVATAR │ │ 101 | │ │ │ │ 102 | │ └────────────┘ │ 103 | │ │ 104 | │ Ada Lovelace │ 105 | │ @ada │ 106 | │ │ 107 | │ 🥇 First ⭐ Core Team │ 108 | │ │ 109 | │ "Hello, world! I'm excited to │ 110 | │ contribute to this amazing │ 111 | │ project and help others!" │ 112 | │ │ 113 | │ [🔗 View on GitHub] │ 114 | │ │ 115 | └──────────────────────────────────────┘ 116 | ``` 117 | 118 | ## Design Tips 119 | - Keep the modal clean and not too large 120 | - Use card-like styling similar to contributor cards 121 | - Ensure good contrast for readability 122 | - Add subtle shadow/glow around modal 123 | - Consider adding a subtle blur effect to background 124 | - Test on different screen sizes 125 | 126 | ## Benefits 127 | - Users can see full contributor information without leaving the page 128 | - Better user experience for browsing contributors 129 | - Showcases messages that might be truncated on cards 130 | - More professional and interactive feel 131 | - Keeps users engaged on the site 132 | 133 | --- 134 | **Good first issue** - Perfect for learning about modals, event delegation, and accessibility! 🎯 135 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/15-add-export-contributors.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 📥 Add export contributors feature 3 | about: Add ability to export the contributors list to CSV or JSON format 4 | title: "Add export contributors to CSV/JSON feature" 5 | labels: ["good first issue", "enhancement", "feature"] 6 | assignees: '' 7 | --- 8 | 9 | ## Description 10 | Add a feature that allows users to export the entire contributors list to CSV or JSON format. This is useful for contributors who want to keep a local copy, create reports, or use the data for other purposes. 11 | 12 | ## Proposed Feature 13 | Add an "Export" button in the controls area that opens a small menu with two options: 14 | - Export as CSV 15 | - Export as JSON 16 | 17 | When clicked, downloads a file with all contributor data in the selected format. 18 | 19 | **Good first issue** - Great for learning about data formatting, file downloads, and JavaScript Blob API! 📥 20 | 21 | ## Current Behavior 22 | - Contributors list is only viewable on the website 23 | - No way to download or export the data 24 | - Data is only in NDJSON format in the repository 25 | 26 | ## Expected Behavior 27 | - Export button appears in the controls area (near search/sort) 28 | - Clicking export button shows options (CSV or JSON) 29 | - Selecting CSV downloads `contributors.csv` file 30 | - Selecting JSON downloads `contributors.json` file 31 | - Downloaded files contain all contributor data 32 | - File is automatically downloaded to user's device 33 | 34 | ## Requirements 35 | 36 | ### Export Button UI 37 | - Button should be styled like other buttons 38 | - Icon: 📥 or download icon 39 | - Text: "Export" 40 | - Located in controls container near search/sort 41 | 42 | ### CSV Format 43 | File should include these columns: 44 | - Name 45 | - Username 46 | - GitHub URL 47 | - Message 48 | - Badges (comma-separated if multiple) 49 | - Added Date 50 | 51 | Example CSV: 52 | ```csv 53 | Name,Username,GitHub,Message,Badges,AddedAt 54 | "Ada Lovelace","ada","https://github.com/ada","Hello, world!","first,core","2025-09-30T12:00:00.000Z" 55 | "Grace Hopper","grace","https://github.com/grace","Learning to code!","early","2025-10-01T10:00:00.000Z" 56 | ``` 57 | 58 | ### JSON Format 59 | File should be a properly formatted JSON array: 60 | ```json 61 | [ 62 | { 63 | "name": "Ada Lovelace", 64 | "username": "ada", 65 | "github": "https://github.com/ada", 66 | "message": "Hello, world!", 67 | "badges": ["first", "core"], 68 | "addedAt": "2025-09-30T12:00:00.000Z" 69 | }, 70 | { 71 | "name": "Grace Hopper", 72 | "username": "grace", 73 | "github": "https://github.com/grace", 74 | "message": "Learning to code!", 75 | "badges": ["early"], 76 | "addedAt": "2025-10-01T10:00:00.000Z" 77 | } 78 | ] 79 | ``` 80 | 81 | ### Functionality 82 | - Export respects current search/filter (only exports visible contributors) 83 | - Export respects current sort order 84 | - File is downloaded with timestamp: `contributors_2025-10-05.csv` 85 | - Works on all modern browsers 86 | - No server-side processing needed 87 | 88 | ## Testing Checklist 89 | - [ ] Export button appears in controls area 90 | - [ ] Clicking export shows CSV/JSON options 91 | - [ ] CSV export downloads properly formatted file 92 | - [ ] JSON export downloads properly formatted file 93 | - [ ] CSV file opens correctly in Excel/Sheets 94 | - [ ] JSON file is valid JSON format 95 | - [ ] Exported data matches what's displayed on page 96 | - [ ] Export respects current filters/search 97 | - [ ] Export respects current sort order 98 | - [ ] Filename includes date 99 | - [ ] Works on Chrome, Firefox, Safari, Edge 100 | - [ ] Works on mobile devices 101 | 102 | ## Expected Final Output 103 | 104 | ### When implemented: 105 | 1. User views contributors list 106 | 2. User optionally filters or searches contributors 107 | 3. User clicks "Export" button in controls area 108 | 4. Small menu appears with two options: 109 | - 📄 Export as CSV 110 | - 📋 Export as JSON 111 | 5. User selects preferred format 112 | 6. Browser automatically downloads file: 113 | - `contributors_2025-10-05.csv` OR 114 | - `contributors_2025-10-05.json` 115 | 7. User can open file and see all contributor data in chosen format 116 | 117 | ### Example Button Placement: 118 | ``` 119 | ┌─────────────────────────────────────────────┐ 120 | │ Search: [________________] Sort: [Newest] │ 121 | │ [📥 Export] │ 122 | └─────────────────────────────────────────────┘ 123 | ``` 124 | 125 | ### Example Export Menu: 126 | ``` 127 | ┌──────────────────┐ 128 | │ 📄 Export as CSV │ 129 | │ 📋 Export as JSON│ 130 | └──────────────────┘ 131 | ``` 132 | 133 | ## Design Tips 134 | - Keep the export button subtle but discoverable 135 | - Use icons to make options clear 136 | - Add tooltips for better UX 137 | - Consider adding a success message after export 138 | - Handle edge cases (empty search results, etc.) 139 | 140 | ## Benefits 141 | - Users can backup the contributors list 142 | - Data can be used for analysis or reports 143 | - Useful for project maintainers 144 | - Increases data portability 145 | - Professional feature for open source projects 146 | 147 | ## Implementation Hints 148 | - Use JavaScript Blob API to create files 149 | - Use `URL.createObjectURL()` for download 150 | - Clean up blob URLs after download with `URL.revokeObjectURL()` 151 | - Use current date for filename 152 | - Convert badges array to string for CSV 153 | 154 | --- 155 | **Good first issue** - Perfect for learning about data formats and browser file downloads! 💾 156 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/16-add-filter-by-badges.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🏷️ Add filter contributors by badges 3 | about: Add filter buttons to show only contributors with specific badge types 4 | title: "Add badge filter feature for contributors" 5 | labels: ["good first issue", "enhancement", "feature", "ui/ux"] 6 | assignees: '' 7 | --- 8 | 9 | ## Description 10 | Add filter buttons that allow users to filter contributors by their badge types. Users can click on badge type buttons to see only contributors who have that specific badge (e.g., show only "Core Team" members or "First" contributors). 11 | 12 | ## Proposed Feature 13 | Add a row of badge filter buttons below the search/sort controls. Each button represents a badge type. Clicking a button filters the contributors list to show only those with that badge. 14 | 15 | **Good first issue** - Great for learning about filtering, array methods, and interactive UI! 🏷️ 16 | 17 | ## Current Behavior 18 | - All contributors are shown at once 19 | - Only search and sort options available 20 | - No way to filter by badge type 21 | - Badges are visible but not interactive 22 | 23 | ## Expected Behavior 24 | - Badge filter buttons appear below controls 25 | - Each badge type has its own filter button 26 | - Clicking a badge filter shows only contributors with that badge 27 | - Active filter button is highlighted 28 | - "All" button shows all contributors (clear filter) 29 | - Filter works with search (both active at once) 30 | - Filter respects current sort order 31 | 32 | ## Requirements 33 | 34 | ### Filter Buttons 35 | Badge types to include as filters: 36 | - **All** (default - shows everyone) 37 | - **🥇 First** - First contributor 38 | - **⭐ Core Team** - Core team members 39 | - **🏆 Top Contributor** - Top contributors 40 | - **🤝 Helper** - Helpers 41 | - **🌱 Early Adopter** - Early adopters 42 | - **🎯 Milestone** - Milestone contributors 43 | 44 | ### Visual Design 45 | - Filter buttons should look like chips/pills 46 | - Active filter button should be highlighted (brighter color) 47 | - Use same colors as actual badges 48 | - Buttons should have hover effects 49 | - Mobile-friendly (wrap to multiple rows if needed) 50 | 51 | ### Functionality 52 | - Click badge filter to show only those contributors 53 | - Click "All" or click active filter again to clear 54 | - Filter works alongside search (AND operation) 55 | - Filter respects current sort 56 | - Shows count of filtered contributors 57 | - If no contributors match filter + search, show friendly message 58 | 59 | ## Testing Checklist 60 | - [ ] Badge filter buttons appear below controls 61 | - [ ] All badge types are represented 62 | - [ ] Clicking filter shows correct contributors 63 | - [ ] Active filter button is visually highlighted 64 | - [ ] "All" button clears filter 65 | - [ ] Clicking active filter again deactivates it 66 | - [ ] Filter + search work together correctly 67 | - [ ] Contributor count updates when filtering 68 | - [ ] Empty state message shows if no matches 69 | - [ ] Filter respects current sort order 70 | - [ ] Buttons wrap nicely on mobile 71 | - [ ] Hover effects work properly 72 | 73 | ## Expected Final Output 74 | 75 | ### When implemented: 76 | 1. User sees badge filter buttons below search/sort 77 | 2. User clicks "🥇 First" badge filter 78 | 3. Only contributors with "First" badge are shown 79 | 4. Button is highlighted to show it's active 80 | 5. Count shows "2 contributors (filtered)" 81 | 6. User can then search within filtered results 82 | 7. User clicks "All" or the same filter again 83 | 8. All contributors are shown again 84 | 9. Filter is cleared, button no longer highlighted 85 | 86 | ### Example Layout: 87 | ``` 88 | ┌──────────────────────────────────────────────────┐ 89 | │ Search: [____________] Sort: [Newest ▼] │ 90 | │ │ 91 | │ Filter by badge: │ 92 | │ [All] [🥇 First] [⭐ Core Team] [🏆 Top] [🤝 Helper] │ 93 | │ [🌱 Early] [🎯 Milestone] │ 94 | └──────────────────────────────────────────────────┘ 95 | 96 | Total: 15 contributors (3 with "Core Team" badge) 97 | ``` 98 | 99 | ### Example Filter Button States: 100 | ``` 101 | Inactive: [🥇 First] (subtle background) 102 | Active: [🥇 First] (bright background, bold) 103 | Hover: [🥇 First] (slightly brighter) 104 | ``` 105 | 106 | ## Design Tips 107 | - Use the same color scheme as the badges themselves 108 | - Make active state very obvious 109 | - Add subtle transitions for smooth interactions 110 | - Consider adding a small counter badge showing how many have each type 111 | - Group related badges together if many badge types exist 112 | 113 | ## Benefits 114 | - Easier to find contributors with specific roles 115 | - Better discovery of core team members 116 | - Useful for highlighting first contributors 117 | - More interactive and engaging UI 118 | - Helps users explore the community 119 | 120 | ## Implementation Hints 121 | - Get unique badge types from contributors data 122 | - Filter function: `contributors.filter(c => c.badges?.includes(selectedBadge))` 123 | - Combine with search filter using AND logic 124 | - Update contributor count after filtering 125 | - Clear filter when switching to "All" 126 | 127 | ## Additional Features (Optional) 128 | - Add count to each filter button showing total 129 | - Example: `[🥇 First (5)]` 130 | - Allow multiple badge filters at once (OR operation) 131 | - Example: Show "First" OR "Core Team" 132 | - Add "Clear all filters" button if multiple filters active 133 | 134 | --- 135 | **Good first issue** - Perfect for learning about filtering, state management, and interactive UI! 🎨 136 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/06-add-contributor-statistics.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 📊 Add contributor statistics display 3 | about: Display total contributors and latest contributor info 4 | title: "Add contributor statistics to the page" 5 | labels: ["good first issue", "enhancement", "feature", "ui/ux"] 6 | assignees: '' 7 | --- 8 | 9 | ## Description 10 | Add a statistics section that displays useful information about contributors, such as the total count and the most recent contributor. 11 | 12 | ## Proposed Feature 13 | Add a statistics bar or section that shows: 14 | - Total number of contributors 15 | - Latest contributor (most recently added) 16 | 17 | ## Current Behavior 18 | - Only total count is shown next to the "Contributors" heading 19 | - No highlight for the newest contributor 20 | 21 | ## Expected Behavior 22 | - A dedicated statistics section or enhanced display 23 | - Highlight the most recent contributor with a special badge or styling 24 | - Show when they were added 25 | 26 | ## Implementation Details 27 | 28 | ### Option 1: Add a banner above the contributor grid 29 | 30 | **HTML Changes (index.html)** 31 | 32 | Add this after the search container (around line 59): 33 | 34 | ```html 35 |
36 |
37 | Total Contributors 38 | 0 39 |
40 |
41 | Latest Contributor 42 | - 43 |
44 |
45 | ``` 46 | 47 | **CSS Changes (assets/styles.css)** 48 | 49 | Add these styles: 50 | 51 | ```css 52 | .stats-banner { 53 | display: flex; 54 | gap: 2rem; 55 | padding: 1.5rem; 56 | background: linear-gradient( 57 | 135deg, 58 | rgba(107, 226, 255, 0.1), 59 | rgba(125, 249, 212, 0.1) 60 | ); 61 | border-radius: 12px; 62 | border: 1px solid rgba(255, 255, 255, 0.1); 63 | margin-bottom: 2rem; 64 | } 65 | 66 | .stat-item { 67 | display: flex; 68 | flex-direction: column; 69 | gap: 0.5rem; 70 | } 71 | 72 | .stat-label { 73 | color: var(--muted); 74 | font-size: 0.875rem; 75 | text-transform: uppercase; 76 | letter-spacing: 0.05em; 77 | } 78 | 79 | .stat-value { 80 | color: var(--accent-2); 81 | font-size: 1.5rem; 82 | font-weight: 800; 83 | } 84 | 85 | @media (max-width: 720px) { 86 | .stats-banner { 87 | flex-direction: column; 88 | gap: 1rem; 89 | } 90 | } 91 | ``` 92 | 93 | **JavaScript Changes (assets/app.js)** 94 | 95 | Update the code after sorting (around line 52): 96 | 97 | ```javascript 98 | // After sorting the people array, add: 99 | const latestPerson = people[0]; // First person after sorting by addedAt 100 | 101 | // Update stats 102 | const totalCountEl = document.getElementById('totalCount'); 103 | const latestContributorEl = document.getElementById('latestContributor'); 104 | 105 | if (totalCountEl) { 106 | totalCountEl.textContent = people.length; 107 | } 108 | 109 | if (latestContributorEl && latestPerson) { 110 | latestContributorEl.textContent = latestPerson.name || latestPerson.username || 'Unknown'; 111 | } 112 | ``` 113 | 114 | ### Option 2: Add a "NEW" badge to the latest contributor card 115 | 116 | **CSS Changes (assets/styles.css)** 117 | 118 | ```css 119 | .new-badge { 120 | position: absolute; 121 | top: 8px; 122 | right: 8px; 123 | background: linear-gradient(135deg, var(--accent), var(--accent-2)); 124 | color: var(--bg); 125 | font-size: 0.75rem; 126 | font-weight: 700; 127 | padding: 0.25rem 0.5rem; 128 | border-radius: 6px; 129 | text-transform: uppercase; 130 | letter-spacing: 0.05em; 131 | } 132 | 133 | .card { 134 | position: relative; /* Add this to existing .card styles */ 135 | } 136 | ``` 137 | 138 | **JavaScript Changes (assets/app.js)** 139 | 140 | In the loop that creates cards (around line 67), add after creating the card element: 141 | 142 | ```javascript 143 | const card = document.createElement("div"); 144 | card.className = "card"; 145 | card.role = "listitem"; 146 | 147 | // Add NEW badge to the first contributor (latest) 148 | if (people.indexOf(p) === 0) { 149 | const badge = document.createElement("span"); 150 | badge.className = "new-badge"; 151 | badge.textContent = "NEW"; 152 | card.appendChild(badge); 153 | } 154 | ``` 155 | 156 | ## Steps to Implement 157 | 158 | 1. Fork this repository 159 | 2. Create a new branch: `git checkout -b feature/contributor-stats` 160 | 3. Choose **either** Option 1 (stats banner) or Option 2 (NEW badge) or implement both! 161 | 4. Make the HTML, CSS, and JavaScript changes as described 162 | 5. Test locally by opening `index.html` in your browser 163 | 6. Verify: 164 | - Statistics display correctly 165 | - The latest contributor is highlighted appropriately 166 | - The design matches the existing theme 167 | - Mobile responsiveness works 168 | 7. Commit your changes: `git commit -m "Add contributor statistics display"` 169 | 8. Push to your fork: `git push origin feature/contributor-stats` 170 | 9. Open a Pull Request 171 | 172 | ## Testing Checklist 173 | 174 | - [ ] Statistics show correct values 175 | - [ ] Latest contributor is properly highlighted 176 | - [ ] Design matches the existing dark theme aesthetic 177 | - [ ] Layout is responsive on mobile devices 178 | - [ ] No console errors appear 179 | - [ ] All existing functionality still works 180 | 181 | ## Design Tips 182 | 183 | - Keep the design consistent with the current dark theme 184 | - Use existing CSS variables for colors 185 | - Ensure text is readable and has good contrast 186 | - Test with different numbers of contributors 187 | 188 | --- 189 | **Good first issue** - Great for learning DOM manipulation and data visualization! 📊 190 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/19-add-avatar-customization.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🎨 Add contributor avatar customization 3 | about: Allow contributors to add custom color borders or frames to their avatars 4 | title: "Add avatar border customization feature" 5 | labels: ["good first issue", "enhancement", "feature", "ui/ux"] 6 | assignees: '' 7 | --- 8 | 9 | ## Description 10 | Allow contributors to personalize their avatar by adding an optional custom colored border or frame. This makes profiles more unique and fun without requiring design skills. 11 | 12 | ## Proposed Feature 13 | Add an optional `avatarBorder` field to contributor data that applies a colorful border around their avatar image. 14 | 15 | **Good first issue** - Great for learning about CSS styling and personalization! 🎨 16 | 17 | ## Current Behavior 18 | - All avatars look the same (just the image) 19 | - No way to personalize avatar appearance 20 | - All contributor cards have uniform styling 21 | 22 | ## Expected Behavior 23 | - Contributors can add `avatarBorder` to their data 24 | - Border color can be any valid CSS color 25 | - Border appears around avatar in contributor card 26 | - Border has optional animation effect (glow, pulse, rainbow) 27 | - No border if field is omitted (default) 28 | 29 | ## Requirements 30 | 31 | ### Data Format 32 | Add optional field to NDJSON: 33 | ```json 34 | {"name":"Ada Lovelace","username":"ada","avatarBorder":"#ff6b9d","message":"Hello!"} 35 | ``` 36 | 37 | Or with border style: 38 | ```json 39 | {"name":"Grace Hopper","username":"grace","avatarBorder":{"color":"#00f2fe","style":"glow"},"message":"Hi!"} 40 | ``` 41 | 42 | ### Supported Border Styles 43 | - **Solid** (default): Simple colored border 44 | - **Gradient**: Gradient border (requires 2 colors) 45 | - **Glow**: Border with glow effect 46 | - **Pulse**: Animated pulsing border 47 | - **Rainbow**: Animated rainbow gradient (no color needed) 48 | - **Double**: Double border effect 49 | 50 | ### Visual Examples 51 | - Solid border: Simple 4px colored border 52 | - Gradient: Gradient from color1 to color2 53 | - Glow: Border with soft shadow in same color 54 | - Pulse: Border that pulses/breathes 55 | - Rainbow: Animated rainbow gradient 56 | - Double: Thin inner border + thicker outer border 57 | 58 | ## Testing Checklist 59 | - [ ] Border appears when `avatarBorder` field present 60 | - [ ] Color is applied correctly 61 | - [ ] No border when field is omitted 62 | - [ ] Different styles work as expected 63 | - [ ] Animations are smooth (not distracting) 64 | - [ ] Works on all avatar sizes 65 | - [ ] Mobile responsive 66 | - [ ] Doesn't break card layout 67 | - [ ] Accessible (doesn't reduce contrast) 68 | 69 | ## Expected Final Output 70 | 71 | ### When implemented: 72 | 1. Contributor adds `avatarBorder` field to their data 73 | 2. Their card loads with customized avatar border 74 | 3. Border color/style matches what they specified 75 | 4. Other contributors without the field have default avatars 76 | 5. Visual variety makes the page more interesting 77 | 78 | ### Example Borders: 79 | 80 | **Solid Border:** 81 | ``` 82 | ┌────────────────┐ 83 | │ ╔══════════╗ │ ← solid pink border 84 | │ ║ ║ │ 85 | │ ║ AVATAR ║ │ 86 | │ ║ ║ │ 87 | │ ╚══════════╝ │ 88 | │ Ada Lovelace │ 89 | └────────────────┘ 90 | ``` 91 | 92 | **Glow Effect:** 93 | ``` 94 | ┌────────────────┐ 95 | │ ●═══════● │ ← border with glow 96 | │ ║ ║ │ 97 | │ ║ AVATAR ║ │ 98 | │ ║ ║ │ 99 | │ ●═══════● │ 100 | │ Grace Hopper │ 101 | └────────────────┘ 102 | ``` 103 | 104 | **Rainbow (Animated):** 105 | ``` 106 | ┌────────────────┐ 107 | │ 🌈═══════🌈 │ ← animated rainbow 108 | │ ║ ║ │ 109 | │ ║ AVATAR ║ │ 110 | │ ║ ║ │ 111 | │ 🌈═══════🌈 │ 112 | │ John Doe │ 113 | └────────────────┘ 114 | ``` 115 | 116 | ## Design Tips 117 | - Keep borders subtle (3-5px width) 118 | - Ensure borders don't clash with theme colors 119 | - Animation should be gentle, not distracting 120 | - Test on both light and dark themes 121 | - Provide examples in documentation 122 | 123 | ## Benefits 124 | - Contributors can express personality 125 | - Makes profiles more unique and memorable 126 | - Fun way to stand out 127 | - Easy to implement, big visual impact 128 | - No design skills required 129 | 130 | ## Implementation Hints 131 | 132 | ### CSS for borders: 133 | ```css 134 | .card img.border-solid { 135 | border: 4px solid var(--border-color); 136 | } 137 | 138 | .card img.border-glow { 139 | border: 4px solid var(--border-color); 140 | box-shadow: 0 0 20px var(--border-color); 141 | } 142 | 143 | .card img.border-pulse { 144 | border: 4px solid var(--border-color); 145 | animation: pulse 2s ease-in-out infinite; 146 | } 147 | 148 | @keyframes pulse { 149 | 0%, 100% { box-shadow: 0 0 10px var(--border-color); } 150 | 50% { box-shadow: 0 0 30px var(--border-color); } 151 | } 152 | 153 | .card img.border-rainbow { 154 | border: 4px solid; 155 | border-image: linear-gradient(45deg, red, orange, yellow, green, blue, purple) 1; 156 | animation: rainbow 3s linear infinite; 157 | } 158 | ``` 159 | 160 | ### JavaScript to apply borders: 161 | ```javascript 162 | if (p.avatarBorder) { 163 | const border = typeof p.avatarBorder === 'string' 164 | ? { color: p.avatarBorder, style: 'solid' } 165 | : p.avatarBorder; 166 | 167 | img.style.setProperty('--border-color', border.color); 168 | img.classList.add(`border-${border.style || 'solid'}`); 169 | } 170 | ``` 171 | 172 | ## Additional Features (Optional) 173 | - Preset border themes: "Ocean", "Sunset", "Forest" 174 | - Border width customization (thin/medium/thick) 175 | - Rounded corner customization 176 | - Seasonal borders: snowflakes in winter, leaves in fall 177 | - Achievement borders: special frames for milestones 178 | 179 | --- 180 | **Good first issue** - Perfect for learning CSS borders and animations! 🖼️ 181 | -------------------------------------------------------------------------------- /.github/FEATURES_QUICK_REFERENCE.md: -------------------------------------------------------------------------------- 1 | # Quick Reference: New Feature Issues 2 | 3 | This is a quick reference guide for the 10 new feature issues added to FirstLeaf. 4 | 5 | ## 📋 Feature Quick Reference Table 6 | 7 | | # | Feature | Difficulty | File | Key Benefits | 8 | |---|---------|------------|------|--------------| 9 | | 14 | 🔍 **Profile Modal** | Medium | `14-add-contributor-profile-modal.md` | Shows detailed contributor info without leaving page | 10 | | 15 | 📥 **Export Data** | Easy | `15-add-export-contributors.md` | Download contributors as CSV/JSON | 11 | | 16 | 🏷️ **Badge Filters** | Easy | `16-add-filter-by-badges.md` | Filter contributors by badge type | 12 | | 17 | 📅 **Timeline View** | Advanced | `17-add-contribution-timeline.md` | Visualize project growth over time | 13 | | 18 | ⭐ **Random Spotlight** | Medium | `18-add-random-spotlight.md` | Feature random contributors | 14 | | 19 | 🎨 **Avatar Borders** | Medium | `19-add-avatar-customization.md` | Personalized avatar styling | 15 | | 20 | 📊 **Statistics Page** | Advanced | `20-add-statistics-page.md` | Dedicated analytics and insights page | 16 | | 21 | 🔔 **New Badge** | Easy | `21-add-new-contributor-badge.md` | Show recent contributor activity | 17 | | 22 | 🎮 **Card Flip** | Advanced | `22-add-card-flip-animation.md` | Interactive 3D card animations | 18 | | 23 | 🎁 **Appreciation** | Medium | `23-add-appreciation-system.md` | Send emoji reactions to contributors | 19 | 20 | ## 🎯 Suggested Learning Path 21 | 22 | ### For Absolute Beginners 23 | Start with these simple data manipulation features: 24 | 1. **Issue #15** - Export Data (CSV/JSON formatting) 25 | 2. **Issue #21** - New Badge (Date comparison) 26 | 3. **Issue #16** - Badge Filters (Array filtering) 27 | 28 | ### For UI/UX Enthusiasts 29 | Try these visual and interactive features: 30 | 1. **Issue #18** - Random Spotlight (DOM manipulation) 31 | 2. **Issue #19** - Avatar Borders (CSS customization) 32 | 3. **Issue #23** - Appreciation System (User interaction) 33 | 34 | ### For Advanced Learners 35 | Challenge yourself with these complex features: 36 | 1. **Issue #14** - Profile Modal (Modal creation) 37 | 2. **Issue #17** - Timeline View (Data grouping) 38 | 3. **Issue #22** - Card Flip (3D CSS transforms) 39 | 40 | ### For Data/Analytics Lovers 41 | Work on visualization features: 42 | 1. **Issue #20** - Statistics Page (Data analysis) 43 | 2. **Issue #17** - Timeline View (Time-based grouping) 44 | 3. **Issue #15** - Export Data (Data formats) 45 | 46 | ## 📚 What You'll Learn 47 | 48 | ### Issue #14 - Profile Modal 49 | - Modal/popup creation 50 | - Event handling (click, ESC key) 51 | - Accessibility (ARIA labels, focus management) 52 | - CSS animations (fade in/out) 53 | 54 | ### Issue #15 - Export Data 55 | - Data formatting (CSV, JSON) 56 | - JavaScript Blob API 57 | - File downloads in browsers 58 | - Array/object manipulation 59 | 60 | ### Issue #16 - Badge Filters 61 | - Array filtering methods 62 | - Interactive UI components 63 | - State management 64 | - Multiple filter combinations 65 | 66 | ### Issue #17 - Timeline View 67 | - Date manipulation (grouping by month/week) 68 | - Data visualization 69 | - Accordion UI patterns 70 | - Toggle between views 71 | 72 | ### Issue #18 - Random Spotlight 73 | - Random selection algorithms 74 | - Featured content sections 75 | - Dynamic content updates 76 | - Special card styling 77 | 78 | ### Issue #19 - Avatar Borders 79 | - CSS border styling 80 | - CSS animations (glow, pulse, rainbow) 81 | - Custom color application 82 | - Optional data fields 83 | 84 | ### Issue #20 - Statistics Page 85 | - Data aggregation and analysis 86 | - Chart/graph creation 87 | - Multi-page navigation 88 | - Statistical calculations 89 | 90 | ### Issue #21 - New Badge 91 | - Date/time comparisons 92 | - Real-time updates 93 | - Notification patterns 94 | - Filter interactions 95 | 96 | ### Issue #22 - Card Flip 97 | - CSS 3D transforms 98 | - Perspective and depth 99 | - Animation timing 100 | - Keyboard accessibility 101 | 102 | ### Issue #23 - Appreciation System 103 | - localStorage usage 104 | - Emoji reactions 105 | - User interaction patterns 106 | - Positive community features 107 | 108 | ## 🚀 Getting Started 109 | 110 | 1. Browse the issues in `.github/ISSUE_TEMPLATE/` 111 | 2. Pick one that matches your skill level 112 | 3. Read the requirements thoroughly 113 | 4. Fork the repo and create a branch 114 | 5. Implement following the testing checklist 115 | 6. Submit a pull request 116 | 117 | ## 💡 Tips for Success 118 | 119 | - **Start small**: Begin with easier issues to build confidence 120 | - **Read thoroughly**: Each issue has detailed requirements and examples 121 | - **Test well**: Use the provided testing checklist 122 | - **Ask questions**: Use GitHub discussions or comments if stuck 123 | - **Have fun**: These features are designed to be enjoyable to build! 124 | 125 | ## 🎨 Feature Categories 126 | 127 | ### Interactive & Engaging (Fun to build!) 128 | - 🔍 Profile Modal (Issue #14) 129 | - ⭐ Random Spotlight (Issue #18) 130 | - 🎮 Card Flip (Issue #22) 131 | - 🎁 Appreciation (Issue #23) 132 | 133 | ### Data & Analysis (Great for learning!) 134 | - 📥 Export Data (Issue #15) 135 | - 📊 Statistics Page (Issue #20) 136 | - 📅 Timeline View (Issue #17) 137 | 138 | ### Filtering & Organization (Practical!) 139 | - 🏷️ Badge Filters (Issue #16) 140 | - 🔔 New Badge (Issue #21) 141 | 142 | ### Customization (Creative!) 143 | - 🎨 Avatar Borders (Issue #19) 144 | 145 | ## 📖 Additional Resources 146 | 147 | Each issue template includes: 148 | - ✅ Clear requirements 149 | - ✅ Testing checklist 150 | - ✅ Expected output examples 151 | - ✅ Design tips 152 | - ✅ Implementation hints 153 | - ✅ Benefits explanation 154 | 155 | ## 🌟 Why These Features? 156 | 157 | All features were chosen to be: 158 | - **Beginner-friendly**: Clear instructions and examples 159 | - **Creative**: Fun and interesting to build 160 | - **Practical**: Add real value to the project 161 | - **Educational**: Teach important web development concepts 162 | - **Easy to implement**: Can be completed by first-time contributors 163 | 164 | --- 165 | 166 | **Ready to contribute? Pick an issue and start coding! 🚀** 167 | 168 | For the full detailed summary, see [NEW_FEATURES_SUMMARY.md](NEW_FEATURES_SUMMARY.md) 169 | -------------------------------------------------------------------------------- /.github/NEW_ISSUES_README.md: -------------------------------------------------------------------------------- 1 | # 🎉 10 New Feature Issues for FirstLeaf 2 | 3 | Welcome! This directory contains 10 brand new creative feature issues designed for first-time contributors to the FirstLeaf project. 4 | 5 | ## 📋 What's New 6 | 7 | We've added **10 creative, beginner-friendly features** numbered from **#14 to #23** to complement the existing 13 issues. Each issue is carefully crafted to provide: 8 | 9 | - ✅ Clear requirements (NOT implementation code) 10 | - ✅ Comprehensive testing checklists 11 | - ✅ Expected final user experience 12 | - ✅ Visual examples and diagrams 13 | - ✅ Design tips and best practices 14 | 15 | ## 🎯 The 10 New Features 16 | 17 | ### Easy Features (Perfect for Beginners) 18 | 19 | | # | Feature | What You'll Build | What You'll Learn | 20 | |---|---------|------------------|------------------| 21 | | **15** | 📥 **Export Contributors** | Download button for CSV/JSON | Data formatting, Blob API, file downloads | 22 | | **21** | 🔔 **New Badge** | Show count of recent contributors | Date comparison, filtering, notifications | 23 | | **16** | 🏷️ **Badge Filters** | Filter buttons for badge types | Array filtering, interactive UI | 24 | 25 | ### Medium Features (Some Experience Helpful) 26 | 27 | | # | Feature | What You'll Build | What You'll Learn | 28 | |---|---------|------------------|------------------| 29 | | **14** | 🔍 **Profile Modal** | Popup with detailed contributor info | Modals, event handling, accessibility | 30 | | **18** | ⭐ **Random Spotlight** | Featured random contributor section | Randomization, DOM manipulation | 31 | | **19** | 🎨 **Avatar Borders** | Custom colored avatar frames | CSS styling, animations | 32 | | **23** | 🎁 **Appreciation** | Emoji reactions for contributors | localStorage, user interactions | 33 | 34 | ### Advanced Features (More Challenging) 35 | 36 | | # | Feature | What You'll Build | What You'll Learn | 37 | |---|---------|------------------|------------------| 38 | | **17** | 📅 **Timeline View** | Timeline grouping by join date | Date grouping, data visualization | 39 | | **20** | 📊 **Statistics Page** | Analytics page with charts | Data analysis, separate pages | 40 | | **22** | 🎮 **Card Flip** | 3D flip animation | CSS 3D transforms, animations | 41 | 42 | ## 📚 Documentation 43 | 44 | Three comprehensive guides help you get started: 45 | 46 | 1. **[NEW_FEATURES_SUMMARY.md](NEW_FEATURES_SUMMARY.md)** 47 | - Detailed overview of all features 48 | - Implementation priority guide 49 | - Design principles 50 | 51 | 2. **[FEATURES_QUICK_REFERENCE.md](FEATURES_QUICK_REFERENCE.md)** 52 | - Quick reference table 53 | - Learning paths for different skill levels 54 | - What you'll learn from each feature 55 | 56 | 3. **[ISSUES_LIST.md](ISSUES_LIST.md)** 57 | - Complete list with structure 58 | - Difficulty categorization 59 | - How to use guide 60 | 61 | ## 🚀 How to Get Started 62 | 63 | 1. **Choose Your Feature** 64 | - Browse issues #14-23 in `ISSUE_TEMPLATE/` 65 | - Pick based on your skill level and interest 66 | - Read the **FEATURES_QUICK_REFERENCE.md** for guidance 67 | 68 | 2. **Read the Issue** 69 | - Understand the requirements 70 | - Review the testing checklist 71 | - Look at the expected final output 72 | 73 | 3. **Implement** 74 | - Fork the repository 75 | - Create a branch (e.g., `feature/profile-modal`) 76 | - Build the feature following requirements 77 | - Test using the checklist 78 | 79 | 4. **Submit** 80 | - Commit your changes 81 | - Open a pull request 82 | - Wait for review 83 | 84 | ## 📊 Feature Categories 85 | 86 | ### 🎮 Interactive & Engaging 87 | Make the site more fun and dynamic: 88 | - Profile Modal (#14) 89 | - Random Spotlight (#18) 90 | - Card Flip (#22) 91 | - Appreciation System (#23) 92 | 93 | ### 📈 Data & Analysis 94 | Add insights and analytics: 95 | - Export Data (#15) 96 | - Statistics Page (#20) 97 | - Timeline View (#17) 98 | 99 | ### 🔍 Filtering & Organization 100 | Better ways to browse: 101 | - Badge Filters (#16) 102 | - New Badge (#21) 103 | 104 | ### 🎨 Customization 105 | Personal touches: 106 | - Avatar Borders (#19) 107 | 108 | ## ✨ What Makes These Issues Special 109 | 110 | ### No Implementation Details 111 | Each issue provides: 112 | - ✅ What to build (requirements) 113 | - ✅ How to test (checklist) 114 | - ✅ What it looks like (expected output) 115 | - ❌ NOT the actual code 116 | 117 | This helps you learn by doing, not copying! 118 | 119 | ### Comprehensive Testing 120 | Every issue includes 9-12 test cases covering: 121 | - ✅ Functionality 122 | - ✅ UI/UX 123 | - ✅ Accessibility 124 | - ✅ Mobile responsiveness 125 | - ✅ Edge cases 126 | 127 | ### Real-World Skills 128 | You'll learn: 129 | - Modern JavaScript (ES6+) 130 | - CSS animations and transforms 131 | - DOM manipulation 132 | - Data handling 133 | - Accessibility (ARIA, keyboard navigation) 134 | - localStorage API 135 | - File downloads 136 | - And much more! 137 | 138 | ## 🎯 Success Tips 139 | 140 | 1. **Start Small**: Begin with easy issues to build confidence 141 | 2. **Read Thoroughly**: Don't skip the requirements section 142 | 3. **Test Everything**: Use the provided checklist 143 | 4. **Ask Questions**: Use GitHub discussions if stuck 144 | 5. **Have Fun**: These are designed to be enjoyable! 145 | 146 | ## 📈 Statistics 147 | 148 | - **10 new features** (Issues #14-23) 149 | - **121 total test cases** across all issues 150 | - **~25,000 words** of documentation 151 | - **3 difficulty levels** (Easy, Medium, Advanced) 152 | - **4 feature categories** (Interactive, Data, Filtering, Customization) 153 | 154 | ## 🌟 Why Contribute? 155 | 156 | 1. **Learn by Doing**: Real project, real features 157 | 2. **Build Portfolio**: Show off your work 158 | 3. **Join Community**: Connect with other learners 159 | 4. **Get Recognized**: Your name on the live site 160 | 5. **Have Fun**: Creative, engaging projects 161 | 162 | ## 🤝 Need Help? 163 | 164 | - Read the issue requirements carefully 165 | - Check the testing checklist 166 | - Look at expected output examples 167 | - Review design tips 168 | - Ask in GitHub discussions 169 | - Tag maintainers in comments 170 | 171 | ## 📜 License 172 | 173 | All contributions are under the MIT License. 174 | 175 | --- 176 | 177 | **Ready to start? Pick an issue and begin coding! 🚀** 178 | 179 | Browse issues: [.github/ISSUE_TEMPLATE/](ISSUE_TEMPLATE/) 180 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/17-add-contribution-timeline.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 📅 Add contribution timeline view 3 | about: Add a timeline/calendar view showing when contributors joined over time 4 | title: "Add contribution timeline/calendar view feature" 5 | labels: ["good first issue", "enhancement", "feature", "visualization"] 6 | assignees: '' 7 | --- 8 | 9 | ## Description 10 | Add an interactive timeline/calendar visualization that shows when contributors joined the project over time. This creates a visual representation of the project's growth and makes it easy to see contribution patterns. 11 | 12 | ## Proposed Feature 13 | Add a "Timeline View" toggle button that switches between the grid view and a timeline view. The timeline shows contributors grouped by the date they joined (by month or week). 14 | 15 | **Good first issue** - Great for learning about data visualization, date manipulation, and alternative views! 📅 16 | 17 | ## Current Behavior 18 | - Contributors shown only in grid view 19 | - No way to visualize contribution timeline 20 | - Join dates are visible but not prominent 21 | - Hard to see project growth over time 22 | 23 | ## Expected Behavior 24 | - Toggle button switches between "Grid" and "Timeline" views 25 | - Timeline view groups contributors by join date 26 | - Each time period shows how many joined 27 | - Clicking on a time period expands to show those contributors 28 | - Visual representation of project growth 29 | - Smooth transition between views 30 | 31 | ## Requirements 32 | 33 | ### View Toggle 34 | - Button to switch between "Grid View" and "Timeline View" 35 | - Located near the sort/search controls 36 | - Icons: 🔲 Grid / 📅 Timeline 37 | - Default: Grid view 38 | 39 | ### Timeline Structure 40 | Group contributors by time period: 41 | - **Option 1: By Month** - "September 2025", "October 2025" 42 | - **Option 2: By Week** - "Week of Oct 1-7", "Week of Oct 8-14" 43 | - **Option 3: By Day** (if many contributors) - "Oct 5, 2025" 44 | 45 | ### Visual Design 46 | Timeline should show: 47 | - Time period as header (e.g., "October 2025") 48 | - Count of contributors in that period 49 | - Collapsed by default with expand/collapse button 50 | - When expanded, show contributor cards in that period 51 | - Visual bar showing relative size of each period 52 | 53 | ### Functionality 54 | - Timeline sorted chronologically (newest first or oldest first) 55 | - Can expand/collapse each time period 56 | - Search still works in timeline view 57 | - Badge filter still works in timeline view 58 | - "Expand All" / "Collapse All" buttons 59 | - Smooth animations when expanding/collapsing 60 | 61 | ## Testing Checklist 62 | - [ ] Toggle button switches between views 63 | - [ ] Timeline groups contributors correctly 64 | - [ ] Time periods are labeled clearly 65 | - [ ] Expand/collapse works for each period 66 | - [ ] Contributor count is accurate for each period 67 | - [ ] Search works in timeline view 68 | - [ ] Badge filters work in timeline view 69 | - [ ] Sort order affects timeline display 70 | - [ ] "Expand All" button works 71 | - [ ] "Collapse All" button works 72 | - [ ] Smooth transitions between states 73 | - [ ] Mobile responsive design 74 | 75 | ## Expected Final Output 76 | 77 | ### When implemented: 78 | 1. User clicks "📅 Timeline" toggle button 79 | 2. View switches from grid to timeline 80 | 3. Timeline shows months/periods with contributor counts: 81 | ``` 82 | 📅 October 2025 (8 contributors) [−] 83 | ├─ [contributor cards shown...] 84 | 85 | 📅 September 2025 (7 contributors) [+] 86 | └─ [collapsed] 87 | ``` 88 | 4. User clicks expand on "September 2025" 89 | 5. Cards for those 7 contributors slide into view 90 | 6. User can search/filter while in timeline view 91 | 7. User clicks "🔲 Grid" to return to normal view 92 | 8. View smoothly transitions back to grid 93 | 94 | ### Example Timeline Layout: 95 | ``` 96 | ┌─────────────────────────────────────────────┐ 97 | │ View: [🔲 Grid] [📅 Timeline ✓] │ 98 | ├─────────────────────────────────────────────┤ 99 | │ │ 100 | │ ┌─────────────────────────────────────────┐ │ 101 | │ │ 📅 October 2025 (12) [−] │ │ 102 | │ ├─────────────────────────────────────────┤ │ 103 | │ │ [card] [card] [card] [card] │ │ 104 | │ │ [card] [card] [card] [card] │ │ 105 | │ └─────────────────────────────────────────┘ │ 106 | │ │ 107 | │ ┌─────────────────────────────────────────┐ │ 108 | │ │ 📅 September 2025 (8) [+] │ │ 109 | │ └─────────────────────────────────────────┘ │ 110 | │ │ 111 | └─────────────────────────────────────────────┘ 112 | ``` 113 | 114 | ### Example Period Header: 115 | ``` 116 | ┌──────────────────────────────────────┐ 117 | │ 📅 October 2025 │ 118 | │ 12 contributors joined this month │ 119 | │ ▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░ (60%) │ 120 | │ [−] │ 121 | └──────────────────────────────────────┘ 122 | ``` 123 | 124 | ## Design Tips 125 | - Use accordion-style expand/collapse 126 | - Add visual bars showing relative contribution volume 127 | - Smooth CSS transitions for expanding/collapsing 128 | - Consider adding "first contributor" badge to earliest period 129 | - Add helpful empty states if period has no contributors 130 | - Make time period headers sticky when scrolling (optional) 131 | 132 | ## Benefits 133 | - Visualize project growth over time 134 | - Easy to see when most contributors joined 135 | - Interesting historical view of the project 136 | - Educational for understanding open source growth patterns 137 | - More engaging than just a list 138 | 139 | ## Implementation Hints 140 | - Parse `addedAt` dates and group by month/week 141 | - Use JavaScript `Date` object for date manipulation 142 | - Sort periods chronologically 143 | - Store expand/collapse state for each period 144 | - Use CSS transitions for smooth animations 145 | - Calculate percentage for visual bars 146 | 147 | ## Additional Features (Optional) 148 | - Add statistics: "Peak month: October 2025" 149 | - Show running total: "Total: 20 contributors" 150 | - Add visual graph/chart of growth 151 | - Show milestones: "🎉 100th contributor!" 152 | - Add "This Week/Month/Year" quick filters 153 | 154 | --- 155 | **Good first issue** - Perfect for learning about date manipulation and data visualization! 📊 156 | -------------------------------------------------------------------------------- /.github/ISSUES_LIST.md: -------------------------------------------------------------------------------- 1 | # New Issues Added to FirstLeaf 2 | 3 | ## Summary 4 | 5 | 10 new creative feature issues have been added to the FirstLeaf project. Each issue is designed as a "good first issue" suitable for beginners, with clear requirements, testing checklists, and expected outcomes - but **without implementation details**. 6 | 7 | ## New Feature Issues 8 | 9 | ### Issue #14: 🔍 Add Contributor Profile Modal 10 | - **What**: Modal popup showing detailed contributor information 11 | - **When to use**: Click on any contributor card 12 | - **Final output**: Large modal with full profile, badges, message, and GitHub link 13 | - **Testing**: 12 test cases including accessibility, keyboard navigation, and mobile 14 | 15 | ### Issue #15: 📥 Add Export Contributors Feature 16 | - **What**: Export contributors list to CSV or JSON 17 | - **When to use**: Click "Export" button in controls area 18 | - **Final output**: Downloaded file with all contributor data 19 | - **Testing**: 12 test cases including format validation and browser compatibility 20 | 21 | ### Issue #16: 🏷️ Add Filter Contributors by Badges 22 | - **What**: Filter buttons to show only specific badge types 23 | - **When to use**: Click badge filter chips below search/sort 24 | - **Final output**: Filtered list showing only contributors with selected badge 25 | - **Testing**: 12 test cases including multi-filter and mobile responsiveness 26 | 27 | ### Issue #17: 📅 Add Contribution Timeline View 28 | - **What**: Timeline visualization grouping contributors by join date 29 | - **When to use**: Toggle from grid view to timeline view 30 | - **Final output**: Collapsible time periods showing contributor growth 31 | - **Testing**: 12 test cases including date grouping and animations 32 | 33 | ### Issue #18: ⭐ Add Random Contributor Spotlight 34 | - **What**: Featured random contributor at top of page 35 | - **When to use**: Page load or click "Show Another" button 36 | - **Final output**: Special spotlight card highlighting one contributor 37 | - **Testing**: 12 test cases including randomization and transitions 38 | 39 | ### Issue #19: 🎨 Add Avatar Border Customization 40 | - **What**: Custom colored borders/frames for avatars 41 | - **When to use**: Add `avatarBorder` field to contributor data 42 | - **Final output**: Personalized avatar with colored border and optional effects 43 | - **Testing**: 9 test cases including different styles and themes 44 | 45 | ### Issue #20: 📊 Add Contributor Statistics Page 46 | - **What**: Separate page with analytics and insights 47 | - **When to use**: Click "Stats" link in navigation 48 | - **Final output**: Dedicated stats page with charts, fun facts, and metrics 49 | - **Testing**: 10 test cases including calculations and visualizations 50 | 51 | ### Issue #21: 🔔 Add New Contributors Notification Badge 52 | - **What**: Badge showing recent contributor count 53 | - **When to use**: Automatically appears if new contributors in last 7 days 54 | - **Final output**: "X new this week" badge that filters when clicked 55 | - **Testing**: 10 test cases including date calculations and filtering 56 | 57 | ### Issue #22: 🎮 Add Card Flip Animation 58 | - **What**: 3D flip animation showing card back with details 59 | - **When to use**: Click on any contributor card 60 | - **Final output**: Card flips to reveal full message, join date, and info 61 | - **Testing**: 12 test cases including 3D transforms and accessibility 62 | 63 | ### Issue #23: 🎁 Add Contributor Appreciation System 64 | - **What**: Emoji reactions to send thanks to contributors 65 | - **When to use**: Click emoji buttons below cards 66 | - **Final output**: Appreciation counts with localStorage persistence 67 | - **Testing**: 12 test cases including localStorage and animations 68 | 69 | ## Files Added 70 | 71 | ``` 72 | .github/ 73 | ├── ISSUE_TEMPLATE/ 74 | │ ├── 14-add-contributor-profile-modal.md 75 | │ ├── 15-add-export-contributors.md 76 | │ ├── 16-add-filter-by-badges.md 77 | │ ├── 17-add-contribution-timeline.md 78 | │ ├── 18-add-random-spotlight.md 79 | │ ├── 19-add-avatar-customization.md 80 | │ ├── 20-add-statistics-page.md 81 | │ ├── 21-add-new-contributor-badge.md 82 | │ ├── 22-add-card-flip-animation.md 83 | │ └── 23-add-appreciation-system.md 84 | ├── NEW_FEATURES_SUMMARY.md (detailed overview) 85 | ├── FEATURES_QUICK_REFERENCE.md (learning path & tips) 86 | └── ISSUES_LIST.md (this file) 87 | ``` 88 | 89 | ## Issue Template Structure 90 | 91 | Each issue includes: 92 | - ✅ **Description**: What the feature does 93 | - ✅ **Current vs Expected Behavior**: Clear comparison 94 | - ✅ **Requirements**: Detailed specifications 95 | - ✅ **Testing Checklist**: Verification steps 96 | - ✅ **Expected Final Output**: User experience walkthrough with examples 97 | - ✅ **Design Tips**: Helpful suggestions 98 | - ✅ **Benefits**: Why it matters 99 | - ✅ **Implementation Hints**: Optional guidance (NO full implementation) 100 | 101 | ## Difficulty Levels 102 | 103 | ### Easy (Great for absolute beginners) 104 | - Issue #15: Export Data 105 | - Issue #21: New Badge 106 | - Issue #16: Badge Filters 107 | 108 | ### Medium (Some experience helpful) 109 | - Issue #14: Profile Modal 110 | - Issue #18: Random Spotlight 111 | - Issue #19: Avatar Borders 112 | - Issue #23: Appreciation System 113 | 114 | ### Advanced (More challenging but still beginner-friendly) 115 | - Issue #17: Timeline View 116 | - Issue #20: Statistics Page 117 | - Issue #22: Card Flip Animation 118 | 119 | ## Key Principles 120 | 121 | All issues follow these guidelines: 122 | - **No implementation details** - Only requirements and expected output 123 | - **Beginner-friendly** - Clear examples and step-by-step testing 124 | - **Creative** - Fun and interesting features 125 | - **Practical** - Add real value to the project 126 | - **Well-tested** - Comprehensive testing checklists 127 | 128 | ## How to Use 129 | 130 | 1. Review issue templates in `.github/ISSUE_TEMPLATE/` 131 | 2. Choose based on your skill level and interest 132 | 3. Read requirements and expected output carefully 133 | 4. Fork repo and implement the feature 134 | 5. Test using the provided checklist 135 | 6. Submit pull request 136 | 137 | ## Additional Documentation 138 | 139 | - **NEW_FEATURES_SUMMARY.md** - Detailed overview of all 10 features with design principles 140 | - **FEATURES_QUICK_REFERENCE.md** - Quick reference table, learning paths, and tips 141 | 142 | --- 143 | 144 | **All issues are ready for contributors to start working on! 🚀** 145 | -------------------------------------------------------------------------------- /.github/QUICK_REFERENCE.md: -------------------------------------------------------------------------------- 1 | # Quick Reference: New Good First Issues 2 | 3 | A quick-glance overview of all new issue templates for maintainers and contributors. 4 | 5 | ## Issue Quick Reference Table 6 | 7 | | # | Title | Difficulty | Time | Main Tech | Files to Edit | 8 | |---|-------|-----------|------|-----------|---------------| 9 | | 06 | Contributor Statistics | ⭐⭐⭐ | 30-45min | HTML/CSS/JS | index.html, styles.css, app.js | 10 | | 07 | Social Media Links | ⭐⭐⭐ | 45-60min | JS/SVG | app.js, styles.css | 11 | | 08 | Animation Effects | ⭐⭐⭐ | 30-45min | CSS | styles.css | 12 | | 09 | Sorting Options | ⭐⭐⭐⭐ | 60-90min | HTML/JS | index.html, styles.css, app.js | 13 | | 10 | Mobile Responsiveness | ⭐⭐⭐ | 45-75min | CSS | styles.css | 14 | | 11 | Contributor Badges | ⭐⭐⭐⭐ | 60-90min | JS/CSS | app.js, styles.css | 15 | | 12 | Scroll to Top | ⭐⭐ | 30-45min | HTML/CSS/JS | index.html, styles.css, app.js | 16 | | 13 | Color Themes | ⭐⭐⭐ | 60-90min | CSS/JS | index.html, styles.css, app.js | 17 | 18 | ## One-Line Descriptions 19 | 20 | - **06**: Add a stats banner showing total contributors and highlight the newest member 21 | - **07**: Let contributors add Twitter, LinkedIn, and website links with icons 22 | - **08**: Add smooth fade-in, hover animations, and stagger effects to cards 23 | - **09**: Add a dropdown to sort contributors by name or date (newest/oldest) 24 | - **10**: Improve mobile layout, touch targets, and responsive breakpoints 25 | - **11**: Add colorful achievement badges to contributor cards (first, core, top, etc.) 26 | - **12**: Add a floating button in the corner to scroll back to the top 27 | - **13**: Create alternative color themes (Ocean, Forest, Sunset, Galaxy) users can select 28 | 29 | ## Learning Paths 30 | 31 | ### For HTML Beginners 32 | Start with: **#12** (Scroll to Top) → **#06** (Statistics) 33 | 34 | ### For CSS Enthusiasts 35 | Start with: **#08** (Animations) → **#10** (Mobile) → **#13** (Themes) 36 | 37 | ### For JavaScript Learners 38 | Start with: **#06** (Statistics) → **#07** (Social Links) → **#09** (Sorting) 39 | 40 | ### For Full-Stack Beginners 41 | Start with: **#12** (Scroll to Top) → **#08** (Animations) → **#06** (Statistics) 42 | 43 | ## Implementation Priority 44 | 45 | ### Phase 1: Foundation (Easy wins) 46 | 1. **#12** - Scroll to Top (nice UX improvement) 47 | 2. **#08** - Animations (visual polish) 48 | 3. **#10** - Mobile (better accessibility) 49 | 50 | ### Phase 2: Enhanced Features 51 | 4. **#06** - Statistics (useful info) 52 | 5. **#13** - Themes (personalization) 53 | 54 | ### Phase 3: Advanced Features 55 | 6. **#09** - Sorting (powerful functionality) 56 | 7. **#07** - Social Links (extended profiles) 57 | 8. **#11** - Badges (gamification) 58 | 59 | ## Feature Dependencies 60 | 61 | **None!** All issues are designed to be independent. Implement in any order. 62 | 63 | However, some combinations work well together: 64 | - **#08 + #12**: Animations + Scroll to Top (both enhance UX) 65 | - **#06 + #11**: Statistics + Badges (both highlight contributors) 66 | - **#09 + #06**: Sorting + Statistics (both work with data) 67 | - **#10 + #13**: Mobile + Themes (both about presentation) 68 | 69 | ## Estimated Total Development Time 70 | 71 | - **All 8 issues**: ~6-9 hours for an intermediate developer 72 | - **Essential issues** (10, 12, 08): ~2-3 hours 73 | - **One per week**: 2 months to complete all 74 | 75 | ## Code Size Estimates 76 | 77 | | Issue | Lines of Code (approx) | 78 | |-------|------------------------| 79 | | 06 | ~80 lines (30 HTML, 30 CSS, 20 JS) | 80 | | 07 | ~100 lines (0 HTML, 40 CSS, 60 JS) | 81 | | 08 | ~120 lines (0 HTML, 120 CSS, 0 JS) | 82 | | 09 | ~150 lines (20 HTML, 60 CSS, 70 JS) | 83 | | 10 | ~100 lines (0 HTML, 100 CSS, 0 JS) | 84 | | 11 | ~150 lines (0 HTML, 70 CSS, 80 JS) | 85 | | 12 | ~90 lines (5 HTML, 50 CSS, 35 JS) | 86 | | 13 | ~130 lines (15 HTML, 80 CSS, 35 JS) | 87 | 88 | **Total**: ~920 lines of code across all 8 issues 89 | 90 | ## Testing Requirements 91 | 92 | | Issue | What to Test | 93 | |-------|-------------| 94 | | 06 | Stats display correctly, updates with data changes | 95 | | 07 | Links open correctly, icons display, click handling | 96 | | 08 | Animations are smooth, no performance issues | 97 | | 09 | All sort options work, search still works after sorting | 98 | | 10 | Works on mobile/tablet/desktop, touch targets adequate | 99 | | 11 | Badges display, colors are accessible, multiple badges work | 100 | | 12 | Button appears/hides, smooth scroll works, keyboard accessible | 101 | | 13 | All themes work, persistence works, smooth transitions | 102 | 103 | ## Common Gotchas 104 | 105 | ### Issue 06 (Statistics) 106 | - Don't forget to update count when filtering/searching 107 | - Handle edge cases (0 contributors, 1 contributor) 108 | 109 | ### Issue 07 (Social Links) 110 | - Remember to stop event propagation on social link clicks 111 | - Test with missing social fields (not all contributors will have them) 112 | 113 | ### Issue 08 (Animations) 114 | - Add `prefers-reduced-motion` support 115 | - Test performance with many cards (100+) 116 | 117 | ### Issue 09 (Sorting) 118 | - Preserve search filter when changing sort 119 | - Handle missing `addedAt` fields gracefully 120 | 121 | ### Issue 10 (Mobile) 122 | - Test on actual devices, not just browser emulation 123 | - Remember iOS safe areas 124 | 125 | ### Issue 11 (Badges) 126 | - Ensure badge text has sufficient contrast 127 | - Handle long custom badge text 128 | 129 | ### Issue 12 (Scroll to Top) 130 | - Make button keyboard accessible 131 | - Position it so it doesn't block content 132 | 133 | ### Issue 13 (Themes) 134 | - Test all themes for accessibility (contrast ratios) 135 | - Ensure localStorage fallback works 136 | 137 | ## File Change Summary 138 | 139 | ``` 140 | .github/ISSUE_TEMPLATE/ 141 | ├── 06-add-contributor-statistics.md (NEW) 142 | ├── 07-add-social-media-links.md (NEW) 143 | ├── 08-add-animation-effects.md (NEW) 144 | ├── 09-add-sorting-options.md (NEW) 145 | ├── 10-improve-mobile-responsiveness.md (NEW) 146 | ├── 11-add-contributor-badges.md (NEW) 147 | ├── 12-add-scroll-to-top.md (NEW) 148 | └── 13-add-color-themes.md (NEW) 149 | 150 | .github/ 151 | ├── GOOD_FIRST_ISSUES.md (UPDATED) 152 | └── NEW_ISSUES_SUMMARY.md (NEW) 153 | ``` 154 | 155 | --- 156 | 157 | **Quick Tip**: Start with issues that match your skill level and interests. Each issue is self-contained and can be completed independently! 158 | -------------------------------------------------------------------------------- /.github/NEW_ISSUES_SUMMARY.md: -------------------------------------------------------------------------------- 1 | # New Good First Issues Summary 2 | 3 | This document summarizes the 8 new good first issue templates created to expand the FirstLeaf project. 4 | 5 | ## What Was Created 6 | 7 | 8 new issue templates have been added to `.github/ISSUE_TEMPLATE/` (issues 06-13), bringing the total from 5 to 13 issue templates. 8 | 9 | ## New Issue Templates 10 | 11 | ### 06 - Contributor Statistics Display 📊 12 | - **Difficulty**: ⭐⭐⭐ Intermediate 13 | - **Feature**: Display total contributor count and highlight the latest contributor 14 | - **What it adds**: Statistics banner or NEW badge on the most recent contributor card 15 | - **Learning focus**: DOM manipulation, data visualization 16 | 17 | ### 07 - Social Media Links 🔗 18 | - **Difficulty**: ⭐⭐⭐ Intermediate 19 | - **Feature**: Allow contributors to add Twitter, LinkedIn, and website links to their cards 20 | - **What it adds**: Social media icons at the bottom of contributor cards 21 | - **Learning focus**: Data structure extension, SVG icons, event handling 22 | 23 | ### 08 - Animation Effects ✨ 24 | - **Difficulty**: ⭐⭐⭐ Intermediate 25 | - **Feature**: Add smooth fade-in, hover, and stagger animations to cards 26 | - **What it adds**: Professional animations that enhance UX without being distracting 27 | - **Learning focus**: CSS animations, transitions, keyframes, performance 28 | 29 | ### 09 - Sorting Options 🔄 30 | - **Difficulty**: ⭐⭐⭐⭐ Intermediate-Advanced 31 | - **Feature**: Add dropdown to sort contributors by newest, oldest, name A-Z, name Z-A 32 | - **What it adds**: Sort select menu next to the search box 33 | - **Learning focus**: Array sorting, state management, complex DOM updates 34 | 35 | ### 10 - Mobile Responsiveness 📱 36 | - **Difficulty**: ⭐⭐⭐ Intermediate 37 | - **Feature**: Enhance mobile UX with better layouts and touch interactions 38 | - **What it adds**: Responsive breakpoints, touch feedback, safe area support 39 | - **Learning focus**: Responsive design, media queries, mobile UX best practices 40 | 41 | ### 11 - Contributor Badges 🎖️ 42 | - **Difficulty**: ⭐⭐⭐⭐ Intermediate-Advanced 43 | - **Feature**: Add badge system for special contributors (first, core, top, etc.) 44 | - **What it adds**: Colorful badges on contributor cards to highlight achievements 45 | - **Learning focus**: Data structures, conditional rendering, visual design 46 | 47 | ### 12 - Scroll to Top Button ⬆️ 48 | - **Difficulty**: ⭐⭐ Easy-Intermediate 49 | - **Feature**: Add floating button that appears when scrolling to return to top 50 | - **What it adds**: Circular button in bottom-right corner with smooth scroll 51 | - **Learning focus**: Scroll events, IntersectionObserver, smooth scrolling 52 | 53 | ### 13 - Custom Color Themes 🎨 54 | - **Difficulty**: ⭐⭐⭐ Intermediate 55 | - **Feature**: Create alternative color themes (Ocean, Forest, Sunset, Galaxy) 56 | - **What it adds**: Theme selector dropdown or color preview buttons 57 | - **Learning focus**: CSS custom properties, theming, color theory 58 | 59 | ## Design Philosophy 60 | 61 | All new issues follow these principles: 62 | 63 | 1. **Beginner-friendly**: Detailed step-by-step instructions with complete code examples 64 | 2. **Educational**: Each issue teaches specific skills relevant to web development 65 | 3. **Independent**: Issues can be completed in any order without dependencies 66 | 4. **Flexible**: Multiple implementation approaches provided where applicable 67 | 5. **Accessible**: Accessibility considerations included in all UI features 68 | 6. **Theme-consistent**: All features respect the existing dark theme aesthetic 69 | 70 | ## Feature Categories 71 | 72 | The new issues cover these areas: 73 | 74 | - **Data Visualization** (06): Statistics and metrics 75 | - **Social Features** (07): External links and profiles 76 | - **User Experience** (08, 10, 12): Animations, mobile, navigation 77 | - **Functionality** (09): Sorting and filtering 78 | - **Visual Design** (11, 13): Badges and theming 79 | 80 | ## Difficulty Distribution 81 | 82 | - **Easy-Intermediate**: 1 issue (#12) 83 | - **Intermediate**: 5 issues (#06, #07, #08, #10, #13) 84 | - **Intermediate-Advanced**: 2 issues (#09, #11) 85 | 86 | ## What Each Issue Includes 87 | 88 | Every issue template contains: 89 | 90 | ✅ Clear problem description 91 | ✅ Current vs. expected behavior 92 | ✅ Detailed implementation guide with code examples 93 | ✅ Multiple implementation approaches (when applicable) 94 | ✅ CSS, HTML, and JavaScript changes 95 | ✅ Step-by-step instructions 96 | ✅ Complete testing checklist 97 | ✅ Accessibility guidelines 98 | ✅ Design tips and best practices 99 | ✅ Mobile responsiveness considerations 100 | ✅ Browser compatibility notes 101 | 102 | ## How to Use These Issues 103 | 104 | ### As a Maintainer 105 | 106 | 1. Go to the Issues tab in your repository 107 | 2. Click "New Issue" 108 | 3. Select one of the templates (06-13) 109 | 4. Review and customize if needed 110 | 5. Publish the issue 111 | 6. Tag with appropriate labels 112 | 113 | ### For Contributors 114 | 115 | 1. Browse issues tagged "good first issue" 116 | 2. Choose an issue matching your skill level 117 | 3. Follow the detailed instructions in the template 118 | 4. Test your implementation thoroughly 119 | 5. Submit a PR with your changes 120 | 121 | ## Benefits 122 | 123 | ### For the Project 124 | - Expands functionality while maintaining simplicity 125 | - Provides clear roadmap for feature development 126 | - Attracts contributors of varying skill levels 127 | - Maintains code quality through testing checklists 128 | 129 | ### For Contributors 130 | - Multiple skill-level options available 131 | - Learn modern web development practices 132 | - Build portfolio-worthy features 133 | - Gain confidence through detailed guidance 134 | 135 | ## Future Considerations 136 | 137 | These issues are designed to be optional enhancements. The project remains fully functional without any of them, but each adds value: 138 | 139 | - **Must-have**: Mobile responsiveness (#10), Scroll to top (#12) 140 | - **High value**: Sorting (#09), Animations (#08), Themes (#13) 141 | - **Nice-to-have**: Statistics (#06), Social links (#07), Badges (#11) 142 | 143 | ## Maintenance Notes 144 | 145 | - Templates can be updated as the project evolves 146 | - Code examples should be tested before directing contributors to them 147 | - Consider creating demo branches showing completed implementations 148 | - Update GOOD_FIRST_ISSUES.md as issues are completed 149 | 150 | ## Next Steps 151 | 152 | 1. Review the templates and adjust as needed 153 | 2. Create issues from templates as appropriate 154 | 3. Consider implementing 1-2 features yourself as examples 155 | 4. Monitor contributor feedback and refine templates 156 | 5. Add more templates based on project needs 157 | 158 | --- 159 | 160 | **Created**: January 2025 161 | **Templates**: 06-13 (8 new issues) 162 | **Total Issues**: 13 templates available 163 | **Status**: Ready for use 164 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/18-add-random-spotlight.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: ⭐ Add random contributor spotlight 3 | about: Add a featured random contributor section that changes on each page load or button click 4 | title: "Add random contributor spotlight feature" 5 | labels: ["good first issue", "enhancement", "feature", "ui/ux"] 6 | assignees: '' 7 | --- 8 | 9 | ## Description 10 | Add a "Contributor Spotlight" section at the top of the page that randomly highlights one contributor. This gives every contributor a chance to be featured and makes the page more dynamic and interesting. 11 | 12 | ## Proposed Feature 13 | Add a special spotlight card/section that shows one randomly selected contributor. Include a "Show Another" button to randomly select a different contributor without reloading the page. 14 | 15 | **Good first issue** - Great for learning about random selection, featured content, and dynamic UI! ⭐ 16 | 17 | ## Current Behavior 18 | - All contributors shown equally in a grid 19 | - No featured or highlighted contributor 20 | - Static page on each load 21 | - No way to discover random contributors 22 | 23 | ## Expected Behavior 24 | - Spotlight section appears at top of contributors section 25 | - One random contributor is featured with a special design 26 | - "Show Another" button picks a new random contributor 27 | - Spotlight updates without page reload 28 | - Different contributor shown on each page load 29 | - Spotlight contributor also appears in main grid 30 | 31 | ## Requirements 32 | 33 | ### Spotlight Section Location 34 | - Placed above the main contributors grid 35 | - After the stats banner, before the contributor cards 36 | - Full width of the container 37 | - Eye-catching design that stands out 38 | 39 | ### Spotlight Card Design 40 | A larger, special card that includes: 41 | - **Large avatar** (200px+, larger than regular cards) 42 | - **"⭐ Contributor Spotlight" badge/header** 43 | - **Name** in large, bold text 44 | - **Username** (@username) 45 | - **Full message** with more space 46 | - **All badges** displayed prominently 47 | - **GitHub button** to view profile 48 | - **Fun fact**: "Joined on [date]" or "Contributor #X" 49 | - **"Show Another" button** to randomize 50 | 51 | ### Functionality 52 | - Random contributor selected on page load 53 | - "Show Another" button picks different random contributor 54 | - Smooth transition/animation when changing spotlight 55 | - Don't show same contributor twice in a row 56 | - Works with search/filter (picks from visible contributors) 57 | 58 | ### Visual Style 59 | - More prominent than regular cards 60 | - Special gradient or glow effect 61 | - Maybe a spotlight icon or emoji: ⭐ 🌟 💫 62 | - Confetti or sparkle animation (optional) 63 | - Distinct from regular cards but consistent with theme 64 | 65 | ## Testing Checklist 66 | - [ ] Spotlight section appears at correct position 67 | - [ ] Random contributor selected on page load 68 | - [ ] "Show Another" button works correctly 69 | - [ ] Different contributor shown each click 70 | - [ ] Same contributor not shown twice in a row 71 | - [ ] Smooth transition when changing 72 | - [ ] All contributor data displays correctly 73 | - [ ] GitHub link works 74 | - [ ] Responsive on mobile devices 75 | - [ ] Respects current filters/search 76 | - [ ] Works with empty search results 77 | - [ ] Styling matches site theme 78 | 79 | ## Expected Final Output 80 | 81 | ### When implemented: 82 | 1. User loads page 83 | 2. Spotlight section appears at top with random contributor 84 | 3. Special card shows Ada Lovelace with larger avatar and "⭐ Contributor Spotlight" 85 | 4. User reads: "Ada Lovelace - @ada - 'Hello, world!' - Joined Sep 30, 2025" 86 | 5. User clicks "🎲 Show Another" button 87 | 6. Card smoothly transitions to show different random contributor (Grace Hopper) 88 | 7. User can click button again for another random contributor 89 | 8. User can click "View on GitHub" to see profile 90 | 91 | ### Example Spotlight Layout: 92 | ``` 93 | ┌────────────────────────────────────────────────┐ 94 | │ ⭐ CONTRIBUTOR SPOTLIGHT ⭐ │ 95 | ├────────────────────────────────────────────────┤ 96 | │ │ 97 | │ ┌──────────────┐ │ 98 | │ │ │ │ 99 | │ │ AVATAR │ │ 100 | │ │ (large) │ │ 101 | │ │ │ │ 102 | │ └──────────────┘ │ 103 | │ │ 104 | │ Ada Lovelace │ 105 | │ @ada │ 106 | │ │ 107 | │ 🥇 First ⭐ Core Team │ 108 | │ │ 109 | │ "Hello, world! I'm excited to contribute │ 110 | │ to this amazing project and help others!" │ 111 | │ │ 112 | │ 📅 Joined on September 30, 2025 │ 113 | │ │ 114 | │ [🔗 View on GitHub] [🎲 Show Another] │ 115 | │ │ 116 | └────────────────────────────────────────────────┘ 117 | ``` 118 | 119 | ## Design Tips 120 | - Make it significantly larger than regular cards 121 | - Add a subtle glow or shadow effect 122 | - Use gradient background for spotlight header 123 | - Add smooth fade transition when changing 124 | - Consider pulse animation on first load 125 | - Keep "Show Another" button playful and fun 126 | - Test with different message lengths 127 | 128 | ## Benefits 129 | - Every contributor gets a chance to be featured 130 | - Makes the page more dynamic and interesting 131 | - Encourages users to explore different contributors 132 | - Fun, random element adds engagement 133 | - Helps highlight contributors who might be missed 134 | - Creates a welcoming, inclusive feeling 135 | 136 | ## Implementation Hints 137 | - Select random index: `Math.floor(Math.random() * contributors.length)` 138 | - Store last shown contributor to avoid repeats 139 | - Use CSS transitions for smooth changes 140 | - Fade out old, fade in new contributor 141 | - Copy contributor data to spotlight section 142 | - Update spotlight when filters change 143 | 144 | ## Additional Features (Optional) 145 | - Daily spotlight: Same contributor for all users that day 146 | - "Pin" button to keep current spotlight 147 | - Share button: "Share this contributor on Twitter" 148 | - Add fun stats: "Random pick #42" 149 | - Confetti animation when showing new contributor 150 | - "Meet all contributors" button to cycle through all 151 | 152 | ## Fun Variations 153 | - Call it "Rising Star" instead of "Spotlight" 154 | - Add themed titles: "Today's Hero", "Featured Friend" 155 | - Seasonal themes: "🎃 Spooky Spotlight" for October 156 | - Add contributor's country flag if available 157 | 158 | --- 159 | **Good first issue** - Perfect for learning about randomization and featured content! 🌟 160 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/20-add-statistics-page.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 📊 Add contributor statistics page 3 | about: Add a separate statistics page showing interesting data about all contributors 4 | title: "Add contributor statistics/analytics page" 5 | labels: ["good first issue", "enhancement", "feature", "analytics"] 6 | assignees: '' 7 | --- 8 | 9 | ## Description 10 | Create a new "Stats" page that shows interesting statistics and visualizations about the contributors, such as most common names, badge distribution, join trends, and more. 11 | 12 | ## Proposed Feature 13 | Add a "📊 Stats" button in the navigation that links to a new `stats.html` page showing contributor analytics and fun facts. 14 | 15 | **Good first issue** - Great for learning about data analysis and visualization! 📊 16 | 17 | ## Current Behavior 18 | - Only basic stats shown (total count, latest contributor) 19 | - No way to see aggregate data 20 | - No insights about contributor demographics 21 | - Missing fun facts and trivia 22 | 23 | ## Expected Behavior 24 | - "Stats" link in navigation 25 | - Separate stats page with visualizations 26 | - Multiple stat cards showing different metrics 27 | - Interactive charts (optional) 28 | - Fun facts and trivia section 29 | - Responsive design 30 | 31 | ## Requirements 32 | 33 | ### Stats to Display 34 | 35 | **Basic Stats:** 36 | - Total contributors 37 | - Total countries (if country data available) 38 | - Average join rate (per week/month) 39 | - Newest contributor 40 | - First contributor (earliest join date) 41 | 42 | **Badge Statistics:** 43 | - Badge distribution (pie chart or bars) 44 | - Most common badges 45 | - Contributors with most badges 46 | - Percentage with each badge type 47 | 48 | **Name Statistics:** 49 | - Most common first names 50 | - Longest name 51 | - Shortest name 52 | - Most common username patterns 53 | 54 | **Growth Statistics:** 55 | - Contributors per month (bar chart) 56 | - Growth trend (up/down/steady) 57 | - Busiest month 58 | - Slowest month 59 | 60 | **Fun Facts:** 61 | - "Did you know?" trivia 62 | - Example: "42% of contributors have the 'early' badge" 63 | - Example: "Most contributors joined in October 2025" 64 | 65 | ### Page Structure 66 | ``` 67 | ┌─────────────────────────────────────┐ 68 | │ FirstLeaf - Statistics │ 69 | │ [Back to Contributors] │ 70 | ├─────────────────────────────────────┤ 71 | │ │ 72 | │ 📊 Contributor Statistics │ 73 | │ │ 74 | │ ┌───────┐ ┌───────┐ ┌───────┐ │ 75 | │ │ Total │ │Newest │ │ First │ │ 76 | │ │ 150 │ │ John │ │ Alice │ │ 77 | │ └───────┘ └───────┘ └───────┘ │ 78 | │ │ 79 | │ 🏷️ Badge Distribution │ 80 | │ ▓▓▓▓▓▓▓ Core Team (35%) │ 81 | │ ▓▓▓▓ Early Adopter (20%) │ 82 | │ ▓▓▓ First (15%) │ 83 | │ │ 84 | │ 📈 Growth Over Time │ 85 | │ [Bar chart showing joins/month] │ 86 | │ │ 87 | │ 🎯 Fun Facts │ 88 | │ • Most popular name: John (5) │ 89 | │ • Longest message: 142 chars │ 90 | │ • Average badges per person: 1.8 │ 91 | │ │ 92 | └─────────────────────────────────────┘ 93 | ``` 94 | 95 | ## Testing Checklist 96 | - [ ] Stats page loads correctly 97 | - [ ] Link from main page works 98 | - [ ] All statistics calculate correctly 99 | - [ ] Charts/visualizations display properly 100 | - [ ] Mobile responsive 101 | - [ ] Back button works 102 | - [ ] Handles edge cases (no contributors, etc.) 103 | - [ ] Page matches main site styling 104 | - [ ] Fast loading time 105 | - [ ] No console errors 106 | 107 | ## Expected Final Output 108 | 109 | ### When implemented: 110 | 1. User on main page sees "📊 Stats" link in nav 111 | 2. User clicks "Stats" 112 | 3. New page opens showing contributor statistics 113 | 4. User sees overview cards with key numbers 114 | 5. User scrolls to see badge distribution chart 115 | 6. User sees growth chart over time 116 | 7. User reads fun facts section 117 | 8. User clicks "Back to Contributors" to return 118 | 119 | ### Example Stats Display: 120 | 121 | **Overview Cards:** 122 | ``` 123 | ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ 124 | │ Total │ │ This Month │ │ This Week │ 125 | │ 152 │ │ 12 │ │ 3 │ 126 | │ Contributors │ │ New Members │ │ New Members │ 127 | └──────────────┘ └──────────────┘ └──────────────┘ 128 | ``` 129 | 130 | **Badge Distribution:** 131 | ``` 132 | 🏷️ Badge Distribution 133 | 134 | ⭐ Core Team ▓▓▓▓▓▓▓▓▓▓▓▓ 35 (23%) 135 | 🥇 First ▓▓▓▓▓▓▓ 20 (13%) 136 | 🌱 Early Adopter ▓▓▓▓▓ 15 (10%) 137 | 🏆 Top ▓▓▓ 8 (5%) 138 | 🤝 Helper ▓▓ 5 (3%) 139 | ``` 140 | 141 | **Fun Facts:** 142 | ``` 143 | 🎯 Fun Facts & Trivia 144 | 145 | • The first contributor was Alice, who joined on Sep 30, 2025 146 | • October 2025 was our busiest month with 42 new contributors 147 | • The most common first name is "John" (appears 5 times) 148 | • 42% of contributors have at least one badge 149 | • The longest message is 142 characters long 150 | • Average of 8 new contributors per week 151 | • We gained 152 contributors in just 3 months! 🎉 152 | ``` 153 | 154 | ## Design Tips 155 | - Use cards for each stat section 156 | - Add icons for visual interest 157 | - Use progress bars for percentages 158 | - Color-code different stat types 159 | - Keep it simple and readable 160 | - Add hover effects for interactivity 161 | 162 | ## Benefits 163 | - Insights into project growth 164 | - Fun and engaging for community 165 | - Useful for maintainers 166 | - Shows project health 167 | - Encourages participation 168 | 169 | ## Implementation Hints 170 | 171 | ### Calculate statistics: 172 | ```javascript 173 | // Total with badge 174 | const coreTeamCount = contributors.filter(c => 175 | c.badges?.includes('core') 176 | ).length; 177 | 178 | // Most common name 179 | const nameFreq = {}; 180 | contributors.forEach(c => { 181 | const firstName = c.name.split(' ')[0]; 182 | nameFreq[firstName] = (nameFreq[firstName] || 0) + 1; 183 | }); 184 | 185 | // Growth by month 186 | const byMonth = {}; 187 | contributors.forEach(c => { 188 | const month = c.addedAt.slice(0, 7); // "2025-10" 189 | byMonth[month] = (byMonth[month] || 0) + 1; 190 | }); 191 | ``` 192 | 193 | ### Simple bar chart CSS: 194 | ```css 195 | .stat-bar { 196 | height: 20px; 197 | background: linear-gradient(90deg, var(--accent), var(--accent-2)); 198 | border-radius: 4px; 199 | transition: width 0.3s ease; 200 | } 201 | ``` 202 | 203 | ## Additional Features (Optional) 204 | - Export stats as PDF or image 205 | - Compare stats to last month 206 | - Leaderboard: most badges, longest tenure 207 | - Interactive charts with Chart.js or D3.js 208 | - Auto-refresh stats every minute 209 | - Share stats on social media 210 | 211 | --- 212 | **Good first issue** - Perfect for learning data analysis and visualization! 📈 213 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/21-add-new-contributor-badge.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🔔 Add notification badge for new contributors 3 | about: Add a notification badge showing number of contributors added in last 24 hours 4 | title: "Add new contributors notification badge" 5 | labels: ["good first issue", "enhancement", "feature", "ui/ux"] 6 | assignees: '' 7 | --- 8 | 9 | ## Description 10 | Add a small notification badge that shows how many new contributors joined in the last 24 hours (or 7 days). This makes the page more dynamic and shows that the project is actively growing. 11 | 12 | ## Proposed Feature 13 | Add a small "🔔 NEW" badge near the contributor count that shows "X new today" or "X new this week" when hovered or clicked. 14 | 15 | **Good first issue** - Great for learning about date comparisons and notifications! 🔔 16 | 17 | ## Current Behavior 18 | - No indication of recent activity 19 | - Can't tell if new contributors joined recently 20 | - Page feels static 21 | - Hard to see project momentum 22 | 23 | ## Expected Behavior 24 | - Badge appears if contributors joined in last 24 hours 25 | - Shows count of recent contributors 26 | - Clicking badge filters to show only new contributors 27 | - Badge has subtle animation to draw attention 28 | - Updates based on current date/time 29 | 30 | ## Requirements 31 | 32 | ### Badge Display 33 | - Small badge/pill next to total count 34 | - Shows number of new contributors 35 | - Text: "5 new today" or "12 new this week" 36 | - Only shows if count > 0 37 | - Eye-catching but not annoying 38 | 39 | ### Time Windows 40 | Support different time windows: 41 | - **Last 24 hours**: "X new today" 42 | - **Last 7 days**: "X new this week" 43 | - **Last 30 days**: "X new this month" 44 | 45 | Default: Last 7 days (most reasonable) 46 | 47 | ### Functionality 48 | - Calculate based on `addedAt` field 49 | - Compare with current date/time 50 | - Click badge to filter and show only new contributors 51 | - Click again to clear filter 52 | - Badge has subtle pulse animation 53 | 54 | ### Visual Design 55 | - Small pill-shaped badge 56 | - Color: bright (green, blue, or accent color) 57 | - Icon: 🔔 or ⚡ or ✨ 58 | - Positioned next to contributor count 59 | - Subtle glow or pulse effect 60 | 61 | ## Testing Checklist 62 | - [ ] Badge shows when new contributors exist 63 | - [ ] Count is accurate (based on time window) 64 | - [ ] Badge hidden when no new contributors 65 | - [ ] Clicking badge filters to new contributors 66 | - [ ] Clicking again clears filter 67 | - [ ] Animation is smooth and subtle 68 | - [ ] Works with different time windows 69 | - [ ] Responsive on mobile 70 | - [ ] Tooltip shows on hover 71 | - [ ] Updates when filters change 72 | 73 | ## Expected Final Output 74 | 75 | ### When implemented: 76 | 1. User loads page 77 | 2. Sees contributor count: "152 contributors" 78 | 3. Sees new badge next to it: "🔔 5 new this week" 79 | 4. User hovers badge, tooltip shows: "Click to see new contributors" 80 | 5. User clicks badge 81 | 6. Page filters to show only 5 recent contributors 82 | 7. Badge is highlighted to show filter is active 83 | 8. User clicks badge again to clear filter 84 | 9. All contributors shown again 85 | 86 | ### Example Display: 87 | ``` 88 | ┌────────────────────────────────────┐ 89 | │ Contributors │ 90 | │ 152 contributors [🔔 5 new ✨] │ ← badge 91 | └────────────────────────────────────┘ 92 | ``` 93 | 94 | ### Example Badge Variants: 95 | ``` 96 | [🔔 3 new today] (last 24h) 97 | [✨ 12 new this week] (last 7d) 98 | [⚡ 25 new this month] (last 30d) 99 | ``` 100 | 101 | ### Active Filter State: 102 | ``` 103 | ┌────────────────────────────────────┐ 104 | │ Contributors │ 105 | │ 5 contributors [🔔 5 new ✓] │ ← active 106 | │ Showing only new contributors │ 107 | └────────────────────────────────────┘ 108 | ``` 109 | 110 | ## Design Tips 111 | - Make badge small but noticeable 112 | - Use contrasting color (green/blue) 113 | - Add subtle pulse animation (optional) 114 | - Clear visual feedback when active 115 | - Consider adding confetti when clicked (fun!) 116 | 117 | ## Benefits 118 | - Shows project is active and growing 119 | - Encourages users to check back 120 | - Creates sense of momentum 121 | - Highlights recent contributors 122 | - Makes page feel more dynamic 123 | 124 | ## Implementation Hints 125 | 126 | ### Calculate new contributors: 127 | ```javascript 128 | function getNewContributors(contributors, hoursAgo = 168) { // 7 days default 129 | const cutoffTime = new Date(); 130 | cutoffTime.setHours(cutoffTime.getHours() - hoursAgo); 131 | 132 | return contributors.filter(c => { 133 | if (!c.addedAt) return false; 134 | const addedDate = new Date(c.addedAt); 135 | return addedDate >= cutoffTime; 136 | }); 137 | } 138 | 139 | const newContributors = getNewContributors(contributors); 140 | const newCount = newContributors.length; 141 | ``` 142 | 143 | ### CSS for badge: 144 | ```css 145 | .new-badge { 146 | display: inline-flex; 147 | align-items: center; 148 | gap: 0.25rem; 149 | padding: 0.25rem 0.75rem; 150 | background: linear-gradient(135deg, #43e97b, #38f9d7); 151 | color: #1a202c; 152 | border-radius: 20px; 153 | font-size: 0.875rem; 154 | font-weight: 600; 155 | cursor: pointer; 156 | transition: transform 0.2s ease; 157 | } 158 | 159 | .new-badge:hover { 160 | transform: scale(1.05); 161 | } 162 | 163 | .new-badge.active { 164 | background: linear-gradient(135deg, #f093fb, #f5576c); 165 | color: white; 166 | } 167 | 168 | @keyframes pulse { 169 | 0%, 100% { opacity: 1; } 170 | 50% { opacity: 0.7; } 171 | } 172 | 173 | .new-badge { 174 | animation: pulse 2s ease-in-out infinite; 175 | } 176 | ``` 177 | 178 | ### Toggle filter on click: 179 | ```javascript 180 | let showingNewOnly = false; 181 | 182 | newBadge.addEventListener('click', () => { 183 | showingNewOnly = !showingNewOnly; 184 | 185 | if (showingNewOnly) { 186 | // Show only new contributors 187 | contributorElements.forEach(({ element, contributor }) => { 188 | const isNew = newContributors.includes(contributor); 189 | element.style.display = isNew ? '' : 'none'; 190 | }); 191 | newBadge.classList.add('active'); 192 | } else { 193 | // Show all 194 | contributorElements.forEach(({ element }) => { 195 | element.style.display = ''; 196 | }); 197 | newBadge.classList.remove('active'); 198 | } 199 | }); 200 | ``` 201 | 202 | ## Additional Features (Optional) 203 | - Tooltip: "5 contributors joined in the last 7 days" 204 | - Different icons for different time windows 205 | - Animation when count increases 206 | - Sound effect on click (optional, off by default) 207 | - "See all new" button that scrolls to new ones 208 | - History: show previous week's count for comparison 209 | 210 | ## Time Window Selection (Advanced) 211 | Allow users to choose time window: 212 | ``` 213 | [🔔 12 new ▼] 214 | ├─ Last 24 hours (3) 215 | ├─ Last 7 days (12) ✓ 216 | └─ Last 30 days (25) 217 | ``` 218 | 219 | --- 220 | **Good first issue** - Perfect for learning date manipulation and interactive badges! ⏰ 221 | -------------------------------------------------------------------------------- /stats.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | FirstLeaf — Statistics 7 | 11 | 12 | 13 | 17 | 18 | 22 | 23 | 24 |
25 |
26 |
27 |
28 |

FirstLeaf

29 |

Contributor Statistics and Analytics

30 |
31 | 59 |
60 |
61 | 62 |
63 | 64 |
65 |
66 |
67 |

📊 Contributor Statistics

68 |

69 | Explore insights and analytics about our amazing contributors 70 |

71 |
72 |
73 | 74 | 75 |
76 |
77 |
👥
78 |
79 |
0
80 |
Total Contributors
81 |
82 |
83 |
84 |
✨
85 |
86 |
-
87 |
Newest Contributor
88 |
89 |
90 |
91 |
🌟
92 |
93 |
-
94 |
First Contributor
95 |
96 |
97 |
98 |
📈
99 |
100 |
0
101 |
Avg. Per Month
102 |
103 |
104 |
105 | 106 | 107 |
108 | 109 |
110 |
111 |

🏷️ Badge Distribution

112 |

113 | Achievements earned by contributors 114 |

115 |
116 |
117 |
Loading statistics...
118 |
119 |
120 | 121 | 122 |
123 |
124 |

📈 Growth Over Time

125 |

Cumulative contributor growth

126 |
127 |
128 |
Loading statistics...
129 |
130 |
131 |
132 | 133 | 134 |
135 | 136 |
137 |
138 |

👤 Name Statistics

139 |

Interesting patterns in names

140 |
141 |
142 |
Loading statistics...
143 |
144 |
145 | 146 | 147 |
148 |
149 |

🎯 Fun Facts & Trivia

150 |

Discover fascinating insights

151 |
152 |
153 |
Loading statistics...
154 |
155 |
156 |
157 |
158 |
159 | 160 |
161 |
162 |

Built with 💙 for first‑time contributors by Jadu

163 |
164 |
165 | 166 | 167 | 187 | 188 | 189 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/22-add-card-flip-animation.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🎮 Add contributor card flip animation 3 | about: Add interactive flip animation to contributor cards showing extra info on the back 4 | title: "Add card flip animation to show back side with details" 5 | labels: ["good first issue", "enhancement", "feature", "ui/ux", "animation"] 6 | assignees: '' 7 | --- 8 | 9 | ## Description 10 | Make contributor cards interactive by adding a 3D flip animation. When users click or hover on a card, it flips to reveal the "back side" with additional information or fun facts. 11 | 12 | ## Proposed Feature 13 | Add CSS 3D flip animation to contributor cards. The front shows the current design, and the back shows expanded information like full message, join date, badge descriptions, or a fun fact. 14 | 15 | **Good first issue** - Great for learning CSS 3D transforms and interactive animations! 🎮 16 | 17 | ## Current Behavior 18 | - Cards are static (no animation) 19 | - Limited information visible on each card 20 | - No interactive hover effects beyond scale 21 | - Cards link directly to GitHub (can't show more info) 22 | 23 | ## Expected Behavior 24 | - Cards flip on click (or hover, configurable) 25 | - Front side shows current design 26 | - Back side shows additional information 27 | - Smooth 3D flip animation 28 | - Click back to flip back to front 29 | - GitHub link available on back side 30 | 31 | ## Requirements 32 | 33 | ### Flip Trigger 34 | - **Click** (recommended): Click card to flip, click again to flip back 35 | - **Hover** (alternative): Hover to flip, unhover to flip back 36 | - Mobile: Tap to flip, tap again to flip back 37 | 38 | ### Front Side (Current Design) 39 | - Avatar 40 | - Name 41 | - Username 42 | - Message (truncated if long) 43 | - Badges 44 | - "NEW" badge (if applicable) 45 | 46 | ### Back Side (New) 47 | Show expanded information: 48 | - Full message (no truncation) 49 | - Join date: "Joined on Oct 5, 2025" 50 | - Badge descriptions (what each badge means) 51 | - Fun fact (optional) 52 | - "View on GitHub" button 53 | - Small "flip back" icon/hint 54 | 55 | ### Animation 56 | - 3D perspective flip (rotate Y axis) 57 | - Duration: ~0.6 seconds 58 | - Easing: ease-in-out 59 | - Preserve 3D transforms 60 | - Smooth and polished 61 | 62 | ## Testing Checklist 63 | - [ ] Cards flip on click/hover 64 | - [ ] Front side displays correctly 65 | - [ ] Back side displays correctly 66 | - [ ] Animation is smooth 67 | - [ ] Works on all card sizes 68 | - [ ] Mobile touch works properly 69 | - [ ] Back side is readable 70 | - [ ] GitHub link on back works 71 | - [ ] Flip back to front works 72 | - [ ] No layout shifting during flip 73 | - [ ] Accessible (keyboard navigation) 74 | - [ ] Works on all browsers 75 | 76 | ## Expected Final Output 77 | 78 | ### When implemented: 79 | 1. User sees contributor cards as normal (front side) 80 | 2. User clicks on a card (Ada Lovelace) 81 | 3. Card flips 180° with 3D animation (0.6s) 82 | 4. Back side revealed showing: 83 | - "Joined on September 30, 2025" 84 | - Full message (no truncation) 85 | - Badge meanings: "🥇 First: First contributor to the project" 86 | - [View on GitHub] button 87 | 5. User reads information 88 | 6. User clicks card again to flip back to front 89 | 7. Card smoothly flips back to original state 90 | 91 | ### Example Back Side Layout: 92 | ``` 93 | ┌────────────────────────────┐ 94 | │ [↻] │ ← flip back icon 95 | │ │ 96 | │ Joined on │ 97 | │ September 30, 2025 │ 98 | │ │ 99 | │ "Hello, world! I'm so │ 100 | │ excited to contribute │ 101 | │ to this amazing project │ 102 | │ and help newcomers!" │ 103 | │ │ 104 | │ Badges: │ 105 | │ 🥇 First Contributor │ 106 | │ ⭐ Core Team Member │ 107 | │ │ 108 | │ [🔗 View on GitHub] │ 109 | │ │ 110 | └────────────────────────────┘ 111 | ``` 112 | 113 | ### Visual Flip Animation: 114 | ``` 115 | Front Flipping Back 116 | ┌──────┐ ┌─┐ ┌──────┐ 117 | │ │ → │ │ → │ │ 118 | │ Ada │ │ │ │ Info │ 119 | │ │ │ │ │ │ 120 | └──────┘ └─┘ └──────┘ 121 | (0s) (0.3s) (0.6s) 122 | ``` 123 | 124 | ## Design Tips 125 | - Keep front and back sides same size 126 | - Use same card background/styling 127 | - Add subtle hint on front: "Click to flip" 128 | - Make back side equally attractive 129 | - Test with long and short messages 130 | - Ensure text is readable on back 131 | - Add padding on back side 132 | 133 | ## Benefits 134 | - More interactive and engaging 135 | - Show more information without cluttering 136 | - Fun and modern UX 137 | - Showcases full contributor details 138 | - Encourages exploration 139 | - Memorable user experience 140 | 141 | ## Implementation Hints 142 | 143 | ### HTML Structure: 144 | ```html 145 |
146 |
147 |
148 | 149 |
150 |
151 | 152 |
153 |
154 |
155 | ``` 156 | 157 | ### CSS for 3D Flip: 158 | ```css 159 | .card-container { 160 | perspective: 1000px; 161 | cursor: pointer; 162 | } 163 | 164 | .card-flipper { 165 | position: relative; 166 | width: 100%; 167 | height: 100%; 168 | transform-style: preserve-3d; 169 | transition: transform 0.6s ease-in-out; 170 | } 171 | 172 | .card-container.flipped .card-flipper { 173 | transform: rotateY(180deg); 174 | } 175 | 176 | .card-front, 177 | .card-back { 178 | position: absolute; 179 | width: 100%; 180 | height: 100%; 181 | backface-visibility: hidden; 182 | border-radius: 12px; 183 | padding: 1.5rem; 184 | } 185 | 186 | .card-front { 187 | transform: rotateY(0deg); 188 | } 189 | 190 | .card-back { 191 | transform: rotateY(180deg); 192 | background: var(--panel); 193 | display: flex; 194 | flex-direction: column; 195 | justify-content: center; 196 | } 197 | ``` 198 | 199 | ### JavaScript for Click Flip: 200 | ```javascript 201 | card.addEventListener('click', (e) => { 202 | e.preventDefault(); // Prevent default GitHub link 203 | card.classList.toggle('flipped'); 204 | }); 205 | ``` 206 | 207 | ### Accessibility: 208 | ```html 209 |
213 | 214 |
215 | ``` 216 | 217 | ```javascript 218 | // Keyboard support 219 | card.addEventListener('keydown', (e) => { 220 | if (e.key === 'Enter' || e.key === ' ') { 221 | e.preventDefault(); 222 | card.classList.toggle('flipped'); 223 | } 224 | }); 225 | ``` 226 | 227 | ## Additional Features (Optional) 228 | - Auto-flip back after 10 seconds 229 | - Different flip direction (horizontal/vertical/diagonal) 230 | - Add sound effect on flip (off by default) 231 | - "Flip all" button to preview all backs 232 | - Random flip animation on page load 233 | - Shake animation hint to show cards are flippable 234 | 235 | ## Variations 236 | - **Hover to flip** (quicker but less mobile-friendly) 237 | - **Slide reveal** (alternative to flip) 238 | - **Expand** (card grows to show more info) 239 | - **Modal** (opens popup instead of flipping) 240 | 241 | --- 242 | **Good first issue** - Perfect for learning CSS 3D transforms and animations! 🎴 243 | -------------------------------------------------------------------------------- /.github/NEW_FEATURES_SUMMARY.md: -------------------------------------------------------------------------------- 1 | # New Feature Ideas for FirstLeaf 2 | 3 | This document describes 10 new creative features that can be added to the FirstLeaf project. Each feature is designed to be beginner-friendly and easy to implement while adding significant value to the user experience. 4 | 5 | ## 📋 Feature Overview 6 | 7 | ### 1. 🔍 Contributor Profile Modal (Issue #14) 8 | **Description:** Add an interactive modal/popup that displays detailed contributor information when clicking on a card. 9 | 10 | **Key Features:** 11 | - Large avatar display 12 | - Full message without truncation 13 | - Prominent "View on GitHub" button 14 | - Close modal with ESC key, click on overlay, or close button 15 | - Smooth fade-in/fade-out animations 16 | 17 | **Benefits:** Better user experience, showcases full contributor details without leaving the page 18 | 19 | --- 20 | 21 | ### 2. 📥 Export Contributors Feature (Issue #15) 22 | **Description:** Add ability to export the contributors list to CSV or JSON format. 23 | 24 | **Key Features:** 25 | - Export button in controls area 26 | - Download as CSV or JSON 27 | - Respects current filters and sort order 28 | - Automatic filename with timestamp 29 | 30 | **Benefits:** Data portability, useful for reports and analysis, backup capability 31 | 32 | --- 33 | 34 | ### 3. 🏷️ Filter Contributors by Badges (Issue #16) 35 | **Description:** Add filter buttons to show only contributors with specific badge types. 36 | 37 | **Key Features:** 38 | - Badge filter chips/pills below search/sort 39 | - Click to filter by badge type 40 | - Works alongside search functionality 41 | - Visual indication of active filters 42 | 43 | **Benefits:** Easier discovery of contributors with specific roles, better community exploration 44 | 45 | --- 46 | 47 | ### 4. 📅 Contribution Timeline View (Issue #17) 48 | **Description:** Add a timeline/calendar visualization showing when contributors joined over time. 49 | 50 | **Key Features:** 51 | - Toggle between grid and timeline views 52 | - Group contributors by month/week 53 | - Expand/collapse time periods 54 | - Visual bars showing contribution volume 55 | 56 | **Benefits:** Visualize project growth, see contribution patterns, understand historical development 57 | 58 | --- 59 | 60 | ### 5. ⭐ Random Contributor Spotlight (Issue #18) 61 | **Description:** Add a featured random contributor section that changes on each page load or button click. 62 | 63 | **Key Features:** 64 | - Special spotlight card at top of page 65 | - "Show Another" button for randomization 66 | - Larger avatar and expanded information 67 | - Different contributor on each page load 68 | 69 | **Benefits:** Every contributor gets featured, dynamic page, encourages exploration 70 | 71 | --- 72 | 73 | ### 6. 🎨 Avatar Border Customization (Issue #19) 74 | **Description:** Allow contributors to add custom colored borders or frames to their avatars. 75 | 76 | **Key Features:** 77 | - Optional `avatarBorder` field in contributor data 78 | - Multiple border styles (solid, gradient, glow, pulse, rainbow) 79 | - Custom colors for personalization 80 | - Smooth animations 81 | 82 | **Benefits:** Contributors can express personality, unique visual identity, fun customization 83 | 84 | --- 85 | 86 | ### 7. 📊 Contributor Statistics Page (Issue #20) 87 | **Description:** Create a separate statistics page showing interesting data about all contributors. 88 | 89 | **Key Features:** 90 | - Dedicated stats.html page 91 | - Badge distribution charts 92 | - Growth trends over time 93 | - Fun facts and trivia section 94 | 95 | **Benefits:** Insights into project growth, useful for maintainers, engaging for community 96 | 97 | --- 98 | 99 | ### 8. 🔔 New Contributors Notification Badge (Issue #21) 100 | **Description:** Add a notification badge showing number of contributors added in last 24 hours/week. 101 | 102 | **Key Features:** 103 | - "X new this week" badge near contributor count 104 | - Click to filter to new contributors only 105 | - Subtle pulse animation 106 | - Updates based on current date/time 107 | 108 | **Benefits:** Shows project is active, highlights recent activity, creates momentum 109 | 110 | --- 111 | 112 | ### 9. 🎮 Card Flip Animation (Issue #22) 113 | **Description:** Add interactive 3D flip animation to contributor cards showing extra info on the back. 114 | 115 | **Key Features:** 116 | - Click card to flip and reveal back side 117 | - 3D perspective animation 118 | - Back side shows full message, join date, badge descriptions 119 | - Smooth transitions 120 | 121 | **Benefits:** More interactive and engaging, shows additional info without cluttering, modern UX 122 | 123 | --- 124 | 125 | ### 10. 🎁 Contributor Appreciation System (Issue #23) 126 | **Description:** Allow users to send thanks/appreciation to contributors with emoji reactions. 127 | 128 | **Key Features:** 129 | - Emoji reaction buttons (👏, ❤️, 🎉, 🙏, ⭐) 130 | - Click to send appreciation 131 | - Counts stored in localStorage 132 | - Visual feedback animations 133 | 134 | **Benefits:** Positive community atmosphere, contributors feel valued, interactive engagement 135 | 136 | --- 137 | 138 | ## 🎯 Implementation Priority 139 | 140 | All features are designed to be **"good first issues"** and are suitable for beginners. Here's a suggested implementation order based on complexity: 141 | 142 | ### Easy (Great starting point) 143 | 1. **Export Contributors** (Issue #15) - Simple data formatting 144 | 2. **New Contributors Badge** (Issue #21) - Basic date comparison 145 | 3. **Filter by Badges** (Issue #16) - Array filtering 146 | 147 | ### Medium (More interactive) 148 | 4. **Random Spotlight** (Issue #18) - Randomization and DOM manipulation 149 | 5. **Avatar Customization** (Issue #19) - CSS styling and data extension 150 | 6. **Appreciation System** (Issue #23) - localStorage and user interaction 151 | 152 | ### Advanced (More complex but still beginner-friendly) 153 | 7. **Profile Modal** (Issue #14) - Modal creation and event handling 154 | 8. **Timeline View** (Issue #17) - Date grouping and visualization 155 | 9. **Statistics Page** (Issue #20) - Data analysis and charting 156 | 10. **Card Flip Animation** (Issue #22) - CSS 3D transforms 157 | 158 | --- 159 | 160 | ## 💡 Key Design Principles 161 | 162 | All features follow these principles: 163 | - **Beginner-friendly:** Clear instructions, examples, and testing checklists 164 | - **No implementation details:** Issues describe requirements and expected output, not code 165 | - **Creative but practical:** Fun features that add real value 166 | - **Easy to implement:** Can be completed by first-time contributors 167 | - **Well-documented:** Clear requirements, testing criteria, and benefits 168 | 169 | --- 170 | 171 | ## 📝 Issue Template Structure 172 | 173 | Each issue template includes: 174 | 1. **Description:** What the feature does 175 | 2. **Current vs Expected Behavior:** Clear comparison 176 | 3. **Requirements:** What needs to be implemented 177 | 4. **Testing Checklist:** How to verify it works 178 | 5. **Expected Final Output:** User experience walkthrough 179 | 6. **Design Tips:** Helpful suggestions 180 | 7. **Benefits:** Why this feature matters 181 | 8. **Implementation Hints:** Optional guidance (no full implementation) 182 | 183 | --- 184 | 185 | ## 🚀 Getting Started 186 | 187 | To work on any of these features: 188 | 1. Check the issue templates in `.github/ISSUE_TEMPLATE/` 189 | 2. Read the requirements and expected output 190 | 3. Fork the repository and create a branch 191 | 4. Implement the feature following the requirements 192 | 5. Test using the provided checklist 193 | 6. Open a pull request 194 | 195 | --- 196 | 197 | **Happy coding! 🎉** 198 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/08-add-animation-effects.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: ✨ Add animation effects to contributor cards 3 | about: Add subtle hover and loading animations to enhance user experience 4 | title: "Add animation effects to contributor cards" 5 | labels: ["good first issue", "enhancement", "ui/ux"] 6 | assignees: '' 7 | --- 8 | 9 | ## Description 10 | Add smooth animations to contributor cards to make the interface more engaging and polished. Include hover effects, fade-in animations when cards load, and smooth transitions. 11 | 12 | ## Proposed Feature 13 | Implement the following animations: 14 | - Fade-in animation when cards first load 15 | - Smooth hover effect with slight elevation 16 | - Stagger effect (cards appear one by one) 17 | - Optional: Subtle pulse animation on the "NEW" badge 18 | 19 | ## Current Behavior 20 | - Cards appear instantly without animation 21 | - Basic hover effect exists but could be enhanced 22 | - No visual feedback for loading 23 | 24 | ## Expected Behavior 25 | - Cards fade in smoothly when the page loads 26 | - Cards animate in with a stagger effect (one after another) 27 | - Enhanced hover effects with smooth transitions 28 | - Professional, subtle animations that don't distract 29 | 30 | ## Implementation Details 31 | 32 | ### 1. CSS Changes (assets/styles.css) 33 | 34 | Add these animations and update the card styles: 35 | 36 | ```css 37 | /* Fade-in animation */ 38 | @keyframes fadeInUp { 39 | from { 40 | opacity: 0; 41 | transform: translateY(20px); 42 | } 43 | to { 44 | opacity: 1; 45 | transform: translateY(0); 46 | } 47 | } 48 | 49 | /* Pulse animation for badges */ 50 | @keyframes pulse { 51 | 0%, 100% { 52 | opacity: 1; 53 | } 54 | 50% { 55 | opacity: 0.7; 56 | } 57 | } 58 | 59 | /* Update existing .cards > a styles */ 60 | .cards > a { 61 | text-decoration: none; 62 | color: inherit; 63 | display: block; 64 | opacity: 0; /* Start hidden for animation */ 65 | animation: fadeInUp 0.5s ease forwards; 66 | } 67 | 68 | /* Add stagger delay using nth-child */ 69 | .cards > a:nth-child(1) { animation-delay: 0.05s; } 70 | .cards > a:nth-child(2) { animation-delay: 0.1s; } 71 | .cards > a:nth-child(3) { animation-delay: 0.15s; } 72 | .cards > a:nth-child(4) { animation-delay: 0.2s; } 73 | .cards > a:nth-child(5) { animation-delay: 0.25s; } 74 | .cards > a:nth-child(6) { animation-delay: 0.3s; } 75 | .cards > a:nth-child(7) { animation-delay: 0.35s; } 76 | .cards > a:nth-child(8) { animation-delay: 0.4s; } 77 | .cards > a:nth-child(9) { animation-delay: 0.45s; } 78 | .cards > a:nth-child(10) { animation-delay: 0.5s; } 79 | 80 | /* For cards beyond 10, use a base delay */ 81 | .cards > a:nth-child(n+11) { animation-delay: 0.5s; } 82 | 83 | /* Enhanced card hover effect */ 84 | .cards > a { 85 | transition: transform 0.3s ease, box-shadow 0.3s ease; 86 | } 87 | 88 | .cards > a:hover { 89 | transform: translateY(-4px); 90 | } 91 | 92 | .cards > a:hover .card { 93 | box-shadow: 0 8px 24px rgba(107, 226, 255, 0.15); 94 | border-color: rgba(107, 226, 255, 0.3); 95 | } 96 | 97 | /* Smooth transitions for card elements */ 98 | .card { 99 | transition: all 0.3s ease; 100 | } 101 | 102 | .card img { 103 | transition: transform 0.3s ease; 104 | } 105 | 106 | .cards > a:hover .card img { 107 | transform: scale(1.05); 108 | } 109 | 110 | /* If you have a NEW badge, add pulse animation */ 111 | .new-badge { 112 | animation: pulse 2s ease-in-out infinite; 113 | } 114 | 115 | /* Smooth color transitions */ 116 | .card .name, 117 | .card .username, 118 | .card .meta { 119 | transition: color 0.2s ease; 120 | } 121 | 122 | /* Loading animation for the initial state */ 123 | .loading { 124 | animation: pulse 1.5s ease-in-out infinite; 125 | } 126 | ``` 127 | 128 | ### 2. Alternative: More Subtle Approach 129 | 130 | If the stagger effect seems too much, use this simpler version: 131 | 132 | ```css 133 | /* Simple fade-in for all cards */ 134 | .cards > a { 135 | animation: fadeInUp 0.6s ease forwards; 136 | opacity: 0; 137 | } 138 | 139 | /* Small delay so they don't all pop at once */ 140 | .cards > a { 141 | animation-delay: calc(var(--card-index) * 0.03s); 142 | } 143 | ``` 144 | 145 | Then in JavaScript (assets/app.js), add this when creating cards: 146 | 147 | ```javascript 148 | // When creating the element (around line 58) 149 | const a = document.createElement("a"); 150 | a.style.setProperty('--card-index', people.indexOf(p)); 151 | ``` 152 | 153 | ### 3. Add a "Scale on Load" Effect 154 | 155 | For an alternative effect, cards can scale up: 156 | 157 | ```css 158 | @keyframes scaleIn { 159 | from { 160 | opacity: 0; 161 | transform: scale(0.9); 162 | } 163 | to { 164 | opacity: 1; 165 | transform: scale(1); 166 | } 167 | } 168 | 169 | .cards > a { 170 | animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; 171 | animation-delay: calc(var(--card-index) * 0.05s); 172 | } 173 | ``` 174 | 175 | ### 4. Enhance Avatar Animation 176 | 177 | Make avatars have a subtle rotate effect on hover: 178 | 179 | ```css 180 | .card img { 181 | transition: transform 0.3s ease, filter 0.3s ease; 182 | } 183 | 184 | .cards > a:hover .card img { 185 | transform: scale(1.05) rotate(2deg); 186 | filter: brightness(1.1); 187 | } 188 | ``` 189 | 190 | ## Steps to Implement 191 | 192 | 1. Fork this repository 193 | 2. Create a new branch: `git checkout -b feature/card-animations` 194 | 3. Add the animation CSS to `assets/styles.css` 195 | 4. Choose which animation approach you prefer (stagger, simple fade, or scale) 196 | 5. Optionally add the JavaScript for dynamic delays 197 | 6. Test locally: 198 | - Open `index.html` in your browser 199 | - Verify cards animate in smoothly 200 | - Test hover effects 201 | - Check that animations aren't too distracting 202 | 7. Test with different numbers of contributors 203 | 8. Commit your changes: `git commit -m "Add animation effects to contributor cards"` 204 | 9. Push to your fork: `git push origin feature/card-animations` 205 | 10. Open a Pull Request 206 | 207 | ## Testing Checklist 208 | 209 | - [ ] Cards fade/animate in smoothly when page loads 210 | - [ ] Hover effects work and are smooth 211 | - [ ] Animations don't cause layout shifts 212 | - [ ] Performance is good even with many cards 213 | - [ ] Animations work on mobile devices 214 | - [ ] No console errors 215 | - [ ] Reduced motion preference is respected (bonus!) 216 | 217 | ## Accessibility Tip (Bonus!) 218 | 219 | Respect users who prefer reduced motion: 220 | 221 | ```css 222 | @media (prefers-reduced-motion: reduce) { 223 | .cards > a { 224 | animation: none; 225 | opacity: 1; 226 | } 227 | 228 | .cards > a:hover { 229 | transform: none; 230 | } 231 | 232 | .card img, 233 | .card, 234 | .new-badge { 235 | animation: none; 236 | transition: none; 237 | } 238 | } 239 | ``` 240 | 241 | ## Performance Tip 242 | 243 | For many contributors, you might want to limit the stagger effect: 244 | 245 | ```css 246 | /* Only stagger the first 20 cards */ 247 | .cards > a:nth-child(-n+20) { 248 | animation-delay: calc(0.05s * var(--card-index)); 249 | } 250 | 251 | .cards > a:nth-child(n+21) { 252 | animation-delay: 0.5s; /* All others appear together after a short delay */ 253 | } 254 | ``` 255 | 256 | ## Design Tips 257 | 258 | - Keep animations subtle - they should enhance, not distract 259 | - Use `ease` or `cubic-bezier` timing functions for natural motion 260 | - Test on slower devices to ensure smooth performance 261 | - Consider adding a "fade-in" for the entire grid container first 262 | 263 | --- 264 | **Good first issue** - Perfect for learning CSS animations and transitions! ✨ 265 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | FirstLeaf – Beginner-Friendly Pull Request Playground 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 22 | 23 | 27 | 28 | 29 |
30 |
31 |
32 |
33 |

FirstLeaf

34 |

35 | Make your first pull request — add your name, get featured here. 36 |

37 |
38 | 73 |
74 |
75 | 76 |
77 |
81 |
82 |
83 |

Contributors

84 | 90 |
91 | 92 |
93 |
94 | 100 |
101 |
102 | 103 | 109 |
110 |
111 | 112 |
113 |
114 | 115 |
116 | 119 | 122 | 125 | 128 | 131 | 134 | 137 |
138 |
139 |
140 |
141 |
142 | 143 |
144 |
145 |
146 | 147 |
148 | 149 |
Loading contributors…
150 | 153 |
154 | 155 |
156 |
157 |

How to Contribute

158 |

Follow these simple steps to get featured!

159 |
160 |
    161 |
  1. Fork the repository to your own GitHub account.
    2. 162 |
  2. Create a new branch (e.g., add/your-name).
    3. 163 |
  3. 164 | Edit data/contributors.ndjson and add a new line. 165 |
    4. 166 |
  4. Commit your change and open a Pull Request.
    5. 167 |
  5. Once merged, your profile will appear here automatically.
    6. 168 |
169 |

Full instructions are available in the README.

170 |
171 |
172 | 173 |
174 |
175 |

Built with 💙 for first‑time contributors by Jadu

176 |
177 |
178 | 179 | 180 | 200 | 201 | 202 | -------------------------------------------------------------------------------- /data/contributors.ndjson: -------------------------------------------------------------------------------- 1 | {"name":"Rohit","username":"Rohit-554","github":"https://github.com/Rohit-554","message":"Excited to make my first PR!","badges":["top","core"],"addedAt":"2025-09-30T00:00:00.000Z"} 2 | {"name":"Jadu","username":"Jadu-554","github":"https://github.com/Rohit-554","message":"Hey there i am first time contributor!","badges":["first","core"],"addedAt":"2025-09-30T00:00:00.000Z"} 3 | {"name":"Simon","username":"Simonmatharesh","github":"https://github.com/Simonmatharesh","message":"This is for my Hacktoberfest PR","badges":["first","core"],"addedAt":"2025-09-30T00:00:00.000Z"} 4 | {"name":"Anshu","username":"anshukaushik4700","github":"https://github.com/anshukaushik4700/","message":"my first contribution in hactoberfest","badges":["early","core"],"addedAt":"2025-09-30T00:00:00.000Z"} 5 | {"name":"Shwetank Maurya","username":"Shwetank-Maurya","github":"https://github.com/Shwetank-Maurya/","message":"Magic is here, Learning for the hackoctober Fest"} 6 | {"name":"Aditya","username":"AdyHACK","github":"https://github.com/AdyHACK","message":"This is my first contribution in Hacktoberfest 2025","addedAt":"2025-09-30T00:00:00.000Z"} 7 | {"name":"Anup","username":"anup2702","github":"https://github.com/anup2702","message":"This is for my Hacktoberfest PR","badges":["helper","core"],"addedAt":"2025-09-30T00:00:00.000Z"} 8 | {"name":"Jatin","username":"jatinagg1","github":"https://github.com/jatinagg1","message":"This is my first Hacktoberfest PR","badges":["early","core"],"addedAt":"2025-10-01T00:00:00.000Z"} 9 | {"name":"Sarthak","username":"sarthakjalan05","github":"https://github.com/sarthakjalan05","message":"This is my first Hacktoberfest PR","addedAt":"2025-10-01T00:00:00.000Z"} 10 | {"name":"Mainur","username":"MRIEnan","github":"https://github.com/MRIEnan","message":"Let's contribute together!","badges":["helper","core"],"addedAt":"2025-10-01T00:00:00.000Z"} 11 | {"name":"Ritwik","username":"ritwikt17","github":"https://github.com/ritwik1709","message":"Getting started with my first contribution in open source","badges":["early","core"],"addedAt":"2025-10-02T00:00:00.000Z"} 12 | {"name":"Dheeraj Saini","username":"Steady3099","github":"https://github.com/Steady3099","message":"My first PR!!...Excited for the open source world.","badges":["first","core"],"addedAt":"2025-10-03T00:00:00.000Z"} 13 | {"name":"Kishan Garhwal","username":"Kishan8548","github":"https://github.com/Kishan8548","message":"This is for hacktoberfest","badges":["helper","core"],"addedAt":"2025-10-04T12:00:00.000Z"} 14 | {"name":"Divyansh Raj Soni","username":"DivyanshRajSoni","github":"https://github.com/DivyanshRajSoni","message":"Excited to make my first PR!","badges":["first","core"],"addedAt":"2025-10-05T00:00:00.000Z"} 15 | {"name":"Ada Lovelace","username":"ada","github":"https://github.com/ada","message":"Hello, world!","badges":["helper","core"],"addedAt":"2025-01-01T12:00:00.000Z"} 16 | {"name":"Grace Hopper","username":"grace","badges":[{"type":"custom","text":"Bug Hunter","color":"#ff6b6b"}],"message":"Found 10 bugs!"} 17 | {"name":"Atharv Nikam","username":"atharvnikam38","github":"https://github.com/atharvnikam38","message":"Excited to contribute to open source through Hacktoberfest!","addedAt":"2025-10-05T00:00:00.000Z"} 18 | {"name":"Nidhish Zala","username":"ZalaNidhish","github":"https://github.com/ZalaNidhish","message":"Finding Ways To Contribute to get hacktober 2k25 t-shirt 😋","addedAt":"2025-10-05T00:00:00.000Z"} 19 | {"name":"Sanskar Agrawal","username":"Sanskar-Agrawal01","github":"https://github.com/Sanskar-Agrawal01","message":"Hacktoberfest 2025 first PR","addedAt":"2025-10-05T00:00:00.000Z"} 20 | {"name":"evar-7","username":"evar-7","github":"https://github.com/evar-7","message":"Excited to start my open source journey!","addedAt":"2025-10-10T00:00:00.000Z"} 21 | {"name":"Sahil Shingate","username":"sahilshingate01","github":"https://github.com/sahilshingate01","message":"Contributing to make open source more welcoming for beginners!","badges":["helper","core"],"addedAt":"2025-10-14T00:00:00.000Z"} 22 | {"name":"Priyansh Sinha","username":"priyansh-sinha2109","github":"https://github.com/priyansh-sinha2109","message":"Excited to make my first PR!","badges":["top","core"],"addedAt":"2025-10-11T00:00:00.000Z"} 23 | {"name":"Gaurav Tiwari","username":"Gaurav-devv","github":"https://github.com/Gaurav-devv","message":"Magic is here,Learning from the HacktoberFest","badges":["top","core"],"addedAt":"2025-09-30T00:00:00.000Z"} 24 | {"name":"Avinash Mishra","username":"avimishraa","github":"https://github.com/avimishraa","message":"Finding Ways To Contribute to get hacktober 2k25 t-shirt 😋 and become a supercontributer","addedAt":"2025-10-11T00:00:00.000Z"} 25 | {"name":"Krushnali Mungekar","username":"KrushnaliMungekar57","github":"https://github.com/KrushnaliMungekar57","message":"This is my first experience in Hacktoberfest.I am really excited to contribute in open source . ","addedAt":"2025-10-05T00:00:00.000Z"} 26 | {"name":"Lalit Rathod","username":"CodeCrafter2030","github":"https://github.com/CodeCrafter2030","message":"Hacktoberfest 2025 first PR","addedAt":"2025-10-05T00:00:00.000Z"} 27 | {"name":"Suthakar Anburaj","username":"suthakaranburaj","github":"https://github.com/suthakaranburaj","message":"Code. Commit. Conquer.","addedAt":"2025-10-10T00:00:00.000Z"} 28 | {"name":"Chakradhar","username":"Chakri-chris","github":"https://github.com/chakri-chris","message":"Here we go again","addedAt":"2025-10-12T00:00:00.000Z"} 29 | {"name":"Chinmay L","username":"stom-breaker-07","github":"https://github.com/stom-breaker-07","message":"To the contributors: we raise our swords⚔️ in your honor!","badges":["first","core"],"addedAt":"2025-10-12T00:00:00.000Z"} 30 | {"name":"Abhijeet Patil","username":"abhijeetpatilrm","github":"https://github.com/abhijeetpatilrm","message":"Excited to start my open source journey with FirstLeaf! 🚀","addedAt":"2025-10-12T00:00:00.000Z"} 31 | {"name":"Swastik Pratik Singh","username":"swastikpratik-bit","github":"https://github.com/swastikpratik-bit","message":"Ready to contribute and learn!","addedAt":"2025-01-15T12:00:00.000Z"} 32 | {"name":"Prasadsing Solanki","username":"Prasadsing25","github":"https://github.com/Prasadsing25","message":"Feeling Energetic to contribute and learn","addedAt":"2025-10-13T12:00:00.000Z"} 33 | {"name":"Suraj Patil","username":"SurajPatil1404","github":"https://github.com/SurajPatil1404","message":"Passionate about open source, excited to join the FirstLeaf community! 🌱","addedAt":"2025-10-14T12:00:00.000Z"} 34 | {"name":"Azmol Wasim Hussain.","username":"azmolwasimhussain-ops","github":"https://github.com/azmolwasimhussain-ops","message":"Passionate about open source and also excited for the hactoberfest!","addedAt":"2025-09-30T00:00:00.000Z"} 35 | {"name":"Megh Deb","username":"Megh2005","github":"https://github.com/Megh2005","message":"Hello, world!","addedAt":"2025-10-17T12:00:00.000Z"} 36 | {"name":"Munazir Ansari","username":"Munazir151","github":"https://github.com/Munazir151","message":"Excited to contribute!"} 37 | {"name":"Mohammadali Shaikh","username":"2005Mohammadali","github":"https://github.com/2005Mohammadali","message":"First step into open source! Excited to contribute and learn.", "badges":[{"type":"custom","text":"Web Dev","color":"#6ba6ffff"}]} 38 | {"name":"Varad Raj Agrawal","username":"Varadraj75","github":"https://github.com/Varadraj75","message":"Excited to contribute!"} 39 | {"name":"Nikita Bhansali","username":"nikitaaaa123","github":"https://github.com/nikitaaaa123","message":"Excited to contribute!"} 40 | {"name":"Shreya","username":"ShreyaSingh2606","github":"https://github.com/ShreyaSingh2606","message":"Excited to make my first PR!","badges":["top","core"],"addedAt":"2025-09-30T00:00:00.000Z"} 41 | {"name":"Jiya","username":"JiyaSrivas","github":"https://github.com/JiyaSrivas","message":"Excited to contribute.","badges":["top","core"],"addedAt":"2025-09-30T00:00:00.000Z"} 42 | {"name":"Raj Kumar","username":"rajkumar-131","github":"https://github.com/rajkumar-131","message":"yeah! am ready"} 43 | {"name":"Nikunj Shah","username":"Nikunj2104","github":"https://github.com/Nikunj2104","message":"Hactoberfest 2025"} 44 | {"name":"Mahek","username":"MAHEK-ops","github":"https://github.com/MAHEK-ops","message":"hey there! excited to start my open source journey with FirstLeaf!"} 45 | {"name":"Darshan Ajudiya","username":"DarshanAjudiya7","github":"https://github.com/DarshanAjudiya7","message":"Debugging limits, compiling passion — ready for open source!","badges":["top","core"],"addedAt":"2025-10-29T00:00:00.000Z"} -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/23-add-appreciation-system.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🎁 Add contributor appreciation system 3 | about: Allow users to send thanks/appreciation to contributors with emoji reactions 4 | title: "Add contributor appreciation/thanks system" 5 | labels: ["good first issue", "enhancement", "feature", "community"] 6 | assignees: '' 7 | --- 8 | 9 | ## Description 10 | Add a simple appreciation system that allows visitors to send thanks or appreciation to contributors using emoji reactions. This creates a positive, encouraging atmosphere and lets contributors know their work is valued. 11 | 12 | ## Proposed Feature 13 | Add "appreciation" buttons below each contributor card showing emoji reactions (👏, ❤️, 🎉, 🙏). Clicking sends appreciation and updates the count displayed on the card. 14 | 15 | **Good first issue** - Great for learning about local storage, user interactions, and community features! 🎁 16 | 17 | ## Current Behavior 18 | - No way to show appreciation to contributors 19 | - Passive viewing only 20 | - Contributors don't get feedback 21 | - No community interaction features 22 | 23 | ## Expected Behavior 24 | - Small appreciation bar below each card 25 | - Click emoji to send appreciation 26 | - Count displayed next to each emoji 27 | - Appreciation stored in localStorage 28 | - Visual feedback when clicking (animation) 29 | - Can only send each reaction once per contributor 30 | - Total appreciation count shown 31 | 32 | ## Requirements 33 | 34 | ### Emoji Reactions 35 | Support these appreciation types: 36 | - 👏 **Clap** - General appreciation 37 | - ❤️ **Heart** - Love it 38 | - 🎉 **Party** - Congratulations 39 | - 🙏 **Thanks** - Thank you 40 | - ⭐ **Star** - Amazing 41 | 42 | ### Visual Design 43 | - Small emoji buttons below card 44 | - Count shown next to each emoji 45 | - Clicked emojis highlighted/filled 46 | - Unclicked emojis subtle/outlined 47 | - Total appreciation count (sum of all) 48 | 49 | ### Functionality 50 | - Click emoji to send appreciation 51 | - Can't send same reaction twice 52 | - Count increases when clicked 53 | - Stored in localStorage (persists across visits) 54 | - Visual animation when clicked (emoji grows/bounces) 55 | - Tooltip shows: "Send appreciation" 56 | 57 | ### Data Storage 58 | Use localStorage to store: 59 | ```javascript 60 | { 61 | "ada": { 62 | "clap": 5, 63 | "heart": 3, 64 | "party": 2, 65 | "thanks": 7, 66 | "star": 4 67 | }, 68 | "grace": { 69 | "clap": 2, 70 | "heart": 1 71 | } 72 | } 73 | ``` 74 | 75 | Note: Counts are local to each browser, not synced globally (keeping it simple!) 76 | 77 | ## Testing Checklist 78 | - [ ] Appreciation bar appears below cards 79 | - [ ] Clicking emoji increases count 80 | - [ ] Can't click same emoji twice 81 | - [ ] Counts persist after page reload 82 | - [ ] Animation plays on click 83 | - [ ] Tooltip shows on hover 84 | - [ ] Total count displays correctly 85 | - [ ] Mobile friendly 86 | - [ ] Accessible (keyboard support) 87 | - [ ] Works on all browsers 88 | - [ ] localStorage limits handled gracefully 89 | 90 | ## Expected Final Output 91 | 92 | ### When implemented: 93 | 1. User views contributor cards 94 | 2. Sees appreciation bar below each card: 95 | ``` 96 | 👏 5 ❤️ 3 🎉 2 🙏 7 ⭐ 4 97 | ``` 98 | 3. User clicks ❤️ on Ada's card 99 | 4. Heart emoji animates (grows/bounces) 100 | 5. Count increases: ❤️ 4 101 | 6. Heart becomes filled/highlighted (user already sent it) 102 | 7. User can't click heart again for Ada 103 | 8. User can click other emojis 104 | 9. User refreshes page 105 | 10. Counts still show (saved in localStorage) 106 | 107 | ### Example Appreciation Bar: 108 | ``` 109 | ┌────────────────────────────────┐ 110 | │ Ada Lovelace │ 111 | │ @ada │ 112 | │ "Hello, world!" │ 113 | │ 🥇 First ⭐ Core Team │ 114 | ├────────────────────────────────┤ 115 | │ 👏 5 ❤️ 3 🎉 2 🙏 7 ⭐ 4 │ ← appreciation bar 116 | │ Total: 21 appreciations │ 117 | └────────────────────────────────┘ 118 | ``` 119 | 120 | ### Visual States: 121 | 122 | **Not sent (can click):** 123 | ``` 124 | 👏 5 ← outlined, subtle 125 | ``` 126 | 127 | **Already sent (can't click):** 128 | ``` 129 | 👏 6 ← filled, highlighted, bold 130 | ``` 131 | 132 | **Clicking animation:** 133 | ``` 134 | 👏 → 👏 → 👏 → 👏 135 | (scale up and bounce) 136 | ``` 137 | 138 | ## Design Tips 139 | - Keep emojis small but tappable (min 32px) 140 | - Add spacing between emoji buttons 141 | - Use subtle background for unclicked 142 | - Brighter background for clicked 143 | - Animate on click (scale + bounce) 144 | - Show tooltip on hover 145 | - Display total count prominently 146 | 147 | ## Benefits 148 | - Positive community atmosphere 149 | - Contributors feel appreciated 150 | - Interactive and engaging 151 | - Low barrier to participation 152 | - Fun and friendly 153 | - Encourages gratitude 154 | 155 | ## Implementation Hints 156 | 157 | ### HTML Structure: 158 | ```html 159 |
160 | 164 | 165 |
Total: 21
166 |
167 | ``` 168 | 169 | ### CSS: 170 | ```css 171 | .appreciation-bar { 172 | display: flex; 173 | gap: 0.5rem; 174 | padding: 0.75rem; 175 | border-top: 1px solid rgba(255,255,255,0.1); 176 | align-items: center; 177 | } 178 | 179 | .appreciation-btn { 180 | display: flex; 181 | align-items: center; 182 | gap: 0.25rem; 183 | padding: 0.25rem 0.5rem; 184 | background: rgba(255,255,255,0.05); 185 | border: 1px solid rgba(255,255,255,0.1); 186 | border-radius: 20px; 187 | cursor: pointer; 188 | transition: all 0.2s ease; 189 | } 190 | 191 | .appreciation-btn:hover { 192 | background: rgba(255,255,255,0.1); 193 | transform: scale(1.05); 194 | } 195 | 196 | .appreciation-btn.sent { 197 | background: rgba(67,233,123,0.2); 198 | border-color: rgba(67,233,123,0.5); 199 | } 200 | 201 | @keyframes bounce { 202 | 0%, 100% { transform: scale(1); } 203 | 50% { transform: scale(1.3); } 204 | } 205 | 206 | .appreciation-btn.animating .emoji { 207 | animation: bounce 0.4s ease; 208 | } 209 | ``` 210 | 211 | ### JavaScript: 212 | ```javascript 213 | // Load appreciation data from localStorage 214 | function loadAppreciation() { 215 | const data = localStorage.getItem('appreciation'); 216 | return data ? JSON.parse(data) : {}; 217 | } 218 | 219 | // Save appreciation data 220 | function saveAppreciation(data) { 221 | localStorage.setItem('appreciation', JSON.stringify(data)); 222 | } 223 | 224 | // Handle click 225 | appreciationBtn.addEventListener('click', (e) => { 226 | const username = btn.dataset.username; 227 | const type = btn.dataset.type; 228 | 229 | // Check if already sent 230 | const data = loadAppreciation(); 231 | const userSent = data[username]?.sent || []; 232 | 233 | if (userSent.includes(type)) { 234 | // Already sent, can't send again 235 | return; 236 | } 237 | 238 | // Send appreciation 239 | if (!data[username]) data[username] = { sent: [], counts: {} }; 240 | data[username].sent.push(type); 241 | data[username].counts[type] = (data[username].counts[type] || 0) + 1; 242 | 243 | saveAppreciation(data); 244 | 245 | // Update UI 246 | btn.classList.add('sent', 'animating'); 247 | countSpan.textContent = data[username].counts[type]; 248 | 249 | // Remove animation class after animation ends 250 | setTimeout(() => btn.classList.remove('animating'), 400); 251 | }); 252 | ``` 253 | 254 | ## Additional Features (Optional) 255 | - Show "Most appreciated contributor" badge 256 | - Leaderboard of most appreciated 257 | - Weekly appreciation reset 258 | - Custom emoji reactions 259 | - Thank you message when sending appreciation 260 | - Share appreciation count on social media 261 | - Confetti animation for milestones (100 appreciations) 262 | 263 | ## Privacy & Ethics 264 | - Keep data local (localStorage only) 265 | - No tracking or analytics 266 | - Can't see who sent what 267 | - Pure positive reinforcement 268 | - Optional feature (can be hidden) 269 | 270 | ## Alternative Approaches 271 | - **Global counts**: Use a backend/database (more complex) 272 | - **GitHub reactions**: Link to GitHub issues/PRs 273 | - **Comments**: Allow text messages (needs moderation) 274 | - **Badges**: Award badges based on appreciation 275 | 276 | --- 277 | **Good first issue** - Perfect for learning localStorage and positive community features! 💚 278 | -------------------------------------------------------------------------------- /.github/IMPLEMENTATION_GUIDE.md: -------------------------------------------------------------------------------- 1 | # 🎉 FirstLeaf Project Expansion - Implementation Complete 2 | 3 | ## What Was Done 4 | 5 | This PR successfully expands the FirstLeaf project by creating **8 new good first issue templates** that maintain the beginner-friendly theme while offering opportunities for contributors at various skill levels. 6 | 7 | ## Files Created/Modified 8 | 9 | ### New Issue Templates (8 files) 10 | - `.github/ISSUE_TEMPLATE/06-add-contributor-statistics.md` 11 | - `.github/ISSUE_TEMPLATE/07-add-social-media-links.md` 12 | - `.github/ISSUE_TEMPLATE/08-add-animation-effects.md` 13 | - `.github/ISSUE_TEMPLATE/09-add-sorting-options.md` 14 | - `.github/ISSUE_TEMPLATE/10-improve-mobile-responsiveness.md` 15 | - `.github/ISSUE_TEMPLATE/11-add-contributor-badges.md` 16 | - `.github/ISSUE_TEMPLATE/12-add-scroll-to-top.md` 17 | - `.github/ISSUE_TEMPLATE/13-add-color-themes.md` 18 | 19 | ### Documentation Files (3 files) 20 | - `.github/GOOD_FIRST_ISSUES.md` (updated) 21 | - `.github/NEW_ISSUES_SUMMARY.md` (new) 22 | - `.github/QUICK_REFERENCE.md` (new) 23 | 24 | ## Quick Overview of New Features 25 | 26 | | Feature | Description | Difficulty | 27 | |---------|-------------|-----------| 28 | | **Contributor Statistics** | Show total count and highlight newest contributor | ⭐⭐⭐ | 29 | | **Social Media Links** | Add Twitter, LinkedIn, website links to cards | ⭐⭐⭐ | 30 | | **Animation Effects** | Smooth fade-in and hover animations | ⭐⭐⭐ | 31 | | **Sorting Options** | Sort by newest/oldest/name alphabetically | ⭐⭐⭐⭐ | 32 | | **Mobile Responsiveness** | Better mobile layouts and touch interactions | ⭐⭐⭐ | 33 | | **Contributor Badges** | Achievement badges (first, core, top, etc.) | ⭐⭐⭐⭐ | 34 | | **Scroll to Top** | Floating button for quick navigation | ⭐⭐ | 35 | | **Color Themes** | Alternative color palettes (Ocean, Forest, etc.) | ⭐⭐⭐ | 36 | 37 | ## How to Use These Templates 38 | 39 | ### Option 1: Create All Issues at Once 40 | 41 | 1. Go to your repository's **Issues** tab 42 | 2. Click **New Issue** 43 | 3. You'll see the templates numbered 06-13 44 | 4. Create one issue for each template you want to offer to contributors 45 | 5. Label them with "good first issue" (should be automatic from template) 46 | 47 | ### Option 2: Create Issues Gradually 48 | 49 | Create 1-2 issues per week to manage incoming PRs more easily. 50 | 51 | **Suggested order:** 52 | 1. Start with #12 (Scroll to Top) - Easy win 53 | 2. Then #08 (Animations) - Visual polish 54 | 3. Then #10 (Mobile) - Important for accessibility 55 | 4. Then others based on community interest 56 | 57 | ### Option 3: Let Contributors Choose 58 | 59 | Create all issues and let contributors pick what interests them. Each issue is independent! 60 | 61 | ## What Makes These Issues Special 62 | 63 | ### 1. Complete Implementation Guides 64 | Each issue includes: 65 | - ✅ Exact code to add 66 | - ✅ Exact file locations 67 | - ✅ Multiple implementation approaches 68 | - ✅ Complete CSS/HTML/JavaScript examples 69 | 70 | ### 2. Educational Value 71 | Contributors learn: 72 | - Modern JavaScript (ES6+) 73 | - CSS animations and transitions 74 | - Responsive design principles 75 | - Accessibility best practices 76 | - localStorage and browser APIs 77 | - DOM manipulation patterns 78 | 79 | ### 3. Beginner-Friendly 80 | - Step-by-step instructions 81 | - Clear testing checklists 82 | - Design tips included 83 | - No prior experience assumed 84 | - Code examples that work 85 | 86 | ### 4. Project-Consistent 87 | All features: 88 | - Respect the dark theme aesthetic 89 | - Maintain accessibility standards 90 | - Follow existing code patterns 91 | - Are optional enhancements 92 | - Work independently 93 | 94 | ## Benefits for Your Project 95 | 96 | ### Attract More Contributors 97 | - 8 new opportunities for contributions 98 | - Range of difficulty levels (⭐⭐ to ⭐⭐⭐⭐) 99 | - Something for everyone (HTML, CSS, JS focused options) 100 | 101 | ### Improve the Project 102 | - Enhanced user experience 103 | - Better mobile support 104 | - More personalization options 105 | - Professional polish 106 | 107 | ### Build Community 108 | - Contributors can choose what interests them 109 | - Multiple people can work on different features simultaneously 110 | - Clear expectations reduce back-and-forth 111 | 112 | ## Expected Outcomes 113 | 114 | If all 8 features are implemented: 115 | - **~920 lines of new code** added 116 | - **Much better mobile experience** 117 | - **More engaging visual design** 118 | - **Enhanced functionality** (sorting, search, stats) 119 | - **Personalization** (themes, badges) 120 | - **Better UX** (animations, scroll to top) 121 | 122 | ## Maintenance Tips 123 | 124 | ### Before Creating Issues 125 | 1. Review each template to ensure it matches your vision 126 | 2. Customize examples if needed 127 | 3. Consider which features are most important to you 128 | 129 | ### After Creating Issues 130 | 1. Monitor for questions in issue comments 131 | 2. Be ready to help first-time contributors 132 | 3. Consider implementing 1-2 yourself as examples 133 | 4. Update templates based on feedback 134 | 135 | ### Code Review Tips 136 | When reviewing PRs for these issues: 137 | - Check the testing checklist in the issue was completed 138 | - Verify accessibility (keyboard navigation, contrast) 139 | - Test on mobile if applicable 140 | - Ensure code matches your style preferences 141 | - Appreciate the effort - encourage contributors! 142 | 143 | ## Integration with Existing Project 144 | 145 | All new features: 146 | - ✅ Work with existing search functionality 147 | - ✅ Don't break current features 148 | - ✅ Are optional (project works without them) 149 | - ✅ Use existing CSS variables and patterns 150 | - ✅ Follow current HTML structure 151 | - ✅ Extend (don't replace) existing functionality 152 | 153 | ## Documentation Structure 154 | 155 | ``` 156 | .github/ 157 | ├── ISSUE_TEMPLATE/ 158 | │ ├── 01-fix-documentation-typo.md 159 | │ ├── 02-remove-legacy-code.md 160 | │ ├── 03-fix-code-indentation.md 161 | │ ├── 04-add-search-feature.md (completed) 162 | │ ├── 05-add-dark-light-mode-toggle.md 163 | │ ├── 06-add-contributor-statistics.md ⭐ NEW 164 | │ ├── 07-add-social-media-links.md ⭐ NEW 165 | │ ├── 08-add-animation-effects.md ⭐ NEW 166 | │ ├── 09-add-sorting-options.md ⭐ NEW 167 | │ ├── 10-improve-mobile-responsiveness.md ⭐ NEW 168 | │ ├── 11-add-contributor-badges.md ⭐ NEW 169 | │ ├── 12-add-scroll-to-top.md ⭐ NEW 170 | │ └── 13-add-color-themes.md ⭐ NEW 171 | ├── GOOD_FIRST_ISSUES.md (Updated with all 13 issues) 172 | ├── NEW_ISSUES_SUMMARY.md (Detailed overview of issues 06-13) 173 | └── QUICK_REFERENCE.md (Quick lookup table and learning paths) 174 | ``` 175 | 176 | ## Recommended Reading Order 177 | 178 | 1. **QUICK_REFERENCE.md** - Get a quick overview 179 | 2. **NEW_ISSUES_SUMMARY.md** - Understand what each issue does 180 | 3. **GOOD_FIRST_ISSUES.md** - See all issues in context 181 | 4. **Individual templates** - Review specific implementation details 182 | 183 | ## Next Steps 184 | 185 | ### Immediate (Now) 186 | - [x] Review the templates 187 | - [ ] Decide which issues to create first 188 | - [ ] Create 2-3 issues to start 189 | 190 | ### Short Term (This Week) 191 | - [ ] Monitor initial contributions 192 | - [ ] Provide feedback and guidance 193 | - [ ] Merge first PRs 194 | 195 | ### Long Term (This Month) 196 | - [ ] Create remaining issues 197 | - [ ] Consider implementing 1-2 features yourself 198 | - [ ] Gather feedback from contributors 199 | - [ ] Update templates if needed 200 | 201 | ## Questions? 202 | 203 | If you have questions about any of the templates: 204 | 1. Check the **NEW_ISSUES_SUMMARY.md** for detailed explanations 205 | 2. Look at the **QUICK_REFERENCE.md** for quick answers 206 | 3. Review the individual template for complete code examples 207 | 4. The templates are meant to be customized - adjust as needed! 208 | 209 | ## Contributing to Templates 210 | 211 | If you want to improve the templates: 212 | - Fix typos or unclear instructions 213 | - Add better examples 214 | - Update based on contributor feedback 215 | - Add new templates for additional features 216 | 217 | ## Success Metrics 218 | 219 | Track these to measure success: 220 | - Number of contributors attracted by new issues 221 | - Time to first PR for each issue 222 | - Contributor satisfaction (comments, stars) 223 | - Code quality of contributions 224 | - Number of features successfully merged 225 | 226 | ## Thank You! 227 | 228 | These templates are designed to help your project grow while maintaining quality and welcoming new contributors. Good luck! 🎉 229 | 230 | --- 231 | 232 | **Created**: January 2025 233 | **Templates Added**: 8 new issues (06-13) 234 | **Total Available**: 13 issue templates 235 | **Ready to Use**: ✅ Yes 236 | **Documentation**: Complete 237 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/10-improve-mobile-responsiveness.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 📱 Improve mobile responsiveness 3 | about: Enhance the mobile user experience with better layouts and touch interactions 4 | title: "Improve mobile responsiveness and touch experience" 5 | labels: ["good first issue", "enhancement", "ui/ux", "mobile"] 6 | assignees: '' 7 | --- 8 | 9 | ## Description 10 | Improve the mobile experience by optimizing card layouts, touch interactions, and ensuring all features work smoothly on small screens. 11 | 12 | ## Current Behavior 13 | - Basic responsive design exists 14 | - Cards display in a grid that adapts to screen size 15 | - Some elements could be better optimized for mobile 16 | 17 | ## Expected Behavior 18 | - Cards are properly sized for mobile screens 19 | - Touch interactions feel natural 20 | - All controls are easy to use on small screens 21 | - Text is readable without zooming 22 | - Better use of screen space on mobile 23 | 24 | ## Implementation Details 25 | 26 | ### 1. CSS Changes (assets/styles.css) 27 | 28 | #### Improve Card Grid for Mobile 29 | 30 | ```css 31 | /* Current cards grid - enhance for mobile */ 32 | .cards { 33 | display: grid; 34 | gap: 1.5rem; 35 | grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 36 | } 37 | 38 | /* Better mobile breakpoints */ 39 | @media (max-width: 640px) { 40 | .cards { 41 | grid-template-columns: 1fr; 42 | gap: 1rem; 43 | padding: 0 0.5rem; 44 | } 45 | } 46 | 47 | @media (min-width: 641px) and (max-width: 900px) { 48 | .cards { 49 | grid-template-columns: repeat(2, 1fr); 50 | } 51 | } 52 | 53 | @media (min-width: 901px) { 54 | .cards { 55 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 56 | } 57 | } 58 | ``` 59 | 60 | #### Improve Header for Mobile 61 | 62 | ```css 63 | /* Better mobile header layout */ 64 | @media (max-width: 720px) { 65 | .site-header h1 { 66 | font-size: 2rem; 67 | } 68 | 69 | .site-header .tagline { 70 | font-size: 0.95rem; 71 | } 72 | 73 | .actions { 74 | flex-direction: column; 75 | width: 100%; 76 | } 77 | 78 | .actions .btn { 79 | width: 100%; 80 | text-align: center; 81 | } 82 | } 83 | ``` 84 | 85 | #### Optimize Card Size for Mobile 86 | 87 | ```css 88 | @media (max-width: 640px) { 89 | .card { 90 | padding: 1rem; 91 | } 92 | 93 | .card .top { 94 | flex-direction: row; /* Keep horizontal layout */ 95 | } 96 | 97 | .card img { 98 | width: 60px; 99 | height: 60px; 100 | } 101 | 102 | .card .name { 103 | font-size: 1rem; 104 | } 105 | 106 | .card .username { 107 | font-size: 0.85rem; 108 | } 109 | 110 | .card .meta { 111 | font-size: 0.875rem; 112 | } 113 | } 114 | ``` 115 | 116 | #### Improve Touch Targets 117 | 118 | ```css 119 | /* Ensure touch targets are at least 44x44px */ 120 | @media (max-width: 720px) { 121 | .btn { 122 | min-height: 44px; 123 | padding: 0.75rem 1.25rem; 124 | } 125 | 126 | #searchInput, 127 | .sort-select { 128 | min-height: 44px; 129 | font-size: 16px; /* Prevents zoom on iOS */ 130 | } 131 | 132 | .cards > a { 133 | min-height: 100px; 134 | } 135 | } 136 | ``` 137 | 138 | #### Add Touch Feedback 139 | 140 | ```css 141 | /* Better touch feedback */ 142 | @media (hover: none) and (pointer: coarse) { 143 | /* Mobile/touch devices */ 144 | .cards > a:active { 145 | transform: scale(0.98); 146 | opacity: 0.9; 147 | } 148 | 149 | .btn:active { 150 | transform: scale(0.97); 151 | } 152 | 153 | /* Remove hover effects on touch devices */ 154 | .cards > a:hover { 155 | transform: none; 156 | } 157 | 158 | .cards > a:hover .card { 159 | box-shadow: none; 160 | border-color: rgba(255, 255, 255, 0.08); 161 | } 162 | } 163 | ``` 164 | 165 | #### Improve Container Padding 166 | 167 | ```css 168 | @media (max-width: 720px) { 169 | .container { 170 | padding-left: 1rem; 171 | padding-right: 1rem; 172 | } 173 | 174 | .list-header { 175 | padding: 0; 176 | } 177 | 178 | .howto { 179 | padding: 1rem; 180 | margin: 2rem 0; 181 | } 182 | } 183 | ``` 184 | 185 | #### Better Search and Sort Layout 186 | 187 | ```css 188 | @media (max-width: 640px) { 189 | .controls-container { 190 | flex-direction: column; 191 | gap: 0.75rem; 192 | } 193 | 194 | .search-container, 195 | .sort-container { 196 | width: 100%; 197 | } 198 | 199 | .sort-select { 200 | width: 100%; 201 | } 202 | 203 | .sort-label { 204 | font-size: 0.85rem; 205 | } 206 | } 207 | ``` 208 | 209 | ### 2. HTML Meta Tag Check 210 | 211 | Ensure this meta tag is in the `` (it should already be there): 212 | 213 | ```html 214 | 215 | ``` 216 | 217 | ### 3. Optional: Add Pull-to-Refresh Hint 218 | 219 | Add a subtle indicator for mobile users: 220 | 221 | ```css 222 | /* Add a refresh hint for mobile */ 223 | @media (max-width: 720px) { 224 | .site-header::after { 225 | content: ""; 226 | position: absolute; 227 | bottom: -1px; 228 | left: 0; 229 | right: 0; 230 | height: 3px; 231 | background: linear-gradient( 232 | 90deg, 233 | var(--accent), 234 | var(--accent-2) 235 | ); 236 | opacity: 0.3; 237 | } 238 | } 239 | ``` 240 | 241 | ### 4. Improve "How to Contribute" Section 242 | 243 | ```css 244 | @media (max-width: 640px) { 245 | .howto ol { 246 | padding-left: 1.25rem; 247 | } 248 | 249 | .howto li { 250 | margin-bottom: 0.75rem; 251 | font-size: 0.95rem; 252 | } 253 | 254 | .howto code { 255 | font-size: 0.85rem; 256 | word-break: break-all; 257 | } 258 | } 259 | ``` 260 | 261 | ### 5. Add Safe Area Support for iOS 262 | 263 | Support iPhone notches and home indicators: 264 | 265 | ```css 266 | body { 267 | padding-left: env(safe-area-inset-left); 268 | padding-right: env(safe-area-inset-right); 269 | } 270 | 271 | .site-header, 272 | .site-footer { 273 | padding-top: env(safe-area-inset-top); 274 | padding-bottom: env(safe-area-inset-bottom); 275 | } 276 | ``` 277 | 278 | ## Steps to Implement 279 | 280 | 1. Fork this repository 281 | 2. Create a new branch: `git checkout -b feature/mobile-improvements` 282 | 3. Add the responsive CSS changes to `assets/styles.css` 283 | 4. Test on multiple devices and screen sizes: 284 | - Mobile phones (320px, 375px, 414px widths) 285 | - Tablets (768px, 1024px) 286 | - Different orientations (portrait/landscape) 287 | 5. Use browser DevTools device emulation for testing 288 | 6. Check that: 289 | - All text is readable 290 | - All buttons are easily tappable 291 | - Cards layout nicely 292 | - Search and sort work well 293 | 7. Commit your changes: `git commit -m "Improve mobile responsiveness"` 294 | 8. Push to your fork: `git push origin feature/mobile-improvements` 295 | 9. Open a Pull Request 296 | 297 | ## Testing Checklist 298 | 299 | - [ ] Cards display properly on mobile (320px - 640px) 300 | - [ ] Cards display properly on tablets (641px - 900px) 301 | - [ ] Header buttons are full-width on mobile 302 | - [ ] Search input is easy to use on mobile 303 | - [ ] All touch targets are at least 44x44px 304 | - [ ] Text is readable without zooming 305 | - [ ] No horizontal scrolling on any screen size 306 | - [ ] Touch feedback feels natural 307 | - [ ] Safe areas are respected on iOS devices 308 | - [ ] Landscape orientation works well 309 | 310 | ## Testing Tools 311 | 312 | Use these to test: 313 | - Chrome DevTools Device Mode 314 | - Firefox Responsive Design Mode 315 | - Real mobile devices if available 316 | - BrowserStack or similar for cross-device testing 317 | 318 | ## Device Sizes to Test 319 | 320 | - **Small phones**: 320px - 374px 321 | - **Medium phones**: 375px - 413px 322 | - **Large phones**: 414px - 640px 323 | - **Tablets**: 641px - 1024px 324 | - **Desktop**: 1025px+ 325 | 326 | ## Accessibility Tips 327 | 328 | - Ensure font sizes don't go below 14px on mobile 329 | - Keep touch targets at least 44x44px (Apple) or 48x48px (Android) 330 | - Test with different font size settings 331 | - Ensure good contrast ratios 332 | 333 | ## Performance Considerations 334 | 335 | - Test scrolling performance with many contributors 336 | - Ensure animations are smooth on lower-end devices 337 | - Consider using `will-change` sparingly for animations 338 | 339 | ```css 340 | .cards > a:hover { 341 | will-change: transform; 342 | } 343 | ``` 344 | 345 | ## Before/After Comparison 346 | 347 | Take screenshots of: 348 | - Mobile layout (before and after) 349 | - Tablet layout (before and after) 350 | - Touch target sizes 351 | - Header on mobile 352 | 353 | Include these in your PR description! 354 | 355 | --- 356 | **Good first issue** - Perfect for learning responsive design and mobile UX! 📱 357 | -------------------------------------------------------------------------------- /.github/GOOD_FIRST_ISSUES.md: -------------------------------------------------------------------------------- 1 | # Good First Issues Created 2 | 3 | This document provides an overview of the good first issues created for the FirstLeaf project. 4 | 5 | ## Overview 6 | 7 | Multiple issue templates have been created in `.github/ISSUE_TEMPLATE/` to help new contributors get started with the FirstLeaf project. These issues are categorized by difficulty and type, ranging from simple documentation fixes to more complex feature additions. 8 | 9 | ## Issue Templates 10 | 11 | ### 1. 🐛 Fix Documentation Typo (Easiest) 12 | **File**: `01-fix-documentation-typo.md` 13 | - **Type**: Documentation, Bug 14 | - **Difficulty**: ⭐ (Very Easy) 15 | - **Description**: Fix incorrect repository name "sicksticks" to "FirstLeaf" in README 16 | - **Skills Learned**: Documentation editing, Git basics 17 | - **Estimated Time**: 5-10 minutes 18 | 19 | ### 2. 🔧 Remove Legacy Code Reference (Easy) 20 | **File**: `02-remove-legacy-code.md` 21 | - **Type**: Code Cleanup, Refactoring 22 | - **Difficulty**: ⭐⭐ (Easy) 23 | - **Description**: Remove unused SICKSTICKS reference from app.js 24 | - **Skills Learned**: Code cleanup, basic JavaScript understanding 25 | - **Estimated Time**: 10-15 minutes 26 | 27 | ### 3. 🎨 Fix Code Indentation (Easy) 28 | **File**: `03-fix-code-indentation.md` 29 | - **Type**: Code Style, Bug 30 | - **Difficulty**: ⭐⭐ (Easy) 31 | - **Description**: Fix indentation inconsistency in app.js 32 | - **Skills Learned**: Code formatting, code style consistency 33 | - **Estimated Time**: 5-10 minutes 34 | 35 | ### 4. ✨ Add Search/Filter Feature (Intermediate) ~~COMPLETED~~ 36 | **File**: `04-add-search-feature.md` 37 | - **Type**: Feature, Enhancement 38 | - **Difficulty**: ⭐⭐⭐ (Intermediate) 39 | - **Description**: Add search functionality to filter contributors by name/username 40 | - **Skills Learned**: DOM manipulation, event handling, HTML/CSS/JavaScript integration 41 | - **Estimated Time**: 30-60 minutes 42 | - **Status**: ✅ Implemented in the repository 43 | 44 | ### 5. 🌓 Add Dark/Light Mode Toggle (Intermediate) 45 | **File**: `05-add-dark-light-mode-toggle.md` 46 | - **Type**: Feature, Enhancement, UI/UX 47 | - **Difficulty**: ⭐⭐⭐⭐ (Intermediate-Advanced) 48 | - **Description**: Add theme toggle button with localStorage persistence 49 | - **Skills Learned**: CSS variables, localStorage API, theming, accessibility 50 | - **Estimated Time**: 45-90 minutes 51 | 52 | ### 6. 📊 Add Contributor Statistics Display (Intermediate) 53 | **File**: `06-add-contributor-statistics.md` 54 | - **Type**: Feature, Enhancement, UI/UX 55 | - **Difficulty**: ⭐⭐⭐ (Intermediate) 56 | - **Description**: Display total contributors count and highlight the latest contributor 57 | - **Skills Learned**: DOM manipulation, data visualization, statistics display 58 | - **Estimated Time**: 30-45 minutes 59 | 60 | ### 7. 🔗 Add Social Media Links (Intermediate) 61 | **File**: `07-add-social-media-links.md` 62 | - **Type**: Feature, Enhancement 63 | - **Difficulty**: ⭐⭐⭐ (Intermediate) 64 | - **Description**: Allow contributors to add optional social media links to their profiles 65 | - **Skills Learned**: Data structure extension, SVG icons, event handling 66 | - **Estimated Time**: 45-60 minutes 67 | 68 | ### 8. ✨ Add Animation Effects (Intermediate) 69 | **File**: `08-add-animation-effects.md` 70 | - **Type**: Enhancement, UI/UX 71 | - **Difficulty**: ⭐⭐⭐ (Intermediate) 72 | - **Description**: Add smooth animations and hover effects to contributor cards 73 | - **Skills Learned**: CSS animations, transitions, keyframes, performance optimization 74 | - **Estimated Time**: 30-45 minutes 75 | 76 | ### 9. 🔄 Add Sorting Options (Intermediate-Advanced) 77 | **File**: `09-add-sorting-options.md` 78 | - **Type**: Feature, Enhancement 79 | - **Difficulty**: ⭐⭐⭐⭐ (Intermediate-Advanced) 80 | - **Description**: Add dropdown to sort contributors by different criteria 81 | - **Skills Learned**: Array sorting, select elements, state management 82 | - **Estimated Time**: 60-90 minutes 83 | 84 | ### 10. 📱 Improve Mobile Responsiveness (Intermediate) 85 | **File**: `10-improve-mobile-responsiveness.md` 86 | - **Type**: Enhancement, UI/UX, Mobile 87 | - **Difficulty**: ⭐⭐⭐ (Intermediate) 88 | - **Description**: Enhance mobile user experience with better layouts and touch interactions 89 | - **Skills Learned**: Responsive design, media queries, touch events, mobile UX 90 | - **Estimated Time**: 45-75 minutes 91 | 92 | ### 11. 🎖️ Add Contributor Badge System (Intermediate-Advanced) 93 | **File**: `11-add-contributor-badges.md` 94 | - **Type**: Feature, Enhancement, UI/UX 95 | - **Difficulty**: ⭐⭐⭐⭐ (Intermediate-Advanced) 96 | - **Description**: Add special badges to highlight different types of contributors 97 | - **Skills Learned**: Data structures, conditional rendering, visual design 98 | - **Estimated Time**: 60-90 minutes 99 | 100 | ### 12. ⬆️ Add Scroll to Top Button (Easy-Intermediate) 101 | **File**: `12-add-scroll-to-top.md` 102 | - **Type**: Feature, Enhancement, UI/UX 103 | - **Difficulty**: ⭐⭐ (Easy-Intermediate) 104 | - **Description**: Add floating button that appears when scrolling to quickly return to top 105 | - **Skills Learned**: Scroll events, smooth scrolling, IntersectionObserver 106 | - **Estimated Time**: 30-45 minutes 107 | 108 | ### 13. 🎨 Add Custom Color Themes (Intermediate) 109 | **File**: `13-add-color-themes.md` 110 | - **Type**: Feature, Enhancement, UI/UX, Design 111 | - **Difficulty**: ⭐⭐⭐ (Intermediate) 112 | - **Description**: Create alternative color themes that users can select 113 | - **Skills Learned**: CSS custom properties, theming, localStorage, color theory 114 | - **Estimated Time**: 60-90 minutes 115 | 116 | ## How to Use These Templates 117 | 118 | ### For Repository Maintainers 119 | 120 | 1. **Creating Issues**: Go to the Issues tab and click "New Issue" 121 | 2. **Select Template**: Choose one of the templates created 122 | 3. **Review**: The template will auto-fill with all the details 123 | 4. **Customize**: Adjust any specifics if needed 124 | 5. **Publish**: Create the issue 125 | 126 | ### For Contributors 127 | 128 | 1. **Browse Issues**: Look for issues labeled "good first issue" 129 | 2. **Choose One**: Pick an issue that matches your skill level 130 | 3. **Follow Steps**: Each template includes detailed step-by-step instructions 131 | 4. **Ask Questions**: Comment on the issue if you need help 132 | 5. **Submit PR**: Follow the contribution guidelines 133 | 134 | ## Template Features 135 | 136 | Each template includes: 137 | - ✅ Clear problem description 138 | - ✅ Current vs. expected behavior 139 | - ✅ Exact file locations and line numbers 140 | - ✅ Step-by-step implementation guide 141 | - ✅ Testing instructions 142 | - ✅ Code examples 143 | - ✅ Labels for easy filtering 144 | - ✅ Estimated difficulty level 145 | 146 | ## Benefits 147 | 148 | ### For the Project 149 | - Encourages new contributors 150 | - Improves code quality incrementally 151 | - Builds a welcoming community 152 | - Provides clear documentation 153 | 154 | ### For Contributors 155 | - Easy entry point to open source 156 | - Learn by doing with guided instructions 157 | - Build confidence with increasing difficulty 158 | - Practice real-world development skills 159 | 160 | ## Label System 161 | 162 | The issues use the following labels: 163 | - `good first issue` - Suitable for newcomers 164 | - `documentation` - Documentation improvements 165 | - `bug` - Bug fixes 166 | - `enhancement` - New features 167 | - `feature` - Feature additions 168 | - `code-cleanup` - Code refactoring 169 | - `code-style` - Code formatting 170 | - `ui/ux` - User interface improvements 171 | 172 | ## Future Enhancements 173 | 174 | Consider creating additional issue templates for: 175 | - Integration with GitHub API to fetch contributor data automatically 176 | - Adding contributor timeline/activity visualization 177 | - Creating a contribution leaderboard 178 | - Implementing pagination or infinite scroll for large contributor lists 179 | - Adding contributor profiles with detailed contribution history 180 | - Creating an admin dashboard for maintainers 181 | - Adding multilingual support (i18n) 182 | - Creating automated contributor recognition system 183 | 184 | ## Notes 185 | 186 | - All issues are beginner-friendly with detailed instructions 187 | - Issues 1-3 are great for absolute first-time contributors 188 | - Issues 4-8 are suitable for those with basic JavaScript experience 189 | - Issues 9-13 are better for contributors with intermediate skills 190 | - Issue 4 (Search Feature) has been completed and is already in the codebase 191 | - All templates include testing checklists to ensure quality 192 | - Each issue provides multiple implementation approaches when applicable 193 | - Issues are designed to be completed independently without dependencies 194 | 195 | --- 196 | 197 | **Created**: October 2024 198 | **Updated**: January 2025 199 | **Purpose**: Help new contributors make their first pull request 200 | **Repository**: FirstLeaf - First Pull Request Playground 201 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/07-add-social-media-links.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🔗 Add social media links to contributor cards 3 | about: Allow contributors to add optional social media links to their profiles 4 | title: "Add social media links support for contributor cards" 5 | labels: ["good first issue", "enhancement", "feature"] 6 | assignees: '' 7 | --- 8 | 9 | ## Description 10 | Extend the contributor data format to support optional social media links (Twitter, LinkedIn, etc.) and display them as icons on contributor cards. 11 | 12 | ## Proposed Feature 13 | Allow contributors to add optional social media URLs to their profile data, and display clickable icons on their contributor card. 14 | 15 | ## Current Behavior 16 | - Contributor cards show only name, username, avatar, and message 17 | - No way to link to social media profiles 18 | 19 | ## Expected Behavior 20 | - Contributors can add optional social media URLs in their NDJSON entry 21 | - Small social media icons appear at the bottom of their card 22 | - Icons link to their social media profiles 23 | 24 | ## Implementation Details 25 | 26 | ### 1. Update Data Format 27 | 28 | Contributors can add optional social media fields to their NDJSON entry: 29 | 30 | ```json 31 | {"name":"Ada Lovelace","username":"ada","github":"https://github.com/ada","message":"Hello, world!","twitter":"https://twitter.com/ada","linkedin":"https://linkedin.com/in/ada","website":"https://ada.dev"} 32 | ``` 33 | 34 | ### 2. CSS Changes (assets/styles.css) 35 | 36 | Add social media icon styles: 37 | 38 | ```css 39 | .social-links { 40 | display: flex; 41 | gap: 0.5rem; 42 | margin-top: 0.75rem; 43 | padding-top: 0.75rem; 44 | border-top: 1px solid rgba(255, 255, 255, 0.08); 45 | } 46 | 47 | .social-link { 48 | display: inline-flex; 49 | align-items: center; 50 | justify-content: center; 51 | width: 28px; 52 | height: 28px; 53 | border-radius: 6px; 54 | background: rgba(255, 255, 255, 0.05); 55 | color: var(--muted); 56 | transition: all 0.2s ease; 57 | text-decoration: none; 58 | font-size: 0.875rem; 59 | } 60 | 61 | .social-link:hover { 62 | background: rgba(107, 226, 255, 0.15); 63 | color: var(--accent); 64 | transform: translateY(-2px); 65 | } 66 | 67 | .social-link svg { 68 | width: 16px; 69 | height: 16px; 70 | } 71 | ``` 72 | 73 | ### 3. JavaScript Changes (assets/app.js) 74 | 75 | Add this code in the card creation loop, after the `meta` div (around line 99): 76 | 77 | ```javascript 78 | // After adding the meta section 79 | if (p.message) card.appendChild(meta); 80 | 81 | // Add social media links if they exist 82 | const socialLinks = []; 83 | if (p.twitter) socialLinks.push({ url: p.twitter, icon: '𝕏', label: 'Twitter/X' }); 84 | if (p.linkedin) socialLinks.push({ url: p.linkedin, icon: '💼', label: 'LinkedIn' }); 85 | if (p.website) socialLinks.push({ url: p.website, icon: '🌐', label: 'Website' }); 86 | 87 | if (socialLinks.length > 0) { 88 | const socialContainer = document.createElement('div'); 89 | socialContainer.className = 'social-links'; 90 | 91 | socialLinks.forEach(social => { 92 | const link = document.createElement('a'); 93 | link.href = social.url; 94 | link.className = 'social-link'; 95 | link.target = '_blank'; 96 | link.rel = 'noopener noreferrer'; 97 | link.title = social.label; 98 | link.textContent = social.icon; 99 | link.onclick = (e) => e.stopPropagation(); // Prevent parent link click 100 | 101 | socialContainer.appendChild(link); 102 | }); 103 | 104 | card.appendChild(socialContainer); 105 | } 106 | 107 | a.appendChild(card); 108 | ``` 109 | 110 | ### Alternative: Use SVG Icons (More Professional) 111 | 112 | For a more polished look, you can use SVG icons instead of emojis: 113 | 114 | ```javascript 115 | // Helper function to create icon SVGs 116 | function createSocialIcon(type) { 117 | const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 118 | svg.setAttribute('width', '16'); 119 | svg.setAttribute('height', '16'); 120 | svg.setAttribute('viewBox', '0 0 24 24'); 121 | svg.setAttribute('fill', 'currentColor'); 122 | 123 | let path = ''; 124 | if (type === 'twitter') { 125 | path = 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'; 126 | } else if (type === 'linkedin') { 127 | path = 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'; 128 | } else if (type === 'website') { 129 | path = 'M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm1 16.057v-3.057h2.994c-.059 1.143-.212 2.24-.456 3.279-.823-.12-1.674-.188-2.538-.222zm1.957 2.162c-.499 1.33-1.159 2.497-1.957 3.456v-3.62c.666.028 1.319.081 1.957.164zm-1.957-7.219v-3.015c.868-.034 1.721-.103 2.548-.224.238 1.027.389 2.111.446 3.239h-2.994zm0-5.014v-3.661c.806.969 1.471 2.15 1.971 3.496-.642.084-1.3.137-1.971.165zm2.703-3.267c1.237.496 2.354 1.228 3.29 2.146-.642.234-1.311.442-2.019.607-.344-.992-.775-1.91-1.271-2.753zm-7.241 13.56c-.244-1.039-.398-2.136-.456-3.279h2.994v3.057c-.865.034-1.714.102-2.538.222zm2.538 1.776v3.62c-.798-.959-1.458-2.126-1.957-3.456.638-.083 1.291-.136 1.957-.164zm-2.994-7.055c.057-1.128.207-2.212.446-3.239.827.121 1.68.19 2.548.224v3.015h-2.994zm1.024-5.179c.5-1.346 1.165-2.527 1.97-3.496v3.661c-.671-.028-1.329-.081-1.97-.165zm-2.005-.35c-.708-.165-1.377-.373-2.018-.607.937-.918 2.053-1.65 3.29-2.146-.496.844-.927 1.762-1.272 2.753zm-.549 1.918c-.264 1.151-.434 2.36-.492 3.611h-3.933c.165-1.658.739-3.197 1.617-4.518.88.361 1.816.67 2.808.907zm.009 9.262c-.988.236-1.92.542-2.797.9-.89-1.328-1.471-2.879-1.637-4.551h3.934c.058 1.265.231 2.488.5 3.651zm.553 1.917c.342.976.768 1.881 1.257 2.712-1.223-.49-2.326-1.211-3.256-2.115.636-.229 1.299-.435 1.999-.597zm9.924 0c.7.163 1.362.367 1.999.597-.931.903-2.034 1.625-3.257 2.116.489-.832.915-1.737 1.258-2.713zm.553-1.917c.27-1.163.442-2.386.501-3.651h3.934c-.167 1.672-.748 3.223-1.638 4.551-.877-.358-1.81-.664-2.797-.9zm.501-5.651c-.058-1.251-.229-2.46-.492-3.611.992-.237 1.929-.546 2.809-.907.877 1.321 1.451 2.86 1.616 4.518h-3.933z'; 130 | } 131 | 132 | const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path'); 133 | pathEl.setAttribute('d', path); 134 | svg.appendChild(pathEl); 135 | 136 | return svg; 137 | } 138 | 139 | // Then use it: 140 | if (p.twitter) { 141 | const link = document.createElement('a'); 142 | link.href = p.twitter; 143 | link.className = 'social-link'; 144 | link.target = '_blank'; 145 | link.rel = 'noopener noreferrer'; 146 | link.title = 'Twitter/X'; 147 | link.appendChild(createSocialIcon('twitter')); 148 | link.onclick = (e) => e.stopPropagation(); 149 | socialContainer.appendChild(link); 150 | } 151 | ``` 152 | 153 | ## Steps to Implement 154 | 155 | 1. Fork this repository 156 | 2. Create a new branch: `git checkout -b feature/social-media-links` 157 | 3. Add the CSS styles to `assets/styles.css` 158 | 4. Add the JavaScript code to `assets/app.js` in the card creation section 159 | 5. Test locally: 160 | - Edit `data/contributors.ndjson` and add social media URLs to one entry 161 | - Open `index.html` in your browser 162 | - Verify the social icons appear and link correctly 163 | 6. Update the README.md documentation to explain the new optional fields 164 | 7. Commit your changes: `git commit -m "Add social media links to contributor cards"` 165 | 8. Push to your fork: `git push origin feature/social-media-links` 166 | 9. Open a Pull Request 167 | 168 | ## Testing Checklist 169 | 170 | - [ ] Social media icons display correctly when URLs are provided 171 | - [ ] Icons link to the correct URLs 172 | - [ ] Icons open in new tabs 173 | - [ ] Clicking icons doesn't trigger the parent card link 174 | - [ ] Icons have hover effects 175 | - [ ] Design is consistent with the theme 176 | - [ ] Cards without social links still display correctly 177 | 178 | ## Example NDJSON Entry 179 | 180 | ```json 181 | {"name":"Jane Doe","username":"janedoe","github":"https://github.com/janedoe","message":"Open source enthusiast!","twitter":"https://twitter.com/janedoe","linkedin":"https://linkedin.com/in/janedoe","website":"https://janedoe.dev","addedAt":"2025-01-15T10:00:00.000Z"} 182 | ``` 183 | 184 | ## Additional Notes 185 | 186 | - All social media fields are **optional** 187 | - You can choose to use emojis (simpler) or SVG icons (more professional) 188 | - Consider adding support for other platforms (GitHub is already shown, but you could add others) 189 | - Make sure to stop event propagation so clicking social icons doesn't trigger the main profile link 190 | 191 | --- 192 | **Good first issue** - Perfect for learning about event handling and dynamic content! 🔗 193 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/11-add-contributor-badges.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🎖️ Add contributor badge/flair system 3 | about: Add special badges to highlight different types of contributors 4 | title: "Add badge/flair system for contributors" 5 | labels: ["good first issue", "enhancement", "feature", "ui/ux"] 6 | assignees: '' 7 | --- 8 | 9 | ## Description 10 | Add a badge/flair system that allows contributors to display special badges on their cards, such as "First Contributor," "Core Team," "Top Contributor," or custom badges for special achievements. 11 | 12 | ## Proposed Feature 13 | Extend the contributor data format to support optional badges, and display them as small icons or labels on contributor cards. 14 | 15 | ## Current Behavior 16 | - All contributor cards look the same 17 | - No way to highlight special contributors or achievements 18 | - No visual distinction between different contributor types 19 | 20 | ## Expected Behavior 21 | - Contributors can add optional badge data to their profile 22 | - Badges display as small, colorful labels on cards 23 | - Different badge types have different colors/styles 24 | - Badges are subtle but noticeable 25 | 26 | ## Badge Types 27 | 28 | Suggested badge categories: 29 | - `first` - First contributor to the project 30 | - `core` - Core team member 31 | - `top` - Top contributor (many PRs) 32 | - `helper` - Helped others with their PRs 33 | - `early` - Joined in the first month 34 | - `milestone` - Contributed at a milestone (100th, 500th contributor, etc.) 35 | - Custom text badges 36 | 37 | ## Implementation Details 38 | 39 | ### 1. Update Data Format 40 | 41 | Contributors can add an optional `badges` array to their NDJSON entry: 42 | 43 | ```json 44 | {"name":"Ada Lovelace","username":"ada","github":"https://github.com/ada","message":"Hello, world!","badges":["first","core"],"addedAt":"2025-01-01T12:00:00.000Z"} 45 | ``` 46 | 47 | Or with custom badges: 48 | ```json 49 | {"name":"Grace Hopper","username":"grace","badges":[{"type":"custom","text":"Bug Hunter","color":"#ff6b6b"}],"message":"Found 10 bugs!"} 50 | ``` 51 | 52 | ### 2. CSS Changes (assets/styles.css) 53 | 54 | Add badge styles: 55 | 56 | ```css 57 | .badges { 58 | display: flex; 59 | flex-wrap: wrap; 60 | gap: 0.35rem; 61 | margin-top: 0.5rem; 62 | } 63 | 64 | .badge { 65 | display: inline-flex; 66 | align-items: center; 67 | gap: 0.25rem; 68 | padding: 0.2rem 0.5rem; 69 | border-radius: 6px; 70 | font-size: 0.7rem; 71 | font-weight: 600; 72 | text-transform: uppercase; 73 | letter-spacing: 0.03em; 74 | line-height: 1; 75 | } 76 | 77 | /* Badge type colors */ 78 | .badge-first { 79 | background: linear-gradient(135deg, #ffd700, #ffed4e); 80 | color: #1a202c; 81 | } 82 | 83 | .badge-core { 84 | background: linear-gradient(135deg, #667eea, #764ba2); 85 | color: white; 86 | } 87 | 88 | .badge-top { 89 | background: linear-gradient(135deg, #f093fb, #f5576c); 90 | color: white; 91 | } 92 | 93 | .badge-helper { 94 | background: linear-gradient(135deg, #4facfe, #00f2fe); 95 | color: #1a202c; 96 | } 97 | 98 | .badge-early { 99 | background: linear-gradient(135deg, #43e97b, #38f9d7); 100 | color: #1a202c; 101 | } 102 | 103 | .badge-milestone { 104 | background: linear-gradient(135deg, #fa709a, #fee140); 105 | color: #1a202c; 106 | } 107 | 108 | .badge-custom { 109 | background: rgba(255, 255, 255, 0.15); 110 | color: var(--text); 111 | border: 1px solid rgba(255, 255, 255, 0.2); 112 | } 113 | 114 | /* Add icon support */ 115 | .badge::before { 116 | content: ""; 117 | display: inline-block; 118 | width: 10px; 119 | height: 10px; 120 | } 121 | 122 | .badge-first::before { 123 | content: "🥇"; 124 | width: auto; 125 | } 126 | 127 | .badge-core::before { 128 | content: "⭐"; 129 | width: auto; 130 | } 131 | 132 | .badge-top::before { 133 | content: "🏆"; 134 | width: auto; 135 | } 136 | 137 | .badge-helper::before { 138 | content: "🤝"; 139 | width: auto; 140 | } 141 | 142 | .badge-early::before { 143 | content: "🌱"; 144 | width: auto; 145 | } 146 | 147 | .badge-milestone::before { 148 | content: "🎯"; 149 | width: auto; 150 | } 151 | ``` 152 | 153 | ### 3. JavaScript Changes (assets/app.js) 154 | 155 | Add badge rendering in the card creation loop (around line 97): 156 | 157 | ```javascript 158 | // After adding the meta section 159 | if (p.message) card.appendChild(meta); 160 | 161 | // Add badges if they exist 162 | if (p.badges && Array.isArray(p.badges) && p.badges.length > 0) { 163 | const badgesContainer = document.createElement('div'); 164 | badgesContainer.className = 'badges'; 165 | 166 | p.badges.forEach(badge => { 167 | const badgeEl = document.createElement('span'); 168 | 169 | // Handle both string badges and object badges 170 | if (typeof badge === 'string') { 171 | badgeEl.className = `badge badge-${badge}`; 172 | badgeEl.textContent = badge.charAt(0).toUpperCase() + badge.slice(1); 173 | } else if (typeof badge === 'object') { 174 | badgeEl.className = 'badge badge-custom'; 175 | badgeEl.textContent = badge.text || 'Badge'; 176 | if (badge.color) { 177 | badgeEl.style.background = badge.color; 178 | badgeEl.style.color = getContrastColor(badge.color); 179 | } 180 | } 181 | 182 | badgesContainer.appendChild(badgeEl); 183 | }); 184 | 185 | card.appendChild(badgesContainer); 186 | } 187 | 188 | a.appendChild(card); 189 | ``` 190 | 191 | ### 4. Helper Function for Custom Colors 192 | 193 | Add this helper function to calculate contrast color: 194 | 195 | ```javascript 196 | // Add this function before the fetchContributors function 197 | function getContrastColor(hexColor) { 198 | // Convert hex to RGB 199 | const r = parseInt(hexColor.slice(1, 3), 16); 200 | const g = parseInt(hexColor.slice(3, 5), 16); 201 | const b = parseInt(hexColor.slice(5, 7), 16); 202 | 203 | // Calculate luminance 204 | const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255; 205 | 206 | // Return black or white based on luminance 207 | return luminance > 0.5 ? '#1a202c' : '#ffffff'; 208 | } 209 | ``` 210 | 211 | ### Alternative: Simpler Badge Implementation 212 | 213 | For a simpler approach, just support predefined badge types: 214 | 215 | ```javascript 216 | const badgeIcons = { 217 | first: { icon: '🥇', label: 'First', color: '#ffd700' }, 218 | core: { icon: '⭐', label: 'Core Team', color: '#667eea' }, 219 | top: { icon: '🏆', label: 'Top Contributor', color: '#f5576c' }, 220 | helper: { icon: '🤝', label: 'Helper', color: '#00f2fe' }, 221 | early: { icon: '🌱', label: 'Early Adopter', color: '#43e97b' }, 222 | milestone: { icon: '🎯', label: 'Milestone', color: '#fa709a' } 223 | }; 224 | 225 | if (p.badges && Array.isArray(p.badges)) { 226 | const badgesContainer = document.createElement('div'); 227 | badgesContainer.className = 'badges'; 228 | 229 | p.badges.forEach(badgeType => { 230 | const badgeInfo = badgeIcons[badgeType]; 231 | if (badgeInfo) { 232 | const badgeEl = document.createElement('span'); 233 | badgeEl.className = `badge badge-${badgeType}`; 234 | badgeEl.textContent = `${badgeInfo.icon} ${badgeInfo.label}`; 235 | badgeEl.title = badgeInfo.label; 236 | badgesContainer.appendChild(badgeEl); 237 | } 238 | }); 239 | 240 | if (badgesContainer.children.length > 0) { 241 | card.appendChild(badgesContainer); 242 | } 243 | } 244 | ``` 245 | 246 | ## Steps to Implement 247 | 248 | 1. Fork this repository 249 | 2. Create a new branch: `git checkout -b feature/contributor-badges` 250 | 3. Add the badge CSS styles to `assets/styles.css` 251 | 4. Add the badge rendering JavaScript to `assets/app.js` 252 | 5. Test locally: 253 | - Edit `data/contributors.ndjson` and add badges to a few entries 254 | - Try different badge types 255 | - Test custom badges if implementing that option 256 | - Verify styling looks good 257 | 6. Update documentation (README.md or CONTRIBUTING.md) to explain the badge system 258 | 7. Commit your changes: `git commit -m "Add contributor badge/flair system"` 259 | 8. Push to your fork: `git push origin feature/contributor-badges` 260 | 9. Open a Pull Request 261 | 262 | ## Testing Checklist 263 | 264 | - [ ] Badges display correctly on cards 265 | - [ ] Different badge types have distinct colors 266 | - [ ] Badges don't overflow on mobile 267 | - [ ] Multiple badges on one card display nicely 268 | - [ ] Cards without badges still look good 269 | - [ ] Badge colors are accessible (good contrast) 270 | - [ ] Icons (emojis) display on all browsers 271 | 272 | ## Example NDJSON Entries 273 | 274 | **Basic badges:** 275 | ```json 276 | {"name":"First Contributor","username":"pioneer","badges":["first"],"message":"I was here first!"} 277 | {"name":"Core Team","username":"maintainer","badges":["core","helper"],"message":"Happy to help!"} 278 | {"name":"Top Contributor","username":"superstar","badges":["top","early","milestone"],"message":"Love contributing!"} 279 | ``` 280 | 281 | **Custom badges:** 282 | ```json 283 | {"name":"Custom Badge","username":"creative","badges":[{"type":"custom","text":"Designer","color":"#ff6b9d"}],"message":"I design things!"} 284 | ``` 285 | 286 | ## Design Tips 287 | 288 | - Keep badges small and subtle 289 | - Use gradients for a modern look 290 | - Ensure badges don't overwhelm the card content 291 | - Test with multiple badges on one card 292 | - Consider limiting to 3-4 badges max per card 293 | 294 | ## Future Enhancements 295 | 296 | - Add badge hover effects with descriptions 297 | - Allow badges to be clickable to filter contributors 298 | - Add achievement badges based on contribution count 299 | - Create a badge legend/key section 300 | 301 | --- 302 | **Good first issue** - Perfect for learning about data structures and visual design! 🎖️ 303 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/09-add-sorting-options.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🔄 Add sorting options for contributors 3 | about: Allow users to sort contributors by different criteria 4 | title: "Add sorting dropdown for contributors list" 5 | labels: ["good first issue", "enhancement", "feature"] 6 | assignees: '' 7 | --- 8 | 9 | ## Description 10 | Add a dropdown menu that allows users to sort the contributors list by different criteria such as name (alphabetically), join date (newest/oldest), or username. 11 | 12 | ## Proposed Feature 13 | Add a sort dropdown next to the search box that allows users to sort contributors by: 14 | - Newest first (default) 15 | - Oldest first 16 | - Name (A-Z) 17 | - Name (Z-A) 18 | 19 | ## Current Behavior 20 | - Contributors are always sorted by newest first (addedAt descending), then by name 21 | - No option for users to change the sort order 22 | 23 | ## Expected Behavior 24 | - A dropdown menu appears next to the search box 25 | - Users can select different sorting options 26 | - The contributor grid updates instantly when sort order changes 27 | - Search functionality continues to work with the new sort order 28 | 29 | ## Implementation Details 30 | 31 | ### 1. HTML Changes (index.html) 32 | 33 | Add a sort dropdown in the list-header section (around line 51): 34 | 35 | ```html 36 |
37 |

Contributors

38 | 44 |
45 |
46 | 52 |
53 |
54 | 55 | 61 |
62 |
63 |
64 | ``` 65 | 66 | ### 2. CSS Changes (assets/styles.css) 67 | 68 | Update and add these styles: 69 | 70 | ```css 71 | /* Update search-container to be part of controls */ 72 | .controls-container { 73 | display: flex; 74 | gap: 1rem; 75 | margin: 1.5rem 0; 76 | flex-wrap: wrap; 77 | } 78 | 79 | .search-container { 80 | flex: 1; 81 | min-width: 250px; 82 | margin: 0; /* Remove existing margin */ 83 | } 84 | 85 | .sort-container { 86 | display: flex; 87 | align-items: center; 88 | gap: 0.5rem; 89 | } 90 | 91 | .sort-label { 92 | color: var(--muted); 93 | font-size: 0.9rem; 94 | white-space: nowrap; 95 | } 96 | 97 | .sort-select { 98 | padding: 0.75rem 1rem; 99 | background: var(--panel); 100 | border: 1px solid rgba(255, 255, 255, 0.1); 101 | border-radius: 8px; 102 | color: var(--text); 103 | font-size: 0.95rem; 104 | font-family: inherit; 105 | cursor: pointer; 106 | min-width: 150px; 107 | transition: border-color 0.2s ease, background-color 0.2s ease; 108 | } 109 | 110 | .sort-select:hover { 111 | border-color: rgba(255, 255, 255, 0.2); 112 | background: rgba(255, 255, 255, 0.02); 113 | } 114 | 115 | .sort-select:focus { 116 | outline: none; 117 | border-color: var(--accent); 118 | background: rgba(255, 255, 255, 0.05); 119 | } 120 | 121 | /* Style the dropdown arrow */ 122 | .sort-select { 123 | appearance: none; 124 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a7b3d0' d='M6 8L2 4h8z'/%3E%3C/svg%3E"); 125 | background-repeat: no-repeat; 126 | background-position: right 0.75rem center; 127 | padding-right: 2.5rem; 128 | } 129 | 130 | /* Mobile responsiveness */ 131 | @media (max-width: 720px) { 132 | .controls-container { 133 | flex-direction: column; 134 | } 135 | 136 | .search-container { 137 | width: 100%; 138 | } 139 | 140 | .sort-container { 141 | width: 100%; 142 | } 143 | 144 | .sort-select { 145 | flex: 1; 146 | } 147 | } 148 | ``` 149 | 150 | ### 3. JavaScript Changes (assets/app.js) 151 | 152 | Replace the sorting logic and add sort functionality: 153 | 154 | ```javascript 155 | async function fetchContributors() { 156 | const elList = document.getElementById("contributors"); 157 | const elCount = document.getElementById("count"); 158 | const elLoading = document.getElementById("loading"); 159 | const elError = document.getElementById("error"); 160 | const sortSelect = document.getElementById("sortSelect"); 161 | 162 | // ... existing code for fetching data ... 163 | 164 | const people = lines 165 | .map((line) => { 166 | try { 167 | return JSON.parse(line); 168 | } catch { 169 | return null; 170 | } 171 | }) 172 | .filter(Boolean); 173 | 174 | // Function to sort contributors 175 | function sortContributors(contributors, sortType) { 176 | const sorted = [...contributors]; // Create a copy 177 | 178 | switch(sortType) { 179 | case 'newest': 180 | sorted.sort((a, b) => 181 | (b.addedAt || "").localeCompare(a.addedAt || "") || 182 | (a.name || "").localeCompare(b.name || "") 183 | ); 184 | break; 185 | case 'oldest': 186 | sorted.sort((a, b) => 187 | (a.addedAt || "").localeCompare(b.addedAt || "") || 188 | (a.name || "").localeCompare(b.name || "") 189 | ); 190 | break; 191 | case 'name-asc': 192 | sorted.sort((a, b) => 193 | (a.name || a.username || "").localeCompare(b.name || b.username || "") 194 | ); 195 | break; 196 | case 'name-desc': 197 | sorted.sort((a, b) => 198 | (b.name || b.username || "").localeCompare(a.name || a.username || "") 199 | ); 200 | break; 201 | } 202 | 203 | return sorted; 204 | } 205 | 206 | // Function to render contributors 207 | function renderContributors(contributors) { 208 | elList.innerHTML = ""; 209 | const contributorElements = []; 210 | 211 | for (const p of contributors) { 212 | // ... existing code to create cards (lines 57-102) ... 213 | // Keep all the existing card creation code here 214 | 215 | contributorElements.push({ 216 | element: a, 217 | name: (p.name || "").toLowerCase(), 218 | username: (p.username || "").toLowerCase(), 219 | }); 220 | } 221 | 222 | return contributorElements; 223 | } 224 | 225 | // Initial sort and render 226 | let sortedPeople = sortContributors(people, 'newest'); 227 | let contributorElements = renderContributors(sortedPeople); 228 | 229 | // Set up sort change listener 230 | if (sortSelect) { 231 | sortSelect.addEventListener('change', (e) => { 232 | const sortType = e.target.value; 233 | sortedPeople = sortContributors(people, sortType); 234 | contributorElements = renderContributors(sortedPeople); 235 | 236 | // Re-apply search filter if there's a search term 237 | const searchInput = document.getElementById("searchInput"); 238 | if (searchInput && searchInput.value) { 239 | const searchTerm = searchInput.value.toLowerCase(); 240 | contributorElements.forEach(({ element, name, username }) => { 241 | if (name.includes(searchTerm) || username.includes(searchTerm)) { 242 | element.style.display = ""; 243 | } else { 244 | element.style.display = "none"; 245 | } 246 | }); 247 | } 248 | }); 249 | } 250 | 251 | // Set up search functionality (keep existing search code) 252 | const searchInput = document.getElementById("searchInput"); 253 | if (searchInput) { 254 | searchInput.addEventListener("input", (e) => { 255 | const searchTerm = e.target.value.toLowerCase(); 256 | 257 | contributorElements.forEach(({ element, name, username }) => { 258 | if (name.includes(searchTerm) || username.includes(searchTerm)) { 259 | element.style.display = ""; 260 | } else { 261 | element.style.display = "none"; 262 | } 263 | }); 264 | }); 265 | } 266 | 267 | elCount.textContent = `${people.length} contributor${ 268 | people.length === 1 ? "" : "s" 269 | }`; 270 | elLoading.remove(); 271 | } 272 | ``` 273 | 274 | ## Steps to Implement 275 | 276 | 1. Fork this repository 277 | 2. Create a new branch: `git checkout -b feature/sort-contributors` 278 | 3. Add the HTML dropdown in `index.html` 279 | 4. Add the CSS styles in `assets/styles.css` 280 | 5. Refactor the JavaScript in `assets/app.js` to support sorting 281 | 6. Test locally: 282 | - Try each sort option 283 | - Verify sorting works correctly 284 | - Test that search still works after changing sort 285 | - Check mobile responsiveness 286 | 7. Commit your changes: `git commit -m "Add sorting options for contributors"` 287 | 8. Push to your fork: `git push origin feature/sort-contributors` 288 | 9. Open a Pull Request 289 | 290 | ## Testing Checklist 291 | 292 | - [ ] Dropdown appears next to search box 293 | - [ ] All sort options work correctly 294 | - [ ] "Newest First" sorts by addedAt descending 295 | - [ ] "Oldest First" sorts by addedAt ascending 296 | - [ ] "Name (A-Z)" sorts alphabetically 297 | - [ ] "Name (Z-A)" sorts reverse alphabetically 298 | - [ ] Search functionality still works after sorting 299 | - [ ] Dropdown is styled consistently with the theme 300 | - [ ] Mobile layout works well 301 | - [ ] No console errors 302 | 303 | ## Bonus Features (Optional) 304 | 305 | - Save the selected sort preference to localStorage 306 | - Add a visual indicator for the active sort 307 | - Add more sort options (e.g., by username) 308 | 309 | ## Tips 310 | 311 | - Test with contributors that have and don't have `addedAt` values 312 | - Make sure the refactored code doesn't break existing functionality 313 | - Consider edge cases (empty lists, single contributor, etc.) 314 | 315 | --- 316 | **Good first issue** - Great for learning about array sorting and DOM manipulation! 🔄 317 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/12-add-scroll-to-top.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: ⬆️ Add "Scroll to Top" button 3 | about: Add a floating button that appears when scrolling down to quickly return to top 4 | title: "Add scroll to top button" 5 | labels: ["good first issue", "enhancement", "ui/ux"] 6 | assignees: '' 7 | --- 8 | 9 | ## Description 10 | Add a floating "Scroll to Top" button that appears when the user scrolls down the page, making it easy to quickly return to the top of the contributor list. 11 | 12 | ## Proposed Feature 13 | A circular button with an up arrow icon that: 14 | - Appears when user scrolls down past a certain point 15 | - Smoothly scrolls back to the top when clicked 16 | - Fades in/out with smooth transitions 17 | - Is positioned in the bottom-right corner 18 | - Works on both desktop and mobile 19 | 20 | ## Current Behavior 21 | - No way to quickly scroll back to top 22 | - Users must manually scroll back up 23 | - On pages with many contributors, this can be tedious 24 | 25 | ## Expected Behavior 26 | - Button appears after scrolling down ~400px 27 | - Button fades in smoothly 28 | - Clicking button smoothly scrolls to top 29 | - Button fades out when at the top of the page 30 | - Button is accessible and keyboard-friendly 31 | 32 | ## Implementation Details 33 | 34 | ### 1. HTML Changes (index.html) 35 | 36 | Add the button before the closing `` tag (around line 95): 37 | 38 | ```html 39 | 40 | 41 | 46 | 47 | 48 | ``` 49 | 50 | ### 2. CSS Changes (assets/styles.css) 51 | 52 | Add these styles at the end of the file: 53 | 54 | ```css 55 | /* Scroll to Top Button */ 56 | .scroll-to-top { 57 | position: fixed; 58 | bottom: 2rem; 59 | right: 2rem; 60 | width: 50px; 61 | height: 50px; 62 | border-radius: 50%; 63 | background: linear-gradient(135deg, var(--accent), var(--accent-2)); 64 | color: var(--bg); 65 | border: none; 66 | cursor: pointer; 67 | display: flex; 68 | align-items: center; 69 | justify-content: center; 70 | opacity: 0; 71 | visibility: hidden; 72 | transform: translateY(100px); 73 | transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 74 | box-shadow: 0 4px 12px rgba(107, 226, 255, 0.3); 75 | z-index: 1000; 76 | } 77 | 78 | .scroll-to-top.visible { 79 | opacity: 1; 80 | visibility: visible; 81 | transform: translateY(0); 82 | } 83 | 84 | .scroll-to-top:hover { 85 | transform: translateY(-4px) scale(1.05); 86 | box-shadow: 0 6px 20px rgba(107, 226, 255, 0.4); 87 | } 88 | 89 | .scroll-to-top:active { 90 | transform: translateY(-2px) scale(1.02); 91 | } 92 | 93 | .scroll-to-top:focus { 94 | outline: 2px solid var(--accent); 95 | outline-offset: 4px; 96 | } 97 | 98 | .scroll-to-top svg { 99 | width: 24px; 100 | height: 24px; 101 | } 102 | 103 | /* Mobile adjustments */ 104 | @media (max-width: 720px) { 105 | .scroll-to-top { 106 | bottom: 1.5rem; 107 | right: 1.5rem; 108 | width: 45px; 109 | height: 45px; 110 | } 111 | 112 | .scroll-to-top svg { 113 | width: 20px; 114 | height: 20px; 115 | } 116 | } 117 | 118 | /* Respect safe areas on iOS */ 119 | @media (max-width: 720px) { 120 | .scroll-to-top { 121 | bottom: calc(1.5rem + env(safe-area-inset-bottom)); 122 | right: calc(1.5rem + env(safe-area-inset-right)); 123 | } 124 | } 125 | 126 | /* Animation for button pulse (optional) */ 127 | @keyframes pulse-glow { 128 | 0%, 100% { 129 | box-shadow: 0 4px 12px rgba(107, 226, 255, 0.3); 130 | } 131 | 50% { 132 | box-shadow: 0 4px 20px rgba(107, 226, 255, 0.5); 133 | } 134 | } 135 | 136 | .scroll-to-top.visible { 137 | animation: pulse-glow 2s ease-in-out infinite; 138 | } 139 | 140 | .scroll-to-top:hover { 141 | animation: none; /* Stop pulse on hover */ 142 | } 143 | ``` 144 | 145 | ### 3. JavaScript Changes (assets/app.js) 146 | 147 | Add this function to handle the scroll-to-top functionality: 148 | 149 | ```javascript 150 | function initScrollToTop() { 151 | const scrollButton = document.getElementById('scrollToTop'); 152 | if (!scrollButton) return; 153 | 154 | // Show/hide button based on scroll position 155 | function toggleScrollButton() { 156 | const scrollThreshold = 400; // Show after scrolling 400px 157 | 158 | if (window.pageYOffset > scrollThreshold) { 159 | scrollButton.classList.add('visible'); 160 | } else { 161 | scrollButton.classList.remove('visible'); 162 | } 163 | } 164 | 165 | // Scroll to top when button is clicked 166 | function scrollToTop() { 167 | window.scrollTo({ 168 | top: 0, 169 | behavior: 'smooth' 170 | }); 171 | } 172 | 173 | // Event listeners 174 | window.addEventListener('scroll', toggleScrollButton); 175 | scrollButton.addEventListener('click', scrollToTop); 176 | 177 | // Keyboard support 178 | scrollButton.addEventListener('keydown', (e) => { 179 | if (e.key === 'Enter' || e.key === ' ') { 180 | e.preventDefault(); 181 | scrollToTop(); 182 | } 183 | }); 184 | 185 | // Initial check 186 | toggleScrollButton(); 187 | } 188 | 189 | // Update the boot function 190 | function boot() { 191 | fetchContributors(); 192 | initScrollToTop(); 193 | } 194 | ``` 195 | 196 | ### Alternative: Throttle Scroll Event for Better Performance 197 | 198 | For better performance with many scroll events: 199 | 200 | ```javascript 201 | function initScrollToTop() { 202 | const scrollButton = document.getElementById('scrollToTop'); 203 | if (!scrollButton) return; 204 | 205 | let isScrolling; 206 | 207 | function toggleScrollButton() { 208 | const scrollThreshold = 400; 209 | 210 | if (window.pageYOffset > scrollThreshold) { 211 | scrollButton.classList.add('visible'); 212 | } else { 213 | scrollButton.classList.remove('visible'); 214 | } 215 | } 216 | 217 | function scrollToTop() { 218 | window.scrollTo({ 219 | top: 0, 220 | behavior: 'smooth' 221 | }); 222 | } 223 | 224 | // Throttled scroll handler 225 | window.addEventListener('scroll', () => { 226 | // Clear timeout if it exists 227 | window.clearTimeout(isScrolling); 228 | 229 | // Set a timeout to run after scrolling ends 230 | isScrolling = setTimeout(toggleScrollButton, 50); 231 | }); 232 | 233 | scrollButton.addEventListener('click', scrollToTop); 234 | 235 | toggleScrollButton(); 236 | } 237 | ``` 238 | 239 | ### Alternative: Using Intersection Observer (Modern Approach) 240 | 241 | ```javascript 242 | function initScrollToTop() { 243 | const scrollButton = document.getElementById('scrollToTop'); 244 | if (!scrollButton) return; 245 | 246 | // Create a sentinel element at the top 247 | const sentinel = document.createElement('div'); 248 | sentinel.style.position = 'absolute'; 249 | sentinel.style.top = '400px'; 250 | sentinel.style.height = '1px'; 251 | document.body.insertBefore(sentinel, document.body.firstChild); 252 | 253 | // Observe when we scroll past the sentinel 254 | const observer = new IntersectionObserver( 255 | ([entry]) => { 256 | if (entry.isIntersecting) { 257 | scrollButton.classList.remove('visible'); 258 | } else { 259 | scrollButton.classList.add('visible'); 260 | } 261 | }, 262 | { threshold: 0 } 263 | ); 264 | 265 | observer.observe(sentinel); 266 | 267 | scrollButton.addEventListener('click', () => { 268 | window.scrollTo({ 269 | top: 0, 270 | behavior: 'smooth' 271 | }); 272 | }); 273 | } 274 | ``` 275 | 276 | ## Steps to Implement 277 | 278 | 1. Fork this repository 279 | 2. Create a new branch: `git checkout -b feature/scroll-to-top` 280 | 3. Add the HTML button in `index.html` 281 | 4. Add the CSS styles in `assets/styles.css` 282 | 5. Add the JavaScript functionality in `assets/app.js` 283 | 6. Test locally: 284 | - Scroll down the page 285 | - Verify button appears after scrolling ~400px 286 | - Click the button and verify smooth scroll to top 287 | - Test on mobile devices/emulation 288 | - Test keyboard navigation (Tab to button, Enter to activate) 289 | 7. Commit your changes: `git commit -m "Add scroll to top button"` 290 | 8. Push to your fork: `git push origin feature/scroll-to-top` 291 | 9. Open a Pull Request 292 | 293 | ## Testing Checklist 294 | 295 | - [ ] Button appears after scrolling down 296 | - [ ] Button hides when near the top 297 | - [ ] Clicking button smoothly scrolls to top 298 | - [ ] Button fade in/out transitions work smoothly 299 | - [ ] Button is positioned correctly on desktop 300 | - [ ] Button is positioned correctly on mobile 301 | - [ ] Button doesn't cover important content 302 | - [ ] Keyboard navigation works (Tab, Enter) 303 | - [ ] Focus outline is visible 304 | - [ ] Button works on iOS (safe area respected) 305 | - [ ] No console errors 306 | 307 | ## Accessibility Considerations 308 | 309 | - Button has proper `aria-label` 310 | - Button has visible focus indicator 311 | - Button is keyboard accessible 312 | - Button has a descriptive `title` attribute 313 | - Button color contrast meets WCAG standards 314 | 315 | ## Design Tips 316 | 317 | - Keep the button subtle but noticeable 318 | - Use the existing color scheme (accent colors) 319 | - Add smooth animations for a polished feel 320 | - Ensure the button doesn't interfere with other content 321 | - Test with different scroll speeds 322 | 323 | ## Browser Support 324 | 325 | - Smooth scroll behavior works in modern browsers 326 | - For older browsers, add a fallback: 327 | 328 | ```javascript 329 | function scrollToTop() { 330 | if ('scrollBehavior' in document.documentElement.style) { 331 | window.scrollTo({ 332 | top: 0, 333 | behavior: 'smooth' 334 | }); 335 | } else { 336 | // Fallback for older browsers 337 | window.scrollTo(0, 0); 338 | } 339 | } 340 | ``` 341 | 342 | ## Optional Enhancements 343 | 344 | - Add a progress indicator (show scroll percentage) 345 | - Add haptic feedback on mobile 346 | - Animate the arrow on hover 347 | - Add a tooltip 348 | 349 | --- 350 | **Good first issue** - Perfect for learning scroll events and smooth scrolling! ⬆️ 351 | --------------------------------------------------------------------------------