pawelorzech.github.io/script.js
Paweł Orzech 58096c3fd8 Transform repository into a modern blog website
- Created responsive blog layout with hero section, navigation, and footer
- Implemented modern CSS with gradients, animations, and mobile-first design
- Added interactive JavaScript for mobile menu, smooth scrolling, and scroll effects
- Created blog post structure with sample welcome post
- Added Font Awesome icons and Google Fonts integration
- Implemented modern blog card design with hover effects
- Added about and contact sections for complete blog experience

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-07 22:51:10 +02:00

109 lines
No EOL
3.1 KiB
JavaScript

// Mobile Navigation Toggle
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
hamburger.addEventListener('click', mobileMenu);
function mobileMenu() {
hamburger.classList.toggle('active');
navMenu.classList.toggle('active');
}
// Close mobile menu when clicking on a nav link
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(n => n.addEventListener('click', closeMenu));
function closeMenu() {
hamburger.classList.remove('active');
navMenu.classList.remove('active');
}
// Smooth scrolling for navigation links
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'
});
}
});
});
// Navbar scroll effect
window.addEventListener('scroll', () => {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 100) {
navbar.style.background = 'rgba(255, 255, 255, 0.98)';
navbar.style.boxShadow = '0 2px 30px rgba(0, 0, 0, 0.15)';
} else {
navbar.style.background = 'rgba(255, 255, 255, 0.95)';
navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
}
});
// Intersection Observer for animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Observe elements for animation
document.querySelectorAll('.blog-card, .section-title, .about-text, .contact-text').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(el);
});
// Add loading effect
window.addEventListener('load', () => {
document.body.classList.add('loaded');
});
// Parallax effect for hero section
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
const heroBackground = document.querySelector('.hero-bg');
if (heroBackground) {
heroBackground.style.transform = `translateY(${scrolled * 0.5}px)`;
}
});
// Dynamic typing effect for hero title (optional enhancement)
function typeWriter(element, text, speed = 100) {
let i = 0;
element.innerHTML = '';
function type() {
if (i < text.length) {
element.innerHTML += text.charAt(i);
i++;
setTimeout(type, speed);
}
}
type();
}
// Initialize typing effect when page loads
document.addEventListener('DOMContentLoaded', () => {
const heroTitle = document.querySelector('.hero h1');
if (heroTitle) {
const originalText = heroTitle.textContent;
setTimeout(() => {
typeWriter(heroTitle, originalText, 80);
}, 500);
}
});