Wallpaper gallery web application for GitHub Pages showcasing the 218 4K wallpapers from mylinuxforwork/wallpaper.

[rootagi]

Summary

Builds a static, buttery-smooth wallpaper gallery web application for GitHub Pages showcasing the 218 4K wallpapers from mylinuxforwork/wallpaper.

Live Demo (Fork): https://rootagi.github.io/wallpaper

Engineered for 60fps smooth scrolling, instant 0.3s build times, and 0 MB local image storage bloat by leveraging edge-cached CDN image proxies for on-the-fly thumbnail delivery and jsDelivr CDN for high-res 4K originals.

---

🚀 Key Features & Highlights

• ⚡ 0 MB Local Thumbnail Storage: Zero image binary files are stored or committed in the repository. WebP thumbnails (~600px) are delivered on-the-fly via Cloudflare edge CDN (https://wsrv.nl/?url=...&w=640&output=webp).
• 🚀 0.3s Manifest Build Time: Build script runtime dropped from 90 seconds to 0.3 seconds, reducing the entire site payload to just 1.1 MB total.
• 🌐 Flat Upstream CDN Architecture: Serves high-res 4K original wallpapers via jsDelivr CDN (https://cdn.jsdelivr.net/gh/mylinuxforwork/wallpaper@main/<filename>), matching the flat root structure of the upstream repository.
• 🎨 Design System Alignment: Soft rounded surfaces (1.4rem radius), sage green (#AFBEA5) & deep forest (#495940) accents, dark mode toggle (localStorage persisted), and editorial typography (Plus Jakarta Sans, Lora, IBM Plex Mono).
• 🔍 Interactive Filtering & Search: Auto-derived category pills across 10 categories (Nature, Space, Abstract, Cyberpunk, City & Architecture, OS Branding, Games & Movies, Anime, Cars & Vehicles, Misc), debounced search bar, and active match counter.
• 🎲 Surprise Me / Shuffle: Randomly selects a wallpaper, smoothly scrolls into view with Lenis, and opens the preview modal.
• ❤️ Favorites / Bookmarking: Allows saving wallpapers locally with heart pop animations.
• 🔍 Full-Resolution Lightbox: View Transitions API preview, metadata drawer, copy CDN link toast, and a cross-origin Blob fetch download handler that forces native file save dialogs.
• 🛠️ Jekyll Bypass Included: Includes public/.nojekyll to ensure GitHub Pages serves _astro CSS assets cleanly without 404 errors.
• 📦 Automated GitHub Actions Deployment: .github/workflows/deploy.yml builds static output and deploys directly to the gh-pages branch.

---

⚙️ GitHub Pages Setup Guide for Maintainers

1. Push changes to main. The .github/workflows/deploy.yml action automatically builds the site and pushes it to the gh-pages branch.
2. In GitHub repository settings: Settings → Pages:
   • Source: Select Deploy from a branch
   • Branch: Select gh-pages and folder / (root)
   • Click Save.
3. Live Site URL: https://<owner>.github.io/<repo>/

---