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

34
tests/browser/responsive-layout.spec.ts
View File

@@ -70,8 +70,8 @@ test('renders the validated eight-section portfolio structure before responsive
await page.setViewportSize({ width: 1440, height: 900 });
await loadInformationLayer(page);
await expect(page.locator('.portfolio-main > .portfolio-section')).toHaveCount(8);
expect(await page.locator('.portfolio-main > .portfolio-section').evaluateAll((sections) => sections.map((section) => section.id)))
await expect(page.locator('.portfolio-main > section')).toHaveCount(8);
expect(await page.locator('.portfolio-main > section').evaluateAll((sections) => sections.map((section) => section.id)))
.toEqual(['start', 'profile', 'experience', 'infrastructure', 'selected-builds', 'additional-work', 'toolkit', 'contact']);
expect(await page.locator('.site-navigation a').evaluateAll((links) => links.map((link) => link.getAttribute('href'))))
.toEqual(['#start', '#profile', '#experience', '#infrastructure', '#selected-builds', '#additional-work', '#toolkit', '#contact']);
@@ -108,19 +108,23 @@ for (const viewport of [
});
}
test('uses alternating desktop panels while preserving a clear central road corridor', async ({ page }, testInfo) => {
test('uses explicit desktop layout families while preserving the primary-project road corridor', async ({ page }, testInfo) => {
await page.setViewportSize({ width: 1440, height: 900 });
await loadInformationLayer(page);
const panels = await page.locator('.portfolio-main > .portfolio-section').evaluateAll((sections, viewportWidth) =>
sections.map((section) => {
const rect = section.getBoundingClientRect();
return { left: rect.left, right: rect.right, widthRatio: rect.width / Number(viewportWidth) };
}), 1440,
expect(await page.locator('.portfolio-main > section').evaluateAll((sections) =>
sections.map((section) => section.getAttribute('data-layout')),
)).toEqual(['hero', 'right-rail', 'left-timeline', 'full-diagram', 'project-stage', 'compact-rail', 'toolkit-field', 'destination']);
const projects = await page.locator('#selected-builds [data-project-priority="primary"]').evaluateAll((articles) =>
articles.map((article) => {
const rect = article.getBoundingClientRect();
return { left: rect.left, right: rect.right, width: rect.width };
}),
);
expect(panels.every((panel) => panel.widthRatio >= 0.4 && panel.widthRatio <= 0.45)).toBe(true);
expect(panels.every((panel, index) => index % 2 === 0 ? panel.right <= 1440 * 0.461 : panel.left >= 1440 * 0.539)).toBe(true);
expect(projects).toHaveLength(2);
expect(projects[0]!.right).toBeLessThanOrEqual(1440 * 0.51);
expect(projects[1]!.left).toBeGreaterThanOrEqual(1440 * 0.53);
expect(projects.every((project) => project.width <= 1440 * 0.47)).toBe(true);
await capture(page, testInfo, 'information-layer-desktop-corridor.png');
});
@@ -128,10 +132,12 @@ test('uses a stable tablet rhythm and a single readable mobile column with usabl
await page.setViewportSize({ width: 768, height: 1024 });
await loadInformationLayer(page);
const tabletPanels = await page.locator('.portfolio-main > .portfolio-section').evaluateAll((sections) =>
sections.map((section) => section.getBoundingClientRect()),
Object.fromEntries(sections.map((section) => [section.getAttribute('data-layout'), section.getBoundingClientRect().toJSON()])),
);
expect(tabletPanels.every((panel) => panel.width < 768 * 0.7)).toBe(true);
expect(tabletPanels.every((panel, index) => index % 2 === 0 ? panel.left < 768 / 2 : panel.left >= 768 / 2)).toBe(true);
expect(tabletPanels['right-rail'].left).toBeGreaterThan(768 * 0.3);
expect(tabletPanels['left-timeline'].left).toBeLessThan(768 * 0.1);
expect(tabletPanels['full-diagram'].width).toBeGreaterThan(768 * 0.8);
expect(tabletPanels['compact-rail'].left).toBeGreaterThan(768 * 0.3);
await capture(page, testInfo, 'information-layer-tablet.png');
await page.setViewportSize({ width: 320, height: 800 });