pawelorzech.github.io/script.js
Paweł Orzech 421026b334 Redesign blog with minimal white aesthetic
- Complete redesign to match minimal, clean look inspired by pawel.orzech.me
- Support for both short microblog posts and long-form articles
- Beautiful image display with proper loading and hover effects
- Removed complex gradients and animations in favor of clean typography
- Implemented chronological post feed layout
- Added proper post differentiation (short vs long posts)
- Minimal navigation and clean spacing throughout
- Responsive design optimized for readability
- Added sample digital minimalism blog post

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-08 10:57:26 +02:00

59 lines
No EOL
1.9 KiB
JavaScript

// Minimal blog functionality
document.addEventListener('DOMContentLoaded', () => {
// Image loading optimization
const images = document.querySelectorAll('img[loading="lazy"]');
if ('IntersectionObserver' in window) {
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.style.opacity = '1';
observer.unobserve(img);
}
});
});
images.forEach(img => {
img.style.opacity = '0';
img.style.transition = 'opacity 0.3s ease';
imageObserver.observe(img);
});
}
// Simple fade-in animation for posts on scroll
const posts = document.querySelectorAll('.post');
const postObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
});
posts.forEach(post => {
post.style.opacity = '0';
post.style.transform = 'translateY(20px)';
post.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
postObserver.observe(post);
});
});
// Simple smooth scrolling for anchor 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'
});
}
});
});