File size: 5,423 Bytes
0f9c236 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 |
// Portfolio data - using placeholder images from static.photos
const portfolioItems = [
{
id: 1,
title: "Stellar Genesis",
description: "Digital painting inspired by star formation",
image: "http://static.photos/abstract/640x360/1",
category: "digital"
},
{
id: 2,
title: "Pleiadian Dreamscape",
description: "3D render of celestial architecture",
image: "http://static.photos/blue/640x360/2",
category: "3d"
},
{
id: 3,
title: "Cosmic Convergence",
description: "Mixed media digital collage",
image: "http://static.photos/gradient/640x360/3",
category: "mixed"
},
{
id: 4,
title: "Nebula Reflections",
description: "Interactive digital installation",
image: "http://static.photos/black/640x360/4",
category: "interactive"
},
{
id: 5,
title: "Starlight Symphony",
description: "Animated visual composition",
image: "http://static.photos/white/640x360/5",
category: "animation"
},
{
id: 6,
title: "Celestial Harmony",
description: "VR experience concept art",
image: "http://static.photos/monochrome/640x360/6",
category: "vr"
}
];
// Initialize the portfolio gallery
function initPortfolio() {
const portfolioGrid = document.getElementById('portfolio-grid');
portfolioItems.forEach(item => {
const portfolioItem = document.createElement('div');
portfolioItem.className = 'portfolio-item fade-in';
portfolioItem.innerHTML = `
<img src="${item.image}" alt="${item.title}" class="portfolio-image">
<div class="portfolio-overlay">
<h3 class="text-white text-xl font-semibold mb-2">${item.title}</h3>
<p class="text-silver text-sm">${item.description}</p>
</div>
`;
portfolioGrid.appendChild(portfolioItem);
});
}
// Contact form handling
function initContactForm() {
const contactForm = document.getElementById('contact-form');
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
// Get form data
const formData = new FormData(contactForm);
const data = Object.fromEntries(formData);
// Simple validation
if (!data.name || !data.email || !data.message) {
showNotification('Please fill in all fields', 'error');
return;
}
// Simulate form submission
showNotification('Message sent to the cosmos! ALACON will respond soon.', 'success');
contactForm.reset();
});
}
// Notification system
function showNotification(message, type = 'info') {
const notification = document.createElement('div');
notification.className = `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg transform transition-all duration-300 ${
type === 'success' ? 'bg-green-500' :
type === 'error' ? 'bg-red-500' : 'bg-blue-500'
} text-white`;
notification.textContent = message;
document.body.appendChild(notification);
// Animate in
setTimeout(() => {
notification.style.transform = 'translateX(0)';
}, 100);
// Remove after 5 seconds
setTimeout(() => {
notification.style.transform = 'translateX(100%)';
setTimeout(() => {
document.body.removeChild(notification);
}, 300);
}, 5000);
}
// Scroll animations
function initScrollAnimations() {
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
// Observe all fade-in elements
document.querySelectorAll('.fade-in').forEach(el => {
observer.observe(el);
});
}
// Smooth scrolling for navigation
function initSmoothScroll() {
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
}
// Initialize everything when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
initPortfolio();
initContactForm();
initScrollAnimations();
initSmoothScroll();
// Add some random stars to the hero section
addRandomStars();
});
// Add random stars for celestial effect
function addRandomStars() {
const heroSection = document.getElementById('hero');
const starsContainer = heroSection.querySelector('.absolute.opacity-20');
for (let i = 0; i < 15; i++) {
const star = document.createElement('div');
star.className = 'star';
star.style.top = `${Math.random() * 100}%`;
star.style.left = `${Math.random() * 100}%`;
star.style.animationDelay = `${Math.random() * 3}s`;
star.style.width = `${Math.random() * 3 + 1}px`; |