UI improvements

Author: quantumbagel

generator.py

@@ -262,16 +262,91 @@ def render_project_modal(project: dict[str, Any]) -> str:
     gallery_html = ""
     project_gallery = project.get("gallery", [])
     if project_gallery:
-        gallery_items = "".join(
-            f'<img src="{image}" alt="Gallery image" loading="lazy" decoding="async" '
-            f'class="w-full h-64 object-cover rounded-none border border-zinc-300 dark:border-zinc-700 cursor-pointer hover:opacity-90 transition-opacity gallery-image" '
-            f'data-modal-id="{modal_id}">'
-            for image in project_gallery
-        )
-        gallery_html = (
-            '<div class="mt-4"><h4 class="font-semibold font-mono text-zinc-900 dark:text-zinc-100 mb-2">Gallery</h4>'
-            f'<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">{gallery_items}</div></div>'
-        )
+        slides = []
+        for index, item in enumerate(project_gallery):
+            media_type = "image"
+            src = ""
+            poster = ""
+            alt = f"Gallery item {index + 1}"
+            
+            if isinstance(item, str):
+                src = item
+                ext = src.split("?")[0].split("#")[0].split(".")[-1].lower()
+                if ext in ("mp4", "webm", "ogg", "mov", "m4v"):
+                    media_type = "video"
+            elif isinstance(item, dict):
+                media_type = item.get("type", "image")
+                src = item.get("src") or item.get("url", "")
+                poster = item.get("poster", "")
+                alt = item.get("alt") or item.get("caption") or f"Gallery item {index + 1}"
+            
+            if not src:
+                continue
+                
+            if media_type == "video":
+                poster_attr = f' poster="{poster}"' if poster else ""
+                media_element = (
+                    f'<video src="{src}"{poster_attr} controls playsinline '
+                    f'class="w-full h-full object-contain bg-black" '
+                    f'preload="metadata"></video>'
+                )
+            else:
+                media_element = (
+                    f'<img src="{src}" alt="{alt}" loading="lazy" decoding="async" '
+                    f'class="w-full h-full object-contain bg-black">'
+                )
+                
+            slide_html = (
+                f'<div class="carousel-slide min-w-full h-64 sm:h-96 flex items-center justify-center flex-shrink-0">'
+                f'{media_element}'
+                f'</div>'
+            )
+            slides.append(slide_html)
+            
+        if slides:
+            slides_html = "".join(slides)
+            
+            prev_btn = ""
+            next_btn = ""
+            indicators = ""
+            
+            if len(slides) > 1:
+                prev_btn = (
+                    f'<button class="carousel-prev absolute left-2 top-1/2 -translate-y-1/2 bg-black/40 hover:bg-black/70 text-white font-semibold rounded-none p-2 border border-white/20 z-10 transition-all opacity-100 md:opacity-0 md:group-hover/carousel:opacity-100 md:focus:opacity-100 flex items-center justify-center" aria-label="Previous slide">'
+                    f'<ion-icon name="chevron-back" class="text-xl"></ion-icon>'
+                    f'</button>'
+                )
+                next_btn = (
+                    f'<button class="carousel-next absolute right-2 top-1/2 -translate-y-1/2 bg-black/40 hover:bg-black/70 text-white font-semibold rounded-none p-2 border border-white/20 z-10 transition-all opacity-100 md:opacity-0 md:group-hover/carousel:opacity-100 md:focus:opacity-100 flex items-center justify-center" aria-label="Next slide">'
+                    f'<ion-icon name="chevron-forward" class="text-xl"></ion-icon>'
+                    f'</button>'
+                )
+                
+                dots = []
+                for i in range(len(slides)):
+                    active_class = "bg-accent" if i == 0 else "bg-white/40 hover:bg-white/70"
+                    dot = f'<button class="carousel-dot h-1 w-6 transition-colors {active_class}" data-slide-to="{i}" aria-label="Go to slide {i + 1}"></button>'
+                    dots.append(dot)
+                
+                indicators = (
+                    f'<div class="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5 z-10">'
+                    f'{"".join(dots)}'
+                    f'</div>'
+                )
+            
+            gallery_html = (
+                f'<div class="mt-4">'
+                f'<h4 class="font-semibold font-mono text-zinc-900 dark:text-zinc-100 mb-2">Media</h4>'
+                f'<div class="relative group/carousel w-full overflow-hidden border border-zinc-300 dark:border-zinc-700 bg-zinc-100 dark:bg-zinc-900 media-carousel" data-carousel-id="carousel-{modal_id}">'
+                f'<div class="carousel-slides flex transition-transform duration-300 ease-out" style="transform: translateX(0%);">'
+                f'{slides_html}'
+                f'</div>'
+                f'{prev_btn}'
+                f'{next_btn}'
+                f'{indicators}'
+                f'</div>'
+                f'</div>'
+            )
 
     features_html = ""
     project_features = project.get("features", [])

