Cyborg Jungle

Portfolio site for Cyborg Jungle, analog video art, shown like channels on an old television.

Live: cyborg-jungle.vercel.app · Stack: Astro, Pages CMS, Vercel

What it does

• Shows the work as TV channels: CH.01 images, CH.02 video and CH.03 interactive installations.
• The work itself is fully analog: video runs through a chain of analog video mixers and effect modules onto a CRT monitor, and the CRT is filmed with a phone. Stills are frames from that footage.
• Plays variations of one image as a slideshow, and gives a work without media a generated test pattern.
• Has an About page with a contact form that sends straight to the artist's inbox.

How it's built

• Astro with content stored as Markdown collections, type-checked against a schema (src/content.config.ts).
• Content is edited without code in Pages CMS: every save is a commit, and Vercel redeploys the site in about a minute.
• Videos stay on Vimeo or YouTube. Paste the normal link and the site finds the player, thumbnail and aspect ratio.
• Images are turned into web-sized WebP versions at build time, so full-size exports can go straight into the CMS.
• Mobile first: about 95% of visitors use a phone, so everything is designed at 375px first.
• The look follows the "NEO TOKYO" design language in DESIGN.md, with tokens in src/styles/tokens.css.

Run it locally

nvm use        # Node 24 (see .nvmrc)
npm install
npm run dev    # http://localhost:4321

Editing content (Pages CMS)

Content is edited at https://app.pagescms.org (sign in with GitHub and open this repository). Every save is a commit to main, and Vercel redeploys the site in about a minute.

• Works — one entry per work, stored as src/content/works/<title>.md.
  • Channel: Image (CH.01), Video (CH.02) or Interactive installation (CH.03).
  • Video link: paste the normal Vimeo/YouTube link; the site finds the player, thumbnail and aspect ratio. Unlisted works; embedding must be allowed. Never upload video files.
  • Main image / Extra images: JPEG, PNG or WebP. Uploads go to src/assets/media/ and the site makes web-sized WebP versions at build time, so full-size exports are fine (keep them under ~10 MB).
  • Play as slideshow: for variations of one image. The main image and extra images cycle on the home wall and the work page; Seconds per image sets the speed (default 1).
  • Without media a work shows a generated test pattern.
  • Preview frame: the frame shown on the series' card (the number from the counter on the project page, e.g. 06 / 22 → 6). Channel-page slideshows start on it.
  • Image description: one sentence of alt text for screen readers and search.
• About page — name, details, portrait, bio and live photos (src/content/about.json).

Media files are named <project>-<frame>-<original IMG number>.jpg, e.g. eye-band-01-8546.jpg, so every file traces back to the original export.

Field definitions live in .pages.yml; the matching schema is src/content.config.ts.

Contact form

The form on the About page (/about#contact) sends messages to [email protected] through FormSubmit (free, no account). The very first message triggers a one-time activation email from FormSubmit to that inbox: click the link in it, and from then on every message is delivered. A hidden honeypot field filters simple spam bots. To hide the address from the page source, replace it in src/pages/about.astro with the random alias FormSubmit gives you after activation.

Fonts

• Logo: Aliens Among Us by Darrell Flood (public/fonts/aliens-among-us.woff). Free for personal use; commercial use needs a licence (see the font's license.txt). The file is served publicly with the site.
• Dela Gothic One, DotGothic16 and Zen Kaku Gothic New: SIL Open Font License, via @fontsource.

Media hosting limits

• GitHub rejects files over 100 MB and wants repos to stay small (under ~1 GB).
• Vercel Hobby (free) includes 100 GB/month of bandwidth for the whole site. Video eats that fast.
• Vercel Hobby is for non-commercial use only — selling work or taking commissions through the site needs Pro.

About

A personal project by CyborgJungle, built with Claude Code and hosted on Vercel. It is shared as part of my portfolio: feel free to copy it and make it your own.

License

The code is MIT licensed, see LICENSE. The artwork (images and video stills in src/assets/media/, and the portrait and photos on the About page) is © Cyborg Jungle, all rights reserved, and is not covered by that licence. The logo font has its own licence (see Fonts).