worker: sticky top bar with an always-visible Download button#12
Merged
Conversation
The download button was position:fixed bottom-right, so on the tall A4 page it sat below the fold / blended into the margin and was easy to miss. Replace it with a sticky navy top bar (name + role left, gold Download PDF button right) that's always visible above the resume sheet. On phones the bar collapses to name + button. Screen-only (@media screen); PDF render path untouched (still 1 page). tsc clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
resume | a697e88 | Commit Preview URL Branch Preview URL |
Jul 14 2026, 04:26 AM |
Aswincloud-Bot
approved these changes
Jul 14, 2026
Aswincloud-Bot
left a comment
Aswincloud-Bot
left a comment
There was a problem hiding this comment.
Auto-approved: @Aswinmcw is a member of @Aswincloud/admins.
The sticky top bar rendered behind the resume's <body> split-gradient and the
.page grid (both start at y=0), so it was invisible. Switch to position:fixed
with its own solid navy background over the gradient, higher z-index, and
html{padding-top:52px} to reserve space so the sheet sits below the bar.
Verified rendered: bar visible at top, no overlap. PDF still 1 page.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…S comment)
webPage() injected the head first, then did resumeHtml.replace(/<body>/i, ...)
to drop the top bar after the body tag. But the injected head's CSS carried a
comment mentioning "<body>" ("...linear-gradient painted on <body>..."), and
that literal string sits earlier in the document than the real <body> tag — so
the replace hit the comment instead. The bar was spliced into the middle of a
CSS comment, so #topbar never entered the DOM and never showed.
Fix: inject the bar into the RAW resume (whose only "<body>" is the real tag)
BEFORE adding the head, and reword the comment to say "the page background"
instead of "<body>" so no head prose can ever collide with the regex again.
Verified locally via `wrangler dev`: exactly one <body>, #topbar present as a
real fixed element (position:fixed, top:0, height:52). PDF route is unaffected
(it renders RESUME_HTML directly, not webPage()).
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
3 participants
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.
Why
The download button existed but was
position:fixed; bottom:16px— on the tall A4 page it floated at the bottom-right, below the fold or blending into the grey margin, so it was easy to miss (which is exactly what happened).What
Replaces the floating button with a sticky navy top bar: "Aswin · Software Engineer" on the left, gold ↓ Download PDF on the right — always visible above the resume sheet. On phones the bar collapses to name + button.
Verified (screenshots)
tsc --noEmitclean;wrangler deploy --dry-runbinds BROWSER + PDF_CACHE.This PR will also get a live preview URL now that per-PR previews work — check the bar/button on it before merging.