Repository navigation
Standalone pages: R logo nav, page curtain, and a boiling Loading curtain - #15
Merged
Merged
Conversation
The top bar of /projects, the project pages and /privacy now leads its home link with the r from public/icon.svg, beside the Tem Revil wordmark. On /book the Full portfolio link in its nav carries the same mark. Drawn inline in currentColor with the red and blue split; no new request. The homepage dock is unchanged.
The Tem Revil wordmark and its pen stroke are gone from the top bar; the link keeps its "Tem Revil, home" label. 44px on wide screens, 40px on phones.
The bar now hugs its content (the R, the links and Book a call), sits 12px from the top, stays there while the page scrolls under it, and is a rounded see-through glass like the homepage navbar: 48px tall instead of about 115. Phones in lite mode get it solid with no live blur, as the navbar does. On a phone the Portfolio link is dropped (the R is the same link home) and the call button loses its arrow so the bar fits one line. Sticky side columns, section jumps and the reading marker now stop clear of the bar (--pj-under-bar, 88px).
Moving between home, /projects, the project pages and /privacy is now a cross-document view transition: the page leaving fades and softens, the one arriving fades in with a slight rise (0.56s). The floating top bar has its own transition name, so it stays put while the page changes under it. Phones in lite mode get a plain 0.4s crossfade, reduced motion gets none, and /book and the dashboard don't opt in. Browsers without cross-document transitions (<html data-no-vt>, a head script) ease the content in on load. The top bar gets a little more inner padding (6px, 14px at the R).
Sections on /projects, the project pages and /privacy may be 1320px wide instead of 1080px, so a wide window loses most of its empty side margins; phones keep their 16px gutters and long text keeps its reading width. The floating bar now spans the same width as the sections (the R left, the links centred, the call button right). The project pictures are held to the window's height, so the project's title stays close below them.
…ntents On the touch scroll homepage a navbar tap used to smooth-scroll to the section, and on /privacy an "On this page" link did the same. Both now fade the page out, jump there and fade back in (0.2s each way, opacity only). With reduced motion it is just the jump. The desktop section curtain is unchanged.
… page contents" This reverts commit bec54d5.
The /privacy "On this page" links now jump to their section under the shared PageTransition curtain, which writes the section's name; on phones (lite, no blur) they still glide. The curtain writes a name too long for the window smaller, so it fits; the homepage's names keep their size.
A link from one standalone page to another (/projects, a project, /privacy) sweeps the blur curtain over the page, the next page opens covered, writes its name and lifts the curtain by the far side, in the top bar's order. Phones keep the plain cross-page fade. Co-Authored-By: Claude <noreply@anthropic.com>
The page being left writes where the link goes; the next page opens with that name already on its curtain, holds it, and lifts.
The next page lifts its curtain in CSS from the first paint instead of waiting for its script; the cover is 120 ms, the name is written at 8x, and pointing at a link already fetches its page.
The CSS build turned the nameless animation shorthand into a 0 s animation; longhands keep the 150 ms sweep.
The homepage and dashboard loader (Revil + INIT/DATA/CORE/PROJECTS/STACK) is gone. In its place, the page curtain's glass with "Loading" handwritten on it, boiling at 15 fps like the brushes (three noise-roughened copies shown one per frame, in CSS, so it moves before any script) and lifting off the top when done. Dead code: the Kicker component and its CSS, the unused stack-grid/stack-item/ stack-icon rules, and `export` on 47 symbols only their own file uses (files synced into functions/ keep theirs). The curtains share one fitSize for the written name instead of measuring the window in JS. Co-Authored-By: Claude <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The standalone pages (/projects, each project, /privacy) get the R monogram as their home link in a compact floating glass bar, as wide as the sections under it.
Moving between them runs the homepage's blur curtain: it sweeps over the page, writes the next page's name, and the next page opens under it with that name, then lifts by the far side, in the top bar's order (into a project from below). It is fast: the cover is 120 ms, the name is written at 8x, the next page lifts its curtain in CSS from its first paint, and pointing at a link already fetches its page. "On this page" jumps on /privacy use the same curtain. Phones keep a plain cross-page fade.
The homepage and dashboard loader (rotating INIT/DATA/CORE/PROJECTS/STACK) is replaced by the curtain with "Loading" handwritten on it, boiling at 15 fps like the brushes (pure CSS, so it moves before any script), lifting off the top when done.
Dead code removed: the old Loader, the Kicker component and its CSS, unused stack-grid/stack-item/stack-icon rules, and
exporton 47 symbols only their own file uses (files synced into functions/ keep theirs).Validation: TypeScript and ESLint pass; 224 tests pass (the functions/ suites need their own packages installed); production build passes and the built CSS keeps the blur and animation timings. Browser checks: curtain between /projects and /privacy both ways, next-page name written then lifted, the Loading boil showing one frame at a time at 15 fps, phone width.
🤖 Generated with Claude Code