cguth7.github.io - GitHub Pages

Purpose

Personal GitHub Pages site for hosting research dashboards, demos, and project showcases.

URL: https://cguth7.github.io

Directory Structure

/
├── index.html          # Landing page — intentionally minimal (name, links, email).
│                       # Do NOT add project links here; new pages go in /library/.
├── library/            # Full unlisted catalog of every page, styled as a card
│                       # catalog. Not linked from the home page, on purpose.
│                       # To add a page: append one line to the ENTRIES array in
│                       # library/index.html (section key, url, title, desc, date).
├── research/           # Research dashboards; research/index.html lists all of them
├── events_v3/          # Philly event engine surface
├── events_v3_chi/      # Chicago event engine surface (see section below)
├── demos/              # Demos (ea-forum-cards, train-proximity, gwas-nlm-slides,
│                       # nobodys-clothes-are-wet) + redirect stubs for moved pages
├── people/             # One-off gift pages for people (moved from demos/;
│                       # old demos/<name>/ URLs redirect here — keep the stubs)
├── projects/           # Project showcases
├── beer-garden/, pdku/, tej/, bike-trip/   # Standalone fun pages
├── archive/            # Old poker tutorial (archive/_posts and _pages are
│                       # excluded from the Jekyll build — only index.html serves)
├── _config.yml, _pages/  # The only live Jekyll pieces: _pages/*.md render at
│                       # their permalinks (/orange-book-plan/, /patent-analysis/, …)
├── data/               # Research notes/scripts (not fetched by any page)
└── assets/             # Images (gwas/, patents/, orange_book/ feed _pages)

Data Separation Pattern

IMPORTANT: When creating visualizations, keep data separate from HTML:

• Store data in a data.json file alongside index.html
• Load data via fetch('data.json') in JavaScript
• Don’t hardcode data into the HTML file

Why?

• Allows data updates without touching visualization code
• Keeps HTML files readable
• Makes it easier to regenerate data from source repos

Example structure:

research/hippo-image-jaccard/
├── index.html    # Visualization code
└── data.json     # Data (loaded at runtime)

Deployment

Use the /github-pages skill which handles:

1. Git add/commit/push
2. Auto-links new pages to main index if needed

Or manually: git push origin main (GitHub Pages auto-deploys from main)

Adding New Pages

1. Create directory (under research/ for research, top-level or demos/ otherwise)
2. Add index.html (visualization) and data.json (data)
3. Add a link in /library/index.html; research pages also go in research/index.html
4. Never add links to the home page — it stays minimal
5. Commit and push

events_v3_chi — the Chicago event engine surface

Three pages, all reading events_v3_chi/data.json (written by ~/reality/event_wizard_chicago/export.py — never edit data.json by hand):

• index.html — THE consumer page: Leaflet map + hood focus + filters (free / solo-friendly / ↻ joinable / min-score / date range / quiet-venues).
• events.html — same data as a ranked, filterable table.
• about.html — how the engine works (live stats from data.json).
• tables.html, roles.html — internal views, intentionally NOT linked from the consumer pages. tables.html is generated by view_tables.py. Deploy cycle: run export.py in the engine repo, then commit+push here. Style: dark brass theme, inline CSS, vanilla JS, no build step.

Tech Stack

• Static HTML/CSS/JS (no build step)
• Jekyll config exists but rarely used
• Vanilla JS for interactivity (no frameworks needed for simple dashboards)

Lessons

Data Loading

• Always use relative paths for data files: fetch('data.json') not /research/.../data.json
• Handle loading states and errors in JavaScript

Styling

• Keep CSS inline in HTML for simple pages (no build step needed)
• Use system fonts: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif