xeno/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: compose the portfolio journey layer

Browse Source
This commit is contained in:
LucaP
2026-09-02 16:21:13 +03:00
parent 7e48aad6a8
commit 8c17af22a0
26 changed files with 962 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
tests/browser/scene-controls.spec.ts
View File

@@ -10,41 +10,49 @@ test('keeps the decorative world separate from the semantic reading path', async
await expect(page.locator('main#portfolio-content')).toBeVisible();
});
test('keeps the desktop identity and navigation in a paint layer above the world', async ({ page, distUrl }) => {
test('keeps the hero and navigation in paint layers above the world', async ({ page, distUrl }) => {
await page.setViewportSize({ width: 1440, height: 900 });
await page.goto(distUrl, { waitUntil: 'domcontentloaded' });
const layers = await page.evaluate(() => {
const world = document.querySelector<HTMLElement>('.journey-world');
const header = document.querySelector<HTMLElement>('.site-header');
const heading = document.querySelector<HTMLElement>('.site-header h1');
const shell = document.querySelector<HTMLElement>('.portfolio-shell');
const hero = document.querySelector<HTMLElement>('.hero-journey__content');
const heading = document.querySelector<HTMLElement>('.hero-journey h1');
const navigation = document.querySelector<HTMLElement>('.site-navigation');
if (!world || !header || !heading || !navigation) throw new Error('Missing top-screen structure');
if (!world || !shell || !hero || !heading || !navigation) throw new Error('Missing top-screen structure');
const worldStyle = getComputedStyle(world);
const headerStyle = getComputedStyle(header);
const heroStyle = getComputedStyle(hero);
const navigationStyle = getComputedStyle(navigation);
return {
worldZ: Number(worldStyle.zIndex),
headerZ: Number(headerStyle.zIndex),
headerPosition: headerStyle.position,
shellZ: Number(getComputedStyle(shell).zIndex),
navigationZ: Number(navigationStyle.zIndex),
navigationPosition: navigationStyle.position,
headingVisible: heading.getBoundingClientRect().width > 0 && heading.getBoundingClientRect().height > 0,
navigationVisible: navigation.getBoundingClientRect().width > 0 && navigation.getBoundingClientRect().height > 0,
headerOpacity: Number.parseFloat(headerStyle.backgroundColor.match(/[\d.]+(?=\))/gu)?.at(-1) ?? '1'),
heroOpacity: Number.parseFloat(heroStyle.backgroundColor.match(/[\d.]+(?=\))/gu)?.at(-1) ?? '1'),
};
});
expect(layers).toMatchObject({
headerPosition: 'relative',
navigationPosition: 'fixed',
headingVisible: true,
navigationVisible: true,
});
expect(layers.headerZ).toBeGreaterThan(layers.worldZ);
expect(layers.headerOpacity).toBeGreaterThanOrEqual(0.94);
expect(layers.shellZ).toBeGreaterThan(layers.worldZ);
expect(layers.navigationZ).toBeGreaterThan(layers.worldZ);
expect(layers.heroOpacity).toBeGreaterThanOrEqual(0.94);
});
test('keeps a scrolled content panel in a geometry-safe paint layer above the world', async ({ page, distUrl }) => {
await page.setViewportSize({ width: 1440, height: 900 });
await page.goto(distUrl, { waitUntil: 'domcontentloaded' });
await page.locator('nav a[href="#profile"]').click();
const profileLink = page.locator('nav a[href="#profile"]');
if (!(await profileLink.isVisible())) await page.locator('.site-navigation summary').click();
await profileLink.click();
await expect(page).toHaveURL(`${distUrl}/#profile`);
await expect(page.locator('#profile-heading')).toBeInViewport();
const layers = await page.evaluate(() => {
const world = document.querySelector<HTMLElement>('.journey-world');
@@ -75,7 +83,6 @@ test('keeps a scrolled content panel in a geometry-safe paint layer above the wo
headingVisible: true,
});
expect(layers.panelOpacity).toBeGreaterThanOrEqual(0.94);
await expect(page).toHaveURL(`${distUrl}/#profile`);
});
test('provides native motion and quality controls with visible state', async ({ page, distUrl }) => {
@@ -123,7 +130,9 @@ test('never creates a canvas when the system requests reduced motion', async ({
test('shows ARRIVED from the authoritative section snapshot at Contact', async ({ page, distUrl }) => {
await page.goto(distUrl, { waitUntil: 'domcontentloaded' });
await page.locator('nav a[href="#contact"]').click();
const contactLink = page.locator('nav a[href="#contact"]');
if (!(await contactLink.isVisible())) await page.locator('.site-navigation summary').click();
await contactLink.click();
await expect(page.locator('.journey-hud')).toContainText('Contact');
await expect(page.locator('.journey-hud')).toContainText('ARRIVED');