kbe/hugo-mistergeek
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prepare migration to Tailwind

Browse Source
This commit is contained in:
kbe
2025-08-20 11:21:40 +02:00
parent aabcd5eaa2
commit 30a3080480
2637 changed files with 9119 additions and 508739 deletions
Download Patch File Download Diff File Expand all files Collapse all files

301
docs/post.html Normal file
View File

@@ -0,0 +1,301 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Blog Guidelines</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.gradient-bg {
background: linear-gradient(120deg, #f0f9ff 0%, #e0f2fe 100%);
}
.prose {
max-width: none;
}
.prose h2 {
font-weight: 600;
margin-top: 2.5rem;
margin-bottom: 1rem;
font-size: 1.875rem;
line-height: 2.25rem;
}
.prose p {
margin-bottom: 1.5rem;
line-height: 1.75;
}
.prose blockquote {
border-left-width: 4px;
border-color: #3b82f6;
padding-left: 1.5rem;
margin: 2rem 0;
font-style: italic;
}
.tag {
transition: all 0.2s ease;
}
.tag:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.article-image {
transition: transform 0.3s ease;
}
.article-image:hover {
transform: scale(1.02);
}
</style>
</head>
<body class="bg-white text-gray-800 antialiased">
<!-- Header -->
<header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm border-b border-gray-200">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex items-center">
<a href="#" class="text-xl font-bold text-gray-900">YourBlog</a>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#" class="text-gray-600 hover:text-blue-600 font-medium">Home</a>
<a href="#" class="text-gray-600 hover:text-blue-600 font-medium">Articles</a>
<a href="#" class="text-gray-600 hover:text-blue-600 font-medium">Topics</a>
<a href="#" class="text-gray-600 hover:text-blue-600 font-medium">About</a>
</nav>
<div class="flex items-center space-x-4">
<button class="md:hidden text-gray-600">
<i class="fas fa-bars text-xl"></i>
</button>
<button class="hidden md:block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium">
Subscribe
</button>
</div>
</div>
</div>
</header>
<main>
<!-- Hero Section -->
<div class="gradient-bg py-12 md:py-16 lg:py-24">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto text-center">
<div class="flex justify-center space-x-2 mb-6">
<span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">Technology</span>
<span class="bg-green-100 text-green-800 text-sm font-medium px-3 py-1 rounded-full">Future of Work</span>
</div>
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">How Tech Shapes the Future of Work in 2024</h1>
<p class="text-xl text-gray-700 mb-8">Exploring the latest technological advancements and their impact on the modern workplace</p>
<div class="flex items-center justify-center space-x-4 text-gray-600">
<div class="flex items-center">
<img src="https://i.pravatar.cc/40?img=5" alt="Author" class="rounded-full mr-2">
<span>Sarah Johnson</span>
</div>
<span>•</span>
<span>October 16, 2024</span>
<span>•</span>
<span>8 min read</span>
</div>
</div>
</div>
</div>
<!-- Article Content -->
<article class="py-12 md:py-16">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto prose">
<p class="text-lg text-gray-700 leading-relaxed">The workplace is undergoing a radical transformation, driven by rapid technological advancements. From artificial intelligence to remote collaboration tools, technology is reshaping how we work, where we work, and the skills we need to thrive in the modern economy.</p>
<h2>The Rise of AI and Automation</h2>
<p>Artificial intelligence is no longer a futuristic concept—it's here, and it's transforming workplaces across industries. AI-powered tools are automating routine tasks, freeing up human workers to focus on creative and strategic work that requires emotional intelligence and complex problem-solving.</p>
<blockquote>
<p>"The most successful companies of 2024 will be those that effectively integrate human creativity with AI capabilities."</p>
</blockquote>
<p>This shift is creating new roles while making others obsolete. Workers who adapt and develop skills in AI management, data analysis, and machine learning will find themselves in high demand.</p>
<img src="https://images.unsplash.com/photo-1677442135135-416f8aa26a5b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="AI Technology" class="w-full h-auto rounded-xl article-image my-8">
<h2>Remote and Hybrid Work Models</h2>
<p>The pandemic accelerated the adoption of remote work, and in 2024, hybrid models have become the standard for many organizations. Advanced collaboration tools, virtual reality meeting spaces, and cloud-based workflows have made it possible for teams to work together seamlessly, regardless of physical location.</p>
<p>This shift has profound implications for company culture, urban planning, and work-life balance. Companies are rethinking everything from performance metrics to office design to accommodate this new reality.</p>
<h2>Essential Skills for the Future</h2>
<p>As technology evolves, so do the skills needed to succeed in the workplace. Technical literacy is becoming as fundamental as reading and writing, but soft skills like adaptability, creativity, and emotional intelligence are increasingly valuable in a world where machines handle routine tasks.</p>
<div class="bg-gray-50 p-6 rounded-xl my-8">
<h3 class="text-xl font-semibold mb-4">Key Trends for 2024:</h3>
<ul class="list-disc list-inside space-y-2">
<li>Increased adoption of AI-assisted decision making</li>
<li>Growth of the gig economy and project-based work</li>
<li>Focus on employee well-being and mental health</li>
<li>Rise of virtual and augmented reality in training</li>
<li>Greater emphasis on continuous learning and upskilling</li>
</ul>
</div>
<p>The future of work is not about humans versus machines, but about humans and machines working together to achieve what neither could accomplish alone. By embracing technological change while prioritizing human-centric values, we can create workplaces that are more productive, inclusive, and fulfilling.</p>
</div>
</div>
</article>
<!-- Tags Section -->
<div class="py-8 border-t border-gray-200">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Topics:</h3>
<div class="flex flex-wrap gap-3">
<a href="#" class="tag bg-blue-100 text-blue-800 hover:bg-blue-200 px-4 py-2 rounded-full font-medium">Technology</a>
<a href="#" class="tag bg-green-100 text-green-800 hover:bg-green-200 px-4 py-2 rounded-full font-medium">Future of Work</a>
<a href="#" class="tag bg-purple-100 text-purple-800 hover:bg-purple-200 px-4 py-2 rounded-full font-medium">AI</a>
<a href="#" class="tag bg-yellow-100 text-yellow-800 hover:bg-yellow-200 px-4 py-2 rounded-full font-medium">Remote Work</a>
<a href="#" class="tag bg-red-100 text-red-800 hover:bg-red-200 px-4 py-2 rounded-full font-medium">Innovation</a>
</div>
</div>
</div>
</div>
<!-- Author Bio -->
<div class="py-12 bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto">
<div class="flex items-start space-x-6">
<img src="https://i.pravatar.cc/100?img=5" alt="Author" class="rounded-full w-20 h-20">
<div>
<h3 class="text-xl font-semibold text-gray-900">Sarah Johnson</h3>
<p class="text-blue-600 font-medium mb-4">Technology Writer & Future of Work Researcher</p>
<p class="text-gray-700">Sarah writes about the intersection of technology, work, and society. Her work has been featured in leading publications around the world. She holds a PhD in Organizational Behavior from Stanford University.</p>
<div class="flex space-x-4 mt-4">
<a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-linkedin"></i></a>
<a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-medium"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Related Articles -->
<div class="py-12">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-2xl font-bold text-gray-900 mb-8 text-center">Related Articles</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
<img src="https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Article" class="w-full h-48 object-cover">
<div class="p-6">
<span class="text-sm font-medium text-blue-600">Productivity</span>
<h3 class="text-xl font-semibold mt-2 mb-3">10 Tools to Boost Your Productivity in 2024</h3>
<p class="text-gray-600">Discover the latest apps and software that can help you work smarter, not harder.</p>
<div class="flex items-center mt-4 text-sm text-gray-500">
<span>May 12, 2024</span>
<span class="mx-2">•</span>
<span>5 min read</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
<img src="https://images.unsplash.com/photo-1533750349088-cd871a92f312?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Article" class="w-full h-48 object-cover">
<div class="p-6">
<span class="text-sm font-medium text-green-600">Remote Work</span>
<h3 class="text-xl font-semibold mt-2 mb-3">Building Company Culture in a Remote World</h3>
<p class="text-gray-600">How forward-thinking companies are maintaining strong cultures with distributed teams.</p>
<div class="flex items-center mt-4 text-sm text-gray-500">
<span>July 24, 2024</span>
<span class="mx-2">•</span>
<span>7 min read</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
<img src="https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Article" class="w-full h-48 object-cover">
<div class="p-6">
<span class="text-sm font-medium text-purple-600">AI</span>
<h3 class="text-xl font-semibold mt-2 mb-3">The Ethics of Artificial Intelligence in Hiring</h3>
<p class="text-gray-600">Exploring the benefits and potential pitfalls of using AI to recruit and evaluate candidates.</p>
<div class="flex items-center mt-4 text-sm text-gray-500">
<span>September 3, 2024</span>
<span class="mx-2">•</span>
<span>9 min read</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Newsletter -->
<div class="py-12 bg-blue-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Join the Newsletter</h2>
<p class="text-gray-700 mb-6">Stay updated with the latest insights on technology and the future of work.</p>
<form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium">Subscribe</button>
</form>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">YourBlog</h3>
<p class="text-gray-400">Exploring the future of work and technology through thoughtful analysis and commentary.</p>
</div>
<div>
<h4 class="font-semibold mb-4">Explore</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Articles</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Topics</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">Topics</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Technology</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Future of Work</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Productivity</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Remote Work</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">Connect</h4>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram text-xl"></i></a>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
<p>© 2024 YourBlog. All rights reserved.</p>
</div>
</div>
</footer>
</body>
</html>