index.html

@@ -433,7 +433,7 @@ <h3 class="text-base font-semibold font-mono text-zinc-900 dark:text-zinc-100 mb
         </div>
     </div>
 </div>
-<div id="project-ml-ticker" class="project-card group relative flex flex-col bg-transparent border border-zinc-300 dark:border-zinc-700 rounded-none hover:border-accent dark:hover:border-accent transition-colors overflow-hidden" data-category="aerpaw">
+<div id="project-ml-ticker" class="project-card group relative flex flex-col bg-transparent border border-zinc-300 dark:border-zinc-700 rounded-none hover:border-accent dark:hover:border-accent transition-colors overflow-hidden" data-category="other">
     <img src="https://placehold.co/400x250/34495E/FFFFFF?text=ML-Ticker" alt="ML-Ticker" loading="lazy" decoding="async" class="w-full h-48 object-cover border-b border-zinc-300 dark:border-zinc-700">
     <div class="p-5 flex flex-col flex-grow">
         <div class="flex items-start justify-between">
@@ -442,7 +442,7 @@ <h3 class="text-base font-semibold font-mono text-zinc-900 dark:text-zinc-100 mb
                 <ion-icon name="link" class="text-lg"></ion-icon>
             </button>
         </div>
-        <span class="text-xs font-medium font-mono text-zinc-500 dark:text-zinc-400 mb-2 block flex items-center"><ion-icon name="time-outline" class="mr-1"></ion-icon>2026 - Present • AERPAW</span>
+        <span class="text-xs font-medium font-mono text-zinc-500 dark:text-zinc-400 mb-2 block flex items-center"><ion-icon name="time-outline" class="mr-1"></ion-icon>2026 - Present • Other</span>
         <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4 flex-grow leading-relaxed">A Python command-line utility for retrieving equity research metrics via the FactSet FQL API.</p>
         <div>
             <div class="flex flex-wrap mt-3"><span class="inline-flex items-center px-2 py-0.5 rounded-none border border-zinc-300 dark:border-zinc-700 text-xs font-medium font-mono bg-transparent text-zinc-600 dark:text-zinc-400 mr-1.5 mb-1.5">Python</span><span class="inline-flex items-center px-2 py-0.5 rounded-none border border-zinc-300 dark:border-zinc-700 text-xs font-medium font-mono bg-transparent text-zinc-600 dark:text-zinc-400 mr-1.5 mb-1.5">FactSet FQL</span><span class="inline-flex items-center px-2 py-0.5 rounded-none border border-zinc-300 dark:border-zinc-700 text-xs font-medium font-mono bg-transparent text-zinc-600 dark:text-zinc-400 mr-1.5 mb-1.5">Pydantic</span><span class="inline-flex items-center px-2 py-0.5 rounded-none border border-zinc-300 dark:border-zinc-700 text-xs font-medium font-mono bg-transparent text-zinc-600 dark:text-zinc-400 mr-1.5 mb-1.5">openpyxl</span><span class="inline-flex items-center px-2 py-0.5 rounded-none border border-zinc-300 dark:border-zinc-700 text-xs font-medium font-mono bg-transparent text-zinc-600 dark:text-zinc-400 mr-1.5 mb-1.5">CLI</span></div>
@@ -1046,7 +1046,7 @@ <h2 class="text-2xl font-bold font-mono text-zinc-900 dark:text-zinc-100">aerpaw
                 <h2 class="text-2xl font-bold font-mono text-zinc-900 dark:text-zinc-100">ML-Ticker</h2>
                 <button class="modal-close-btn text-zinc-500 hover:text-accent dark:hover:text-accent" data-modal-id="modal-project-ml-ticker">✕</button>
             </div>
