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

Redesign blog with minimal white aesthetic

Browse source 
- 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>
This commit is contained in:
Paweł Orzech 2025-09-08 10:57:26 +02:00
parent 58096c3fd8
commit 421026b334
4 changed files with 535 additions and 561 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

175
index.html
View file

@ -3,136 +3,107 @@
<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>
<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 href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<div class="nav-logo">
<h2>Pawel Orzech</h2>
<header class="header">
<div class="container">
<div class="profile">
<div class="avatar">
<img src="https://via.placeholder.com/60x60/666/fff?text=PO" alt="Pawel Orzech" class="avatar-img">
</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>
<div class="profile-info">
<h1 class="name">Pawel Orzech</h1>
<p class="bio">Thoughts, ideas, and stories from my journey</p>
</div>
</div>
<nav class="nav">
<a href="#" class="nav-link">About</a>
<a href="#" class="nav-link">Archive</a>
<a href="#" class="nav-link">Photos</a>
</nav>
<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>
</header>
<section id="blog" class="blog-section">
<main class="main">
<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 class="posts">
<!-- Long form post example -->
<article class="post post-long">
<header class="post-header">
<time class="post-date">09.08.2025</time>
<h2 class="post-title">Welcome to My Blog</h2>
</header>
<div class="post-content">
<p>This is my first blog post! I'm excited to share my thoughts and experiences with you. Starting a blog has been something I've been thinking about for a while.</p>
<p>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>
<a href="posts/welcome.html" class="read-more">Continue reading →</a>
</div>
</article>
<article class="blog-card">
<div class="blog-image">
<div class="placeholder-image">
<i class="fas fa-code"></i>
<!-- Short form post with image -->
<article class="post post-short">
<header class="post-header">
<time class="post-date">07.08.2025</time>
</header>
<div class="post-content">
<div class="post-image">
<img src="https://via.placeholder.com/600x400/f0f0f0/666?text=Beautiful+Landscape" alt="Beautiful landscape photo" loading="lazy">
</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>
<p>Beautiful sunset from my evening walk. Sometimes the simple moments are the most memorable.</p>
</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>
<!-- Short text-only post -->
<article class="post post-short">
<header class="post-header">
<time class="post-date">06.08.2025</time>
</header>
<div class="post-content">
<p>Currently reading about minimalist design principles. Less truly can be more when done thoughtfully.</p>
</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>
<!-- Short form post with image -->
<article class="post post-short">
<header class="post-header">
<time class="post-date">05.08.2025</time>
</header>
<div class="post-content">
<div class="post-image">
<img src="https://via.placeholder.com/600x300/f5f5f5/666?text=Tech+Setup" alt="My workspace setup" loading="lazy">
</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>
<p>My minimal workspace setup. Clean desk, clear mind.</p>
</div>
</div>
</div>
</section>
</article>
<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>
<!-- Long form post -->
<article class="post post-long">
<header class="post-header">
<time class="post-date">04.08.2025</time>
<h2 class="post-title">On Digital Minimalism</h2>
</header>
<div class="post-content">
<p>I've been thinking a lot about digital minimalism lately. In our hyper-connected world, the constant stream of notifications and information can be overwhelming.</p>
<p>The key is being intentional about what we let into our digital lives...</p>
<a href="posts/digital-minimalism.html" class="read-more">Continue reading →</a>
</div>
</article>
</div>
<div class="pagination">
<a href="#" class="pagination-link">← Older posts</a>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<p>&copy; 2025 Pawel Orzech. All rights reserved.</p>
<p>© 2025 Pawel Orzech</p>
</div>
</footer>

202
posts/digital-minimalism.html Normal file
View file

