Website overhaul completed
This commit is contained in:
parent
4cb566828a
commit
9115a41488
18 changed files with 1407 additions and 263 deletions
158
index.html
158
index.html
|
|
@ -21,6 +21,24 @@
|
||||||
/>
|
/>
|
||||||
<!-- Main CSS -->
|
<!-- Main CSS -->
|
||||||
<link rel="stylesheet" href="src/styles/styles.css" />
|
<link rel="stylesheet" href="src/styles/styles.css" />
|
||||||
|
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="180x180"
|
||||||
|
href="src/favicon/apple-touch-icon.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="src/favicon/favicon-32x32.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="16x16"
|
||||||
|
href="src/favicon/favicon-16x16.png"
|
||||||
|
/>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -31,17 +49,19 @@
|
||||||
<!-- Navigation -->
|
<!-- Navigation -->
|
||||||
<nav id="navigation">
|
<nav id="navigation">
|
||||||
<div class="nav-container">
|
<div class="nav-container">
|
||||||
<div class="logo">Interstellar Development</div>
|
<div class="logo">
|
||||||
|
<a href="#welcome-screen">Interstellar Development</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="mobile-menu-btn"
|
class="mobile-menu-btn"
|
||||||
id="mobile-menu-btn"
|
id="burger-menu"
|
||||||
aria-label="Toggle navigation"
|
aria-label="Toggle navigation"
|
||||||
>
|
>
|
||||||
<i class="fas fa-bars"></i>
|
<i class="fas fa-bars"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<ul class="nav-links" id="nav-links">
|
<ul class="nav-links" id="main-nav">
|
||||||
<li><a href="#projects">Projects</a></li>
|
<li><a href="#projects">Projects</a></li>
|
||||||
<li><a href="#team">Team</a></li>
|
<li><a href="#team">Team</a></li>
|
||||||
<li><a href="#about">About</a></li>
|
<li><a href="#about">About</a></li>
|
||||||
|
|
@ -53,7 +73,7 @@
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<!-- Hero Section -->
|
<!-- Hero Section -->
|
||||||
<section class="hero">
|
<section class="hero" id="welcome-screen">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="hero-content">
|
<div class="hero-content">
|
||||||
<h1>
|
<h1>
|
||||||
|
|
@ -88,51 +108,36 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="project-category">
|
<!-- Portfolio Filter Controls -->
|
||||||
<h3 class="category-title">Gaming Projects</h3>
|
<div class="portfolio-controls">
|
||||||
<div class="projects-grid">
|
<div class="filter-buttons">
|
||||||
<div class="project-card">
|
<button class="filter-btn active" data-filter="all">All</button>
|
||||||
<div class="project-icon">
|
<button class="filter-btn" data-filter="gaming">Gaming</button>
|
||||||
<i class="fas fa-crosshairs"></i>
|
<button class="filter-btn" data-filter="software">
|
||||||
</div>
|
Software
|
||||||
<h3>Chromania</h3>
|
</button>
|
||||||
<p>
|
<button class="filter-btn" data-filter="web">Web</button>
|
||||||
A 2D jump-and-run game where players must restore color to the
|
</div>
|
||||||
world. Developed with our assistance. <br />
|
<div class="search-box">
|
||||||
<span class="project-status development">In Development</span>
|
<input
|
||||||
</p>
|
type="text"
|
||||||
</div>
|
id="project-search"
|
||||||
|
placeholder="Search projects..."
|
||||||
<div class="project-card">
|
/>
|
||||||
<div class="project-icon">
|
<i class="fas fa-search"></i>
|
||||||
<i class="fas fa-crosshairs"></i>
|
|
||||||
</div>
|
|
||||||
<h3>The tale of the Free</h3>
|
|
||||||
<p>
|
|
||||||
A 2.5D RPG where the protagonist journeys through the world,
|
|
||||||
gaining friends and allies to overthrow a corrupt government
|
|
||||||
branch. <br />
|
|
||||||
<span class="project-status development">In Planning</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="project-category">
|
<div class="portfolio-grid">
|
||||||
<h3 class="category-title">Software Solutions</h3>
|
<!-- Gaming Projects -->
|
||||||
<div class="projects-grid">
|
<div class="portfolio-grid">
|
||||||
<div class="project-card">
|
<portfolio-card
|
||||||
<div class="project-icon">
|
icon="fas fa-rocket"
|
||||||
<i class="fas fa-code"></i>
|
title="Projects Coming Soon"
|
||||||
</div>
|
desc="We're currently working on exciting new free and open source software projects. Stay tuned for updates as we develop high-quality solutions that respect user freedom."
|
||||||
<h3>FOSS Alternatives</h3>
|
tags="all"
|
||||||
<p>
|
collaboration="Internal Project"
|
||||||
We maintain a curated list of free software alternatives to
|
></portfolio-card>
|
||||||
proprietary applications, focusing on quality and user
|
|
||||||
freedom.
|
|
||||||
</p>
|
|
||||||
<span class="project-status active">Ongoing</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -277,6 +282,30 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- Stats Section -->
|
||||||
|
<section class="stats-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="stats-container">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-number" data-count="0">0</div>
|
||||||
|
<div class="stat-label">Projects</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-number" data-count="2">0</div>
|
||||||
|
<div class="stat-label">Team Members</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-number" data-count="3">0</div>
|
||||||
|
<div class="stat-label">Years Active</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-number" data-count="100">0</div>
|
||||||
|
<div class="stat-label">% Free Software</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- Contact Section -->
|
<!-- Contact Section -->
|
||||||
<section id="contact" class="section">
|
<section id="contact" class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
@ -405,32 +434,7 @@
|
||||||
<h4>Projects</h4>
|
<h4>Projects</h4>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a href="" target="_blank">Coming soon</a>
|
||||||
href="https://interstellardevelopment.org/code/interstellar_development"
|
|
||||||
target="_blank"
|
|
||||||
>Web Game Collection</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://interstellardevelopment.org/code/interstellar_development"
|
|
||||||
target="_blank"
|
|
||||||
>FreeFTF Game</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://interstellardevelopment.org/code/interstellar_development"
|
|
||||||
target="_blank"
|
|
||||||
>React Components</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://interstellardevelopment.org/code/interstellar_development"
|
|
||||||
target="_blank"
|
|
||||||
>FOSS Alternatives</a
|
|
||||||
>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -476,5 +480,15 @@
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<!-- JavaScript Files -->
|
||||||
|
<script src="src/js/main.js"></script>
|
||||||
|
<script src="src/js/stars.js"></script>
|
||||||
|
<script src="src/js/navigation.js"></script>
|
||||||
|
<script src="src/js/form.js"></script>
|
||||||
|
<script src="src/js/portfolioCard.js"></script>
|
||||||
|
<script src="src/js/portfolioFilter.js"></script>
|
||||||
|
<script src="src/js/overview.js"></script>
|
||||||
|
<script src="src/js/sectionTracker.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
BIN
src/favicon/android-chrome-192x192.png
Normal file
BIN
src/favicon/android-chrome-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/favicon/android-chrome-512x512.png
Normal file
BIN
src/favicon/android-chrome-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
src/favicon/apple-touch-icon.png
Normal file
BIN
src/favicon/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/favicon/favicon-16x16.png
Normal file
BIN
src/favicon/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 795 B |
BIN
src/favicon/favicon-32x32.png
Normal file
BIN
src/favicon/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/favicon/favicon.ico
Normal file
BIN
src/favicon/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
106
src/js/navigation.js
Normal file
106
src/js/navigation.js
Normal file
|
|
@ -0,0 +1,106 @@
|
||||||
|
// Navigation JavaScript
|
||||||
|
let lastScrollY = window.scrollY;
|
||||||
|
let ticking = false;
|
||||||
|
|
||||||
|
function updateNavigation() {
|
||||||
|
const navigation = document.getElementById("navigation");
|
||||||
|
const scrolled = window.scrollY > 50;
|
||||||
|
|
||||||
|
if (scrolled) {
|
||||||
|
navigation.classList.add("scrolled");
|
||||||
|
|
||||||
|
// Hide/show nav on scroll
|
||||||
|
if (window.scrollY > lastScrollY && window.scrollY > 100) {
|
||||||
|
navigation.classList.add("hidden");
|
||||||
|
} else {
|
||||||
|
navigation.classList.remove("hidden");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
navigation.classList.remove("scrolled", "hidden");
|
||||||
|
}
|
||||||
|
|
||||||
|
lastScrollY = window.scrollY;
|
||||||
|
ticking = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function requestTick() {
|
||||||
|
if (!ticking) {
|
||||||
|
requestAnimationFrame(updateNavigation);
|
||||||
|
ticking = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mobile navigation functionality
|
||||||
|
function setupMobileNavigation() {
|
||||||
|
const burgerMenu = document.getElementById("burger-menu");
|
||||||
|
const mainNav = document.getElementById("main-nav");
|
||||||
|
const body = document.body;
|
||||||
|
|
||||||
|
// Create overlay for mobile menu
|
||||||
|
const overlay = document.createElement("div");
|
||||||
|
overlay.className = "nav-overlay";
|
||||||
|
document.body.appendChild(overlay);
|
||||||
|
|
||||||
|
if (burgerMenu && mainNav) {
|
||||||
|
burgerMenu.addEventListener("click", function () {
|
||||||
|
const isActive = mainNav.classList.contains("active");
|
||||||
|
|
||||||
|
if (isActive) {
|
||||||
|
// Close menu
|
||||||
|
mainNav.classList.remove("active");
|
||||||
|
burgerMenu.classList.remove("active");
|
||||||
|
overlay.classList.remove("active");
|
||||||
|
body.classList.remove("nav-open");
|
||||||
|
} else {
|
||||||
|
// Open menu
|
||||||
|
mainNav.classList.add("active");
|
||||||
|
burgerMenu.classList.add("active");
|
||||||
|
overlay.classList.add("active");
|
||||||
|
body.classList.add("nav-open");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close menu when clicking on overlay
|
||||||
|
overlay.addEventListener("click", function () {
|
||||||
|
mainNav.classList.remove("active");
|
||||||
|
burgerMenu.classList.remove("active");
|
||||||
|
overlay.classList.remove("active");
|
||||||
|
body.classList.remove("nav-open");
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close menu when clicking on a link
|
||||||
|
const navLinks = mainNav.querySelectorAll("a");
|
||||||
|
navLinks.forEach((link) => {
|
||||||
|
link.addEventListener("click", function () {
|
||||||
|
mainNav.classList.remove("active");
|
||||||
|
burgerMenu.classList.remove("active");
|
||||||
|
overlay.classList.remove("active");
|
||||||
|
body.classList.remove("nav-open");
|
||||||
|
|
||||||
|
// Update active state
|
||||||
|
navLinks.forEach((l) => l.classList.remove("active"));
|
||||||
|
this.classList.add("active");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Set initial active state based on current hash
|
||||||
|
function setActiveNavLink() {
|
||||||
|
const currentHash = window.location.hash || "#home";
|
||||||
|
navLinks.forEach((link) => {
|
||||||
|
if (link.getAttribute("href") === currentHash) {
|
||||||
|
link.classList.add("active");
|
||||||
|
} else {
|
||||||
|
link.classList.remove("active");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update active state on hash change
|
||||||
|
window.addEventListener("hashchange", setActiveNavLink);
|
||||||
|
setActiveNavLink();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize navigation
|
||||||
|
window.addEventListener("scroll", requestTick);
|
||||||
|
window.addEventListener("load", updateNavigation);
|
||||||
57
src/js/overview.js
Normal file
57
src/js/overview.js
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
// Counter animation for stats
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
const counters = document.querySelectorAll(".stat-number");
|
||||||
|
let hasCounted = false;
|
||||||
|
|
||||||
|
function animateCounters() {
|
||||||
|
if (hasCounted) return;
|
||||||
|
|
||||||
|
counters.forEach((counter) => {
|
||||||
|
const target = parseInt(counter.getAttribute("data-count"));
|
||||||
|
const duration = 2000; // 2 seconds
|
||||||
|
const frameDuration = 1000 / 60; // 60 frames per second
|
||||||
|
const totalFrames = Math.round(duration / frameDuration);
|
||||||
|
let frame = 0;
|
||||||
|
|
||||||
|
const counterInterval = setInterval(() => {
|
||||||
|
frame++;
|
||||||
|
const progress = frame / totalFrames;
|
||||||
|
const currentCount = Math.round(target * progress);
|
||||||
|
|
||||||
|
counter.textContent = currentCount;
|
||||||
|
|
||||||
|
if (frame === totalFrames) {
|
||||||
|
clearInterval(counterInterval);
|
||||||
|
}
|
||||||
|
}, frameDuration);
|
||||||
|
|
||||||
|
counter.classList.add("animated");
|
||||||
|
});
|
||||||
|
|
||||||
|
hasCounted = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if element is in viewport
|
||||||
|
function isInViewport(element) {
|
||||||
|
const rect = element.getBoundingClientRect();
|
||||||
|
return (
|
||||||
|
rect.top >= 0 &&
|
||||||
|
rect.left >= 0 &&
|
||||||
|
rect.bottom <=
|
||||||
|
(window.innerHeight || document.documentElement.clientHeight) &&
|
||||||
|
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check on scroll and on load
|
||||||
|
function checkCounters() {
|
||||||
|
const statsContainer = document.querySelector(".stats-container");
|
||||||
|
if (statsContainer && isInViewport(statsContainer)) {
|
||||||
|
animateCounters();
|
||||||
|
window.removeEventListener("scroll", checkCounters);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("scroll", checkCounters);
|
||||||
|
checkCounters(); // Check on page load
|
||||||
|
});
|
||||||
111
src/js/sectionTracker.js
Normal file
111
src/js/sectionTracker.js
Normal file
|
|
@ -0,0 +1,111 @@
|
||||||
|
// Section tracking and navigation highlighting
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
const sections = document.querySelectorAll("section[id]");
|
||||||
|
const navLinks = document.querySelectorAll(".nav-links a");
|
||||||
|
|
||||||
|
// Configuration
|
||||||
|
const offset = 100; // Offset for when section becomes "active" (accounts for fixed nav)
|
||||||
|
let isScrolling = false;
|
||||||
|
|
||||||
|
function getCurrentSection() {
|
||||||
|
let currentSection = "";
|
||||||
|
const scrollPosition = window.scrollY + offset;
|
||||||
|
|
||||||
|
// Find which section we're currently in
|
||||||
|
sections.forEach((section) => {
|
||||||
|
const sectionTop = section.offsetTop;
|
||||||
|
const sectionHeight = section.offsetHeight;
|
||||||
|
const sectionId = section.getAttribute("id");
|
||||||
|
|
||||||
|
if (
|
||||||
|
scrollPosition >= sectionTop &&
|
||||||
|
scrollPosition < sectionTop + sectionHeight
|
||||||
|
) {
|
||||||
|
currentSection = sectionId;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Special case: if we're at the very top, activate the first section
|
||||||
|
if (window.scrollY < 100) {
|
||||||
|
currentSection = sections[0]?.getAttribute("id") || "";
|
||||||
|
}
|
||||||
|
|
||||||
|
return currentSection;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateActiveNavLink() {
|
||||||
|
const currentSection = getCurrentSection();
|
||||||
|
|
||||||
|
navLinks.forEach((link) => {
|
||||||
|
const href = link.getAttribute("href");
|
||||||
|
|
||||||
|
// Remove active class from all links
|
||||||
|
link.classList.remove("active");
|
||||||
|
|
||||||
|
// Add active class to matching link
|
||||||
|
if (href === `#${currentSection}`) {
|
||||||
|
link.classList.add("active");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Throttle scroll events for better performance
|
||||||
|
function handleScroll() {
|
||||||
|
if (!isScrolling) {
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
|
updateActiveNavLink();
|
||||||
|
isScrolling = false;
|
||||||
|
});
|
||||||
|
isScrolling = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Listen for scroll events
|
||||||
|
window.addEventListener("scroll", handleScroll);
|
||||||
|
|
||||||
|
// Update on page load
|
||||||
|
updateActiveNavLink();
|
||||||
|
|
||||||
|
// Also update when clicking nav links (for smooth scroll)
|
||||||
|
navLinks.forEach((link) => {
|
||||||
|
link.addEventListener("click", function (e) {
|
||||||
|
// Remove active from all
|
||||||
|
navLinks.forEach((l) => l.classList.remove("active"));
|
||||||
|
// Add active to clicked link
|
||||||
|
this.classList.add("active");
|
||||||
|
|
||||||
|
// Let the scroll handler update it properly after scroll completes
|
||||||
|
setTimeout(updateActiveNavLink, 100);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle hash changes (browser back/forward)
|
||||||
|
window.addEventListener("hashchange", function () {
|
||||||
|
setTimeout(updateActiveNavLink, 100);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Intersection Observer for more precise tracking (progressive enhancement)
|
||||||
|
if ("IntersectionObserver" in window) {
|
||||||
|
const observerOptions = {
|
||||||
|
rootMargin: "-20% 0px -70% 0px", // Trigger when section is roughly in the middle of viewport
|
||||||
|
threshold: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
const sectionId = entry.target.getAttribute("id");
|
||||||
|
navLinks.forEach((link) => {
|
||||||
|
link.classList.remove("active");
|
||||||
|
if (link.getAttribute("href") === `#${sectionId}`) {
|
||||||
|
link.classList.add("active");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, observerOptions);
|
||||||
|
|
||||||
|
// Observe all sections
|
||||||
|
sections.forEach((section) => observer.observe(section));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
// Create stellar background
|
// Create stellar background
|
||||||
function createStars() {
|
function createStars() {
|
||||||
const stars = document.getElementById("stars");
|
const stars = document.getElementById("stars");
|
||||||
const count = 150;
|
const count = 250;
|
||||||
stars.innerHTML = ""; // Clear any existing stars
|
stars.innerHTML = ""; // Clear any existing stars
|
||||||
|
|
||||||
for (let i = 0; i < count; i++) {
|
for (let i = 0; i < count; i++) {
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
// Navigation scroll effect
|
|
||||||
function updateNavigation() {
|
|
||||||
const navigation = document.getElementById("navigation");
|
|
||||||
if (window.scrollY > 50) {
|
|
||||||
navigation.classList.add("scrolled");
|
|
||||||
} else {
|
|
||||||
navigation.classList.remove("scrolled");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Mobile navigation functionality
|
|
||||||
function setupMobileNavigation() {
|
|
||||||
const burgerMenu = document.getElementById("burger-menu");
|
|
||||||
const mainNav = document.getElementById("main-nav");
|
|
||||||
|
|
||||||
if (burgerMenu && mainNav) {
|
|
||||||
burgerMenu.addEventListener("click", function () {
|
|
||||||
mainNav.classList.toggle("active");
|
|
||||||
burgerMenu.classList.toggle("active");
|
|
||||||
document.body.classList.toggle("nav-open");
|
|
||||||
});
|
|
||||||
|
|
||||||
// Close menu when clicking on a link
|
|
||||||
const navLinks = mainNav.querySelectorAll("a");
|
|
||||||
navLinks.forEach((link) => {
|
|
||||||
link.addEventListener("click", function () {
|
|
||||||
mainNav.classList.remove("active");
|
|
||||||
burgerMenu.classList.remove("active");
|
|
||||||
document.body.classList.remove("nav-open");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
// Counter animation for stats
|
|
||||||
document.addEventListener("DOMContentLoaded", function() {
|
|
||||||
const counters = document.querySelectorAll('.stat-number');
|
|
||||||
let hasCounted = false;
|
|
||||||
|
|
||||||
function animateCounters() {
|
|
||||||
if (hasCounted) return;
|
|
||||||
|
|
||||||
counters.forEach(counter => {
|
|
||||||
const target = parseInt(counter.getAttribute('data-count'));
|
|
||||||
const duration = 2000; // 2 seconds
|
|
||||||
const frameDuration = 1000 / 60; // 60 frames per second
|
|
||||||
const totalFrames = Math.round(duration / frameDuration);
|
|
||||||
let frame = 0;
|
|
||||||
|
|
||||||
const counterInterval = setInterval(() => {
|
|
||||||
frame++;
|
|
||||||
const progress = frame / totalFrames;
|
|
||||||
const currentCount = Math.round(target * progress);
|
|
||||||
|
|
||||||
counter.textContent = currentCount;
|
|
||||||
|
|
||||||
if (frame === totalFrames) {
|
|
||||||
clearInterval(counterInterval);
|
|
||||||
}
|
|
||||||
}, frameDuration);
|
|
||||||
|
|
||||||
counter.classList.add('animated');
|
|
||||||
});
|
|
||||||
|
|
||||||
hasCounted = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if element is in viewport
|
|
||||||
function isInViewport(element) {
|
|
||||||
const rect = element.getBoundingClientRect();
|
|
||||||
return (
|
|
||||||
rect.top >= 0 &&
|
|
||||||
rect.left >= 0 &&
|
|
||||||
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
|
|
||||||
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check on scroll and on load
|
|
||||||
function checkCounters() {
|
|
||||||
const statsContainer = document.querySelector('.stats-container');
|
|
||||||
if (statsContainer && isInViewport(statsContainer)) {
|
|
||||||
animateCounters();
|
|
||||||
window.removeEventListener('scroll', checkCounters);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', checkCounters);
|
|
||||||
checkCounters(); // Check on page load
|
|
||||||
});
|
|
||||||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue