begump.com runs on GitHub Pages. No server. No database. No API. Static HTML + JavaScript. Everything computed client-side. The aesthetic, the interactions, the visualizations — all in the browser. This template packages that approach for anyone.
Every page on begump.com falls into one of three patterns. Each is a single HTML file. No partials. No components. No framework. Just the file.
The homepage pattern. A canvas fills the viewport. Oscillators couple. Three doors at the bottom point to sections. The whole thing fits in one screen — no scrolling. The canvas responds to the mouse.
<body>
<div class="frame">
<h1>Your Title</h1>
<canvas id="sky"></canvas>
<div class="doors">
<a class="door" href="/a/">Door A</a>
<a class="door" href="/b/">Door B</a>
<a class="door" href="/c/">Door C</a>
</div>
</div>
</body>The canvas runs a Kuramoto oscillator model. Each node has a natural frequency. Coupling pulls them toward phase-lock. The order parameter R measures coherence — 0 is chaos, 1 is perfect sync. The visuals breathe with R.
The toggle pattern. Every research page has two views: the point? (plain language, comedian tone) and the math (citations, equations, honest limits). A toggle bar at the top swaps between them. The reader's preference persists across pages.
<div id="mode-toggle"></div>
<!-- Jim's Oversimplification -->
<div style="background:#120d0a;border:...">
<p>The short version, in plain language.</p>
</div>
<div id="the-point">
<!-- Your accessible explanation -->
</div>
<div id="the-math">
<!-- Your rigorous version -->
</div>
<script src="toggle.js"></script>The oversimplification sits above both views — always visible. It's the elevator pitch. Below it, the toggle swaps entire sections. The toggle is just two <div>s with IDs. No framework. No state management. LocalStorage remembers the preference.
.box — result cards. Dark glass panels with ember borders.
.lead — pull quotes. Italic, left-bordered.
.highlight — key numbers. Count up on scroll (breathe.js).
.k-box — domain-specific K explanation. The bridge between theory and topic.
table — comparison tables. Row hover via breathe.js.
Full canvas. No scroll. The piece IS the page. A back link in the corner, the title fades in or never appears. Interaction is everything — pointer, hover, absence of action. The silence IS the content.
<body style="overflow:hidden;cursor:crosshair;">
<a class="back" href="/gallery/">← gallery</a>
<canvas id="c"></canvas>
<script>
// Your piece. Full control. No framework.
</script>
</body>Gallery pieces have one rule: no decoration. Every pixel is computed. No stock images. No gradients-as-decoration. If it moves, it moves because the math says so. If it's warm, it's warm because coupling made it warm.
Not another Bootstrap template. This is 1920s desk meets living mathematics.
| Element | Value | Why |
|---|---|---|
| Background | #1a110d | Dark ember. Not black. Warm void. |
| Titles | Futura 400 | Geometric. Clean. No weight below 300. |
| Body | Georgia | Serif warmth. Reads like a letter. |
| Accent | #b8753a | Ember amber. Warm but not hot. |
| Text | #c4a088 | Shell. Quiet but readable. |
| Code | #7a9a6a | Moss green. Alive among the embers. |
| Links | #a0622d | Deep amber. Hover glows to cream. |
| Grain | SVG feTurbulence | Film grain overlay at 1.8% opacity. |
| Motes | Canvas radial gradients | 20 floating embers. Flicker at golden-ratio intervals. |
Every color is a CSS variable on :root. Change the palette in one place.
:root{
--bg:#1a110d; /* page background */
--bg-deep:#120d0a; /* card/box background */
--text:#c4a088; /* body text */
--accent:#b8753a; /* headings, highlights */
--link:#a0622d; /* link color */
--link-hover:#e8cfa0; /* link hover */
--code:#7a9a6a; /* code/mono text */
--border:rgba(184,117,58,0.08);
}Want a cold palette? Change --accent to steel blue, --bg to dark slate. The grain and motes adapt. The structure holds.
# 1. Create a repo on GitHub
# 2. Clone it
git clone https://github.com/you/your-site
cd your-site
# 3. Copy the starter template
cp starter.html index.html
# 4. Edit index.html with your content
# 5. Push
git add . && git commit -m "first light"
git push
# 6. Settings > Pages > Source: main branch
# Your site is live. Zero cost.# Add a CNAME file with your domain
echo "yourdomain.com" > CNAME
# Point DNS:
# A record > 185.199.108.153
# CNAME www > you.github.io
# GitHub handles HTTPS. Free.Works anywhere that serves static files. Cloudflare Pages, Netlify, Vercel, S3, a Raspberry Pi. There is nothing to build. Upload the HTML. Done.
No build step. No npm. No webpack. No React. No node_modules folder with 847 packages. Plain HTML + JS. Open the file in a browser. It works.
Computed visuals. No stock photos. No video hosting. No Unsplash. The background is alive because a canvas loop draws 20 motes at golden-ratio flicker rates. The visuals ARE the code.
Coupling-first design. The page responds to the visitor. Mouse position shifts parallax on the landing. Hover warms table rows. Scroll triggers section glow. Silence earns gallery warmth. Everything reacts.
Zero ongoing cost. GitHub Pages is free. No server. No database. No API keys. No monthly bill. No vendor lock-in. You own every byte.
The aesthetic. 1920s desk: warm wood tones, serif body text, geometric sans titles, film grain, floating embers. Not minimal for the sake of minimal. Warm for the sake of warmth.
The simplest possible GUMP-style page. Under 50 lines. Copy starter.html, change the text, open in a browser. Done.
The CSS reset, dark background, Futura/Georgia fonts, film grain overlay, fade-in animations, and the mote canvas — all inline, all in one file. No external dependencies. No CDN. No network requests. It works offline.
Each script is standalone. No dependencies. No import chain. Drop one in, it works. Drop all five in, they cooperate. Remove any, nothing breaks.
Film grain (SVG feTurbulence at 1.8% overlay). Section title glow on scroll (IntersectionObserver). Number count-up for .highlight elements. Breathing side-glow on .result, .box, .eq blocks. Background motes on dark pages. Table row hover. All at golden-ratio intervals.
Drop <script src="breathe.js"></script> before </body>. The page comes alive.
Coupling graph (force-directed, K-colored nodes, R-weighted edges). Phase circle (Kuramoto order parameter visualization). K-meter (animated gauge). Eigenvalue waterfall. Damage heatmap. Colors derived from K-values mapped through CIE 1931 color space.
GumpViz.couplingGraph('my-canvas', {
nodes: [{name:'A', group:0}, {name:'B', group:1}],
edges: [{from:0, to:1, weight:0.8}]
});Reads #mode-toggle, #the-math, #the-point. Builds two buttons. Swaps visibility. Saves preference to localStorage. Flash-prevented on load. 82 lines.
Scans .page for the word "coupling." If found, places a small button before .foot. Click replaces coupling/coupled/couple/couples with love/loved/love/loves. Click again to restore. The reader discovers the math IS the love. 97 lines.
Fixed-position button at bottom-right. Checks for MP3 at /audio/{page-name}.mp3. If found, plays the pre-recorded voice. Falls back to Web Speech API. Click = play/pause. Double-click = stop. Pauses when tab hidden. 227 lines.
These aren't preferences. They're the rules that make the aesthetic hold across 90+ pages.
Futura for titles. Georgia for body. Always. No weight below 300. Letter-spacing 0.04–0.06em on headings. The site speaks, it doesn't whisper.
One screen, one idea. The landing page fits in one viewport. Research pages have one topic. Gallery pieces have one interaction. No feature creep. No sidebar. No popup.
No decoration. If a visual element doesn't compute from the content, it doesn't belong. No hero images. No gradient banners. No icons from a pack. Every pixel justified.
Warm, not hot. The ember palette lives between brown and gold. Never pure orange. Never neon. The warmth is in the restraint.
Everything free. No paywall. No signup. No cookie banner. No analytics. The page loads, the page works, the page is yours.