# OPOD - Oldhead Penumbral Observatory Directorate A personal blog/portfolio website presenting as a pseudo-organization homepage with esoteric, mysterious styling. OPOD catalogs strange resonances and half-patterns in collective consciousness, operating at the edges of Now tracking cultural drift and meaning decay. ## Tech Stack - **Framework**: Astro 5.x - **Styling**: Tailwind CSS v4 - **Content**: MDX format - **Deployment**: Cloudflare Pages - **Font**: JetBrains Mono (monospace) ## Project Structure ``` oldhead-directorate/ � src/ � � content/ � � � config.ts # Content collection schemas � � � dispatches/ # Blog posts (MDX) � � � operations/ # Projects (MDX) � � � research/ # Short fiction (MDX) � � � artifacts/ # Art gallery items (MDX) � � pages/ # Astro pages/routes � � layouts/ # Layout components � � components/ # Reusable components � � styles/ � � global.css # Global styles & Tailwind config � public/ � � images/ � � artifacts/ # Artifact images � astro.config.mjs # Astro configuration � package.json ``` ## Setup Instructions ### Prerequisites - Node.js 18+ (managed via asdf) - npm or pnpm ### Installation 1. Clone the repository: ```bash git clone cd oldhead-directorate ``` 2. Install dependencies: ```bash npm install ``` 3. Start the development server: ```bash npm run dev ``` 4. Open your browser to `http://localhost:4321` ### Available Commands | Command | Action | |:-----------------|:---------------------------------------------| | `npm run dev` | Start dev server at `localhost:4321` | | `npm run build` | Build production site to `./dist/` | | `npm run preview`| Preview production build locally | ## Content Management ### Content Types OPOD has four content types, all using MDX format: 1. **Dispatches** (Blog Posts) - `/src/content/dispatches/` 2. **Operations** (Projects) - `/src/content/operations/` 3. **Research** (Short Fiction) - `/src/content/research/` 4. **Artifacts** (Art Gallery) - `/src/content/artifacts/` ### Creating Content #### Dispatches (Blog Posts) Create a new `.mdx` file in `src/content/dispatches/`: ```mdx --- title: "Your Post Title" date: 2025-10-26 description: "Brief description of the post" tags: ["cultural-drift", "meaning-decay"] --- Your content here using Markdown and MDX... ``` #### Operations (Projects) Create a new `.mdx` file in `src/content/operations/`: ```mdx --- title: "Project Title" date: 2025-10-26 description: "Brief project description" tags: ["field-work", "documentation"] --- Project details here... ``` #### Research (Short Fiction) Create a new `.mdx` file in `src/content/research/`: ```mdx --- title: "Fiction Title" date: 2025-10-26 description: "Brief description" tags: ["alternate-history", "lost-movement"] --- Your fiction content here... ``` #### Artifacts (Art Gallery) 1. Add your image to `public/images/artifacts/` 2. Create a new `.mdx` file in `src/content/artifacts/`: ```mdx --- title: "Artifact Title" date: 2025-10-26 description: "Artifact description" medium: "digital art" image_url: "/images/artifacts/your-image.jpg" external_url: "https://example.com" # optional youtube_id: "dQw4w9WgXcQ" # optional tags: ["extinct-aesthetic", "dead-media"] --- Additional artifact details (optional)... ``` ### Tag Taxonomy Tags are shared across all content types: - `cultural-drift` - `meaning-decay` - `alternate-history` - `forgotten-trends` - `lost-movements` - `obsolete-knowledge` - `extinct-aesthetics` - `dead-media` - `temporal-anomaly` - `pattern-recognition` - `field-work` - `documentation` ## Design System ### Colors The project uses a dark, mysterious color palette defined in `src/styles/global.css`: - **Backgrounds**: `obsidian` (#000000), `void` (#0a0a0a), `slate` (#1a1a1a) - **Text**: `ghost` (#e5e5e5), `mist` (#d0d0d0), `fog` (#a0a0a0) - **Accents**: - Cyan: `cyan-dim`, `cyan`, `cyan-bright` - Amber: `amber-dim`, `amber`, `amber-bright` - Purple: `purple-dim`, `purple`, `purple-bright` ### Typography - **Font**: JetBrains Mono (all weights via Google Fonts) - **Style**: Monospace throughout for terminal/command-line aesthetic ### Using Custom Colors in Tailwind ```html

Link

``` ## Deployment ### Cloudflare Pages 1. Push your code to GitHub 2. Connect repository to Cloudflare Pages 3. Configure build settings: - **Build command**: `npm run build` - **Build output directory**: `dist` - **Node version**: 18+ 4. Deploy! Changes pushed to the main branch will automatically trigger a new deployment. ## Development Notes - Content is type-safe via Zod schemas in `src/content/config.ts` - MDX allows embedding React components in content - Images are automatically optimized by Astro - Site is fully static (SSG) - no server-side rendering ## Project Philosophy OPOD operates at the edges of Now, tracking: - Cultural drift and meaning decay - Alternate cultural histories that almost happened - Forgotten trends and lost movements - Obsolete knowledge and extinct aesthetics - Dead media and temporal anomalies The design reflects this through: - Dark, mysterious, compelling aesthetics - Terminal/command-line visual language - Clean, minimal presentation - High contrast for maximum impact ## License [Add your license here] ## Contact [Add contact information]