Website overhaul completed
This commit is contained in:
parent
4cb566828a
commit
9115a41488
18 changed files with 1407 additions and 263 deletions
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));
|
||||
}
|
||||
});
|
||||
22
src/js/stars.js
Normal file
22
src/js/stars.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
// Create stellar background
|
||||
function createStars() {
|
||||
const stars = document.getElementById("stars");
|
||||
const count = 250;
|
||||
stars.innerHTML = ""; // Clear any existing stars
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const star = document.createElement("div");
|
||||
star.classList.add("star");
|
||||
|
||||
const size = Math.random() * 3;
|
||||
star.style.width = `${size}px`;
|
||||
star.style.height = `${size}px`;
|
||||
|
||||
star.style.left = `${Math.random() * 100}%`;
|
||||
star.style.top = `${Math.random() * 100}%`;
|
||||
|
||||
star.style.animationDelay = `${Math.random() * 5}s`;
|
||||
|
||||
stars.appendChild(star);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue