This commit is contained in:
Paweł Orzech 2025-09-08 11:01:33 +02:00
commit 3c4e6db997
2 changed files with 124 additions and 197 deletions

BIN
images/sample-photo.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

View file

@ -5,215 +5,142 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to My Blog - Pawel Orzech</title> <title>Welcome to My Blog - Pawel Orzech</title>
<link rel="stylesheet" href="../style.css"> <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="preconnect" href="https://fonts.googleapis.com">
<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.gstatic.com" crossorigin>
<style> <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">
.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>
</head> </head>
<body> <body>
<nav class="navbar"> <header class="site-header">
<div class="nav-container"> <div class="header-container">
<div class="nav-logo"> <div class="site-identity">
<h2>Pawel Orzech</h2> <h1 class="site-title"><a href="../index.html">Pawel Orzech</a></h1>
<p class="site-tagline">Photography • Writing • Technology</p>
</div> </div>
<ul class="nav-menu"> <nav class="site-nav">
<li class="nav-item"> <a href="../index.html" class="nav-link">Home</a>
<a href="../index.html" class="nav-link">Home</a> <a href="../index.html" class="nav-link">About</a>
</li> <a href="../index.html" class="nav-link">Contact</a>
<li class="nav-item"> </nav>
<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>
</div> </div>
</header> </header>
<main class="post-content"> <main class="main-content">
<a href="../index.html#blog" class="back-button"> <article class="post-single">
<i class="fas fa-arrow-left"></i> <header class="post-header">
Back to Blog <h1 class="post-title">Welcome to My Blog</h1>
</a> <div class="post-meta">
<time datetime="2025-09-08">September 8, 2025</time>
<div class="post-meta"> <span class="post-type">Long-form</span>
<span><i class="fas fa-calendar"></i> September 7, 2025</span> </div>
<span><i class="fas fa-tag"></i> Welcome</span> </header>
<span><i class="fas fa-clock"></i> 3 min read</span>
</div>
<h2>Hello World!</h2> <div class="post-content">
<figure class="post-image">
<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> <img src="../images/sample-photo.jpg" alt="Sample photo from my blog" />
<figcaption>A glimpse into the visual stories I'll be sharing</figcaption>
<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> </figure>
<h3>What You Can Expect</h3> <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>This blog will be a mix of various topics that interest me:</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>
<ul> <h2>What You Can Expect</h2>
<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> <p>This blog will be a mix of various topics that interest me:</p>
<li><strong>Creative Ideas:</strong> Random thoughts and creative projects that inspire me.</li>
</ul> <ul>
<li><strong>Photography:</strong> Visual stories and moments that inspire me</li>
<blockquote> <li><strong>Technology:</strong> Insights from my development work and interesting discoveries</li>
"The best time to plant a tree was 20 years ago. The second best time is now." - Chinese Proverb <li><strong>Personal Thoughts:</strong> Reflections on life, learning, and growth</li>
</blockquote> <li><strong>Short Notes:</strong> Quick thoughts and observations</li>
</ul>
<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>
<blockquote>
<h3>Let's Connect</h3> <p>"The best time to plant a tree was 20 years ago. The second best time is now."</p>
<cite>— Chinese Proverb</cite>
<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> </blockquote>
<p>Thank you for being here at the beginning of this journey. Here's to many more posts, ideas, and connections ahead!</p> <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>
<p><em>Happy reading!</em><br> <h2>Let's Connect</h2>
Pawel</p>
<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> </main>
<div class="post-navigation"> <footer class="site-footer">
<div class="container"> <div class="footer-container">
<a href="../index.html#blog" class="cta-button"> <p>&copy; 2025 Pawel Orzech</p>
<i class="fas fa-arrow-left"></i> <div class="footer-links">
Back to All Posts <a href="mailto:contact@example.com">Email</a>
</a> <a href="#">RSS</a>
</div> </div>
</div>
<footer class="footer">
<div class="container">
<p>&copy; 2025 Pawel Orzech. All rights reserved.</p>
</div> </div>
</footer> </footer>
<script src="../script.js"></script> <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> </body>
</html> </html>