forked from ksauraj/GitHub-Bootcamp
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
106 lines (94 loc) · 15.6 KB
/
index.html
File metadata and controls
106 lines (94 loc) · 15.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Contributors</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class'
}
</script>
<style>
body {
transition: background-color 0.3s, color 0.3s;
}
</style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
<div class="container mx-auto px-4 py-8">
<div class="flex justify-between items-center mb-8">
<h1 class="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 dark:from-purple-300 dark:via-pink-400 dark:to-red-400">
Project Contributors
</h1>
<button id="theme-toggle" class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-600">
Toggle Theme
</button>
</div>
<div id="userCards" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- User cards will be dynamically inserted here -->
</div>
</div>
<script>
// Predefined user data from Python generation
const USERS = [{"name": "Sri Aditya Kumar Nayak", "githubUsername": "codeAD53", "bio": "Tech enthusiast passionate about open-source contributions, building personal projects and new programming languages. Always seeking new challenges and opportunities to grow within the tech community.", "pfpurl": "https://avatars.githubusercontent.com/u/174350880?v=4.jpg", "socialLinks": {"GitHub": "https://github.com/codeAD53", "LinkedIn": "https://www.linkedin.com/in/aditya-nayak-801b29318/"}}, {"name": "Ragha Agrawal", "githubUsername": "raghav1128", "bio": "NA", "pfpUrl": "https://avatars.githubusercontent.com/u/183445587?v=4", "socialLinks": {"GitHub": "https://github.com/raghav1128", "LinkedIn": "www.linkedin.com/in/raghav-agrawal-b780a7307"}}, {"name": "Aman YAdav", "githubUsername": "Aman-Yadav82", "bio": "Movies Lover", "pfpUrl": "https://i.pinimg.com/736x/9c/ef/53/9cef53fe47a62c9eefa503f8ed5c6e19.jpg", "socialLinks": {"github": "https://github.com/Aman-Yadav82", "linkedin": "www.linkedin.com/in/aman-yadav-172b30341"}}, {"name": "Ashutosh Singh", "githubUsername": "jai-loading", "bio": "...loading", "pfpUrl": "https://www.reddit.com/media?url=https%3A%2F%2Fpreview.redd.it%2Fmy-favorite-official-thomas-shelby-artwork-v0-khgxvkbzflyc1.jpeg%3Fauto%3Dwebp%26s%3D9808f0a06d0fab27748c8b4e16d38913b9af75be", "socialLinks": {"GitHub": "https://github.com/Jai-loading", "LinkedIn": "https://www.linkedin.com/in/ashutosh-singh-0b8181310/"}}, {"name": "Aviral Rajput", "githubUsername": "AviralRajput", "bio": "MY self Aviral and I am student of kiet group of institution and I am interested in app development. ", "pfpUrl": "download.jpeg", "socialLinks": {"GitHub": "https://github.com/AviralRajput", "LinkedIn": "www.linkedin.com/in/aviral-rajput-077a37309"}}, {"name": "Ayan Khan", "githubUsername": "AyanKhan-IT", "bio": "android developer", "pfpUrl": "https://gratisography.com/wp-content/uploads/2024/11/gratisography-augmented-reality-800x525.jpg", "socialLinks": {"github": "https://github.com/AyanKhan-IT"}}, {"name": "Ayush Gupta", "githubUsername": "ayushgupta344", "bio": "android developer", "pfpUrl": "https://avatars.githubusercontent.com/u/143984267?v=4", "socialLinks": {"github": "https://github.com/ayushgupta344"}}, {"name": "Daksh Arora", "githubUsername": "DAKSH2645", "bio": "A short professional or personal bio", "pfpUrl": "https://github.com/DAKSH2645", "socialLinks": {"GitHub": "https://github.com/DAKSH2645", "LinkedIn": "www.linkedin.com/in/daksh-arora-0135821a7"}}, {"name": "Harshit", "githubUsername": "Harshittomar", "bio": "slow learner", "pfpUrl": "https://avatars.githubusercontent.com/u/170227326?v=4", "socialLinks": {"github": "https://github.com/Harhittomar", "linkedin": "https://www.linkedin.com/in/harshit-tomar-5b4889308/"}}, {"name": "Janhavi Srivastava", "githubUsername": "JanhaviSrivastava006", "bio": "A short professional or personal bio", "pfpUrl": "https://wallpapers.com/images/hd/profile-picture-f67r1m9y562wdtin.jpg", "socialLinks": {"GitHub": "https://github.com/JanhaviSrivastava006", "LinkedIn": "https://linkedin.com/in/Janhavi Srivastava"}}, {"name": "Krishna kumar", "githubUsername": "krishna13771", "bio": "B-TECH student", "pfpUrl": "https://media.gettyimages.com/id/1151411559/photo/london-england-ms-dhoni-of-india-poses-for-a-portrait-prior-to-the-icc-cricket-world-cup-2019.jpg?s=612x612&w=gi&k=20&c=wiCb_OsURlheapzOTKDd3Bv2wNc6HcwKzJZ-xmmRbuI=", "socialLinks": {"GitHub": "https://github.com/Krishna13771", "LinkedIn": "https://www.linkedin.com/in/krishna-kumar-96b713306/"}}, {"name": "Mohammad Maksood", "githubUsername": "Maksood2048", "bio": "Computer software Engineer passionate", "pfpUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRT1InqG6-QPRDtHZP-HTS6JMfgF3ir_kFbMA&s", "socialLinks": {"github": "https://github.com/Maksood2048", "twitter": "https://x.com/elonmusk?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"}}, {"name": "Mohd Yavar", "githubUsername": "Yavar10", "bio": "Java and stuff", "pfpUrl": "https://upload.wikimedia.org/wikipedia/en/thumb/4/47/FC_Barcelona_%28crest%29.svg/300px-FC_Barcelona_%28crest%29.svg.png", "socialLinks": {"GitHub": "https://github.com/Yavar10", "LinkedIn": "https://linkedin.com/in/mohdyavar"}}, {"name": "Nandani gupta", "githubUsername": "Nandani-gupta22", "bio": "pursuring btech at kiet college", "pfpUrl": "https://wallpapers.com/images/hd/profile-picture-f67r1m9y562wdtin.jpg", "socialLinks": {"GitHub": "https://github.com/Nandani-gupta22", "LinkedIn": "https://linkdin com/in/Nandani Gupta"}}, {"name": "Nitin Jaiswal", "githubUsername": "nitinjaiswal02", "bio": "exploring the tech world ", "pfpUrl": "https://wallpaperaccess.com/full/1672449.jpg", "socialLinks": {"github": "https://github.com/nitinjaiswal02", "LinkedIn": "https://www.linkedin.com/in/nitin-jaiswal-219545328/"}}, {"name": "Prakhar Raj", "githubUsername": "Prakharraj22", "bio": "Machine Learning Engineer passionate about AI ethics", "pfpUrl": "https://avatars.githubusercontent.com/u/192139925?s=96&v=4", "socialLinks": {"github": "https://github.com/Prakharraj22", "linkedin": "https://www.linkedin.com/in/prakhar-raj-5870a9328?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app"}}, {"name": "Saksham Bot Account", "githubusername": "A bot account maintd by saksham", "pfpUrl": "https://avatars.githubusercontent.com/u/67464926?v=4"}, {"name": "Shrajal Pandey", "githubUsername": "shrajal01", "bio": "tech-enthusiast", "pfpUrl": "https://github.com/account", "socialLinks": {"GitHub": "https://github.com/shrajal01", "LinkedIn": "https://www.linkedin.com/in/shrajal-pandey-6911a4327/"}}, {"name": "Siddhant Shukla", "githubUsername": "Siddhant-git-2909", "bio": "A short professional or personal bio", "pfpUrl": "https://github.com/account", "socialLinks": {"GitHub": "https://github.com/Siddhant-git-2909", "LinkedIn": "https://www.linkedin.com/in/siddhant-shukla-3b4a19328/"}}, {"name": "Somesh Tiwari", "githubUsername": "someshxdcode", "bio": "hello,i'm somesh . i'm learning javascript", "pfpUrl": "https://github.com/account", "socialLinks": {"GitHub": "https://github.com/someshxdcode", "LinkedIn": "https://linkedin.com/in/someshxd"}}, {"name": "Swatantra Yadav", "githubUsername": "Swatantra-66", "bio": "Web3 Enthusiast", "pfpUrl": "", "socialLinks": {"GitHub": "https://github.com/Swatantra-66", "LinkedIn": "https://linkedin.com/in/swatantra-yadav-b5004420b"}}, {"name": "Tushar Gupta", "githubUsername": "Tushar5623", "bio": "Django Lead Developer", "pfpUrl": "https://yt3.googleusercontent.com/ytc/AIdro_klgvZS3LdOlpIBdznBEu5HN4pLP_IpOpGizLu6c7t2Tc8=s900-c-k-c0x00ffffff-no-rj", "socialLinks": {"github": "https://github.com/tushar5623", "linkedin": "https://www.linkedin.com/in/tushar-gupta-588433322/"}}, {"name": "SAnkit _Kushwaha", "githubUsername": "ankit563-ai", "bio": "Machine Learning Engineer passionate about AI ethics", "pfpUrl": "https://media.licdn.com/dms/image/v2/D5603AQHPIVEI6p970Q/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1731171680989?e=1740009600&v=beta&t=lD13oaMqVF0JbZZvFTsfOZppg8DBC0DYKPHU1oxK2_g", "socialLinks": {"github": "https://github.com/ankit563-ai", "LinkedIn": "https://www.linkedin.com/in/ankit-kushwaha-829a6b328/"}}, {"name": "Hakimi", "githubUsername": "hakimifr", "bio": "Machine Learning Engineer passionate about AI ethics", "pfpUrl": "https://avatars.githubusercontent.com/u/67860246?v=4", "socialLinks": {"github": "https://github.com/hakimifr", "twitter": "https://x.com/hakimifr"}}, {"name": "Lakshay Kaushik", "githubUsername": "Lakshay2212", "bio": "hehehehe", "pfpUrl": "https://wallpaperaccess.com/hajime-no-ippo", "socialLinks": {"github": "https://github.com/Lakshay2212"}}, {"name": "Murli Manohar Tiwari", "githubUsername": "itsmmt305", "bio": "Music enthusiast", "pfpUrl": "https://avatars.githubusercontent.com/u/94820934?v=4", "socialLinks": {"github": "https://github.com/itsmmt305", "linkedin": "https://www.linkedin.com/in/murli-manohar-tiwari-010414222/"}}, {"name": "Pranaya Singh", "githubUsername": "pranayasingh", "bio": "web developer", "pfpUrl": "https://avatars.githubusercontent.com/u/166522282?v=4", "socialLinks": {"github": "https://github.com/pranayasingh"}}, {"name": "ra1", "githubUsername": "Rishi2705", "bio": "Android Developer", "pfpUrl": "https://github.com/account", "socialLinks": {"github": "https://github.com/Rishi2705", "linkedin": "https://www.linkedin.com/in/rishi-arora2705/"}}, {"name": "Saksham", "githubUsername": "saksham3123", "bio": "github learner", "pfpUrl": "https://avatars.githubusercontent.com/u/176170222?s=400&v=4", "socialLinks": {"github": "https://github.com/saksham3123", "linkedin": "www.linkedin.com/in/saksham31203"}}, {"name": "Sauraj Kumar Singh", "githubUsername": "ksauraj", "bio": "Open source enthusiast and DevOps Lead", "pfpUrl": "https://avatars.githubusercontent.com/u/81681419?v=4", "socialLinks": {"github": "https://github.com/ksauraj", "linkedin": "https://www.linkedin.com/in/sauraj-kumar-singh-807295226"}}, {"name": "Saurav Kumar", "githubUsername": "your_github_username", "bio": "A short professional or personal bio", "pfpUrl": "https://link-to-your-profile-picture.jpg", "socialLinks": {"GitHub": "https://github.com/your_username", "LinkedIn": "https://linkedin.com/in/your_profile"}}, {"name": "Shalu Singh", "githubUsername": "shaluchan", "bio": "Open source enthusiast and DevOps", "pfpUrl": "https://avatars.githubusercontent.com/u/81681419?v=4", "socialLinks": {"github": "https://github.com/shaluchan", "linkedin": "https://www.linkedin.com/in/shalu-singh-26b32027b"}}, {"name": "Soniya Taneja", "githubUsername": "soniyataneja", "bio": "Web Developer", "pfpUrl": "https://cdn.vectorstock.com/i/1000v/24/22/software-developer-female-programmer-works-vector-51862422.jpg", "socialLinks": {"github": "https://github.com/soniyataneja", "linkedin": "https://www.linkedin.com/in/soniya-taneja-868680294/"}}, {"name": "suhani rathore", "githubUsername": "suhanichaturvedi", "bio": "Machine Learning Engineer passionate about AI ethics", "pfpUrl": "https://avatars.githubusercontent.com/u/67860246?v=4", "socialLinks": {"github": "https://github.com/hakimifr", "twitter": "https://x.com/hakimifr"}}, {"name": "Yash Raj", "githubUsername": "YashRaj1506", "bio": "Django Lead Developer", "pfpUrl": "https://avatars.githubusercontent.com/u/144276098?v=4", "socialLinks": {"github": "https://github.com/YashRaj1506", "linkedin": "https://www.linkedin.com/in/sauraj-kumar-singh-807295226"}}, {"name": "Yuvraj Singh", "githubUsername": "yuvrajsinghgmx", "bio": "android developer", "pfpUrl": "https://avatars.githubusercontent.com/u/143984267?v=4", "socialLinks": {"github": "https://github.com/yuvrajsinghgmx"}}, {"name": "Sauraj Bot Account", "githubUsername": "saurajbot", "bio": "A bot account for maintained by Ksauraj", "pfpUrl": "https://images.pexels.com/photos/14653174/pexels-photo-14653174.jpeg", "socialLinks": {"GitHub": "https://github.com/ksauraj", "LinkedIn": "https://linkedin.com/in/ksauraj"}}, {"name": "shreya baranwal", "githubUsername": "shreya229508", "bio": "A short professional or personal bio", "pfpUrl": "https://link-to-your-profile-picture.jpg", "socialLinks": {"GitHub": "https://github.com/shreya229508", "LinkedIn": "https://www.linkedin.com/in/shreya-baranwal-1103802a5?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app"}}];
// Dark Mode Toggle
const themeToggle = document.getElementById('theme-toggle');
const htmlElement = document.documentElement;
const userCardsContainer = document.getElementById('userCards');
// Theme toggling logic
themeToggle.addEventListener('click', () => {
htmlElement.classList.toggle('dark');
localStorage.setItem('theme',
htmlElement.classList.contains('dark') ? 'dark' : 'light'
);
});
// Initialize theme from localStorage
if (localStorage.getItem('theme') === 'dark') {
htmlElement.classList.add('dark');
}
// Function to create user cards
function createUserCard(user) {
const cardDiv = document.createElement('div');
cardDiv.className = 'bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105';
// Social links HTML generation
const socialLinksHTML = user.socialLinks
? Object.entries(user.socialLinks)
.map(([platform, url]) => `
<a href="${url}" target="_blank" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 mx-2">
${platform}
</a>
`)
.join('')
: '';
cardDiv.innerHTML = `
<div class="p-6 text-center">
<img
src="${user.pfpUrl || 'https://via.placeholder.com/150'}"
alt="${user.name}'s profile picture"
class="w-32 h-32 rounded-full mx-auto mb-4 object-cover border-4 border-gray-200 dark:border-gray-600"
>
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">
${user.name}
</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">
@${user.githubUsername}
</p>
<p class="text-sm text-gray-500 dark:text-gray-500 italic mb-4">
${user.bio || 'No bio provided'}
</p>
<div class="flex justify-center mt-4">
${socialLinksHTML}
</div>
</div>
`;
return cardDiv;
}
// Render all user cards
USERS.forEach(user => {
userCardsContainer.appendChild(createUserCard(user));
});
</script>
</body>
</html>