blog.html

---
layout: base
title: Blog
summary: A collection of blog posts about coding, tech, and more
---

<div class="post-page" style="background-image: url(&quot;{{ '/assets/img/bg.png' | relative_url }}&quot;)">
    <!-- Header -->
    <div class="w-full pt-32">
        <div class="max-w-2xl mx-auto bg-black/30 backdrop-blur-sm border border-white/10 py-8 rounded-lg">
            <h1 class="text-4xl font-bold text-indigo-400 font-heading text-center">Blog Posts</h1>
        </div>
    </div>
    
    <div class="container mx-auto px-4 mt-12 mb-12">
        <div class="max-w-7xl mx-auto">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                {% for post in site.posts %}
                <article class="bg-gray-900/90 rounded-lg shadow-lg overflow-hidden backdrop-blur p-6 h-full">
                    <h2 class="text-xl font-bold mb-2 text-indigo-400 font-heading">
                        <a href="{{ post.url | relative_url }}" class="hover:text-indigo-300 transition-colors">
                            {{ post.title }}
                        </a>
                    </h2>
                    {% if post.summary %}
                    <div class="text-gray-300 mb-4 italic">
                        {{ post.summary }}
                    </div>
                    {% endif %}
                    <div class="flex flex-wrap gap-x-4 text-sm mb-4">
                        <div class="text-gray-400">
                            {{ post.date | date: "%B %d, %Y" }}
                        </div>
                        {% if post.categories %}
                        <div class="text-gray-400">
                            Category: {{ post.categories | join: ", " }}
                        </div>
                        {% endif %}
                    </div>
                    {% if post.tags %}
                    <div class="flex flex-wrap gap-2 mb-4">
                        {% for tag in post.tags %}
                        <span class="inline-flex items-center text-xs px-3 py-1 bg-indigo-900/80 text-indigo-200 rounded-full hover:bg-indigo-800/80 transition-colors backdrop-blur">
                            {{ tag }}
                        </span>
                        {% endfor %}
                    </div>
                    {% endif %}
                </article>
                {% endfor %}
            </div>
        </div>
    </div>
</div>