Website overhaul

This commit is contained in:
sageTheDM 2025-09-21 23:37:16 +02:00
parent cd401ee5b6
commit 4cb566828a
71 changed files with 1999 additions and 4058 deletions

View file

@ -1,233 +1,480 @@
<!--
interstellar development website
Copyright (C) 2024 interstellar_development
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="dropdown.js" type="text/javascript" defer></script>
<script src="header.js" type="text/javascript" defer></script>
<script src="footer.js" type="text/javascript" defer></script>
<link rel="stylesheet" href="styles.css" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="favicon_io/apple-touch-icon.png"
<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="icon"
type="image/png"
sizes="32x32"
href="favicon_io/favicon-32x32.png"
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<!-- Google Fonts -->
<link
rel="icon"
type="image/png"
sizes="16x16"
href="favicon_io/favicon-16x16.png"
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"
/>
<link rel="manifest" href="favicon_io/site.webmanifest" />
<title>Interstellar Development</title>
<!-- Main CSS -->
<link rel="stylesheet" href="src/styles/styles.css" />
</head>
<body>
<!-- Custom header component -->
<header-component></header-component>
<!-- Animated background -->
<div class="animated-bg"></div>
<div class="stars" id="stars"></div>
<article>
<section id="project">
<h1>Our Projects</h1>
<!-- Navigation -->
<nav id="navigation">
<div class="nav-container">
<div class="logo">Interstellar Development</div>
<h2>Our Games</h2>
<ul>
<a href="webGames/index.html" target="_blank" class="listElement">
<li>Web game collection</li>
</a>
<button
class="mobile-menu-btn"
id="mobile-menu-btn"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<ul class="nav-links" id="nav-links">
<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>
<ul>
<li>
<p>Previously we had more unfinished Games listed here.</p>
<main>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="hero-content">
<h1>
Advancing <span class="highlight">Free Software</span> Development
</h1>
<p>
We decided against displaying them and giving people the
impression we are working on them currently.
We develop high-quality free and open source software solutions,
with a focus on gaming and applications that respect user freedom.
</p>
<p>In the Future we will display the released games here</p>
</li>
</ul>
<h2>Our Other Projects</h2>
<ul>
<a href="foss_alternatives/" target="_blank" class="listElement">
<li>FOSS Alternatives</li>
</a>
<a href="react/" target="_blank" class="listElement">
<li>React</li>
</a>
</ul>
</section>
<!-- Cards section with team members -->
<h1>Our Team</h1>
<section class="cards" id="cards">
<div class="card">
<a
href="https://interstellardevelopment.org/code/Patrick_Pluto"
class="card-link"
target="_blank"
>
<img src="images/Patrick.png" alt="Patrick" />
<h3>Patrick_Pluto</h3>
<p>
The system administrator and our lead coder. He is the one you
will need to blame for bugs in the games
</p>
</a>
</div>
<div class="card">
<a
href="https://interstellardevelopment.org/code/sageTheDm"
class="card-link"
target="_blank"
>
<img src="images/sage.png" alt="Sage" />
<h3>sageTheDM</h3>
<p>
Our mostly competent web developer and secondary coder, if you
experience any bugs on the website or spelling mistake he is to
blame
</p>
</a>
</div>
<div class="card">
<a
href="https://interstellardevelopment.org/code/Patrick_Pluto"
class="card-link"
target="_blank"
>
<img src="images/nicolas.png" alt="Patrick" />
<h3>St. Nicolaus</h3>
<p>
Our game level and asset designer. He is responsible for all
assets in our FreeFTF game. So if an asset looks ugly be mad at
him. Also, we are not sure if he is human or just a drunk wizard
cat but one thing is very clear he is still a novice at his job.
</p>
</a>
<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>
<!-- About Us section -->
<section id="about">
<h2>About Us</h2>
<p>
Welcome to Interstellar Development! We are a small, passionate
international team dedicated to transforming the programming world
into a free-and-open-source future. Our diverse backgrounds and
experiences fuel our commitment to creating free and open-source
software, particularly in the realm of gaming.
</p>
<p>
Our journey began with a shared vision: to better organize our efforts
in making free and open-source games more efficient and accessible. We
recognized that many current free software games are either lacking in
quality or simply do not exist. This realization inspired us to focus
on developing games that are unplayable on GNU/Linux and FreeBSD
systems, as well as creating free software alternatives for those in
need.
</p>
<p>
At Interstellar Development, we believe that true freedom for computer
users can only be achieved through the use of free software. Thats
why we are committed to licensing all of our projects under copyleft
free and open-source software licenses, ensuring that our games remain
free for everyone to enjoy, forever.
</p>
<p>
While we are not currently accepting donations, we welcome your
support in the form of feedback and suggestions for improvements. If
you wish to contribute financially, we encourage you to donate to the
Free Software Foundation, as without them, we would have never started
this.
</p>
<p>
Join us as we strive to create a vibrant community around free
software and gaming. Together, we can make a difference and pave the
way for a free future!
</p>
<!-- 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>
<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>
</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>
</div>
</div>
</section>
<section id="vision">
<h2>Our Vision</h2>
<h2>Interstellar Development: Free Software is Our Passion</h2>
<p>
At Interstellar Development, we embarked on this journey to create a
more organized and efficient approach to developing free and
open-source software, with a particular focus on gaming. We recognized
a significant gap in the availability and quality of free software
games, which often fail to meet the expectations of users or simply do
not exist. Our mission is to fill this void and elevate the standards
of free gaming experiences.
</p>
<p>
Our primary goal is to target games that are currently unplayable on
GNU/Linux and FreeBSD systems. We aim to develop high-quality
alternatives that not only provide enjoyable gameplay but also adhere
to the principles of free software. Additionally, we are committed to
identifying and addressing other areas within the software ecosystem
that lack free alternatives, ensuring that users have access to a
diverse range of tools and applications that respect their freedom.
</p>
<p>
At Interstellar Development, we firmly believe that the path to true
freedom for computer users lies in the adoption and promotion of free
software. To this end, we are dedicated to licensing all of our
projects under copyleft free and open-source software licenses. This
commitment ensures that our games and software remain free for
everyone to play, modify, and share, fostering a culture of
collaboration and innovation within the community.
</p>
<p>
We understand that community involvement is crucial to our success.
While we are not currently accepting donations, we invite you to
support us by providing feedback, reporting issues, and suggesting
improvements. Your insights are invaluable in helping us refine our
projects and enhance the user experience.
</p>
<p>
If you feel compelled to contribute financially, we encourage you to
consider donating to the Free Software Foundation. Their unwavering
support and advocacy for free software principles have been
instrumental in our journey, and your contributions to them help
sustain the broader movement that enables us to create these games.
</p>
<p>
Together, we can build a vibrant community around free software and
gaming, paving the way for a future where everyone has access to
high-quality, open-source alternatives. Join us in our mission to make
a difference and champion the cause of free software for all!
</p>
</section>
</article>
<!-- 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>
<!-- Custom footer component -->
<footer-component></footer-component>
<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>
<!-- 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="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>
</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>&copy; 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>
</body>
</html>