The Ascent — a cinematic, scroll-driven portfolio for Jeff Schwerdtfeger. One continuous journey from the forest floor of the Santa Cruz Mountains (120 m) to low Earth orbit (408 km), with the work pinned along the way.
A deliberately different cut of fieldnotes.cc — where fieldnotes is the quiet archive, this is the launch film.
| Chapter | Altitude | Backdrop |
|---|---|---|
| Hero | 120 m · Understory | Moonlit conifers, god rays, fireflies, ground mist |
| Mission brief | Canopy | Treetops slide away, stars emerge |
| 01 — Groundwork (HP / Apple) | Troposphere | Dusk band, first starfield |
| 02 — Expeditions (Piton / Outlo / Athena) | Stratosphere | Aurora curtains, ascent streaks |
| 03 — The Route | Thermosphere | Milky Way, nebula |
| 04 — Signals (patents) | Thermosphere | Constellation cards, orbital system rising |
| 05 — Make contact | Low Earth orbit | Earth limb, Keplerian orbital system |
Everything in the backdrop is procedural GLSL (one master fragment shader + GPU particle systems) — no textures, no models, nothing to download.
The journey is a space you can move through freely, not a corridor:
- Altitude rail (right edge, desktop) — every chapter is a tick at its true altitude. The needle tracks you. Drag the rail to scrub the entire journey; click a tick to fly to that station.
- System map (
M, or the MAP button) — a full elevation schematic of the site. Every station with its altitude; click to fly anywhere.ESCcloses. - Flight keys —
↑/↓move between stations. - Plain scrolling still works, smoothed by Lenis.
The interface layer follows Rams: one accent color reserved for controls, position, and wayfinding; data is set in ink; no ornament that doesn't serve.
- Vite — build
- Three.js — WebGL scene (custom shaders throughout)
- GSAP + ScrollTrigger — scroll choreography
- Lenis — smooth scroll
- Fonts: Clash Display, Satoshi (Fontshare) · Instrument Serif, IBM Plex Mono (Google)
npm install
npm run dev # dev server
npm run build # production build → dist/
npm run preview # serve the build locally/?debug skips the preloader quickly and exposes __gl, __lenis,
__viewEl() and friends on window for poking at journey states.
Live on GitHub Pages from the gh-pages branch:
https://jschwerdtfeger.github.io/crafted/
npm run deploy # build + force-push dist/ to gh-pages(.github/workflows/deploy.yml exists locally for CI deploys, but the gh
token needs the workflow scope to push it — gh auth refresh -s workflow,
then drop the .github/ line from .gitignore.)
At the registrar for crafted.cc:
- Apex
crafted.cc→ four A records:185.199.108.153,185.199.109.153,185.199.110.153,185.199.111.153 www→ CNAMEjschwerdtfeger.github.io
Then set the custom domain on the repo (Settings → Pages → Custom domain →
crafted.cc, with Enforce HTTPS once the cert issues).
prefers-reduced-motiongets a static, fully readable page: no smooth scroll, no pinning, all content revealed, backdrop dimmed.- Mobile drops particle counts and pixel ratio, and stacks the labs cards vertically instead of the pinned horizontal flight.
- The altitude HUD maps scroll progress exponentially from 120 m to 408 km (the ISS's neighborhood). The phase label follows real atmosphere layers.