Morpholio

A config-driven developer identity page with liquid interactions, real activity, and zero runtime backend.

Light theme: pure white. Dark theme: pure black.

What is included in v0.1

• Liquid / gooey hero navigation with real accessible DOM links
• Light and dark themes with system preference + local persistence
• Pulse activity view with provider tabs, daily heatmap, stats and hover detail
• GitHub contribution collector using GitHub GraphQL at build time
• Local-first Codex collector that exports aggregated usage only
• Config-driven Work, Writing and About sections
• Responsive layout and prefers-reduced-motion support
• Static GitHub Pages deployment workflow
• No database, serverless function, runtime secret or backend API

Quick start

git clone https://github.com/Hubujiu/Morpholio.git
cd Morpholio
npm run check
npm run build

Serve dist/ with any static server.

Make it yours

Edit only morpholio.config.js for most customization:

const config = {
  profile: {
    name: "Your Name",
    handle: "YOURHANDLE",
    headline: "I build things with code and AI."
  },
  activity: {
    github: { enabled: true, username: "your-github-name" },
    codex: { enabled: true, source: "./generated/codex.json" }
  },
  work: [],
  writing: []
};

GitHub activity

The Pages workflow runs:

npm run collect:github

It uses the workflow's built-in GITHUB_TOKEN, queries the configured username's contribution calendar, normalizes daily intensity, then writes generated/github.json. The browser never receives a GitHub token.

You can also run it locally:

GITHUB_TOKEN=... npm run collect:github

PowerShell:

$env:GITHUB_TOKEN="..."
npm run collect:github

Codex activity

Run on the machine where Codex is used:

npm run collect:codex

By default Morpholio scans:

~/.codex/sessions
~/.codex/archived_sessions

Override the root with CODEX_HOME.

The committed output contains aggregated fields only:

• date
• input tokens
• cached input tokens
• output tokens
• reasoning tokens
• session count
• approximate tool-call count

The collector does not intentionally export prompts, responses, source code, tool output, API keys or OAuth tokens.

After collecting:

git add generated/codex.json
git commit -m "data: refresh codex activity"
git push

The push triggers a new static deployment.

Static architecture

morpholio.config.js
        │
        ├── Work / Writing / Profile
        │
GitHub GraphQL ──> generated/github.json
Local Codex logs -> generated/codex.json
        │
        ▼
     npm build
        │
        ▼
      dist/
 HTML + CSS + JS + JSON only

GitHub Pages

The repository includes .github/workflows/pages.yml. In repository settings, set Pages → Build and deployment → Source to GitHub Actions if it is not already selected.

Design system

The default palette deliberately uses only neutral values:

• light background #ffffff
• light foreground #000000
• dark background #000000
• dark foreground #ffffff

Activity intensity is expressed with grayscale rather than a brand accent. Gooey interactions are produced with an SVG silhouette filter while text and links remain normal DOM elements.

Roadmap

• Provider adapter contract for Claude Code / WakaTime / custom JSON
• Optional MDX writing and project case studies
• create-morpholio interactive initializer
• Local scheduled Codex sync helper
• richer liquid transitions without sacrificing reduced-motion/accessibility

License

MIT