494 lines
17 KiB
HTML
494 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Interstellar Development | Free and Open Source Software</title>
|
|
<meta
|
|
name="description"
|
|
content="We develop high-quality free and open source software, with a focus on gaming solutions that respect user freedom."
|
|
/>
|
|
|
|
<!-- Font Awesome -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
|
/>
|
|
<!-- Google Fonts -->
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<!-- 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>
|
|
<!-- Animated background -->
|
|
<div class="animated-bg"></div>
|
|
<div class="stars" id="stars"></div>
|
|
|
|
<!-- Navigation -->
|
|
<nav id="navigation">
|
|
<div class="nav-container">
|
|
<div class="logo">
|
|
<a href="#welcome-screen">Interstellar Development</a>
|
|
</div>
|
|
|
|
<button
|
|
class="mobile-menu-btn"
|
|
id="burger-menu"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
|
|
<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>
|
|
<li><a href="#vision">Vision</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="hero" id="welcome-screen">
|
|
<div class="container">
|
|
<div class="hero-content">
|
|
<h1>
|
|
Advancing <span class="highlight">Free Software</span> Development
|
|
</h1>
|
|
<p>
|
|
We develop high-quality free and open source software solutions,
|
|
with a focus on gaming and applications that respect user freedom.
|
|
</p>
|
|
<div class="hero-buttons">
|
|
<a href="#projects" class="btn btn-primary">
|
|
<i class="fas fa-rocket"></i>
|
|
View Our Projects
|
|
</a>
|
|
<a href="#about" class="btn btn-secondary">
|
|
<i class="fas fa-info-circle"></i>
|
|
Learn More
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Projects Section -->
|
|
<section id="projects" class="section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Our Projects</h2>
|
|
<p class="section-subtitle">
|
|
High-quality free software solutions built with passion and
|
|
dedication
|
|
</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="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>
|
|
</section>
|
|
|
|
<!-- Team Section -->
|
|
<section id="team" class="section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Our Team</h2>
|
|
<p class="section-subtitle">
|
|
A small but dedicated international team committed to free
|
|
software
|
|
</p>
|
|
</div>
|
|
|
|
<div class="team-grid">
|
|
<div class="team-member">
|
|
<div class="member-avatar">
|
|
<i class="fas fa-server"></i>
|
|
</div>
|
|
<h3>Patrick</h3>
|
|
<div class="team-role">
|
|
Lead Programmer & System Administrator
|
|
</div>
|
|
<p>
|
|
Patrick focuses on backend development and system
|
|
administration, managing our infrastructure and core application
|
|
logic with expertise in server-side technologies and DevOps.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="team-member">
|
|
<div class="member-avatar">
|
|
<i class="fas fa-palette"></i>
|
|
</div>
|
|
<h3>Sage</h3>
|
|
<div class="team-role">Frontend Developer & Communications</div>
|
|
<p>
|
|
Sage focuses on frontend development and is in charge of
|
|
communication and UI/UX design, ensuring our projects have
|
|
intuitive interfaces and excellent user experiences.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">About Us</h2>
|
|
</div>
|
|
|
|
<div class="about-content">
|
|
<p>
|
|
Interstellar Development is a small international team dedicated
|
|
to advancing free and open source software. Our diverse
|
|
backgrounds and shared commitment to user freedom drive our
|
|
development philosophy.
|
|
</p>
|
|
|
|
<p>
|
|
We began with a vision to create high-quality free software,
|
|
particularly in gaming where such options are often limited. We
|
|
recognized that many free software games either lack polish or
|
|
simply don't exist, inspiring us to focus on this underserved
|
|
area.
|
|
</p>
|
|
|
|
<p>
|
|
At Interstellar Development, we believe true digital freedom can
|
|
only be achieved through free software. All our projects are
|
|
released under copyleft licenses, ensuring they remain free for
|
|
everyone to use, modify, and distribute.
|
|
</p>
|
|
|
|
<p>
|
|
While we don't currently accept donations, we welcome feedback and
|
|
suggestions. If you wish to support the free software movement, we
|
|
encourage donations to the Free Software Foundation, whose work
|
|
continues to inspire our journey.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Vision Section -->
|
|
<section id="vision" class="section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Our Vision</h2>
|
|
</div>
|
|
|
|
<div class="vision-content">
|
|
<div class="vision-text">
|
|
<p>
|
|
Our mission is to create high-quality free software
|
|
alternatives, particularly for games that are unavailable on
|
|
free operating systems like GNU/Linux and FreeBSD. We aim to
|
|
address gaps in the software ecosystem where free alternatives
|
|
are lacking.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="principles-grid">
|
|
<div class="principle-card">
|
|
<div class="principle-icon">
|
|
<i class="fas fa-unlock"></i>
|
|
</div>
|
|
<h4>Software Freedom</h4>
|
|
<p>
|
|
All our projects are released under copyleft licenses to
|
|
ensure user freedoms are protected and preserved.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="principle-card">
|
|
<div class="principle-icon">
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
<h4>Community Collaboration</h4>
|
|
<p>
|
|
We believe in building software with and for the community,
|
|
welcoming contributions and feedback.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="principle-card">
|
|
<div class="principle-icon">
|
|
<i class="fas fa-star"></i>
|
|
</div>
|
|
<h4>Quality Standards</h4>
|
|
<p>
|
|
We strive to create software that matches or exceeds the
|
|
quality of proprietary alternatives.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Get In Touch</h2>
|
|
<p class="section-subtitle">
|
|
Have questions about our projects or want to contribute? We'd love
|
|
to hear from you.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="contact-container">
|
|
<div class="contact-info">
|
|
<div class="contact-methods">
|
|
<div class="contact-item">
|
|
<div class="contact-icon">
|
|
<i class="fas fa-envelope"></i>
|
|
</div>
|
|
<div class="contact-details">
|
|
<h4>Email</h4>
|
|
<a href="mailto:info@interstellardevelopment.org"
|
|
>info@interstellardevelopment.org</a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-item">
|
|
<div class="contact-icon">
|
|
<i class="fas fa-code-branch"></i>
|
|
</div>
|
|
<div class="contact-details">
|
|
<h4>Source Code</h4>
|
|
<a
|
|
href="https://interstellardevelopment.org/code/interstellar_development"
|
|
target="_blank"
|
|
>View Our Projects</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form class="contact-form" id="contact-form">
|
|
<div class="form-group">
|
|
<label for="name">Your Name</label>
|
|
<input type="text" id="name" name="name" required />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email">Email Address</label>
|
|
<input type="email" id="email" name="email" required />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="subject">Subject</label>
|
|
<select id="subject" name="subject" required>
|
|
<option value="">Select a subject</option>
|
|
<option value="contribution">Project Contribution</option>
|
|
<option value="feedback">Feedback</option>
|
|
<option value="inquiry">General Inquiry</option>
|
|
<option value="bug">Bug Report</option>
|
|
<option value="other">Other</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="message">Message</label>
|
|
<textarea
|
|
id="message"
|
|
name="message"
|
|
rows="5"
|
|
required
|
|
></textarea>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-paper-plane"></i>
|
|
Send Message
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-brand">
|
|
<div class="logo">Interstellar Development</div>
|
|
<p>
|
|
Developing free and open source software with a focus on user
|
|
freedom and quality.
|
|
</p>
|
|
|
|
<div class="footer-social">
|
|
<a
|
|
href="https://interstellardevelopment.org/code/interstellar_development"
|
|
class="social-link"
|
|
target="_blank"
|
|
aria-label="Source Code"
|
|
>
|
|
<i class="fas fa-code-branch"></i>
|
|
</a>
|
|
<a href="#" class="social-link" aria-label="Discord">
|
|
<i class="fab fa-discord"></i>
|
|
</a>
|
|
<a href="#" class="social-link" aria-label="Mastodon">
|
|
<i class="fab fa-mastodon"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-links">
|
|
<h4>Navigation</h4>
|
|
<ul>
|
|
<li><a href="#projects">Projects</a></li>
|
|
<li><a href="#team">Team</a></li>
|
|
<li><a href="#about">About</a></li>
|
|
<li><a href="#vision">Vision</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer-links">
|
|
<h4>Projects</h4>
|
|
<ul>
|
|
<li>
|
|
<a href="" target="_blank">Coming soon</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer-links">
|
|
<h4>Resources</h4>
|
|
<ul>
|
|
<li>
|
|
<a href="https://www.fsf.org/" target="_blank"
|
|
>Free Software Foundation</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="https://www.gnu.org/" target="_blank">GNU Project</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://interstellardevelopment.org/code/interstellar_development"
|
|
target="_blank"
|
|
>Source Code</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="mailto:info@interstellardevelopment.org"
|
|
>Contact Us</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-bottom">
|
|
<div class="footer-bottom-content">
|
|
<p>© 2025 Interstellar Development. All rights reserved.</p>
|
|
<div class="footer-badges">
|
|
<span class="badge">
|
|
<i class="fas fa-heart"></i>
|
|
Committed to Free Software
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|