Skip to content

Commit

Permalink
Merge pull request #11 from V8V88V8V88/main
Browse files Browse the repository at this point in the history 
Enhance Website UI, Theme, and Member Section Structure"
  • Loading branch information
@V8V88V8V88
V8V88V8V88 authored Nov 17, 2024
2 parents cd710e6 + dd2b2b6 commit 2596130
Show file tree
Hide file tree
Showing 3 changed files with 532 additions and 416 deletions.
175 changes: 171 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,10 +157,177 @@ <h3>FOSS Hack Delhi-NCR</h3>
</div>
</section>

<section id="team" class="section">
<h2>Our Team</h2>
<div class="team-grid">
<!-- Team members will be dynamically added here -->

<section id="team">
<h2>Core Team</h2>
<div class="member-grid">
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Gautam Kumar">
<h3>Ms. Eirty Telang Kapoor</h3>
<p class="role">Convenor</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Vaibhav Pratap Singh">
<h3>Vaibhav Pratap Singh</h3>
<p class="role">President</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Suryansh Sharma">
<h3>Suryansh Sharma</h3>
<p class="role">Vice President</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Sachin Singh Adhikari">
<h3>Sachin Singh Adhikari</h3>
<p class="role">Secretary</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Ashwany Kumar Sharma">
<h3>Ashwany Kumar Sharma</h3>
<p class="role">Secretary</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Riyansh Varshney">
<h3>Riyansh Varshney</h3>
<p class="role">Event Coordinator</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Harshvardhan">
<h3>Harshvardhan</h3>
<p class="role">Event Coordinator</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Diksha Chauhan">
<h3>Diksha Chauhan</h3>
<p class="role">Event Coordinator</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Shresth Gupta">
<h3>Shresth Gupta</h3>
<p class="role">Event Coordinator</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Nishchal Anurag">
<h3>Nishchal Anurag</h3>
<p class="role">PR & Outreach</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Satyam Mishra">
<h3>Satyam Mishra</h3>
<p class="role">PR & Outreach</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Diti Vashisht">
<h3>Diti Vashisht</h3>
<p class="role">PR & Outreach</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Jayesh Bisht">
<h3>Jayesh Bisht</h3>
<p class="role">PR & Outreach</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Arul S Bharadwaj">
<h3>Arul S Bharadwaj</h3>
<p class="role">Graphic Designer</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Lovish Kukreja">
<h3>Ayush Kukreja</h3>
<p class="role">Graphic Designer</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Tiya Jain">
<h3>Tiya Jain</h3>
<p class="role">Social Media</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Vanya Raman">
<h3>Vanya Raman</h3>
<p class="role">Social Media</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Srijan Ranjan">
<h3>Srijan Ranjan</h3>
<p class="role">Social Media</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Vinay Chauhan">
<h3>Vinay Chauhan</h3>
<p class="role">Video Editor</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Gautam Kumar">
<h3>Gautam Kumar</h3>
<p class="role">Treasurer</p>
</div>
</div>
</section>

<section id="mentors">
<h2>Our Mentors</h2>
<div class="member-grid">
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Dr. Sarah Johnson">
<h3>Inzemam ul haq</h3>
<p class="role">Senior</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Prof. David Chen">
<h3>Kilari teja</h3>
<p class="role">Industry Mentor</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Prof. David Chen">
<h3>Ravpreet Maini</h3>
<p class="role">Cloud Expert</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Lisa Wong">
<h3>Shristi Pandey</h3>
<p class="role">Researcher</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Lisa Wong">
<h3>Palak</h3>
<p class="role">Graphics Designer</p>
</div>
</div>
</section>

<section id="active-members">
<h2>Active Members</h2>
<div class="member-grid">
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Alex Turner">
<h3>Hilal Ahmad</h3>
<p class="role">AI Guy</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Alex Turner">
<h3>Tanmay</h3>
<p class="role">Low Level</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Maria Garcia">
<h3>Mayank Chaubey</h3>
<p class="role">DSA Guy</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Tom Lee">
<h3>TSR</h3>
<p class="role">UI/UX Designer</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Sophia Chen">
<h3>AK</h3>
<p class="role">Friendly Spiderman</p>
</div>
<div class="member-card">
<img src="/api/placeholder/150/150" alt="Sophia Chen">
<h3>Avneesh</h3>
<p class="role">Designer</p>
</div>
</div>
</section>

