- 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>
109 lines
No EOL
3.1 KiB
JavaScript
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);
|
|
}
|
|
}); |