feat: add dev portfolio template and add dev-hero, portfolio, tech-stack blocks

Also, fix card view to use theme colors rather than hard-coded colors

modules/blox/assets/css/animations.css

@@ -0,0 +1,256 @@
+/**
+ * Hugo Blox Animations
+ * Scroll-triggered reveals and micro-interactions
+ */
+
+/* Typewriter cursor */
+.typewriter-cursor {
+  display: inline-block;
+  width: 3px;
+  margin-left: 2px;
+  background-color: currentColor;
+  animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+/* Reveal animations base */
+[x-reveal] {
+  opacity: 0;
+}
+
+/* Stagger container */
+[data-stagger] > [data-stagger-item] {
+  opacity: 0;
+  transform: translateY(20px);
+  transition:
+    opacity 0.5s ease-out,
+    transform 0.5s ease-out;
+}
+
+[data-stagger].revealed > [data-stagger-item] {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Hover enhancements for cards */
+.card-hover-lift {
+  transition:
+    transform 0.3s ease-out,
+    box-shadow 0.3s ease-out;
+}
+
+.card-hover-lift:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.3);
+}
+
+/* Hover glow effect */
+.hover-glow {
+  position: relative;
+  transition: all 0.3s ease-out;
+}
+
+.hover-glow::before {
+  content: "";
+  position: absolute;
+  inset: -2px;
+  border-radius: inherit;
+  background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500));
+  opacity: 0;
+  z-index: -1;
+  transition: opacity 0.3s ease-out;
+  filter: blur(8px);
+}
+
+.hover-glow:hover::before {
+  opacity: 0.5;
+}
+
+/* Icon bounce on hover */
+.icon-bounce:hover {
+  animation: iconBounce 0.5s ease-out;
+}
+
+@keyframes iconBounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-4px);
+  }
+}
+
+/* Scale up on hover */
+.scale-hover {
+  transition: transform 0.2s ease-out;
+}
+
+.scale-hover:hover {
+  transform: scale(1.05);
+}
+
+/* Button pulse */
+.btn-pulse {
+  position: relative;
+}
+
+.btn-pulse::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: 0 0 0 0 currentColor;
+  opacity: 0.4;
+  animation: pulse-ring 2s infinite;
+}
+
+@keyframes pulse-ring {
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0.4;
+  }
+  100% {
+    box-shadow: 0 0 0 12px currentColor;
+    opacity: 0;
+  }
+}
+
+/* Float animation for background orbs */
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0) translateX(0);
+  }
+  25% {
+    transform: translateY(-20px) translateX(10px);
+  }
+  50% {
+    transform: translateY(-10px) translateX(-10px);
+  }
+  75% {
+    transform: translateY(-30px) translateX(5px);
+  }
+}
+
+.animate-float {
+  animation: float 8s ease-in-out infinite;
+}
+
+/* Slow rotate for decorative elements */
+@keyframes rotate-slow {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-rotate-slow {
+  animation: rotate-slow 30s linear infinite;
+}
+
+/* Fade in up - for scroll reveals */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.6s ease-out forwards;
+}
+
+/* Scale in - for icons/badges */
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.animate-scale-in {
+  animation: scaleIn 0.4s ease-out forwards;
+}
+
+/* Slide in from left */
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-slide-in-left {
+  animation: slideInLeft 0.5s ease-out forwards;
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms;
+    animation-iteration-count: 1;
+    transition-duration: 0.01ms;
+  }
+
+  .typewriter-cursor {
+    animation: none;
+    opacity: 1;
+  }
+
+  [x-reveal],
+  [data-stagger] > [data-stagger-item] {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* Dark mode adjustments */
+.dark .hover-glow::before {
+  opacity: 0;
+}
+
+.dark .hover-glow:hover::before {
+  opacity: 0.3;
+}
+
+/* Dark mode icon visibility fix */
+/* For icons that are dark/black and invisible on dark backgrounds */
+.dark .dark-mode-icon svg,
+.dark .dark-mode-icon img {
+  filter: invert(1) brightness(2);
+}
+
+/* Alternative: Add subtle background to icon containers */
+.dark .dark-mode-icon {
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 0.5rem;
+  padding: 0.25rem;
+}
+
+/* Hover state restores some contrast */
+.dark .group:hover .dark-mode-icon svg,
+.dark .group:hover .dark-mode-icon img {
+  filter: invert(1) brightness(1.5);
+}

modules/blox/assets/css/main.css

@@ -41,5 +41,8 @@
 /* Hugo Blox Search */
 @import "hb-search.css";
 
+/* Hugo Blox Animations (typewriter, scroll reveals) */
+@import "animations.css";
+
 /* Safelist for dynamic classes */
 @import "config/safelist.css";

modules/blox/assets/js/hb-animations.js

@@ -0,0 +1,111 @@
+/**
+ * Hugo Blox Animations
+ * Typewriter effect and scroll-triggered animations using Alpine.js
+ */
+
+document.addEventListener("alpine:init", () => {
+  // Typewriter effect component
+  Alpine.data("typewriter", (strings = [], options = {}) => ({
+    strings: strings,
+    currentIndex: 0,
+    currentText: "",
+    isDeleting: false,
+    typeSpeed: options.typeSpeed || 80,
+    deleteSpeed: options.deleteSpeed || 50,
+    pauseTime: options.pauseTime || 2000,
+    loop: options.loop !== false,
+    showCursor: options.cursor !== false,
+
+    init() {
+      if (this.strings.length === 0) return;
+      this.type();
+    },
+
+    type() {
+      const current = this.strings[this.currentIndex];
+
+      if (this.isDeleting) {
+        this.currentText = current.substring(0, this.currentText.length - 1);
+      } else {
+        this.currentText = current.substring(0, this.currentText.length + 1);
+      }
+
+      let delay = this.isDeleting ? this.deleteSpeed : this.typeSpeed;
+
+      if (!this.isDeleting && this.currentText === current) {
+        // Finished typing, pause then delete
+        delay = this.pauseTime;
+        this.isDeleting = true;
+      } else if (this.isDeleting && this.currentText === "") {
+        // Finished deleting, move to next string
+        this.isDeleting = false;
+        this.currentIndex = (this.currentIndex + 1) % this.strings.length;
+
+        if (!this.loop && this.currentIndex === 0) {
+          // Don't loop, show first string permanently
+          this.currentText = this.strings[0];
+          return;
+        }
+        delay = 500; // Pause before typing next
+      }
+
+      setTimeout(() => this.type(), delay);
+    },
+  }));
+
+  // Scroll reveal directive
+  Alpine.directive("reveal", (el, {expression, modifiers}, {evaluate}) => {
+    const options = expression ? evaluate(expression) : {};
+    const delay = options.delay || 0;
+    const duration = options.duration || 600;
+    const distance = options.distance || "20px";
+    const direction = modifiers.includes("left") ? "left" : modifiers.includes("right") ? "right" : modifiers.includes("down") ? "down" : "up";
+
+    // Set initial state
+    el.style.opacity = "0";
+    el.style.transition = `opacity ${duration}ms ease-out, transform ${duration}ms ease-out`;
+    el.style.transitionDelay = `${delay}ms`;
+
+    const transforms = {
+      up: `translateY(${distance})`,
+      down: `translateY(-${distance})`,
+      left: `translateX(${distance})`,
+      right: `translateX(-${distance})`,
+    };
+    el.style.transform = transforms[direction];
+
+    // Observe intersection
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            el.style.opacity = "1";
+            el.style.transform = "translate(0, 0)";
+            observer.unobserve(el);
+          }
+        });
+      },
+      {threshold: 0.1, rootMargin: "0px 0px -50px 0px"},
+    );
+
+    observer.observe(el);
+  });
+});
+
+// Staggered reveal for groups of elements
+document.addEventListener("DOMContentLoaded", () => {
+  // Add stagger delays to elements with data-stagger attribute
+  document.querySelectorAll("[data-stagger]").forEach((container) => {
+    const children = container.querySelectorAll("[data-stagger-item]");
+    const baseDelay = parseInt(container.dataset.stagger, 10) || 100;
+
+    children.forEach((child, index) => {
+      child.style.transitionDelay = `${index * baseDelay}ms`;
+    });
+  });
+});
+
+// Respect reduced motion preference
+if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+  document.documentElement.classList.add("reduce-motion");
+}