Expand Down
136 changes: 52 additions & 84 deletions scripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,117 +8,85 @@ document.addEventListener("DOMContentLoaded", () => {

// Dark mode toggle
darkModeToggle.addEventListener("click", () => {
body.classList.toggle("light-mode");
const isLightMode = body.classList.contains("light-mode");
localStorage.setItem("lightMode", isLightMode);
updateModeIcon(isLightMode);
body.classList.toggle("light-mode");
const isLightMode = body.classList.contains("light-mode");
localStorage.setItem("lightMode", isLightMode);
updateModeIcon(isLightMode);
});

const savedLightMode = localStorage.getItem("lightMode");
if (savedLightMode === "true") {
body.classList.add("light-mode");
updateModeIcon(true);
body.classList.add("light-mode");
updateModeIcon(true);
}

function updateModeIcon(isLightMode) {
const icon = darkModeToggle.querySelector("i");
icon.className = isLightMode ? "fas fa-sun" : "fas fa-moon";
const icon = darkModeToggle.querySelector("i");
icon.className = isLightMode ? "fas fa-sun" : "fas fa-moon";
}

// Mobile navigation toggle
navToggle.addEventListener("click", () => {
navLinks.classList.toggle("active");
navLinks.classList.toggle("active");
});

// Smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener("click", function (e) {
e.preventDefault();
document.querySelector(this.getAttribute("href")).scrollIntoView({
behavior: "smooth",
anchor.addEventListener("click", function (e) {
e.preventDefault();
document.querySelector(this.getAttribute("href")).scrollIntoView({
behavior: "smooth",
});
});
});
});

// Glitch effect on main title
mainTitle.addEventListener("click", glitchEffect);
mainTitle.addEventListener("mouseover", glitchEffect);

function glitchEffect() {
const glitchText = "Welcome to the FOSS Club!";
const glitchChars = "!<>-_\\/[]{}—=+*^?#________";
let iterations = 0;

const interval = setInterval(() => {
mainTitle.textContent = glitchText
.split("")
.map((char, index) => {
if (index < iterations) {
return glitchText[index];
const glitchText = "Welcome to the FOSS Club!";
const glitchChars = "!<>-_\\/[]{}—=+*^?#________";
let iterations = 0;

const interval = setInterval(() => {
mainTitle.textContent = glitchText
.split("")
.map((char, index) => {
if (index < iterations) {
return glitchText[index];
}
return glitchChars[Math.floor(Math.random() * glitchChars.length)];
})
.join("");

if (iterations >= glitchText.length) {
clearInterval(interval);
mainTitle.textContent = glitchText;
}
return glitchChars[Math.floor(Math.random() * glitchChars.length)];
})
.join("");

if (iterations >= glitchText.length) {
clearInterval(interval);
mainTitle.textContent = glitchText;
}

iterations += 1 / 3;
}, 30);
iterations += 1 / 3;
}, 30);
}

// Join form submission
joinForm.addEventListener("submit", (e) => {
e.preventDefault();
alert("Thanks for your interest! We'll get back to you soon.");
joinForm.reset();
});
if (joinForm) {
joinForm.addEventListener("submit", (e) => {
e.preventDefault();
alert("Thanks for your interest! We'll get back to you soon.");
joinForm.reset();
});
}

// Team members data
const teamMembers = [
{ name: "John Doe", role: "President", image: "/api/placeholder/150/150" },
{
name: "Jane Smith",
role: "Vice President",
image: "/api/placeholder/150/150",
},
{
name: "Mike Johnson",
role: "Secretary",
image: "/api/placeholder/150/150",
},
{
name: "Emily Brown",
role: "Treasurer",
image: "/api/placeholder/150/150",
},
];
// Intersection Observer for animations
const animateOnScroll = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate');
}
});
}, { threshold: 0.1 });

// Populate team members
const teamGrid = document.querySelector(".team-grid");
teamMembers.forEach((member) => {
const memberElement = document.createElement("div");
memberElement.className = "team-member";
memberElement.innerHTML = `
<img src="${member.image}" alt="${member.name}">
<h3>${member.name}</h3>
<p>${member.role}</p>
`;
teamGrid.appendChild(memberElement);
document.querySelectorAll('.project-card, .event-item, .blog-post, .tool-card, .member-card').forEach(el => {
animateOnScroll.observe(el);
});
});

const darkModeToggle = document.getElementById("darkModeToggle");
const body = document.body;

darkModeToggle.addEventListener("click", () => {
body.classList.toggle("dark-mode");
localStorage.setItem("darkMode", body.classList.contains("dark-mode"));
});

// Check for saved dark mode preference
if (localStorage.getItem("darkMode") === "true") {
body.classList.add("dark-mode");
}
});
Loading

0 comments on commit 2596130

Please sign in to comment.