Skip to content

Commit 9f683cd

Browse files
coffeecookeycoffeecookey
authored
Merge branch 'main' into Fashion-lookbook-contact
2 parents 422717a + e8f5758 commit 9f683cd

File tree

12 files changed

+799
-51
lines changed

12 files changed

+799
-51
lines changed

‎Alumni Network/image1.jpg

Loading

‎Alumni Network/image2.jpg

Loading

‎Alumni Network/image3.jpg

Loading

‎Alumni Network/image4.jpg

Loading

‎Alumni Network/index.html

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<link rel="preconnect" href="https://fonts.googleapis.com">
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1010
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
11+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
1112
</head>
1213
<body>
1314
<header>
@@ -58,10 +59,12 @@ <h2>Upcoming Events</h2>
5859
<div id="event-list"></div>
5960
</section>
6061

61-
<section id="directory">
62+
<section id="alumni">
6263
<h2>Alumni Directory</h2>
63-
<input type="text" id="search-alumni" placeholder="Search alumni...">
64-
<div id="alumni-list"></div>
64+
<input type="text" id="search-alumni" placeholder="Search Alumni by Name or Company">
65+
<div id="alumni-list">
66+
<!-- Example Alumni Cards will be added dynamically -->
67+
</div>
6568
</section>
6669

6770
<section id="jobs">

‎Alumni Network/script.js

Lines changed: 79 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@ const events = [
55
{ title: "Career Fair", date: "2024-09-10", location: "IGDTUW Auditorium" }
66
];
77

8-
const alumni = [
9-
{ name: "Priya Sharma", graduationYear: 2020, company: "Google" },
10-
{ name: "Neha Gupta", graduationYear: 2018, company: "Microsoft" },
11-
{ name: "Anjali Desai", graduationYear: 2019, company: "Amazon" }
12-
];
13-
148
const jobs = [
159
{ title: "Software Engineer", company: "TechCorp", location: "Delhi" },
1610
{ title: "Data Scientist", company: "AI Solutions", location: "Bangalore" },
@@ -32,21 +26,6 @@ function populateEvents() {
3226
});
3327
}
3428

35-
// Populate alumni directory
36-
function populateAlumni() {
37-
const alumniList = document.getElementById('alumni-list');
38-
alumni.forEach(alum => {
39-
const alumCard = document.createElement('div');
40-
alumCard.classList.add('card');
41-
alumCard.innerHTML = `
42-
<h3>${alum.name}</h3>
43-
<p>Graduation Year: ${alum.graduationYear}</p>
44-
<p>Company: ${alum.company}</p>
45-
`;
46-
alumniList.appendChild(alumCard);
47-
});
48-
}
49-
5029
// Populate job board
5130
function populateJobs() {
5231
const jobList = document.getElementById('job-list');
@@ -62,29 +41,86 @@ function populateJobs() {
6241
});
6342
}
6443

