⚡ ZERB — Motion · Visual · Code

English · 中文

A motion designer & visual artist's portfolio — a long-scroll, cinematic site with a built-in multi-provider AI that answers questions about the work.

---

🤔 What this is

The personal portfolio of ZERB (Zerb Lion) — motion design, visual art, and code under one roof. It began as a WordPress export and was rebuilt from scratch into a fast, motion-first Astro site, organized around three pillars:

• Motion — systems of movement, interfaces that breathe.
• Visual — worlds, surfaces and light.
• Code — things built, not just designed.

Instead of a stiff nav-and-short-pages layout, it's one long, scroll-driven page with anchored sections — plus an "AI Ask" panel that answers questions about any project, the process, or how to get in touch.

✨ Highlights

• 🎬 Motion-first — Lenis smooth scroll + GSAP, a per-line hero intro (mask-wipe / blur / typewriter), a difference-blend custom cursor with contextual labels, and cursor-magnet accent dots.
• 🤖 Ask AI — a slide-in assistant that streams from a multi-provider endpoint (Gemini → OpenAI → Claude), grounded in a knowledge base compiled from the project content. Rate-limited and quota-guarded.
• 🖼 Image-forward grid — featured-first pillar sections; covers rest under a neutral veil and resolve to full colour on hover (desktop), stay bright on touch.
• 🎞 R2-hosted video — heavy media lives on Cloudflare R2 (free egress), kept out of Git.
• 🔤 Self-hosted fonts — Montserrat (display) + Mulish (body), preloaded, no FOUT, no China-blocked Google Fonts.
• ⚡ Astro + View Transitions — static-fast pages, with the header / cursor / AI panel persisted across navigations.

🧭 Stack

Astro 6  +  Tailwind v4          →  the site            (app/)
GSAP  +  Lenis                   →  motion & smooth scroll
/api/chat  (serverless)          →  multi-provider AI, streamed
Cloudflare R2                    →  video hosting
Vercel  (root: app/)             →  deploy  ·  zerb.net

The repo also keeps the original WordPress static export at the root for reference — the live site is the Astro rebuild in app/.

🚀 Run it locally

cd app
npm install
npm run dev            # http://localhost:4321

cp .env.example .env   # add a GEMINI_API_KEY (or OpenAI / Anthropic) for the AI panel
npm run build          # production build

Media + AI keys live in .env (gitignored). The Ask AI panel degrades gracefully without a key.

🗺 Roadmap

• Reliable mainland-China delivery for media (CDN / mirror)
• Hi-res covers for the Motion pillar
• More work in the Code pillar
• Cross-instance AI rate-limiting via Upstash

📜 License — All Rights Reserved

This repo is public for reference, not open source. Everything — the code and the creative work (images, video, text, brand) — is © 2026 ZERB LION, all rights reserved. You're welcome to read and learn from it; you may not copy, reuse, or republish any part without permission. See LICENSE.

---

Designed, written and built by zerbLion · zerb.net