A personal site where every tab is a real-time physics simulation, and the readouts under each one are computed from the same equations that draw it.
Four Canvas 2D scenes, no libraries, no build step, no framework:
| Tab | Backdrop | What sits in front of it |
|---|---|---|
| Home | A flight through the tesseractic honeycomb — four-dimensional space tiled edge-to-edge with hypercubes | Your bio, resume and accomplishments |
| Galaxy | Andromeda, computed from real structure and rotation-curve data, with a draggable timeline that runs its collision with the Milky Way | A filterable grid of cards |
| Lens | Light converging through a camera lens: chromatic split, breathing aperture, bokeh | An image gallery with lightbox and a geotag globe |
| Contact | A phased array under the real night sky, transmitting to a spacecraft | Your contact links and a message console |
Each scene carries a telemetry grid of live values and a folded set of the sourced equations behind them. The Contact tab draws the actual sky over a ground station you choose, and marks the International Space Station when it is really overhead.
Everything above is yours to keep. Everything below is yours to fill in.
kashfy.github.io — the site this template was extracted from, with real content, a real photo gallery and its own ground station. Worth a look before you start, to see what the empty sections are for.
git clone <your fork> my-site && cd my-site
python3 -m http.server 8000Open http://localhost:8000. It runs immediately, with placeholder content.
Then, in order:
1. Open script.js and edit the SITE block at the top. Your name, your
initials, your email, your links, and the ground station the night sky is drawn
for. This is also where the tabs are named — see below.
2. Edit the profile object directly under it. Skills, experience,
education, accomplishments, and the cards on the Galaxy tab. The entries that
ship are examples showing the shape of each field; replace them.
3. Edit the prose in index.html. The hero paragraph, the profile
paragraph, and the three panel intros. Search for EDIT ME — the <title>,
the link-preview tags and the schema.org block are the only places your name
has to be written out by hand, because a search engine reads them without
running any JavaScript.
4. Change the favicon initials. Two letters in favicon.svg.
5. Regenerate the link-preview card.
pip install -r requirements.txt
python3 build_og.pybuild_og.py has its own small block of constants at the top — name, tagline,
initials — because the card draws them into the pixels. It renders a still of
the Home tab's 4D lattice using the same projection the site does, so the
preview is a real frame of your own site rather than a mock-up. It needs system
fonts, so it is run by hand rather than in CI.
6. Add photographs, if you want them. Drop JPEGs into images/ and run
python3 build_photos.py. Read images/README.md first —
it explains how geotagged photos publish their coordinates, which is the one
thing in this template that can leak something you did not mean to share.
With no photographs at all, the gallery renders themed placeholder tiles and everything else works. That is a supported state, not a broken one.
7. Deploy. Push to GitHub, then Settings → Pages → Deploy from a branch.
A .nojekyll file is included, so Pages serves the files exactly as they are.
The tabs are deliberately not pre-named for any particular kind of person. Each one is two separate things:
The label is what the nav button says, and it lives in SITE.tabs:
tabs: [
{ slug: "home", label: "Home", description: "…" },
{ slug: "galaxy", label: "Work", description: "…" },
{ slug: "lens", label: "Photos", description: "…" },
{ slug: "contact", label: "Contact", description: "…" }
]Change a label and the nav button, the page title and the command palette all
follow. That is the whole operation.
The slug is the identifier — it decides which simulation runs behind the tab, which accent colour the tab wears, and what the URL hash says. The three non-home slugs are named after their backdrop rather than after any content, so nothing assumes you are a photographer or a developer. Put essays behind the galaxy, recipes behind the lens; the slug will not argue.
Renaming a slug, repurposing a tab, and removing one entirely are all documented
in MANUAL.md.
index.html Single-page markup — every tab, section and canvas
style.css All styling: tokens, layout, animation, responsive rules
script.js SITE + profile, the four scenes, telemetry, equations, rendering
spacetime-engine.js The Home tab's 4D lattice engine
photos.js AUTO-GENERATED gallery data — do not hand-edit
sw.js Service worker: offline support and instant repeat visits
build_photos.py images/ → photos.js + WebP thumbnail ladder
build_og.py og.jpg + apple-touch-icon.png (run by hand)
tag_photos.html Local-only editor for photo titles, captions and tags
favicon.svg Monogram — change the two letters
site.webmanifest Installable-app metadata
sitemap.xml One URL; the tabs are #hash routes on it
robots.txt Keeps crawlers off images/downloads/
fonts/ Self-hosted Inter (latin woff2 subset)
images/ Your photographs; see images/README.md
No build step. The source tree is the site — editing a file and reloading is
the entire workflow. build_photos.py and build_og.py only regenerate assets,
and only when you ask them to.
tag_photos.html is a local tool. If you leave it in the repository it will be
publicly reachable at /tag_photos.html on your deployed site. It carries a
noindex and does nothing harmful, but delete it if that bothers you.
The JavaScript ships unminified and commented, which is how the site is meant to
be read. If you would rather ship less of it, run esbuild over script.js,
spacetime-engine.js and style.css as a deploy step — nothing in the site
depends on being unminified except one caveat in MANUAL.md.
- To run: a static file server. Nothing else.
- For photographs: Python 3 and Pillow (
pip install -r requirements.txt). - In a browser: Canvas 2D and ES6. The simulations scale themselves down on
phones and step aside entirely under
prefers-reduced-motion,prefers-contrast: more, and Windows High Contrast.
MANUAL.md— how to edit everything: your details, your content, the tabs, the theme, the photo pipeline, deploying.TECHNICAL.md— how it works inside: the tab and scene architecture, every function, the data model, the invariants.EQUATIONS.tex— the complete equation sheet behind all four simulations, with sources.
This project was built with AI assistance. Parts of the code, the simulations, and this documentation were written or revised with the help of large language models, and the extraction of this template from the original site — stripping the personal content, reworking the tabs into configuration, deriving the command palette — was done the same way.
The physics, the sources cited in EQUATIONS.tex, and the design decisions are
reviewed and owned by a human. Saying so here because you are welcome to know how
something you are about to fork was made.
MIT — see LICENSE. The bundled Inter typeface is under the SIL Open
Font License and keeps its own terms.
Originally extracted from kashfy.github.io.