Frontend

graziani.dev

Meine persönliche Seite — agentic betrieben per Telegram, gebaut mit TanStack Start, Cloudinary und AI-generiertem Content.

tanstackreacttailwindnetlifycloudinaryaiclaude
GitHub →Live Site →

graziani.dev

Persönliche Seite, Portfolio und Blog. Das Besondere ist nicht der Stack, sondern wie die Seite betrieben wird: Ich schreibe Telegram-Nachrichten, und ein Claude Agent erstellt Posts, generiert Bilder, deployed.

Stack

  • TanStack Start — Vite-natives React-Framework, file-based Routing, vollständig statisch prerendered
  • Tailwind CSS v4 — Custom Theme Tokens, Dark-only Design
  • Content Collections — Markdown mit Zod-Schemas als Content Layer
  • Cloudinary — Bilder-CDN mit auto-format (WebP/AVIF) und auto-quality
  • Google Imagen 4 — AI-generierte Hero-Bilder für Blog Posts
  • Netlify — Deploy per Git Push

Pixel Grid

Die Hero-Section ist ein generativer Canvas — bei jedem Seitenbesuch werden Farbpalette, Spawn-Pattern und Bewegungsmuster zufällig gewählt. Kein Bild, kein Video, reines Canvas-Rendering.

Agentic Content Pipeline

Blog Posts und Portfolio Items sind .md Dateien im Repo. Die gesamte Pipeline ist über npm Scripts steuerbar:

  • gen:image — Generiert vier Hero-Bild-Varianten mit Imagen 4
  • lock:image — Uploaded die gewählte Variante nach Cloudinary, aktualisiert die Frontmatter
  • sync:images — Batch-Sync aller Bilder

Über Loop Gateway ist das Ganze per Telegram erreichbar. Posts schreiben, Bilder reviewen, deployen — alles vom Handy.