Rivera Ellis — Digital Scholarship Portfolio

A responsive, plain HTML/CSS/JS academic portfolio for a digital humanities / digital scholarship librarian. Calming pastel-rainbow aesthetic with layered P5.js generative animation. No build step.

Quick start

It's just static files. To preview locally with a server (recommended, so the relative paths and canvases behave exactly as in production):

python3 -m http.server 8000
# then open http://localhost:8000

You can also open index.html directly in a browser.

Editing content

All content lives in the *.html files — edit the text directly:

Page	File
Home	index.html
About	about.html
Projects	projects.html
Publications	publications.html
Teaching & Workshops	teaching.html
Talks	talks.html
CV	cv.html (+ replace assets/cv.pdf)
Contact	contact.html

• Add a project: copy a <article class="card">…</article> block in projects.html and change the text + data-seed (the seed gives each project a unique generative thumbnail).
• Add a publication / talk: copy an .entry block under the right year.
• Replace placeholders: swap assets/cv.pdf, add assets/images/headshot.jpg, and update the name, email, ORCID, and GitHub links (search for Rivera Ellis, example.edu, and 0000-0000).

The nav and footer are duplicated in each page (kept simple, works without JS). If you change a nav link, update it in every *.html file.

Design & animation

• Colors: css/tokens.css (CSS custom properties) — mirrored in js/palette.js so the sketches match. Pastels are decorative; body text uses a near-neutral ink for WCAG AA contrast.
• Sketches: js/sketches/ — heroFlowField (interactive hero), ambientBackground (drifting blobs), divider (rainbow ribbon), projectThumb (static per-project sigil). Each registers itself with js/sketch-registry.js and is mounted on any element with a matching data-sketch="…" attribute.
• Performance & accessibility: js/sketch-loader.js lazy-mounts canvases, pauses them offscreen (IntersectionObserver) and when the tab is hidden, and honors prefers-reduced-motion (renders one static frame instead of animating). Every canvas has a CSS-gradient fallback for no-JS users.

Deploy to GitHub Pages

1. Push to GitHub.
2. Repo Settings → Pages → Source: Deploy from a branch, choose the branch and / (root).
3. The site publishes at https://<user>.github.io/<repo>/. All paths are relative, so it works under that sub-path. .nojekyll keeps GitHub from altering the files.