pawelorzech/pawelorzech.github.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Redesign as minimalistic magazine-style blog

Browse source 
- Complete redesign with clean, editorial layout focused on content
- Removed flashy elements, gradients, and animations for minimal aesthetic
- Implemented magazine-style typography using Crimson Text and Inter fonts
- Added support for different post types: long-form, photography, and short posts
- Created photography-focused layout with proper image handling
- Streamlined navigation and removed complex features
- Simplified JavaScript to essential functionality only
- Perfect for photography, writing, and technology content
- Mobile-responsive design maintaining clean aesthetics

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Paweł Orzech 2025-09-08 10:25:53 +02:00
parent 58096c3fd8
commit 265f050a5c
4 changed files with 526 additions and 763 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

194
index.html
View file

@ -3,136 +3,98 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pawel Orzech - Blog</title>
<title>Pawel Orzech</title>
<meta name="description" content="Photography, writing, and thoughts on technology">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<div class="nav-logo">
<h2>Pawel Orzech</h2>
</div>
<ul class="nav-menu">
<li class="nav-item">
<a href="#home" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#blog" class="nav-link">Blog</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">Contact</a>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<header class="site-header">
<div class="header-container">
<div class="site-identity">
<h1 class="site-title">Pawel Orzech</h1>
<p class="site-tagline">Photography • Writing • Technology</p>
</div>
<nav class="site-nav">
<a href="#" class="nav-link">Home</a>
<a href="#" class="nav-link">About</a>
<a href="#" class="nav-link">Contact</a>
</nav>
</div>
</nav>
</header>
<main>
<section id="home" class="hero">
<div class="hero-content">
<h1>Welcome to My Blog</h1>
<p class="hero-subtitle">Thoughts, ideas, and stories from my journey</p>
<a href="#blog" class="cta-button">Read My Posts</a>
</div>
<div class="hero-bg"></div>
</section>
<main class="main-content">
<section id="blog" class="blog-section">
<div class="container">
<h2 class="section-title">Latest Posts</h2>
<div class="blog-grid">
<article class="blog-card">
<div class="blog-image">
<div class="placeholder-image">
<i class="fas fa-image"></i>
</div>
</div>
<div class="blog-content">
<div class="blog-meta">
<span class="blog-date">September 7, 2025</span>
<span class="blog-tag">Welcome</span>
</div>
<h3>Welcome to My Blog</h3>
<p>This is my first blog post! I'm excited to share my thoughts and experiences with you.</p>
<a href="posts/welcome.html" class="read-more">Read More</a>
</div>
</article>
<section class="posts">
<article class="blog-card">
<div class="blog-image">
<div class="placeholder-image">
<i class="fas fa-code"></i>
</div>
</div>
<div class="blog-content">
<div class="blog-meta">
<span class="blog-date">Coming Soon</span>
<span class="blog-tag">Tech</span>
</div>
<h3>My Development Journey</h3>
<p>Exploring the world of software development and sharing insights along the way.</p>
<a href="#" class="read-more disabled">Coming Soon</a>
</div>
</article>
<article class="blog-card">
<div class="blog-image">
<div class="placeholder-image">
<i class="fas fa-lightbulb"></i>
</div>
</div>
<div class="blog-content">
<div class="blog-meta">
<span class="blog-date">Coming Soon</span>
<span class="blog-tag">Ideas</span>
</div>
<h3>Creative Thoughts</h3>
<p>Random thoughts and creative ideas that inspire me in my daily life.</p>
<a href="#" class="read-more disabled">Coming Soon</a>
</div>
</article>
</div>
</div>
</section>
<section id="about" class="about-section">
<div class="container">
<h2 class="section-title">About Me</h2>
<div class="about-content">
<div class="about-text">
<p>Hi! I'm Pawel, and this is my personal blog where I share my thoughts, experiences, and ideas.</p>
<p>Welcome to my corner of the internet. I'm excited to connect with you through my writing.</p>
</div>
<div class="about-links">
<a href="#" class="social-link"><i class="fab fa-github"></i></a>
<a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
<a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
<article class="post">
<div class="post-header">
<h2 class="post-title"><a href="posts/welcome.html">Welcome to My New Blog</a></h2>
<div class="post-meta">
<time datetime="2025-09-08">September 8, 2025</time>
<span class="post-type">Long-form</span>
</div>
</div>
</div>
<div class="post-content">
<p>After months of planning and designing, I'm excited to launch this new space where I'll share my thoughts on technology, development, photography, and life. This is more than just a blog—it's a digital notebook.</p>
</div>
</article>
<article class="post post-photo">
<div class="post-image">
<img src="https://via.placeholder.com/800x400/f8f9fa/6c757d?text=Photography+Sample" alt="Sample photograph" />
</div>
<div class="post-header">
<h2 class="post-title"><a href="#">Evening Light</a></h2>
<div class="post-meta">
<time datetime="2025-09-07">September 7, 2025</time>
<span class="post-type">Photography</span>
</div>
</div>
<div class="post-content">
<p>Captured during golden hour. There's something magical about the way light transforms everything it touches.</p>
</div>
</article>
<article class="post post-short">
<div class="post-header">
<div class="post-meta">
<time datetime="2025-09-06">September 6, 2025</time>
<span class="post-type">Short</span>
</div>
</div>
<div class="post-content">
<p>Just discovered this amazing new app for productivity. Sometimes the simplest tools are the most effective. Less is more.</p>
</div>
</article>
<article class="post">
<div class="post-header">
<h2 class="post-title"><a href="#">Nintendo DS in 2025: Nostalgia Gaming</a></h2>
<div class="post-meta">
<time datetime="2025-09-05">September 5, 2025</time>
<span class="post-type">Long-form</span>
</div>
</div>
<div class="post-content">
<p>Why I bought a Nintendo DS in 2025 and rediscovered the joy of handheld gaming. Sometimes the best technology is the one that just works, without complications or constant updates.</p>
</div>
</article>
</section>
<section id="contact" class="contact-section">
<div class="container">
<h2 class="section-title">Get In Touch</h2>
<p class="contact-text">Have something to say? I'd love to hear from you.</p>
<a href="mailto:contact@example.com" class="contact-button">Send Email</a>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<p>&copy; 2025 Pawel Orzech. All rights reserved.</p>
<footer class="site-footer">
<div class="footer-container">
<p>&copy; 2025 Pawel Orzech</p>
<div class="footer-links">
<a href="mailto:contact@example.com">Email</a>
<a href="#">RSS</a>
</div>
</div>
</footer>

