4.6 KiB
4.6 KiB
Collective Governance for AI: Points of Intervention
A single-page, responsive, static website for a digital zine with interactive scroll effects. Built in Astro with Claude Code.
Features
- Markdown-based content: Edit your zine content in
src/content/zine.md - Scroll animations: Sections fade in as you scroll
- ASCII background patterns: Each section has unique repeating ASCII symbols with gradient fades
- Interactive TOC sidebar: Stack-style navigation with connecting lines to current section
- Mobile hamburger menu: Touch-friendly navigation for small screens
- Responsive design: Optimized for all screen sizes
- Zero JavaScript framework: Uses vanilla JavaScript for interactions
- Black-and-white zine aesthetic: Bold typography, rough edges, and texture overlay
Prerequisites
Node.js >= 18.20.8 (or upgrade to Node.js 20+ for best compatibility)
Getting Started
-
Install dependencies:
npm install -
Start the development server:
npm run dev -
Build for production:
npm run build -
Preview production build:
npm run preview
Project Structure
├── src/
│ ├── data/
│ │ └── zine.md # Your zine content in Markdown
│ └── pages/
│ └── index.astro # Main page that renders the zine
├── public/ # Static assets
└── astro.config.mjs # Astro configuration
Editing Your Zine
- Open
src/data/zine.md - Write your content using Markdown
- Use
## Headingfor section breaks (each becomes a full-height section) - Change the