diff --git a/index.html b/index.html index 757cea6..8eaa010 100644 --- a/index.html +++ b/index.html @@ -3,136 +3,107 @@ - Pawel Orzech - Blog + Pawel Orzech - - + - - -
-
-
-

Welcome to My Blog

-

Thoughts, ideas, and stories from my journey

- Read My Posts -
-
-
- -
-
-

Latest Posts

-
-
-
-
- -
-
-
-
- September 7, 2025 - Welcome -
-

Welcome to My Blog

-

This is my first blog post! I'm excited to share my thoughts and experiences with you.

- Read More -
-
- -
-
-
- -
-
-
-
- Coming Soon - Tech -
-

My Development Journey

-

Exploring the world of software development and sharing insights along the way.

- Coming Soon -
-
- -
-
-
- -
-
-
-
- Coming Soon - Ideas -
-

Creative Thoughts

-

Random thoughts and creative ideas that inspire me in my daily life.

- Coming Soon -
-
-
-
-
- -
-
-

About Me

-
-
-

Hi! I'm Pawel, and this is my personal blog where I share my thoughts, experiences, and ideas.

-

Welcome to my corner of the internet. I'm excited to connect with you through my writing.

-
-
- - - -
-
-
-
- -
-
-

Get In Touch

-

Have something to say? I'd love to hear from you.

- Send Email -
-
diff --git a/posts/digital-minimalism.html b/posts/digital-minimalism.html new file mode 100644 index 0000000..f74eabd --- /dev/null +++ b/posts/digital-minimalism.html @@ -0,0 +1,202 @@ + + + + + + On Digital Minimalism - Pawel Orzech + + + + + +
+
+ ← Back to blog +

On Digital Minimalism

+ +
+ +
+

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.

+ +

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.

+ +

What Digital Minimalism Means to Me

+ +

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.

+ +

For me, this has meant:

+ + + +

The Benefits I've Noticed

+ +

Since adopting a more minimalist approach to digital consumption, I've noticed several positive changes:

+ +

Better Focus: 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.

+ +

More Present Moments: 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.

+ +
+ "The art of being wise is knowing what to overlook." - William James +
+ +

Reduced Anxiety: 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.

+ +

Practical Steps

+ +

If you're interested in exploring digital minimalism, here are some practical steps that worked for me:

+ +

Start Small

+

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.

+ +

Be Intentional

+

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?"

+ +

Create Boundaries

+

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.

+ +
+ A clean, minimal workspace with just the essentials +
+ +

It's an Ongoing Process

+ +

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.

+ +

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.

+ +

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.

+ +

How do you approach digital minimalism? I'd love to hear your thoughts and experiences.

+
+
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js index 3811a62..f12f871 100644 --- a/script.js +++ b/script.js @@ -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"]'); + + 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); + } + }); + }); -hamburger.addEventListener('click', mobileMenu); + 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' + }); -function mobileMenu() { - hamburger.classList.toggle('active'); - navMenu.classList.toggle('active'); -} + 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); + }); +}); -// 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 +// Simple smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); @@ -31,79 +56,4 @@ 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); - } }); \ No newline at end of file diff --git a/style.css b/style.css index dd21d07..83d5e8e 100644 --- a/style.css +++ b/style.css @@ -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; } + + .profile { + gap: 12px; + } + + .avatar { + width: 50px; + height: 50px; + } + + .name { + font-size: 18px; + } + + .nav { + gap: 16px; + } + + .post-content p { + font-size: 15px; + } +} - .hero-subtitle { - font-size: 1rem; - } +/* Light theme for images */ +.post-image img { + border: 1px solid #f0f0f0; +} - .blog-grid { - grid-template-columns: 1fr; - } - - .blog-card { - margin: 0 10px; - } +/* Hover effects for images */ +.post-image img:hover { + opacity: 0.95; + transition: opacity 0.2s ease; } \ No newline at end of file