@ -0,0 +1,202 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>On Digital Minimalism - Pawel Orzech</title>
<link rel="stylesheet" href="../style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
.post-page {
max-width: 650px;
margin: 0 auto;
padding: 40px 20px;
}
.post-header {
border-bottom: 1px solid #f0f0f0;
padding-bottom: 24px;
margin-bottom: 32px;
}
.back-link {
color: #666;
text-decoration: none;
font-size: 14px;
font-weight: 500;
margin-bottom: 16px;
display: inline-block;
}
.back-link:hover {
color: #000;
}
.post-title {
font-size: 28px;
font-weight: 600;
color: #000;
margin: 0 0 8px 0;
line-height: 1.2;
}
.post-date {
font-size: 13px;
color: #999;
font-weight: 500;
}
.post-content {
line-height: 1.65;
color: #333;
}
.post-content p {
margin: 0 0 24px 0;
font-size: 16px;
}
.post-content h2 {
font-size: 20px;
font-weight: 600;
color: #000;
margin: 32px 0 16px 0;
line-height: 1.3;
}
.post-content h3 {
font-size: 18px;
font-weight: 600;
color: #000;
margin: 24px 0 12px 0;
line-height: 1.3;
}
.post-content blockquote {
border-left: 3px solid #f0f0f0;
padding-left: 20px;
margin: 24px 0;
color: #666;
font-style: italic;
}
.post-content ul, .post-content ol {
margin: 0 0 24px 0;
padding-left: 24px;
}
.post-content li {
margin: 0 0 8px 0;
}
.post-image {
margin: 32px 0;
border-radius: 8px;
overflow: hidden;
}
.post-image img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
border: 1px solid #f0f0f0;
}
@media (max-width: 768px) {
.post-page {
padding: 24px 16px;
}
.post-title {
font-size: 24px;
}
.post-content h2 {
font-size: 18px;
}
.post-content h3 {
font-size: 16px;
}
}
</style>
</head>
<body>
<article class="post-page">
<header class="post-header">
<a href="../index.html" class="back-link">← Back to blog</a>
<h1 class="post-title">On Digital Minimalism</h1>
<time class="post-date">04.08.2025</time>
</header>
<div class="post-content">
<p>I've been thinking a lot about digital minimalism lately. In our hyper-connected world, the constant stream of notifications and information can be overwhelming. We're living in an age where our attention has become the most valuable commodity, and everyone wants a piece of it.</p>
<p>The key is being intentional about what we let into our digital lives. It's not about rejecting technology entirely, but rather about curating our digital environment to serve our goals and values rather than distract from them.</p>
<h2>What Digital Minimalism Means to Me</h2>
<p>Digital minimalism isn't about going back to flip phones or abandoning the internet. It's about being selective and intentional with our digital tools. Just as we might declutter our physical spaces, we need to declutter our digital ones too.</p>
<p>For me, this has meant:</p>
<ul>
<li>Removing social media apps from my phone</li>
<li>Turning off all non-essential notifications</li>
<li>Being more selective about the websites I visit regularly</li>
<li>Choosing quality content over quantity</li>
</ul>
<h2>The Benefits I've Noticed</h2>
<p>Since adopting a more minimalist approach to digital consumption, I've noticed several positive changes:</p>
<p><strong>Better Focus:</strong> Without constant notifications and distractions, I can engage more deeply with whatever I'm working on. The quality of my work has improved, and I feel more satisfied with what I accomplish.</p>
<p><strong>More Present Moments:</strong> I find myself more engaged in conversations and experiences. Instead of reaching for my phone during quiet moments, I'm more comfortable with silence and observation.</p>
<blockquote>
"The art of being wise is knowing what to overlook." - William James
</blockquote>
<p><strong>Reduced Anxiety:</strong> Less exposure to the constant stream of news and social media has led to a noticeable decrease in background anxiety. I'm still informed about important events, but I consume news intentionally rather than passively.</p>
<h2>Practical Steps</h2>
<p>If you're interested in exploring digital minimalism, here are some practical steps that worked for me:</p>
<h3>Start Small</h3>
<p>Don't try to change everything at once. Pick one or two areas to focus on first. Maybe it's removing one social media app or turning off email notifications.</p>
<h3>Be Intentional</h3>
<p>Before adding any new digital tool or service to your life, ask yourself: "What specific value does this add to my life?" and "Is there a simpler way to achieve the same goal?"</p>
<h3>Create Boundaries</h3>
<p>Establish clear boundaries around your digital usage. This might mean designated phone-free times, specific hours for checking email, or keeping devices out of the bedroom.</p>
<div class="post-image">
<img src="https://via.placeholder.com/650x400/f5f5f5/666?text=Minimal+Workspace" alt="A clean, minimal workspace with just the essentials" loading="lazy">
</div>
<h2>It's an Ongoing Process</h2>
<p>Digital minimalism isn't a destination but a practice. Technology continues to evolve, and so do our needs and circumstances. What works today might need adjustment tomorrow, and that's okay.</p>
<p>The goal isn't to create the perfect digital environment, but to cultivate the awareness and intentionality to make conscious choices about how we engage with technology.</p>
<p>What matters most is that our digital tools serve us, not the other way around. In a world that profits from our distraction, choosing to be intentional with our attention is both a personal and political act.</p>
<p><em>How do you approach digital minimalism? I'd love to hear your thoughts and experiences.</em></p>
</div>
</article>
<footer class="footer">
<div class="container">
<p>© 2025 Pawel Orzech</p>
</div>
</footer>
<script src="../script.js"></script>
</body>
</html>

130
script.js
View file

@ -1,25 +1,50 @@
// Mobile Navigation Toggle
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
// Minimal blog functionality
document.addEventListener('DOMContentLoaded', () => {
// Image loading optimization
const images = document.querySelectorAll('img[loading="lazy"]');
hamburger.addEventListener('click', mobileMenu);
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);
}
});
});
function mobileMenu() {
hamburger.classList.toggle('active');
navMenu.classList.toggle('active');
images.forEach(img => {
img.style.opacity = '0';
img.style.transition = 'opacity 0.3s ease';
imageObserver.observe(img);
});
}
// Close mobile menu when clicking on a nav link
const navLinks = document.querySelectorAll('.nav-link');
// Simple fade-in animation for posts on scroll
const posts = document.querySelectorAll('.post');
navLinks.forEach(n => n.addEventListener('click', closeMenu));
function closeMenu() {
hamburger.classList.remove('active');
navMenu.classList.remove('active');
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'
});
// Smooth scrolling for navigation links
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();
@ -32,78 +57,3 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
}
});
});
// 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);
}
});

537
style.css
View file

@ -8,7 +8,9 @@ body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden;
background: #fff;
font-size: 16px;
font-weight: 400;
}
html {
@ -16,424 +18,273 @@ html {
}
.container {
max-width: 1200px;
max-width: 650px;
margin: 0 auto;
padding: 0 20px;
}
/* Navigation */
.navbar {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
position: fixed;
top: 0;
/* Header */
.header {
padding: 40px 0;
border-bottom: 1px solid #eee;
background: #fff;
}
.profile {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
.avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
}
.avatar-img {
width: 100%;
z-index: 1000;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
height: 100%;
object-fit: cover;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 1rem 20px;
display: flex;
justify-content: space-between;
align-items: center;
.profile-info {
flex: 1;
}
.nav-logo h2 {
color: #2563eb;
.name {
font-size: 24px;
font-weight: 600;
color: #000;
margin: 0;
line-height: 1.2;
}
.nav-menu {
.bio {
font-size: 14px;
color: #666;
margin: 4px 0 0 0;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
gap: 2rem;
}
.nav-item {
list-style: none;
gap: 24px;
}
.nav-link {
color: #666;
text-decoration: none;
color: #333;
font-size: 14px;
font-weight: 500;
transition: color 0.3s ease;
position: relative;
transition: color 0.2s ease;
}
.nav-link:hover {
color: #2563eb;
color: #000;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 0;
background-color: #2563eb;
transition: width 0.3s ease;
/* Main Content */
.main {
padding: 40px 0;
}
.nav-link:hover::after {
width: 100%;
}
.hamburger {
display: none;
.posts {
display: flex;
flex-direction: column;
cursor: pointer;
}
.bar {
width: 25px;
height: 3px;
background-color: #333;
margin: 3px 0;
transition: 0.3s;
.post {
margin-bottom: 48px;
padding-bottom: 32px;
border-bottom: 1px solid #f0f0f0;
}
/* 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:last-child {
border-bottom: none;
margin-bottom: 24px;
}
.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-header {
margin-bottom: 16px;
}
.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;
margin-bottom: 1rem;
}
.blog-date {
color: #6b7280;
font-size: 0.9rem;
}
.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-date {
font-size: 13px;
color: #999;
font-weight: 500;
display: block;
margin-bottom: 8px;
}
.blog-content h3 {
font-size: 1.5rem;
.post-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 0.5rem;
color: #1f2937;
color: #000;
margin: 0;
line-height: 1.3;
}
.blog-content p {
color: #6b7280;
margin-bottom: 1rem;
line-height: 1.6;
.post-long .post-title {
margin-bottom: 16px;
}
.post-content {
color: #333;
line-height: 1.65;
}
.post-content p {
margin: 0 0 16px 0;
font-size: 16px;
}
.post-content p:last-child {
margin-bottom: 0;
}
/* Images */
.post-image {
margin: 0 0 16px 0;
border-radius: 8px;
overflow: hidden;
}
.post-image img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
}
/* Read more links */
.read-more {
color: #2563eb;
color: #666;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
font-size: 14px;
font-weight: 500;
display: inline-block;
margin-top: 8px;
transition: color 0.2s ease;
}
.read-more:hover {
color: #1d4ed8;
color: #000;
}
.read-more.disabled {
color: #9ca3af;
cursor: not-allowed;
/* Short vs Long posts */
.post-short .post-title {
display: none;
}
/* About Section */
.about-section {
background: #f9fafb;
.post-short .post-content {
font-size: 16px;
}
.about-content {
max-width: 600px;
margin: 0 auto;
.post-long .post-content {
font-size: 16px;
}
/* Pagination */
.pagination {
text-align: center;
margin: 40px 0;
padding-top: 20px;
border-top: 1px solid #f0f0f0;
}
.about-text p {
font-size: 1.1rem;
color: #4b5563;
margin-bottom: 1.5rem;
}
.about-links {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 2rem;
}
.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;
.pagination-link {
color: #666;
text-decoration: none;
font-size: 1.2rem;
transition: transform 0.3s ease;
font-size: 14px;
font-weight: 500;
transition: color 0.2s ease;
}
.social-link:hover {
transform: translateY(-3px) scale(1.1);
}
/* Contact Section */
.contact-section {
text-align: center;
}
.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);
.pagination-link:hover {
color: #000;
}
/* Footer */
.footer {
background: #1f2937;
color: white;
text-align: center;
padding: 2rem 0;
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
padding: 40px 0;
border-top: 1px solid #eee;
color: #999;
font-size: 13px;
}
/* Responsive Design */
@media screen and (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
flex-direction: column;
background-color: white;
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
padding: 2rem 0;
}
.nav-menu.active {
left: 0;
}
.hamburger {
display: flex;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.hero h1 {
font-size: 2.5rem;
}
.section-title {
font-size: 2rem;
}
.blog-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (max-width: 768px) {
.container {
padding: 0 15px;
padding: 0 16px;
}
.header {
padding: 24px 0;
}
.profile {
margin-bottom: 20px;
}
.nav {
gap: 20px;
}
.main {
padding: 24px 0;
}
.post {
margin-bottom: 32px;
padding-bottom: 24px;
}
.name {
font-size: 20px;
}
.post-title {
font-size: 18px;
}
}
@media screen and (max-width: 480px) {
.hero h1 {
font-size: 2rem;
@media (max-width: 480px) {
.container {
padding: 0 12px;
}
.hero-subtitle {
font-size: 1rem;
.profile {
gap: 12px;
}
.blog-grid {
grid-template-columns: 1fr;
.avatar {
width: 50px;
height: 50px;
}
.blog-card {
margin: 0 10px;
.name {
font-size: 18px;
}
.nav {
gap: 16px;
}
.post-content p {
font-size: 15px;
}
}
/* Light theme for images */
.post-image img {
border: 1px solid #f0f0f0;
}
/* Hover effects for images */
.post-image img:hover {
opacity: 0.95;
transition: opacity 0.2s ease;
}