316
posts/welcome.html
View file

@ -5,215 +5,137 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to My Blog - Pawel Orzech</title>
<link rel="stylesheet" href="../style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.post-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 120px 0 80px 0;
margin-top: 70px;
}
.post-content {
max-width: 800px;
margin: 0 auto;
padding: 60px 20px;
line-height: 1.8;
}
.post-meta {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e5e7eb;
}
.post-title {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
text-align: center;
}
.post-subtitle {
font-size: 1.2rem;
opacity: 0.9;
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.back-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: white;
color: #2563eb;
padding: 12px 24px;
text-decoration: none;
border-radius: 25px;
font-weight: 600;
transition: all 0.3s ease;
margin-bottom: 2rem;
}
.back-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
}
.post-content h2 {
color: #1f2937;
font-size: 2rem;
margin: 2rem 0 1rem 0;
font-weight: 600;
}
.post-content h3 {
color: #374151;
font-size: 1.5rem;
margin: 1.5rem 0 1rem 0;
font-weight: 600;
}
.post-content p {
color: #4b5563;
font-size: 1.1rem;
margin-bottom: 1.5rem;
}
.post-content blockquote {
background: #f9fafb;
border-left: 4px solid #2563eb;
padding: 1rem 1.5rem;
margin: 2rem 0;
font-style: italic;
border-radius: 0 8px 8px 0;
}
.post-content code {
background: #f3f4f6;
padding: 2px 6px;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
color: #1f2937;
}
.post-navigation {
background: #f9fafb;
padding: 40px 0;
text-align: center;
}
@media (max-width: 768px) {
.post-title {
font-size: 2rem;
}
.post-content {
padding: 40px 15px;
}
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<div class="nav-logo">
<h2>Pawel Orzech</h2>
<header class="site-header">
<div class="header-container">
<div class="site-identity">
<h1 class="site-title"><a href="../index.html">Pawel Orzech</a></h1>
<p class="site-tagline">Photography • Writing • Technology</p>
</div>
<ul class="nav-menu">
<li class="nav-item">
<a href="../index.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="../index.html#blog" class="nav-link">Blog</a>
</li>
<li class="nav-item">
<a href="../index.html#about" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="../index.html#contact" class="nav-link">Contact</a>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</nav>
<header class="post-header">
<div class="container">
<h1 class="post-title">Welcome to My Blog</h1>
<p class="post-subtitle">The beginning of a new journey in sharing thoughts and ideas</p>
<nav class="site-nav">
<a href="../index.html" class="nav-link">Home</a>
<a href="../index.html" class="nav-link">About</a>
<a href="../index.html" class="nav-link">Contact</a>
</nav>
</div>
</header>
<main class="post-content">
<a href="../index.html#blog" class="back-button">
<i class="fas fa-arrow-left"></i>
Back to Blog
</a>
<div class="post-meta">
<span><i class="fas fa-calendar"></i> September 7, 2025</span>
<span><i class="fas fa-tag"></i> Welcome</span>
<span><i class="fas fa-clock"></i> 3 min read</span>
</div>
<main class="main-content">
<article class="post-single">
<header class="post-header">
<h1 class="post-title">Welcome to My Blog</h1>
<div class="post-meta">
<time datetime="2025-09-08">September 8, 2025</time>
<span class="post-type">Long-form</span>
</div>
</header>
<h2>Hello World!</h2>
<p>Welcome to my personal blog! This is my first post, and I'm excited to begin this journey of sharing my thoughts, experiences, and ideas with you.</p>
<p>Starting a blog has been something I've been thinking about for a while. There's something magical about putting thoughts into words and sharing them with the world. Whether you're here by accident or intention, I'm glad you stopped by.</p>
<h3>What You Can Expect</h3>
<p>This blog will be a mix of various topics that interest me:</p>
<ul>
<li><strong>Technology & Development:</strong> Insights from my coding journey, useful tips, and interesting discoveries in the world of software development.</li>
<li><strong>Personal Thoughts:</strong> Reflections on life, learning, and growth.</li>
<li><strong>Creative Ideas:</strong> Random thoughts and creative projects that inspire me.</li>
</ul>
<blockquote>
"The best time to plant a tree was 20 years ago. The second best time is now." - Chinese Proverb
</blockquote>
<p>I believe in the power of sharing knowledge and experiences. Every post here will be written with the hope that it might help someone, spark an idea, or simply provide an interesting read during your coffee break.</p>
<h3>Let's Connect</h3>
<p>I'd love to hear from you! Feel free to reach out through the contact section on the main page. Whether you have feedback, questions, or just want to say hello, I'm always open to connecting with fellow readers and learners.</p>
<p>Thank you for being here at the beginning of this journey. Here's to many more posts, ideas, and connections ahead!</p>
<p><em>Happy reading!</em><br>
Pawel</p>
<div class="post-content">
<p>Welcome to my personal blog! This is my first post, and I'm excited to begin this journey of sharing my thoughts, experiences, and ideas with you.</p>
<p>Starting a blog has been something I've been thinking about for a while. There's something magical about putting thoughts into words and sharing them with the world. Whether you're here by accident or intention, I'm glad you stopped by.</p>
<h2>What You Can Expect</h2>
<p>This blog will be a mix of various topics that interest me:</p>
<ul>
<li><strong>Photography:</strong> Visual stories and moments that inspire me</li>
<li><strong>Technology:</strong> Insights from my development work and interesting discoveries</li>
<li><strong>Personal Thoughts:</strong> Reflections on life, learning, and growth</li>
<li><strong>Short Notes:</strong> Quick thoughts and observations</li>
</ul>
<blockquote>
<p>"The best time to plant a tree was 20 years ago. The second best time is now."</p>
<cite>— Chinese Proverb</cite>
</blockquote>
<p>I believe in the power of sharing knowledge and experiences. Every post here will be written with the hope that it might help someone, spark an idea, or simply provide an interesting read during your coffee break.</p>
<h2>Let's Connect</h2>
<p>I'd love to hear from you! Whether you have feedback, questions, or just want to say hello, I'm always open to connecting with fellow readers and learners.</p>
<p>Thank you for being here at the beginning of this journey. Here's to many more posts, ideas, and connections ahead!</p>
<p><em>Happy reading!</em><br>
Pawel</p>
</div>
</article>
</main>
<div class="post-navigation">
<div class="container">
<a href="../index.html#blog" class="cta-button">
<i class="fas fa-arrow-left"></i>
Back to All Posts
</a>
</div>
</div>
<footer class="footer">
<div class="container">
<p>&copy; 2025 Pawel Orzech. All rights reserved.</p>
<footer class="site-footer">
<div class="footer-container">
<p>&copy; 2025 Pawel Orzech</p>
<div class="footer-links">
<a href="mailto:contact@example.com">Email</a>
<a href="#">RSS</a>
</div>
</div>
</footer>
<script src="../script.js"></script>
<style>
.post-single {
padding: 3rem 0 4rem 0;
}
.post-single .post-header {
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid #f0f0f0;
}
.post-single .post-title {
font-size: 2.25rem;
margin-bottom: 1rem;
}
.post-single .post-content h2 {
font-size: 1.5rem;
margin: 2rem 0 1rem 0;
}
.post-single .post-content ul {
margin: 1.5rem 0;
padding-left: 1.5rem;
}
.post-single .post-content li {
margin-bottom: 0.5rem;
}
.post-single .post-content blockquote {
margin: 2rem 0;
padding: 1.5rem;
background: #f8f9fa;
border-left: 4px solid #1a1a1a;
border-radius: 0 4px 4px 0;
}
.post-single .post-content blockquote p {
margin: 0 0 0.5rem 0;
font-style: italic;
font-size: 1.125rem;
}
.post-single .post-content blockquote cite {
font-size: 0.875rem;
color: #666;
font-style: normal;
}
@media (max-width: 768px) {
.post-single .post-title {
font-size: 1.75rem;
}
}
</style>
</body>
</html>

150
script.js
View file

@ -1,109 +1,45 @@
// 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
// Minimal Blog JavaScript
document.addEventListener('DOMContentLoaded', () => {
const heroTitle = document.querySelector('.hero h1');
if (heroTitle) {
const originalText = heroTitle.textContent;
setTimeout(() => {
typeWriter(heroTitle, originalText, 80);
}, 500);
// 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'
});
}
});
});
// Simple image loading effect
const images = document.querySelectorAll('img');
images.forEach(img => {
img.addEventListener('load', () => {
img.style.opacity = '1';
});
});
});
// Simple focus management for accessibility
document.addEventListener('keydown', (e) => {
// Remove focus styles when using mouse
if (e.key === 'Tab') {
document.body.classList.add('using-keyboard');
}
});
});
document.addEventListener('mousedown', () => {
document.body.classList.remove('using-keyboard');
});
// Add minimal CSS for focus management
const style = document.createElement('style');
style.textContent = `
body:not(.using-keyboard) *:focus {
outline: none;
}
`;
document.head.appendChild(style);

