Compare commits
No commits in common. "95f551288582006afb68de79cc09b1e5c8d6009c" and "44cfcec197bf7c9bfc8c22c3d2c670a67d5a997c" have entirely different histories.
95f5512885
...
44cfcec197
20 changed files with 3575 additions and 4 deletions
492
index.html
492
index.html
|
|
@ -1,12 +1,496 @@
|
||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Document</title>
|
<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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>THERE IS NOTHING HERE! - WEBSITE OUT OF COMMISSION</h1>
|
<!-- Animated background -->
|
||||||
<a href="https://interstellardevelopment.org/code/">ForgeJo</a>
|
<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 under-served
|
||||||
|
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>
|
||||||
|
|
||||||
|
<!-- General scripts -->
|
||||||
|
<script src="src/js/main.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>
|
||||||
|
|
||||||
|
<!-- Animation scripts -->
|
||||||
|
<script type="module" src="src/js/animation/starBackground.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 |
BIN
src/images/Patrick.png
Normal file
BIN
src/images/Patrick.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
BIN
src/images/sage.png
Normal file
BIN
src/images/sage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 385 KiB |
274
src/js/animation/Meteor.js
Normal file
274
src/js/animation/Meteor.js
Normal file
|
|
@ -0,0 +1,274 @@
|
||||||
|
class Meteor {
|
||||||
|
constructor(container) {
|
||||||
|
this.container = container;
|
||||||
|
this.containerRect = container.getBoundingClientRect();
|
||||||
|
|
||||||
|
// Smooth movement settings
|
||||||
|
this.speed = Math.random() * 1.5 + 2;
|
||||||
|
this.life = 1.0;
|
||||||
|
this.fadeSpeed = 0.002;
|
||||||
|
|
||||||
|
// Enhanced color schemes for vibrant streaks
|
||||||
|
this.colorSchemes = [
|
||||||
|
// Classic golden-white meteor
|
||||||
|
{
|
||||||
|
core: "#ffffff",
|
||||||
|
mid: "#ffeb99",
|
||||||
|
outer: "#ff9933",
|
||||||
|
},
|
||||||
|
// Blue-white ice meteor
|
||||||
|
{
|
||||||
|
core: "#ffffff",
|
||||||
|
mid: "#aaddff",
|
||||||
|
outer: "#4488ff",
|
||||||
|
},
|
||||||
|
// Purple cosmic meteor
|
||||||
|
{
|
||||||
|
core: "#ffffff",
|
||||||
|
mid: "#ddaaff",
|
||||||
|
outer: "#aa44ff",
|
||||||
|
},
|
||||||
|
// Green-white aurora meteor
|
||||||
|
{
|
||||||
|
core: "#ffffff",
|
||||||
|
mid: "#aaffcc",
|
||||||
|
outer: "#44ff88",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
this.colors =
|
||||||
|
this.colorSchemes[Math.floor(Math.random() * this.colorSchemes.length)];
|
||||||
|
|
||||||
|
// Start positions
|
||||||
|
const startSide = Math.random();
|
||||||
|
if (startSide < 0.7) {
|
||||||
|
this.x = Math.random() * this.containerRect.width;
|
||||||
|
this.y = -100;
|
||||||
|
this.angle = Math.PI / 2 + (Math.random() - 0.5) * 0.6;
|
||||||
|
} else if (startSide < 0.85) {
|
||||||
|
this.x = -100;
|
||||||
|
this.y = Math.random() * this.containerRect.height * 0.3;
|
||||||
|
this.angle = Math.PI / 4 + Math.random() * 0.4;
|
||||||
|
} else {
|
||||||
|
this.x = this.containerRect.width + 100;
|
||||||
|
this.y = Math.random() * this.containerRect.height * 0.3;
|
||||||
|
this.angle = (Math.PI * 3) / 4 + Math.random() * 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.dx = Math.cos(this.angle) * this.speed;
|
||||||
|
this.dy = Math.sin(this.angle) * this.speed;
|
||||||
|
|
||||||
|
// Trail settings
|
||||||
|
this.trailPoints = [];
|
||||||
|
this.maxTrailLength = 25;
|
||||||
|
|
||||||
|
this.hasBeenOnScreen = false;
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
// Create SVG for smooth gradient trail
|
||||||
|
this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||||
|
this.svg.style.cssText = `
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
overflow: visible;
|
||||||
|
z-index: 9;
|
||||||
|
`;
|
||||||
|
this.svg.setAttribute("width", this.containerRect.width);
|
||||||
|
this.svg.setAttribute("height", this.containerRect.height);
|
||||||
|
|
||||||
|
// Create gradient for trail
|
||||||
|
const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
|
||||||
|
const gradient = document.createElementNS(
|
||||||
|
"http://www.w3.org/2000/svg",
|
||||||
|
"linearGradient"
|
||||||
|
);
|
||||||
|
this.gradientId = `meteor-gradient-${Date.now()}-${Math.random()
|
||||||
|
.toString(36)
|
||||||
|
.substr(2, 9)}`;
|
||||||
|
gradient.setAttribute("id", this.gradientId);
|
||||||
|
gradient.setAttribute("gradientUnits", "userSpaceOnUse");
|
||||||
|
|
||||||
|
// Gradient stops for smooth colored fade
|
||||||
|
const stops = [
|
||||||
|
{ offset: "0%", color: this.colors.core, opacity: "1" },
|
||||||
|
{ offset: "30%", color: this.colors.mid, opacity: "0.8" },
|
||||||
|
{ offset: "60%", color: this.colors.outer, opacity: "0.5" },
|
||||||
|
{ offset: "100%", color: this.colors.outer, opacity: "0" },
|
||||||
|
];
|
||||||
|
|
||||||
|
stops.forEach((stop) => {
|
||||||
|
const stopEl = document.createElementNS(
|
||||||
|
"http://www.w3.org/2000/svg",
|
||||||
|
"stop"
|
||||||
|
);
|
||||||
|
stopEl.setAttribute("offset", stop.offset);
|
||||||
|
stopEl.setAttribute("stop-color", stop.color);
|
||||||
|
stopEl.setAttribute("stop-opacity", stop.opacity);
|
||||||
|
gradient.appendChild(stopEl);
|
||||||
|
});
|
||||||
|
|
||||||
|
defs.appendChild(gradient);
|
||||||
|
this.svg.appendChild(defs);
|
||||||
|
|
||||||
|
// Create path for trail
|
||||||
|
this.trailPath = document.createElementNS(
|
||||||
|
"http://www.w3.org/2000/svg",
|
||||||
|
"path"
|
||||||
|
);
|
||||||
|
this.trailPath.setAttribute("fill", "none");
|
||||||
|
this.trailPath.setAttribute("stroke", `url(#${this.gradientId})`);
|
||||||
|
this.trailPath.setAttribute("stroke-linecap", "round");
|
||||||
|
this.trailPath.setAttribute("stroke-linejoin", "round");
|
||||||
|
|
||||||
|
const headSize = Math.random() * 2 + 2.5;
|
||||||
|
this.headSize = headSize;
|
||||||
|
this.trailPath.setAttribute("stroke-width", headSize * 2);
|
||||||
|
this.trailPath.style.filter = `blur(${headSize * 0.4}px)`;
|
||||||
|
|
||||||
|
this.svg.appendChild(this.trailPath);
|
||||||
|
this.container.appendChild(this.svg);
|
||||||
|
|
||||||
|
// Meteor head - use absolute positioning like the SVG
|
||||||
|
this.head = document.createElement("div");
|
||||||
|
this.head.style.cssText = `
|
||||||
|
position: absolute;
|
||||||
|
width: ${headSize}px;
|
||||||
|
height: ${headSize}px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: ${this.colors.core};
|
||||||
|
box-shadow: 0 0 ${headSize * 3}px ${this.colors.mid},
|
||||||
|
0 0 ${headSize * 5}px ${this.colors.outer};
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 10;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
`;
|
||||||
|
|
||||||
|
this.container.appendChild(this.head);
|
||||||
|
|
||||||
|
// Initialize trail
|
||||||
|
for (let i = 0; i < 3; i++) {
|
||||||
|
this.trailPoints.push({ x: this.x, y: this.y });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
isOnScreen() {
|
||||||
|
const buffer = 50;
|
||||||
|
return (
|
||||||
|
this.x > -buffer &&
|
||||||
|
this.x < this.containerRect.width + buffer &&
|
||||||
|
this.y > -buffer &&
|
||||||
|
this.y < this.containerRect.height + buffer
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
isOffScreen() {
|
||||||
|
const buffer = 200;
|
||||||
|
return (
|
||||||
|
this.x < -buffer ||
|
||||||
|
this.x > this.containerRect.width + buffer ||
|
||||||
|
this.y < -buffer ||
|
||||||
|
this.y > this.containerRect.height + buffer
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
updateTrail() {
|
||||||
|
// Add current position to trail
|
||||||
|
this.trailPoints.unshift({ x: this.x, y: this.y });
|
||||||
|
|
||||||
|
// Limit trail length
|
||||||
|
if (this.trailPoints.length > this.maxTrailLength) {
|
||||||
|
this.trailPoints.pop();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update SVG path with smooth curves
|
||||||
|
if (this.trailPoints.length >= 2) {
|
||||||
|
let pathData = `M ${this.trailPoints[0].x} ${this.trailPoints[0].y}`;
|
||||||
|
|
||||||
|
// Use smooth curves
|
||||||
|
for (let i = 1; i < this.trailPoints.length - 1; i++) {
|
||||||
|
const curr = this.trailPoints[i];
|
||||||
|
const next = this.trailPoints[i + 1];
|
||||||
|
const midX = (curr.x + next.x) / 2;
|
||||||
|
const midY = (curr.y + next.y) / 2;
|
||||||
|
pathData += ` Q ${curr.x} ${curr.y} ${midX} ${midY}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Final point
|
||||||
|
if (this.trailPoints.length > 1) {
|
||||||
|
const last = this.trailPoints[this.trailPoints.length - 1];
|
||||||
|
pathData += ` L ${last.x} ${last.y}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.trailPath.setAttribute("d", pathData);
|
||||||
|
|
||||||
|
// Update gradient position for directional effect
|
||||||
|
const gradient = document.getElementById(this.gradientId);
|
||||||
|
if (gradient) {
|
||||||
|
gradient.setAttribute("x1", this.x);
|
||||||
|
gradient.setAttribute("y1", this.y);
|
||||||
|
const lastPoint = this.trailPoints[this.trailPoints.length - 1];
|
||||||
|
gradient.setAttribute("x2", lastPoint.x);
|
||||||
|
gradient.setAttribute("y2", lastPoint.y);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
update(deltaTime) {
|
||||||
|
// Use deltaTime for consistent movement
|
||||||
|
const dt = Math.min(deltaTime / 16.67, 2);
|
||||||
|
|
||||||
|
// Update position
|
||||||
|
this.x += this.dx * dt;
|
||||||
|
this.y += this.dy * dt;
|
||||||
|
|
||||||
|
// Track screen presence
|
||||||
|
if (!this.hasBeenOnScreen && this.isOnScreen()) {
|
||||||
|
this.hasBeenOnScreen = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fade when off screen
|
||||||
|
if (this.hasBeenOnScreen && this.isOffScreen()) {
|
||||||
|
this.life -= this.fadeSpeed * 3 * dt;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update head position using left/top (same coordinate system as SVG)
|
||||||
|
this.head.style.left = `${this.x}px`;
|
||||||
|
this.head.style.top = `${this.y}px`;
|
||||||
|
this.head.style.opacity = this.life;
|
||||||
|
|
||||||
|
// Update SVG trail opacity
|
||||||
|
this.svg.style.opacity = this.life;
|
||||||
|
|
||||||
|
// Update trail
|
||||||
|
this.updateTrail();
|
||||||
|
|
||||||
|
// Check if should be removed
|
||||||
|
if (
|
||||||
|
this.life <= 0 ||
|
||||||
|
(this.hasBeenOnScreen && this.isOffScreen() && this.life < 0.3)
|
||||||
|
) {
|
||||||
|
this.remove();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
remove() {
|
||||||
|
if (this.svg && this.svg.parentNode) {
|
||||||
|
this.svg.remove();
|
||||||
|
}
|
||||||
|
if (this.head && this.head.parentNode) {
|
||||||
|
this.head.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Meteor;
|
||||||
63
src/js/animation/Star.js
Normal file
63
src/js/animation/Star.js
Normal file
|
|
@ -0,0 +1,63 @@
|
||||||
|
class Star {
|
||||||
|
constructor(container) {
|
||||||
|
this.element = document.createElement("div");
|
||||||
|
this.element.classList.add("star");
|
||||||
|
this.container = container;
|
||||||
|
this.speed = Math.random() * 0.5 + 0.1;
|
||||||
|
|
||||||
|
// Random direction angle (0 to 360 degrees)
|
||||||
|
this.angle = Math.random() * Math.PI * 2;
|
||||||
|
this.dx = Math.cos(this.angle) * this.speed;
|
||||||
|
this.dy = Math.sin(this.angle) * this.speed;
|
||||||
|
|
||||||
|
this.x = Math.random() * 100;
|
||||||
|
this.y = Math.random() * 100;
|
||||||
|
|
||||||
|
this.color = this.getRandomStarColor();
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
getRandomStarColor() {
|
||||||
|
const colors = [
|
||||||
|
"rgba(255, 255, 255, 0.9)", // Pure white
|
||||||
|
"rgba(255, 250, 200, 0.9)", // Warm white
|
||||||
|
"rgba(200, 220, 255, 0.9)", // Cool blue-white
|
||||||
|
"rgba(255, 220, 180, 0.9)", // Yellow-white
|
||||||
|
"rgba(180, 200, 255, 0.9)", // Blue-white
|
||||||
|
];
|
||||||
|
return colors[Math.floor(Math.random() * colors.length)];
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
const size = Math.random() * 3 + 0.5;
|
||||||
|
this.element.style.width = `${size}px`;
|
||||||
|
this.element.style.height = `${size}px`;
|
||||||
|
this.element.style.left = `${this.x}%`;
|
||||||
|
this.element.style.top = `${this.y}%`;
|
||||||
|
this.element.style.background = this.color;
|
||||||
|
this.element.style.boxShadow = `0 0 ${size * 2}px ${this.color}`;
|
||||||
|
this.element.style.animationDelay = `${Math.random() * 5}s`;
|
||||||
|
this.element.style.animationDuration = `${3 + Math.random() * 4}s`;
|
||||||
|
this.container.appendChild(this.element);
|
||||||
|
}
|
||||||
|
|
||||||
|
update() {
|
||||||
|
this.x += this.dx * 0.05;
|
||||||
|
this.y += this.dy * 0.05;
|
||||||
|
|
||||||
|
// Wrap around when star goes off screen
|
||||||
|
if (this.y > 100) this.y = 0;
|
||||||
|
if (this.y < 0) this.y = 100;
|
||||||
|
if (this.x > 100) this.x = 0;
|
||||||
|
if (this.x < 0) this.x = 100;
|
||||||
|
|
||||||
|
this.element.style.left = `${this.x}%`;
|
||||||
|
this.element.style.top = `${this.y}%`;
|
||||||
|
}
|
||||||
|
|
||||||
|
remove() {
|
||||||
|
this.element.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Star;
|
||||||
161
src/js/animation/starBackground.js
Normal file
161
src/js/animation/starBackground.js
Normal file
|
|
@ -0,0 +1,161 @@
|
||||||
|
import Star from "./Star.js";
|
||||||
|
import Meteor from "./Meteor.js";
|
||||||
|
|
||||||
|
const starInstances = [];
|
||||||
|
const meteorInstances = [];
|
||||||
|
let lastTime = performance.now();
|
||||||
|
let isTabVisible = true;
|
||||||
|
let animationFrameId = null;
|
||||||
|
|
||||||
|
// Track tab visibility to prevent spawning when hidden
|
||||||
|
document.addEventListener("visibilitychange", () => {
|
||||||
|
isTabVisible = !document.hidden;
|
||||||
|
|
||||||
|
// If tab becomes visible after being hidden, clean up excess meteors
|
||||||
|
if (isTabVisible && meteorInstances.length > 3) {
|
||||||
|
// Remove excess meteors
|
||||||
|
const excess = meteorInstances.length - 3;
|
||||||
|
for (let i = 0; i < excess; i++) {
|
||||||
|
if (meteorInstances[i]) {
|
||||||
|
meteorInstances[i].remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
meteorInstances.splice(0, excess);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Resume animation loop if it stopped
|
||||||
|
if (isTabVisible && !animationFrameId) {
|
||||||
|
lastTime = performance.now();
|
||||||
|
animate();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function createStars() {
|
||||||
|
const stars = document.getElementById("stars");
|
||||||
|
const count = 400;
|
||||||
|
stars.innerHTML = "";
|
||||||
|
starInstances.length = 0;
|
||||||
|
|
||||||
|
for (let i = 0; i < count; i++) {
|
||||||
|
const star = new Star(stars);
|
||||||
|
starInstances.push(star);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function injectStarCSS() {
|
||||||
|
const style = document.createElement("style");
|
||||||
|
style.textContent = `
|
||||||
|
.star {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: twinkle ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes twinkle {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.3; }
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
}
|
||||||
|
|
||||||
|
function trySpawnMeteor() {
|
||||||
|
// Only spawn if tab is visible and not too many meteors
|
||||||
|
if (!isTabVisible || meteorInstances.length >= 2) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const spawnChance = 0.15;
|
||||||
|
if (Math.random() < spawnChance) {
|
||||||
|
const stars = document.getElementById("stars");
|
||||||
|
const newMeteor = new Meteor(stars);
|
||||||
|
meteorInstances.push(newMeteor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function animate() {
|
||||||
|
const currentTime = performance.now();
|
||||||
|
const deltaTime = currentTime - lastTime;
|
||||||
|
lastTime = currentTime;
|
||||||
|
|
||||||
|
// Cap deltaTime to prevent huge jumps when tab is hidden
|
||||||
|
const cappedDelta = Math.min(deltaTime, 100);
|
||||||
|
|
||||||
|
// Update stars with delta time
|
||||||
|
starInstances.forEach((star) => star.update());
|
||||||
|
|
||||||
|
// Update meteors and remove dead ones
|
||||||
|
for (let i = meteorInstances.length - 1; i >= 0; i--) {
|
||||||
|
if (!meteorInstances[i].update(cappedDelta)) {
|
||||||
|
meteorInstances.splice(i, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
animationFrameId = requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createMeteorBurst() {
|
||||||
|
// Only burst if tab is visible
|
||||||
|
if (!isTabVisible) return;
|
||||||
|
|
||||||
|
// Limit burst size
|
||||||
|
const burstSize = Math.min(2, 3 - meteorInstances.length);
|
||||||
|
|
||||||
|
for (let i = 0; i < burstSize; i++) {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (isTabVisible && meteorInstances.length < 3) {
|
||||||
|
const stars = document.getElementById("stars");
|
||||||
|
const newMeteor = new Meteor(stars);
|
||||||
|
meteorInstances.push(newMeteor);
|
||||||
|
}
|
||||||
|
}, i * 300);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let spawnInterval = null;
|
||||||
|
let burstInterval = null;
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
injectStarCSS();
|
||||||
|
createStars();
|
||||||
|
lastTime = performance.now();
|
||||||
|
animate();
|
||||||
|
|
||||||
|
// Longer interval for spawning
|
||||||
|
spawnInterval = setInterval(() => {
|
||||||
|
if (isTabVisible) {
|
||||||
|
trySpawnMeteor();
|
||||||
|
}
|
||||||
|
}, 3000); // Every 3 seconds instead of 2
|
||||||
|
|
||||||
|
// Longer interval for bursts
|
||||||
|
burstInterval = setInterval(() => {
|
||||||
|
if (isTabVisible) {
|
||||||
|
createMeteorBurst();
|
||||||
|
}
|
||||||
|
}, 20000); // Every 20 seconds instead of 15
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cleanup function
|
||||||
|
function cleanup() {
|
||||||
|
if (animationFrameId) {
|
||||||
|
cancelAnimationFrame(animationFrameId);
|
||||||
|
}
|
||||||
|
if (spawnInterval) {
|
||||||
|
clearInterval(spawnInterval);
|
||||||
|
}
|
||||||
|
if (burstInterval) {
|
||||||
|
clearInterval(burstInterval);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle page unload
|
||||||
|
window.addEventListener("beforeunload", cleanup);
|
||||||
|
|
||||||
|
if (document.readyState === "loading") {
|
||||||
|
document.addEventListener("DOMContentLoaded", init);
|
||||||
|
} else {
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
|
||||||
|
export { cleanup };
|
||||||
22
src/js/form.js
Normal file
22
src/js/form.js
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
// Form submission
|
||||||
|
function setupForm() {
|
||||||
|
const form = document.getElementById("contact-form");
|
||||||
|
if (form) {
|
||||||
|
form.addEventListener("submit", function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Simple form validation
|
||||||
|
const name = document.getElementById("name").value;
|
||||||
|
const email = document.getElementById("email").value;
|
||||||
|
const message = document.getElementById("message").value;
|
||||||
|
|
||||||
|
if (name && email && message) {
|
||||||
|
// In a real implementation, you would send the form data to a server
|
||||||
|
alert("Thank you for your message! We will get back to you soon.");
|
||||||
|
form.reset();
|
||||||
|
} else {
|
||||||
|
alert("Please fill in all required fields.");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
27
src/js/main.js
Normal file
27
src/js/main.js
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
// Initialize everything when DOM is loaded
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
// Initialize components
|
||||||
|
if (typeof createStars === "function") createStars();
|
||||||
|
if (typeof updateNavigation === "function") updateNavigation();
|
||||||
|
if (typeof setupForm === "function") setupForm();
|
||||||
|
if (typeof setupMobileNavigation === "function") setupMobileNavigation();
|
||||||
|
|
||||||
|
// Set up event listeners
|
||||||
|
window.addEventListener("scroll", updateNavigation);
|
||||||
|
|
||||||
|
// Smooth scrolling for navigation links
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
|
||||||
|
anchor.addEventListener("click", function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const targetId = this.getAttribute("href");
|
||||||
|
if (targetId === "#") return;
|
||||||
|
|
||||||
|
const targetElement = document.querySelector(targetId);
|
||||||
|
if (targetElement) {
|
||||||
|
targetElement.scrollIntoView({
|
||||||
|
behavior: "smooth",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
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
|
||||||
|
});
|
||||||
228
src/js/portfolioCard.js
Normal file
228
src/js/portfolioCard.js
Normal file
|
|
@ -0,0 +1,228 @@
|
||||||
|
class PortfolioCard extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
const shadow = this.attachShadow({ mode: "open" });
|
||||||
|
|
||||||
|
const icon = this.getAttribute("icon") || "fas fa-code";
|
||||||
|
const title = this.getAttribute("title") || "Project Title";
|
||||||
|
const desc = this.getAttribute("desc") || "Project description goes here.";
|
||||||
|
const tags = (this.getAttribute("tags") || "").split(",");
|
||||||
|
const link = this.getAttribute("link") || "#";
|
||||||
|
const collaboration = this.getAttribute("collaboration") || "";
|
||||||
|
|
||||||
|
shadow.innerHTML = `
|
||||||
|
<!-- Font Awesome inside Shadow DOM -->
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||||
|
<!-- Use global styles.css from index.html -->
|
||||||
|
<link rel="stylesheet" href="src/styles/styles.css">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Collaboration badge styling */
|
||||||
|
.collaboration-badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
background: linear-gradient(135deg, #3b82f6, #2563eb);
|
||||||
|
color: white;
|
||||||
|
padding: 0.3rem 0.8rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0% {
|
||||||
|
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Enhanced card animations */
|
||||||
|
.portfolio-item {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
animation: fadeInUp 0.6s ease forwards;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Portfolio title with icon */
|
||||||
|
.portfolio-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Full-width Enhanced Button Styles */
|
||||||
|
.portfolio-btn-container {
|
||||||
|
margin-top: auto;
|
||||||
|
padding: 0 1.5rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-btn {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 1;
|
||||||
|
padding: 1rem 1.8rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||||
|
border: 2px solid transparent;
|
||||||
|
background: linear-gradient(135deg, var(--purple), var(--purple-dark));
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 4px 15px var(--shadow-purple);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.8rem;
|
||||||
|
text-decoration: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-btn::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(135deg, var(--purple-dark), var(--purple-muted));
|
||||||
|
z-index: -1;
|
||||||
|
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||||
|
transform: scaleX(0);
|
||||||
|
transform-origin: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-btn:hover::before {
|
||||||
|
transform: scaleX(1);
|
||||||
|
transform-origin: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-btn:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 8px 25px rgba(168, 85, 247, 0.4);
|
||||||
|
border-color: var(--purple-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-btn:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
box-shadow: 0 4px 15px var(--shadow-purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-btn i {
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-btn:hover i {
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-btn::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -50%;
|
||||||
|
left: -50%;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
background: linear-gradient(
|
||||||
|
to bottom right,
|
||||||
|
rgba(255, 255, 255, 0.2),
|
||||||
|
rgba(255, 255, 255, 0.1) 20%,
|
||||||
|
rgba(255, 255, 255, 0) 50%,
|
||||||
|
rgba(255, 255, 255, 0) 100%
|
||||||
|
);
|
||||||
|
transform: rotate(30deg) translateY(-150%);
|
||||||
|
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-btn:hover::after {
|
||||||
|
transform: rotate(30deg) translateY(150%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-btn:focus {
|
||||||
|
outline: 2px solid var(--purple-light);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive adjustments */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.portfolio-btn {
|
||||||
|
padding: 0.9rem 1.5rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="portfolio-item">
|
||||||
|
<div class="portfolio-img">
|
||||||
|
<i class="${icon}"></i>
|
||||||
|
</div>
|
||||||
|
<div class="portfolio-content">
|
||||||
|
<h3 class="portfolio-title">
|
||||||
|
<i class="${icon}"></i> ${title}
|
||||||
|
</h3>
|
||||||
|
<p class="portfolio-desc">${desc}</p>
|
||||||
|
${
|
||||||
|
collaboration
|
||||||
|
? `
|
||||||
|
<div class="collaboration-badge">
|
||||||
|
<i class="fas fa-users"></i> ${collaboration}
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
<div class="portfolio-tags">
|
||||||
|
${tags
|
||||||
|
.map((tag) => `<span class="tag">${tag.trim()}</span>`)
|
||||||
|
.join("")}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="portfolio-btn-container">
|
||||||
|
<a href="${link}" target="_blank" class="portfolio-btn">
|
||||||
|
<i class="fas fa-arrow-right"></i> Explore Project
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("portfolio-card", PortfolioCard);
|
||||||
95
src/js/portfolioFilter.js
Normal file
95
src/js/portfolioFilter.js
Normal file
|
|
@ -0,0 +1,95 @@
|
||||||
|
// Portfolio filtering functionality
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
// Get all portfolio items
|
||||||
|
const portfolioItems = document.querySelectorAll("portfolio-card");
|
||||||
|
const filterButtons = document.querySelectorAll(".filter-btn");
|
||||||
|
const searchInput = document.getElementById("project-search");
|
||||||
|
|
||||||
|
// Create a container for no results message
|
||||||
|
const noResults = document.createElement("div");
|
||||||
|
noResults.className = "no-results";
|
||||||
|
noResults.innerHTML = `
|
||||||
|
<i class="fas fa-search"></i>
|
||||||
|
<h3>No projects found</h3>
|
||||||
|
<p>Try adjusting your search or filter criteria</p>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Function to filter portfolio items
|
||||||
|
function filterPortfolio() {
|
||||||
|
const activeFilter =
|
||||||
|
document.querySelector(".filter-btn.active").dataset.filter;
|
||||||
|
const searchTerm = searchInput.value.toLowerCase();
|
||||||
|
let visibleItems = 0;
|
||||||
|
|
||||||
|
portfolioItems.forEach((item) => {
|
||||||
|
const tags = item.getAttribute("tags").toLowerCase();
|
||||||
|
const title = item.getAttribute("title").toLowerCase();
|
||||||
|
const desc = item.getAttribute("desc").toLowerCase();
|
||||||
|
|
||||||
|
// Check if item matches the active filter
|
||||||
|
const matchesFilter =
|
||||||
|
activeFilter === "all" ||
|
||||||
|
tags.includes(activeFilter) ||
|
||||||
|
title.includes(activeFilter) ||
|
||||||
|
desc.includes(activeFilter);
|
||||||
|
|
||||||
|
// Check if item matches the search term
|
||||||
|
const matchesSearch =
|
||||||
|
searchTerm === "" ||
|
||||||
|
title.includes(searchTerm) ||
|
||||||
|
desc.includes(searchTerm) ||
|
||||||
|
tags.includes(searchTerm);
|
||||||
|
|
||||||
|
// Show or hide the item based on filters
|
||||||
|
if (matchesFilter && matchesSearch) {
|
||||||
|
item.style.display = "block";
|
||||||
|
visibleItems++;
|
||||||
|
|
||||||
|
// Add animation for appearing items
|
||||||
|
item.style.animation = "fadeInUp 0.5s ease forwards";
|
||||||
|
} else {
|
||||||
|
item.style.display = "none";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show no results message if needed
|
||||||
|
const portfolioGrid = document.querySelector(".portfolio-grid");
|
||||||
|
const existingNoResults = portfolioGrid.querySelector(".no-results");
|
||||||
|
|
||||||
|
if (visibleItems === 0) {
|
||||||
|
if (!existingNoResults) {
|
||||||
|
portfolioGrid.appendChild(noResults);
|
||||||
|
}
|
||||||
|
} else if (existingNoResults) {
|
||||||
|
portfolioGrid.removeChild(existingNoResults);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add click event listeners to filter buttons
|
||||||
|
filterButtons.forEach((button) => {
|
||||||
|
button.addEventListener("click", function () {
|
||||||
|
// Remove active class from all buttons
|
||||||
|
filterButtons.forEach((btn) => btn.classList.remove("active"));
|
||||||
|
|
||||||
|
// Add active class to clicked button
|
||||||
|
this.classList.add("active");
|
||||||
|
|
||||||
|
// Filter portfolio items
|
||||||
|
filterPortfolio();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add input event listener to search field
|
||||||
|
searchInput.addEventListener("input", filterPortfolio);
|
||||||
|
|
||||||
|
// Add keyboard shortcut for search (Ctrl/Cmd + F)
|
||||||
|
document.addEventListener("keydown", function (e) {
|
||||||
|
if ((e.ctrlKey || e.metaKey) && e.key === "f") {
|
||||||
|
e.preventDefault();
|
||||||
|
searchInput.focus();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initialize filter on page load
|
||||||
|
filterPortfolio();
|
||||||
|
});
|
||||||
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));
|
||||||
|
}
|
||||||
|
});
|
||||||
1943
src/styles/styles.css
Normal file
1943
src/styles/styles.css
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue