blogs.html

---
layout: default
title: Blog Posts
description: Taemin Park's blog posts about programming, technology, and personal experiences
---

<!-- Main Content -->
    <main role="main">
        <!-- Blog Hero Section -->
        <section class="blog-hero">
            <div class="blog-hero-content">
                <div class="blog-emoji">📝</div>
                <h1 class="blog-hero-title">Taemin's Blog</h1>
                <p class="blog-hero-subtitle">Thoughts, experiments, and projects I'm working on.</p>
            </div>
        </section>

        <!-- Blog Posts Section -->
        <section class="blog-posts">
            <div class="blog-grid">
                {% for post in site.posts %}
                {% assign post_cover = post.thumbnail | default: post.cover_image | default: post.image | default: post.featured_image %}
                {% if post_cover == nil or post_cover == '' %}
                {% assign post_segments = post.content | split: 'src="' %}
                {% if post_segments.size > 1 %}
                {% assign post_cover = post_segments[1] | split: '"' | first %}
                {% endif %}
                {% endif %}
                {% assign post_category = post.categories | first | default: post.category %}
                {% assign post_inspiration = post.inspired_by | default: post.artist_inspiration %}
                <article class="blog-card" data-aos="fade-up" data-aos-offset="120" data-aos-duration="500" data-aos-easing="ease-out-cubic" data-aos-once="true" data-aos-anchor-placement="top-bottom" data-href="{{ post.url }}" tabindex="0" role="link" aria-label="Open post: {{ post.title }}">
                    <div class="blog-card-media">
                        {% if post_cover %}
                        {% capture cover_alt %}{{ post.title }} cover{% endcapture %}
                        {% include responsive-image.html
                            src=post_cover
                            alt=cover_alt
                            class="blog-card-image"
                            sizes="(max-width: 768px) 90vw, (max-width: 1200px) 45vw, 350px"
                        %}
                        {% if post_inspiration %}
                        <div class="blog-card-inspiration">Inspired by {{ post_inspiration }}</div>
                        {% endif %}
                        {% else %}
                        <div class="blog-card-media-placeholder" aria-hidden="true"></div>
                        {% endif %}
                    </div>
                    <div class="blog-card-content">
                        <div class="blog-card-meta">
                            {% if post_category %}
                            <span class="blog-card-category">{{ post_category }}</span>
                            {% endif %}
                            <time class="blog-date">{{ post.date | date: "%B %d, %Y" }}</time>
                        </div>
                        <h2 class="blog-title">{{ post.title }}</h2>
                    </div>
                </article>
                {% endfor %}
            </div>
                </section>
                <script>
                    // Whole-card clickable behavior with keyboard accessibility
                    document.addEventListener('DOMContentLoaded', function(){
                        const blogCards = document.querySelectorAll('.blog-card[data-href]');
                        const cardsWithAOS = Array.from(document.querySelectorAll('.blog-card[data-aos]'));
                        const originalAOSData = new Map();
                        const scheduledTransformCleanup = new WeakSet();

                        const scheduleTransformCleanup = (card) => {
                            if (!(card instanceof HTMLElement) || scheduledTransformCleanup.has(card)) return;
                            scheduledTransformCleanup.add(card);

                            const clearInlineTransform = () => {
                                card.style.removeProperty('transform');
                                scheduledTransformCleanup.delete(card);
                            };

                            const handleMouseLeave = () => {
                                card.removeEventListener('mouseleave', handleMouseLeave);
                                clearInlineTransform();
                            };

                            const completeCleanup = () => {
                                if (card.matches(':hover')) {
                                    card.addEventListener('mouseleave', handleMouseLeave, { once: true });
                                    return;
                                }
                                clearInlineTransform();
                            };

                            const duration = Number(card.getAttribute('data-aos-duration')) || 600;
                            setTimeout(completeCleanup, duration + 120);
                        };

                        const removeAOSAttributes = (el) => {
                            el.removeAttribute('data-aos');
                            el.removeAttribute('data-aos-delay');
                            el.removeAttribute('data-aos-duration');
                            el.removeAttribute('data-aos-easing');
                            el.removeAttribute('data-aos-offset');
                            el.removeAttribute('data-aos-once');
                            el.removeAttribute('data-aos-anchor-placement');
                            el.style.removeProperty('transform');
                        };

                        cardsWithAOS.forEach(card => {
                            const attributeNames = Array.from(card.getAttributeNames()).filter(name => name.startsWith('data-aos'));
                            const storedAttributes = attributeNames.map(name => [name, card.getAttribute(name)]);
                            originalAOSData.set(card, storedAttributes);
                        });

                        blogCards.forEach(card => {
                            const url = card.getAttribute('data-href');
                            if(!url) return;
                            card.addEventListener('click', e => {
                                if(e.defaultPrevented) return;
                                if(e.target.closest('a')) return; // preserve inner link
                                window.location.href = url;
                            });
                            card.addEventListener('keydown', e => {
                                if(e.key === 'Enter' || e.key === ' ') {
                                    e.preventDefault();
                                    window.location.href = url;
                                }
                            });
                            card.style.cursor = 'pointer';
                        });

                        // Respect reduced motion preferences and mobile/touch users by disabling AOS
                        const prefersReducedQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
                        const disableForInputQuery = window.matchMedia('(hover: none), (pointer: coarse)');
                        const disableForSizeQuery = window.matchMedia('(max-width: 768px)');

                        const triggerAllAnimations = () => {
                            cardsWithAOS.forEach(card => {
                                if (!card.hasAttribute('data-aos')) return;
                                card.classList.remove('aos-animate');
                                void card.offsetWidth;
                                card.classList.add('aos-animate');
                                scheduleTransformCleanup(card);
                            });
                        };

                        let loadHandlerRegistered = false;
                        const scheduleAnimationTrigger = () => {
                            if (document.readyState === 'complete') {
                                requestAnimationFrame(triggerAllAnimations);
                                return;
                            }
                            if (loadHandlerRegistered) return;
                            loadHandlerRegistered = true;
                            window.addEventListener('load', () => requestAnimationFrame(triggerAllAnimations), { once: true });
                        };

                        const restoreAOSAttributes = (card) => {
                            const storedAttributes = originalAOSData.get(card);
                            if (!storedAttributes) return;
                            storedAttributes.forEach(([name, value]) => {
                                if (value !== null && value !== undefined) {
                                    card.setAttribute(name, value);
                                }
                            });
                        };

                        const shouldDisableAnimations = () =>
                            prefersReducedQuery.matches || disableForInputQuery.matches || disableForSizeQuery.matches;

                        const applyAOSState = () => {
                            if (shouldDisableAnimations()) {
                                cardsWithAOS.forEach(removeAOSAttributes);
                                return;
                            }
                            cardsWithAOS.forEach(card => {
                                if (!card.hasAttribute('data-aos')) {
                                    restoreAOSAttributes(card);
                                }
                            });
                            scheduleAnimationTrigger();
                        };

                        applyAOSState();

                        document.addEventListener('aos:in', ({ detail }) => {
                            const target = detail instanceof HTMLElement ? detail : null;
                            if (!target || !target.classList.contains('blog-card')) return;
                            scheduleTransformCleanup(target);
                        });

                        const registerMediaListener = (query) => {
                            if (typeof query.addEventListener === 'function') {
                                query.addEventListener('change', applyAOSState);
                            } else if (typeof query.addListener === 'function') {
                                query.addListener(applyAOSState);
                            }
                        };

                        [prefersReducedQuery, disableForInputQuery, disableForSizeQuery].forEach(registerMediaListener);

                        cardsWithAOS.forEach(card => {
                            if (card.classList.contains('aos-animate')) {
                                scheduleTransformCleanup(card);
                            }
                        });
                    });
                </script>
        </main>