-            <p class="text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed mb-4">ML-Ticker is a Python command-line tool built for the Merrill Lynch aerpaw to query FactSet FQL API data. It uses a sandboxed Python formula engine to compute post-query custom metrics, features an automatic dependency DAG, validates configuration files via Pydantic, and outputs colorized terminal tables or styled Excel spreadsheets.</p>
+            <p class="text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed mb-4">ML-Ticker is a Python command-line tool built for Merrill Lynch to query FactSet FQL API data. It uses a sandboxed Python formula engine to compute post-query custom metrics, features an automatic dependency DAG, validates configuration files via Pydantic, and outputs colorized terminal tables or styled Excel spreadsheets.</p>
 
             <div class="mt-4"><h4 class="font-semibold font-mono text-zinc-900 dark:text-zinc-100 mb-2">Features</h4><ul class="space-y-1"><li class="text-sm font-mono text-zinc-600 dark:text-zinc-400 flex items-start"><span class="mr-3">•</span><span>FactSet FQL API integration for snapshot and historical timeseries data</span></li><li class="text-sm font-mono text-zinc-600 dark:text-zinc-400 flex items-start"><span class="mr-3">•</span><span>Sandboxed Python formula engine for post-query custom metrics</span></li><li class="text-sm font-mono text-zinc-600 dark:text-zinc-400 flex items-start"><span class="mr-3">•</span><span>Dependency validation using directed acyclic graphs (DAGs) and Pydantic</span></li><li class="text-sm font-mono text-zinc-600 dark:text-zinc-400 flex items-start"><span class="mr-3">•</span><span>Colorized terminal tables and styled multi-sheet Excel spreadsheet export</span></li></ul></div>
             <div class="mt-6 flex gap-3">
@@ -1190,16 +1190,126 @@ <h2 class="text-2xl font-bold font-mono text-zinc-900 dark:text-zinc-100">ML-Tic
             selectFilter(initialFilter);
         }
 
+        // Media Carousel Logic
+        const initMediaCarousels = () => {
+            const carousels = document.querySelectorAll(".media-carousel");
+            carousels.forEach((carousel) => {
+                const slidesContainer = carousel.querySelector(".carousel-slides");
+                const prevBtn = carousel.querySelector(".carousel-prev");
+                const nextBtn = carousel.querySelector(".carousel-next");
+                const dots = carousel.querySelectorAll(".carousel-dot");
+                
+                if (!slidesContainer) return;
+                
+                const totalSlides = slidesContainer.children.length;
+                let currentIndex = 0;
+                
+                const goToSlide = (index) => {
+                    if (index < 0) {
+                        currentIndex = totalSlides - 1;
+                    } else if (index >= totalSlides) {
+                        currentIndex = 0;
+                    } else {
+                        currentIndex = index;
+                    }
+                    
+                    slidesContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
+                    
+                    // Update dots
+                    dots.forEach((dot, idx) => {
+                        if (idx === currentIndex) {
+                            dot.classList.add("bg-accent");
+                            dot.classList.remove("bg-white/40", "hover:bg-white/70");
+                        } else {
+                            dot.classList.remove("bg-accent");
+                            dot.classList.add("bg-white/40", "hover:bg-white/70");
+                        }
+                    });
+                    
+                    // Pause videos on inactive slides
+                    Array.from(slidesContainer.children).forEach((slide, idx) => {
+                        const video = slide.querySelector("video");
+                        if (video && idx !== currentIndex) {
+                            video.pause();
+                        }
+                    });
+                };
+                
+                // Attach function to the element so we can invoke it on modal actions
+                carousel.goToSlide = goToSlide;
+                
+                if (prevBtn) {
+                    prevBtn.addEventListener("click", (e) => {
+                        e.stopPropagation();
+                        goToSlide(currentIndex - 1);
+                    });
+                }
+                
+                if (nextBtn) {
+                    nextBtn.addEventListener("click", (e) => {
+                        e.stopPropagation();
+                        goToSlide(currentIndex + 1);
+                    });
+                }
+                
+                dots.forEach((dot) => {
+                    dot.addEventListener("click", (e) => {
+                        e.stopPropagation();
+                        const slideIndex = parseInt(dot.getAttribute("data-slide-to"), 10);
+                        if (!isNaN(slideIndex)) {
+                            goToSlide(slideIndex);
+                        }
+                    });
+                });
+                
+                // Swipe Support for Touch Screens
+                let touchStartX = 0;
+                let touchEndX = 0;
+                
+                carousel.addEventListener("touchstart", (e) => {
+                    touchStartX = e.changedTouches[0].screenX;
+                }, { passive: true });
+                
+                carousel.addEventListener("touchend", (e) => {
+                    touchEndX = e.changedTouches[0].screenX;
+                    const swipeThreshold = 50;
+                    if (touchEndX < touchStartX - swipeThreshold) {
+                        goToSlide(currentIndex + 1);
+                    } else if (touchEndX > touchStartX + swipeThreshold) {
+                        goToSlide(currentIndex - 1);
+                    }
+                }, { passive: true });
+            });
+        };
+        
+        initMediaCarousels();
+
         const detailsBtns = document.querySelectorAll(".project-details-btn");
         const closeBtns = document.querySelectorAll(".modal-close-btn");
 
