118 lines
8.1 KiB
Markdown
118 lines
8.1 KiB
Markdown
# 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):**
|
||
1. Timeline (`page-timeline`)
|
||
2. Hero (`page-overview` → scrolls to `#hero`)
|
||
3. Architecture (`page-overview` → `#stack-scene`)
|
||
4. Words (`page-overview` → `#words-scene`)
|
||
5. Bifrost (`page-overview` → `#bifrost`)
|
||
6. Participate (`page-overview` → `#bifrost-meaning`)
|
||
7. Join (`page-overview` → `#bifrost-join`)
|
||
- **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-h` variable — same size as "Project Bifrost" wordmark and the Innovationsfonden placeholder.
|
||
- **Bottom padding**: bumped from `clamp(0.5rem, 2vh, 1.5rem)` to `clamp(5rem, 10vh, 8rem)` so the three logos sit clearly above the dot-nav even on short viewports.
|
||
|
||
### Archive
|
||
|
||
- `<section id="page-archive">` removed from `index.html`.
|
||
- All `.archive` CSS removed (~155 lines).
|
||
- `buildArchive()` IIFE removed from `timeline.js`.
|
||
- Standalone `protected/archive.html` / `archive.js` — deletion noted above.
|
||
|
||
### S2 — Architecture
|
||
|
||
**Four cards (new copy throughout):**
|
||
|
||
1. **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.
|
||
|
||
2. **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.
|
||
|
||
3. **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.
|
||
|
||
4. **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.` and `with 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) and `with 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.055` stagger in bifrost.js to `0.07`.
|
||
- If you change the 7-dot nav order or add/remove scenes, update:
|
||
- The `data-scroll-to` attributes in `index.html`'s `<nav class="dot-nav">`.
|
||
- The `sceneOrder` array inside `bifrost.js` `init()` (search for `const sceneOrder = [`).
|