wip

src/components/Tag.astro

@@ -0,0 +1,125 @@
+---
+interface Props {
+  tag: string;
+  index: number;
+  className?: string;
+}
+
+const { tag, index, className = '' } = Astro.props;
+
+// Color mapping based on tag content for variety
+const getColorClass = (tag: string) => {
+  const tagLower = tag.toLowerCase();
+  if (tagLower.includes('meta') || tagLower.includes('learning')) return 'highlighter-yellow';
+  if (tagLower.includes('debug') || tagLower.includes('tools')) return 'highlighter-pink';
+  if (tagLower.includes('ai') || tagLower.includes('automation')) return 'highlighter-blue';
+  if (tagLower.includes('script') || tagLower.includes('code')) return 'highlighter-green';
+  return 'highlighter-yellow'; // default
+};
+
+const colorClass = getColorClass(tag);
+---
+
+<span class={`highlighter-tag ${colorClass} ${className} inline-block text-xs font-bold px-2.5 py-1 rounded cursor-pointer transition-all duration-200 relative overflow-hidden group`} data-tag={tag}>
+  <span class="relative z-10">{tag}</span>
+  
+  <!-- Subtle underline animation -->
+  <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-current transition-all duration-300 group-hover:w-full opacity-50"></span>
+  
+  <!-- Micro-interaction: small dot that appears on hover -->
+  <span class="absolute top-1/2 left-1/2 w-0 h-0 bg-white/30 rounded-full transform -translate-x-1/2 -translate-y-1/2 transition-all duration-300 group-hover:w-1 group-hover:h-1"></span>
+</span>
+
+<style>
+  /* Enhanced hover effects */
+  .highlighter-tag {
+    transform: rotate(-1deg) translateY(0);
+    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .highlighter-tag:hover {
+    transform: rotate(-2deg) translateY(-2px) scale(1.05);
+    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15);
+  }
+
+  /* Staggered entrance animation */
+  @keyframes tagPopIn {
+    from {
+      opacity: 0;
+      transform: rotate(-1deg) scale(0.8) translateY(5px);
+    }
+    to {
+      opacity: 1;
+      transform: rotate(-1deg) scale(1) translateY(0);
+    }
+  }
+
+  .highlighter-tag {
+    animation: tagPopIn 0.3s ease-out both;
+    animation-delay: calc(var(--tag-index, 0) * 0.05s);
+  }
+
+  /* Color variations with gradients */
+  .highlighter-yellow {
+    background: linear-gradient(135deg, rgba(255, 235, 59, 0.95) 0%, rgba(255, 213, 79, 0.95) 100%);
+    color: #3f2f00;
+  }
+
+  .highlighter-pink {
+    background: linear-gradient(135deg, rgba(255, 167, 209, 0.95) 0%, rgba(255, 122, 175, 0.95) 100%);
+    color: #3f0018;
+  }
+
+  .highlighter-green {
+    background: linear-gradient(135deg, rgba(129, 199, 132, 0.95) 0%, rgba(102, 187, 106, 0.95) 100%);
+    color: #002f0a;
+  }
+
+  .highlighter-blue {
+    background: linear-gradient(135deg, rgba(100, 181, 246, 0.95) 0%, rgba(66, 165, 245, 0.95) 100%);
+    color: #001f3f;
+  }
+
+  /* Hover glow effect */
+  .highlighter-tag:hover::before {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    background: inherit;
+    filter: blur(8px);
+    opacity: 0.4;
+    z-index: -1;
+    border-radius: inherit;
+  }
+
+  /* Click effect */
+  .highlighter-tag:active {
+    transform: rotate(-1deg) translateY(0) scale(0.98);
+    transition: transform 0.1s ease;
+  }
+
+  /* Focus effect for accessibility */
+  .highlighter-tag:focus {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+    transform: rotate(-1deg) translateY(-2px) scale(1.05);
+    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3), 3px 3px 0 rgba(0, 0, 0, 0.15);
+  }
+</style>
+
+<script>
+  // Add click handler for tag filtering
+  if (typeof document !== 'undefined') {
+    document.addEventListener('DOMContentLoaded', () => {
+      const tags = document.querySelectorAll('.highlighter-tag');
+      tags.forEach(tagElement => {
+        tagElement.addEventListener('click', (e) => {
+          const tag = tagElement.getAttribute('data-tag');
+          if (tag && typeof (window as any).filterByTag === 'function') {
+            (window as any).filterByTag(tag);
+          }
+        });
+      });
+    });
+  }
+</script>