interstellar_development/interstellar_website
3
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Website overhaul completed

Browse source
This commit is contained in:
sageTheDM 2025-10-18 18:55:01 +02:00
parent 4cb566828a
commit 9115a41488
18 changed files with 1407 additions and 263 deletions
Download patch file Download diff file Expand all files Collapse all files

158
index.html
View file

@ -21,6 +21,24 @@
/>
<!-- Main 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>
<body>
@ -31,17 +49,19 @@
<!-- Navigation -->
<nav id="navigation">
<div class="nav-container">
<div class="logo">Interstellar Development</div>
<div class="logo">
<a href="#welcome-screen">Interstellar Development</a>
</div>
<button
class="mobile-menu-btn"
id="mobile-menu-btn"
id="burger-menu"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</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="#team">Team</a></li>
<li><a href="#about">About</a></li>
@ -53,7 +73,7 @@
<main>
<!-- Hero Section -->
<section class="hero">
<section class="hero" id="welcome-screen">
<div class="container">
<div class="hero-content">
<h1>
@ -88,51 +108,36 @@
</p>
</div>
<div class="project-category">
<h3 class="category-title">Gaming Projects</h3>
<div class="projects-grid">
<div class="project-card">
<div class="project-icon">
<i class="fas fa-crosshairs"></i>
</div>
<h3>Chromania</h3>
<p>
A 2D jump-and-run game where players must restore color to the
world. Developed with our assistance. <br />
<span class="project-status development">In Development</span>
</p>
</div>
<div class="project-card">
<div class="project-icon">
<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>
<!-- Portfolio Filter Controls -->
<div class="portfolio-controls">
<div class="filter-buttons">
<button class="filter-btn active" data-filter="all">All</button>
<button class="filter-btn" data-filter="gaming">Gaming</button>
<button class="filter-btn" data-filter="software">
Software
</button>
<button class="filter-btn" data-filter="web">Web</button>
</div>
<div class="search-box">
<input
type="text"
id="project-search"
placeholder="Search projects..."
/>
<i class="fas fa-search"></i>
</div>
</div>
<div class="project-category">
<h3 class="category-title">Software Solutions</h3>
<div class="projects-grid">
<div class="project-card">
<div class="project-icon">
<i class="fas fa-code"></i>
</div>
<h3>FOSS Alternatives</h3>
<p>
We maintain a curated list of free software alternatives to
proprietary applications, focusing on quality and user
freedom.
</p>
<span class="project-status active">Ongoing</span>
</div>
<div class="portfolio-grid">
<!-- Gaming Projects -->
<div class="portfolio-grid">
<portfolio-card
icon="fas fa-rocket"
title="Projects Coming Soon"
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."
tags="all"
collaboration="Internal Project"
></portfolio-card>
</div>
</div>
</div>
@ -277,6 +282,30 @@
</div>
</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 -->
<section id="contact" class="section">
<div class="container">
@ -405,32 +434,7 @@
<h4>Projects</h4>
<ul>
<li>
<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
>
<a href="" target="_blank">Coming soon</a>
</li>
</ul>
</div>
@ -476,5 +480,15 @@
</div>
</footer>
</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>
</html>

BIN
src/favicon/android-chrome-192x192.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/favicon/android-chrome-512x512.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
src/favicon/apple-touch-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/favicon/favicon-16x16.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 795 B

BIN
src/favicon/favicon-32x32.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/favicon/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

0
src/scripts/form.js → src/js/form.js
View file

0
src/scripts/main.js → src/js/main.js
View file

106
src/js/navigation.js Normal file
View 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
View 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
});

0
src/scripts/portfolioCard.js → src/js/portfolioCard.js
View file

0
src/scripts/portfolioFilter.js → src/js/portfolioFilter.js
View file

111
src/js/sectionTracker.js Normal file
View 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));
}
});

2
src/scripts/stars.js → src/js/stars.js
View file

@ -1,7 +1,7 @@
// Create stellar background
function createStars() {
const stars = document.getElementById("stars");
const count = 150;
const count = 250;
stars.innerHTML = ""; // Clear any existing stars
for (let i = 0; i < count; i++) {

33
src/scripts/navigation.js
View file

@ -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");
});
});
}
}

56
src/scripts/overview.js
View file

@ -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
});

1147
src/styles/styles.css
View file

File diff suppressed because it is too large Load diff