8.1 KiB
Site update — dot-nav redesign, archive removal, S2/S3 copy rewrite
Everything happens inside protected/. Server-side (src/, server.js, auth)
is untouched.
Files to replace
| File | Action |
|---|---|
protected/index.html |
Overwrite — dot-nav CSS/markup, S2 cards + panels rewritten, S3 sentence rewritten, archive page + CSS removed, Fenja footer logo sized correctly, footer bottom padding increased |
protected/timeline.js |
Overwrite — buildArchive() deleted, activatePage() now takes a scroll target, scroll-spy integration, fetches /auth/me for first name |
protected/bifrost.js |
Overwrite — S3 sentence rebuilt with first name at init, scrollTo() exposed via window.__bifrost, scroll-spy updates active dot |
Files to delete
| File | Why |
|---|---|
protected/archive.html |
Legacy standalone archive placeholder, no longer referenced |
protected/archive.js |
Companion to the above |
On the VPS: sudo rm /opt/fenja/protected/archive.html /opt/fenja/protected/archive.js
or via rsync with --delete, which also picks them up automatically.
What changed, by section
Dot-nav
- 5px dots, inline flex with 10px hit-padding each (so they're still tappable).
- Default state: transparent fill, 1px
var(--ink-dim)ring (outlined). - Hover: ring darkens to
var(--ink). - Active: fills with
var(--ink)(solid). - Label: hidden by default, appears as a paper-toned tooltip ABOVE the dot on hover or keyboard focus.
- Nav composition (flat, 7 dots):
- Timeline (
page-timeline) - Hero (
page-overview→ scrolls to#hero) - Architecture (
page-overview→#stack-scene) - Words (
page-overview→#words-scene) - Bifrost (
page-overview→#bifrost) - Participate (
page-overview→#bifrost-meaning) - Join (
page-overview→#bifrost-join)
- Timeline (
- Scroll-spy: as the user scrolls within Overview, the currently-visible scene's dot becomes active automatically.
- Dot-nav tray gradient (paper fade at page bottom) is suppressed on the Overview page only — so the S6 footer reads as a hard terminus.
Footer
- Fenja logo: previously stretched to fill the center column (
width: 100%). Now height-matched to the other two footer items via the existing--foot-hvariable — same size as "Project Bifrost" wordmark and the Innovationsfonden placeholder. - Bottom padding: bumped from
clamp(0.5rem, 2vh, 1.5rem)toclamp(5rem, 10vh, 8rem)so the three logos sit clearly above the dot-nav even on short viewports.
Archive
<section id="page-archive">removed fromindex.html.- All
.archiveCSS removed (~155 lines). buildArchive()IIFE removed fromtimeline.js.- Standalone
protected/archive.html/archive.js— deletion noted above.
S2 — Architecture
Four cards (new copy throughout):
-
The AI — "An open-source model, running on your own hardware." A state-of-the-art open-source language model deployed directly in your environment. It gives you powerful AI capabilities with full control over data, performance, and security.
-
The Knowledge — "The business context that makes AI understand your world." A built-in knowledge layer that helps the platform understand your terminology, processes, and data. It retains what matters, improves over time, and gives the AI the context needed to deliver relevant and accurate results.
-
The Tools — "How AI acts — not just what it knows." The capabilities that let the platform do real work across your environment. From search and retrieval to data access, automation, and analysis, these are the tools the AI uses to solve tasks in practice.
-
The Agents — "Specialized AI agents working together around real tasks." Purpose-built agents designed to handle distinct roles and workflows. Fenja AI includes both ready-made agents and the framework to build new ones, so you can orchestrate AI the same way your organisation already works — through specialisation and coordination.
Three copy panels (left side, during grid phase):
- Panel A (One complete platform): "Everything you need in one place." Fenja AI brings models, knowledge, tools, and agents together in one platform for using and scaling AI across your organisation.
- Panel B (Full control): "Your infrastructure. / Your rules." Fenja AI is installed in your own client-managed environment, giving you full control over data, security, and governance.
- Panel C (Sovereignty): "Built in Denmark. / Ready for Europe." Fenja AI is built in Denmark for European organisations that want trusted, sovereign AI on their own terms.
S3 — Words fly in
Sentence is now personalised per user. timeline.js fetches /auth/me on load; bifrost.js reads window.__fenjaFirstName at init and rebuilds the .words paragraph in place before the fly-in animation captures the spans.
- With first name: "This is why we've invited you, Erik. To ensure Fenja AI is not just built for you — but with you." — Bold Italic emphasis on
Erik.andwith you. - No first name (fallback): "This is why we've invited you. To ensure Fenja AI is not just built for you — but with you." — Bold Italic emphasis on
you.(after invited) andwith you. - Animation preserved: each word flies in from a scatter, with emphasis (
.hi) words coming in from center with extra weight.
Spot-check after deploy
- Open
/timeline. Bottom of screen: 7 small dots, no labels. - Hover any dot → paper-toned tooltip appears ABOVE it with the section name.
- Timeline dot is filled (active); others are outlined.
- Click "Architecture" dot → switches to Overview, smooth-scrolls to the stack scene.
- Click "Bifrost" dot → Overview → smooth-scrolls to the aurora arc scene.
- Inside Overview, manually scroll. The active dot changes as each scene passes the viewport midline.
- Go to S3 (Words scene). With a named invite (e.g. "Erik"), the sentence reads: "This is why we've invited you, Erik. To ensure Fenja AI is not just built for you — but with you."
- With a no-name invite (like the existing
quka93@gmail.com), the sentence reads: "This is why we've invited you. To ensure Fenja AI is not just built for you — but with you." - Scroll to S6 footer. The three brand marks (Project Bifrost / Fenja logo / Innovationsfonden) all read as equal height.
- Logos have clear space below them — not hidden by the dot-nav tray fade.
- On Overview page only, the bottom paper-fade tray is gone — footer meets the bottom of the viewport cleanly.
- On Timeline page (scroll to the end of the 23 headlines), the paper-fade tray is still there behind the dot-nav (so cards fade smoothly into it).
- Clicking "Read the editor's note" from P1 still jumps to S1 Hero of the Overview (behaves like the Hero dot).
- No console errors, no CSP violations, no 404s.
Things NOT touched
src/(auth, db, mail, sessions, middleware) — untouched.server.js— untouched.public/entrance.html,public/entrance.js— untouched.protected/fenja/*— colors, fonts, logos, illustrations all untouched.protected/vendor/*— untouched (lenis, gsap, scrolltrigger, d3, topojson, countries data).- Server-side CSP, auth gate, rate limits — untouched.
Open items (for a future iteration if you want them)
- The "Read the editor's note" button on P1 currently wires straight to the Overview dot's click handler. It now scrolls to
#hero(top of Overview) — which matches the previous behaviour. Fine as-is. - The S3 sentence uses the Overview's internal scroller for its fly-in, but the current fly-in distances (scatter radius 220×160 px) are unchanged from the old 16-word sentence. With 21 words, the animation may feel slightly faster. If it feels too fast, we can bump the
0.055stagger in bifrost.js to0.07. - If you change the 7-dot nav order or add/remove scenes, update:
- The
data-scroll-toattributes inindex.html's<nav class="dot-nav">. - The
sceneOrderarray insidebifrost.jsinit()(search forconst sceneOrder = [).
- The