629
style.css
View file

@ -1,439 +1,382 @@
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #1a1a1a;
background-color: #ffffff;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Navigation */
.navbar {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 1rem 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo h2 {
color: #2563eb;
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: 'Crimson Text', Georgia, serif;
font-weight: 600;
line-height: 1.3;
margin: 0;
}
.nav-menu {
a {
color: #1a1a1a;
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: #666;
}
/* Header */
.site-header {
border-bottom: 1px solid #e5e5e5;
background: #ffffff;
position: sticky;
top: 0;
z-index: 100;
}
.header-container {
max-width: 800px;
margin: 0 auto;
padding: 2rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
}
.site-identity {
flex: 1;
}
.site-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.25rem;
letter-spacing: -0.02em;
}
.site-tagline {
font-size: 0.875rem;
color: #666;
font-weight: 400;
}
.site-nav {
display: flex;
gap: 2rem;
}
.nav-item {
list-style: none;
}
.nav-link {
text-decoration: none;
color: #333;
font-size: 0.875rem;
font-weight: 500;
transition: color 0.3s ease;
position: relative;
}
.nav-link:hover {
color: #2563eb;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
bottom: -4px;
left: 0;
background-color: #2563eb;
transition: width 0.3s ease;
width: 0;
height: 1px;
background-color: #1a1a1a;
transition: width 0.2s ease;
}
.nav-link:hover::after {
width: 100%;
}
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
/* Main Content */
.main-content {
max-width: 800px;
margin: 0 auto;
padding: 0 1.5rem;
}
.bar {
width: 25px;
height: 3px;
background-color: #333;
margin: 3px 0;
transition: 0.3s;
/* Posts */
.posts {
padding: 3rem 0;
}
/* Hero Section */
.hero {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
.post {
margin-bottom: 4rem;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 3rem;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='m0 40l40-40h-40v40zm40 0v-40h-40l40 40z'/%3E%3C/g%3E%3C/svg%3E");
.post:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.hero-content {
z-index: 2;
max-width: 600px;
padding: 0 20px;
}
.hero h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1rem;
animation: fadeInUp 1s ease;
}
.hero-subtitle {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
animation: fadeInUp 1s ease 0.2s both;
}
.cta-button {
display: inline-block;
background: white;
color: #2563eb;
padding: 15px 30px;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
transition: transform 0.3s ease, box-shadow 0.3s ease;
animation: fadeInUp 1s ease 0.4s both;
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
/* Sections */
.blog-section,
.about-section,
.contact-section {
padding: 80px 0;
}
.section-title {
text-align: center;
font-size: 2.5rem;
font-weight: 600;
margin-bottom: 3rem;
color: #1f2937;
}
.section-title::after {
content: '';
display: block;
width: 50px;
height: 3px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
margin: 1rem auto;
}
/* Blog Grid */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.blog-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
.blog-image {
height: 200px;
position: relative;
overflow: hidden;
}
.placeholder-image {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 3rem;
}
.blog-content {
padding: 1.5rem;
}
.blog-meta {
display: flex;
justify-content: space-between;
align-items: center;
.post-header {
margin-bottom: 1rem;
}
.blog-date {
color: #6b7280;
font-size: 0.9rem;
.post-title {
font-size: 1.75rem;
margin-bottom: 0.75rem;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.2;
}
.blog-tag {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
.post-title a {
color: #1a1a1a;
}
.post-title a:hover {
color: #666;
}
.post-meta {
display: flex;
align-items: center;
gap: 1rem;
font-size: 0.875rem;
color: #666;
}
.post-meta time {
font-weight: 500;
}
.blog-content h3 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #1f2937;
.post-type {
background: #f5f5f5;
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.blog-content p {
color: #6b7280;
margin-bottom: 1rem;
line-height: 1.6;
.post-content {
font-size: 1.05rem;
line-height: 1.7;
color: #333;
}
.read-more {
color: #2563eb;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.read-more:hover {
color: #1d4ed8;
}
.read-more.disabled {
color: #9ca3af;
cursor: not-allowed;
}
/* About Section */
.about-section {
background: #f9fafb;
}
.about-content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.about-text p {
font-size: 1.1rem;
color: #4b5563;
.post-content p {
margin-bottom: 1.5rem;
}
.about-links {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 2rem;
.post-content p:last-child {
margin-bottom: 0;
}
.social-link {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 1.2rem;
/* Photography Posts */
.post-photo {
margin-bottom: 5rem;
}
.post-image {
width: 100%;
margin-bottom: 1.5rem;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.post-image img {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
}
.social-link:hover {
transform: translateY(-3px) scale(1.1);
.post-image:hover img {
transform: scale(1.02);
}
/* Contact Section */
.contact-section {
text-align: center;
/* Short Posts */
.post-short .post-content {
font-size: 1.125rem;
font-style: italic;
color: #444;
position: relative;
padding-left: 1.5rem;
}
.contact-text {
font-size: 1.1rem;
color: #4b5563;
margin-bottom: 2rem;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.contact-button {
display: inline-block;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 15px 30px;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-button:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
.post-short .post-content::before {
content: '"';
font-size: 3rem;
color: #ddd;
position: absolute;
left: -0.5rem;
top: -1rem;
font-family: Georgia, serif;
line-height: 1;
}
/* Footer */
.footer {
background: #1f2937;
color: white;
text-align: center;
padding: 2rem 0;
.site-footer {
border-top: 1px solid #e5e5e5;
margin-top: 4rem;
background: #fafafa;
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
.footer-container {
max-width: 800px;
margin: 0 auto;
padding: 2rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
color: #666;
}
.footer-links {
display: flex;
gap: 1.5rem;
}
.footer-links a {
color: #666;
font-weight: 500;
}
.footer-links a:hover {
color: #1a1a1a;
}
/* Responsive Design */
@media screen and (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
@media (max-width: 768px) {
html {
font-size: 15px;
}
.header-container {
padding: 1.5rem 1rem;
flex-direction: column;
background-color: white;
width: 100%;
gap: 1rem;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
}
.site-nav {
gap: 1.5rem;
justify-content: center;
}
.main-content {
padding: 0 1rem;
}
.posts {
padding: 2rem 0;
}
.nav-menu.active {
left: 0;
.post {
margin-bottom: 3rem;
padding-bottom: 2rem;
}
.hamburger {
display: flex;
.post-title {
font-size: 1.5rem;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
.post-meta {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
.footer-container {
flex-direction: column;
gap: 1rem;
text-align: center;
padding: 1.5rem 1rem;
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
.post-short .post-content {
padding-left: 1rem;
}
.hero h1 {
.post-short .post-content::before {
left: -0.25rem;
font-size: 2.5rem;
}
.section-title {
font-size: 2rem;
}
.blog-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.container {
padding: 0 15px;
top: -0.75rem;
}
}
@media screen and (max-width: 480px) {
.hero h1 {
font-size: 2rem;
@media (max-width: 480px) {
.site-nav {
gap: 1rem;
}
.hero-subtitle {
.nav-link {
font-size: 0.8rem;
}
.post-title {
font-size: 1.375rem;
}
.post-content {
font-size: 1rem;
}
.blog-grid {
grid-template-columns: 1fr;
.post-short .post-content {
font-size: 1.0625rem;
}
}
.blog-card {
margin: 0 10px;
/* Print Styles */
@media print {
.site-header,
.site-footer {
display: none;
}
.main-content {
max-width: none;
padding: 0;
}
.post {
page-break-inside: avoid;
margin-bottom: 2rem;
padding-bottom: 1rem;
}
.post-image {
box-shadow: none;
}
a {
color: #1a1a1a !important;
}
}
/* Focus and Accessibility */
a:focus,
button:focus {
outline: 2px solid #1a1a1a;
outline-offset: 2px;
}
/* Selection */
::selection {
background: #1a1a1a;
color: #ffffff;
}
::-moz-selection {
background: #1a1a1a;
color: #ffffff;
}