65-
// Search alumni
66-
function searchAlumni() {
67-
const searchInput = document.getElementById('search-alumni');
68-
const alumniList = document.getElementById('alumni-list');
44+
// Sample alumni data
45+
const alumniData = [
46+
{
47+
name: "Monkey D. Luffy",
48+
designation: "Data Scientist",
49+
company: "DataWorks",
50+
image: "image1.jpg", // replace with actual image path
51+
linkedin: "https://linkedin.com/in/michaelbrown",
52+
github: "https://github.com/michaelbrown",
53+
twitter: "https://twitter.com/michaelbrown"
54+
},
55+
{
56+
name: "Naruto Uzumaki",
57+
designation: "Senior Developer",
58+
company: "TechCorp",
59+
image: "image2.jpg", // replace with actual image path
60+
linkedin: "https://linkedin.com/in/johndoe",
61+
github: "https://github.com/johndoe",
62+
twitter: "https://twitter.com/johndoe"
63+
},
64+
{
65+
name: "Yagami Light",
66+
designation: "Data Scientist",
67+
company: "DataWorks",
68+
image: "image3.jpg", // replace with actual image path
69+
linkedin: "https://linkedin.com/in/michaelbrown",
70+
github: "https://github.com/michaelbrown",
71+
twitter: "https://twitter.com/michaelbrown"
72+
},
73+
{
74+
name: "Uchiha Sasuke",
75+
designation: "Data Scientist",
76+
company: "DataWorks",
77+
image: "image4.jpg", // replace with actual image path
78+
linkedin: "https://linkedin.com/in/michaelbrown",
79+
github: "https://github.com/michaelbrown",
80+
twitter: "https://twitter.com/michaelbrown"
81+
},
82+
];
6983

70-
searchInput.addEventListener('input', (e) => {
71-
const searchTerm = e.target.value.toLowerCase();
72-
const filteredAlumni = alumni.filter(alum =>
73-
alum.name.toLowerCase().includes(searchTerm) ||
74-
alum.company.toLowerCase().includes(searchTerm)
75-
);
84+
// Render alumni cards dynamically
85+
function renderAlumni(alumniList) {
86+
const alumniListContainer = document.getElementById('alumni-list');
87+
alumniListContainer.innerHTML = '';
7688

77-
alumniList.innerHTML = '';
78-
filteredAlumni.forEach(alum => {
79-
const alumCard = document.createElement('div');
80-
alumCard.classList.add('card');
81-
alumCard.innerHTML = `
82-
<h3>${alum.name}</h3>
83-
<p>Graduation Year: ${alum.graduationYear}</p>
84-
<p>Company: ${alum.company}</p>
85-
`;
86-
alumniList.appendChild(alumCard);
87-
});
89+
alumniList.forEach(alumni => {
90+
const alumniCard = document.createElement('div');
91+
alumniCard.classList.add('alumni-card');
92+
93+
alumniCard.innerHTML = `
94+
<img src="${alumni.image}" alt="Alumni Image">
95+
<div class="alumni-info">
96+
<h3>${alumni.name}</h3>
97+
<p class="designation">${alumni.designation}</p>
98+
<p class="company">${alumni.company}</p>
99+
<div class="social-links">
100+
<a href="${alumni.linkedin}" target="_blank"><i class="fab fa-linkedin"></i></a>
101+
<a href="${alumni.github}" target="_blank"><i class="fab fa-github"></i></a>
102+
<a href="${alumni.twitter}" target="_blank"><i class="fab fa-twitter"></i></a>
103+
</div>
104+
</div>
105+
`;
106+
107+
alumniListContainer.appendChild(alumniCard);
108+
});
109+
}
110+
111+
// Initial render of all alumni
112+
renderAlumni(alumniData);
113+
114+
// Search functionality
115+
const searchAlumniInput = document.getElementById('search-alumni');
116+
if (searchAlumniInput) {
117+
searchAlumniInput.addEventListener('input', function (event) {
118+
const searchQuery = event.target.value.toLowerCase();
119+
const filteredAlumni = alumniData.filter(alumni =>
120+
alumni.name.toLowerCase().includes(searchQuery) ||
121+
alumni.company.toLowerCase().includes(searchQuery)
122+
);
123+
renderAlumni(filteredAlumni);
88124
});
89125
}
90126

@@ -104,11 +140,9 @@ function handleMentorshipForm() {
104140
// Initialize the page
105141
function init() {
106142
populateEvents();
107-
populateAlumni();
108143
populateJobs();
109-
searchAlumni();
110144
handleMentorshipForm();
111145
}
112146

113147
// Run initialization when the DOM is fully loaded
114-
document.addEventListener('DOMContentLoaded', init);
148+
document.addEventListener('DOMContentLoaded', init);

‎Alumni Network/styles.css

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -284,3 +284,91 @@ footer {
284284
margin-right: 1rem;
285285
}
286286
}
287+
288+
/* Alumni Section */
289+
#alumni {
290+
text-align: center;
291+
padding: 35px 50px;
292+
}
293+
294+
#alumni h2 {
295+
font-size: 2rem; /* Increase the font size */
296+
font-weight: bold; /* Make the text bold */
297+
text-align: center; /* Center-align the heading */
298+
color: #2c3e50; /* Dark color for the heading */
299+
margin-bottom: 10px; /* Add some space below the heading */
300+
padding: 10px 0; /* Add some vertical padding */
301+
letter-spacing: 2px; /* Add space between letters */
302+
}
303+
304+
#search-alumni {
305+
width: 60%;
306+
padding: 10px;
307+
margin-bottom: 35px;
308+
font-size: 1rem;
309+
border-radius: 5px;
310+
border: 1px solid #ccc;
311+
}
312+
313+
#alumni-list {
314+
display: grid;
315+
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
316+
gap: 20px;
317+
justify-items: center;
318+
}
319+
320+
/* Alumni Card Styling */
321+
.alumni-card {
322+
background-color: #fff;
323+
border-radius: 10px;
324+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
325+
overflow: hidden;
326+
max-width: 300px;
327+
width: 100%;
328+
transition: transform 0.3s ease, box-shadow 0.3s ease;
329+
}
330+
331+
.alumni-card img {
332+
width: 100%;
333+
height: 200px;
334+
object-fit: cover;
335+
}
336+
337+
.alumni-info {
338+
padding: 20px;
339+
text-align: center;
340+
}
341+
342+
.alumni-info h3 {
343+
font-size: 1.2rem;
344+
margin-bottom: 5px;
345+
}
346+
347+
.alumni-info .designation,
348+
.alumni-info .company {
349+
font-size: 1rem;
350+
color: #666;
351+
margin: 5px 0;
352+
}
353+
354+
.social-links {
355+
margin-top: 15px;
356+
}
357+
358+
.social-links a {
359+
font-size: 1.5rem;
360+
color: #333;
361+
margin: 0 10px;
362+
text-decoration: none;
363+
transition: color 0.3s ease;
364+
}
365+
366+
.social-links a:hover {
367+
color: #0077b5; /* LinkedIn Blue on hover */
368+
}
369+
370+
/* Hover effect for alumni card */
371+
.alumni-card:hover {
372+
transform: translateY(-10px);
373+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
374+
}

0 commit comments

Comments
 (0)