+        const pauseModalVideos = (modal) => {
+            if (modal) {
+                modal.querySelectorAll("video").forEach((v) => v.pause());
+            }
+        };
+
+        const resetCarousel = (modal) => {
+            if (modal) {
+                const carousel = modal.querySelector(".media-carousel");
+                if (carousel && typeof carousel.goToSlide === "function") {
+                    carousel.goToSlide(0);
+                }
+            }
+        };
+
         detailsBtns.forEach((btn) => {
             btn.addEventListener("click", () => {
                 const modalId = btn.getAttribute("data-modal-id");
                 const modal = document.getElementById(modalId);
                 if (modal) {
                     modal.classList.remove("hidden");
                     modal.style.display = "flex";
+                    resetCarousel(modal);
                 }
             });
         });
@@ -1211,6 +1321,7 @@ <h2 class="text-2xl font-bold font-mono text-zinc-900 dark:text-zinc-100">ML-Tic
                 if (modal) {
                     modal.classList.add("hidden");
                     modal.style.display = "none";
+                    pauseModalVideos(modal);
                 }
             });
         });
@@ -1220,6 +1331,7 @@ <h2 class="text-2xl font-bold font-mono text-zinc-900 dark:text-zinc-100">ML-Tic
                 if (event.target === modal) {
                     modal.classList.add("hidden");
                     modal.style.display = "none";
+                    pauseModalVideos(modal);
                 }
             });
         });
@@ -1229,6 +1341,7 @@ <h2 class="text-2xl font-bold font-mono text-zinc-900 dark:text-zinc-100">ML-Tic
                 document.querySelectorAll('[id^="modal-"]').forEach((modal) => {
                     modal.classList.add("hidden");
                     modal.style.display = "none";
+                    pauseModalVideos(modal);
                 });
             }
         });
@@ -1519,6 +1632,9 @@ <h2 class="text-2xl font-bold font-mono text-zinc-900 dark:text-zinc-100">ML-Tic
                 background-color: rgb(212, 212, 216) !important;
                 color: #09090b !important;
             }
+            .carousel-slides {
+                will-change: transform;
+            }
         `;
         document.head.appendChild(style);
     });

particles.js

@@ -92,6 +92,7 @@
         let dpr = getDpr();
         let particlesInitialized = false;
         let animationFrameId = null;
+        let stopTimeoutId = null;
         let resizeRaf = null;
         let isPageVisible = !document.hidden;
         let reducedMotion = reducedMotionQuery.matches;
@@ -591,12 +592,18 @@
                 animationFrameId = null;
             }
 
+            if (stopTimeoutId !== null) {
+                clearTimeout(stopTimeoutId);
+                stopTimeoutId = null;
+            }
+
             const finishStop = () => {
                 ctx.globalAlpha = 1;
                 ctx.clearRect(0, 0, width, height);
                 canvas.style.opacity = "0";
                 particlesInitialized = false;
                 particles.length = 0;
+                stopTimeoutId = null;
             };
 
             if (immediate) {
@@ -605,19 +612,30 @@
             }
 
             canvas.style.opacity = "0";
-            setTimeout(finishStop, CANVAS_FADE_MS);
+            stopTimeoutId = setTimeout(finishStop, CANVAS_FADE_MS);
         };
 
         const startAnimation = () => {
+            const wasFading = stopTimeoutId !== null;
+            if (stopTimeoutId !== null) {
+                clearTimeout(stopTimeoutId);
+                stopTimeoutId = null;
+            }
             colors = getThemeColors();
             updateCanvasDimensions();
-            initParticles();
-            mouse.x = -1000;
-            mouse.y = -1000;
-            canvas.style.opacity = "0";
-            requestAnimationFrame(() => {
+            
+            if (!particlesInitialized || !wasFading) {
+                initParticles();
+                mouse.x = -1000;
+                mouse.y = -1000;
+                canvas.style.opacity = "0";
+                requestAnimationFrame(() => {
+                    canvas.style.opacity = "1";
+                });
+            } else {
                 canvas.style.opacity = "1";
-            });
+            }
+            
             if (reducedMotion) {
                 drawStatic();
                 return;