feat: compose the portfolio journey layer

2026-09-02 16:21:13 +03:00
parent 7e48aad6a8
commit 8c17af22a0
26 changed files with 962 additions and 368 deletions
--- a/tests/browser/hydration.spec.ts
+++ b/tests/browser/hydration.spec.ts
@@ -39,9 +39,9 @@ const captureDocument = async (
      ...document.querySelectorAll<HTMLElement>('main > section > h2'),
    ].map((heading) => heading.innerText.trim()),
    h1: document.querySelector('h1')?.textContent?.trim() ?? '',
-    role: document.querySelector('.site-header > p')?.textContent?.trim() ?? '',
+    role: document.querySelector('.hero-journey__role')?.textContent?.trim() ?? '',
    landmarks: {
-      headers: document.querySelectorAll('header').length,
+      headers: document.querySelectorAll('.site-header').length,
      mains: document.querySelectorAll('main').length,
      navigations: document.querySelectorAll('nav').length,
      footers: document.querySelectorAll('footer').length,
--- a/tests/browser/no-javascript.spec.ts
+++ b/tests/browser/no-javascript.spec.ts
@@ -15,14 +15,13 @@ const sectionIds = [
 ] as const;

 const sectionHeadings = [
-  'START',
-  'PROFILE',
-  'EXPERIENCE',
-  'INFRASTRUCTURE',
-  'SELECTED BUILDS',
-  'ADDITIONAL WORK',
-  'TOOLKIT',
-  'CONTACT',
+  'Profile',
+  'Experience',
+  'Infrastructure',
+  'Selected builds',
+  'Additional work',
+  'Toolkit',
+  'Contact',
 ] as const;

 const navigationLabels: Readonly<Record<(typeof sectionIds)[number], string>> = {
@@ -90,14 +89,15 @@ const expectedVisibleTextSegments = (
    content.navigation.map((item) => [item.id, item.label]),
  );
  const section = (
-    id: (typeof sectionIds)[number],
-    index: number,
+    id: Exclude<(typeof sectionIds)[number], 'start'>,
    body: readonly string[],
+    eyebrow?: string,
  ): string[] => {
    const label = navigationById.get(id);
    if (label === undefined) throw new Error(`Missing navigation label: ${id}`);
-    const heading = label.toUpperCase();
-    return [`${String(index).padStart(2, '0')} / ${heading}`, heading, ...body];
+    return [eyebrow, label, ...body].filter(
+      (segment): segment is string => segment !== undefined,
+    );
  };
  const projectLinkText = (
    project: PortfolioContent['projects']['selected'][number],
@@ -105,18 +105,19 @@ const expectedVisibleTextSegments = (
    project.visibility === 'public' && project.url ? [project.title] : [];

  return [
+    ...sectionIds.map((id) => navigationLabels[id]),
    content.identity.name,
    content.identity.role,
-    ...sectionIds.map((id) => navigationLabels[id]),
-    ...section('start', 1, [content.identity.valueProposition]),
-    ...section('profile', 2, [
+    content.identity.valueProposition,
+    'Explore work',
+    ...section('profile', [
      content.profile.introduction,
      ...content.profile.screeningFacts.flatMap((fact) => [
        fact.label,
        fact.value,
      ]),
    ]),
-    ...section('experience', 3, [
+    ...section('experience', [
      ...content.experience.flatMap((record) => [
        record.role,
        `${record.organization} · ${record.dates}${record.location === undefined ? '' : ` · ${record.location}`}`,
@@ -126,7 +127,7 @@ const expectedVisibleTextSegments = (
      content.systemsOperations.summary,
      ...content.systemsOperations.evidence,
    ]),
-    ...section('infrastructure', 4, [
+    ...section('infrastructure', [
      content.infrastructure.title,
      content.infrastructure.summary,
      ...content.infrastructure.bands.map((band) => band.title),
@@ -137,7 +138,6 @@ const expectedVisibleTextSegments = (
    ]),
    ...section(
      'selected-builds',
-      5,
      content.projects.selected.flatMap((project) => [
        project.title,
        project.summary,
@@ -151,10 +151,10 @@ const expectedVisibleTextSegments = (
        project.outcome,
        ...projectLinkText(project),
      ]),
+      'Selected work',
    ),
    ...section(
      'additional-work',
-      6,
      content.projects.additional.flatMap((project) => [
        project.title,
        project.summary,
@@ -165,19 +165,18 @@ const expectedVisibleTextSegments = (
    ),
    ...section(
      'toolkit',
-      7,
      content.toolkit.flatMap((group) => [
        group.title,
        ...group.technologies.map((technology) => technology.name),
      ]),
    ),
-    ...section('contact', 8, [
-      content.identity.name,
-      content.identity.role,
+    ...section('contact', [
+      "Thanks for making the trip. The road's open if you'd like to build something together.",
+      'Start a conversation',
      content.contact.email,
      content.contact.cvMessage,
      ...content.contact.social.map((link) => link.service),
-    ]),
+    ], 'Destination'),
  ];
 };

@@ -347,7 +346,7 @@ test('keeps every raw SSR reading-path segment visible without JavaScript', asyn

  await expect(page.locator('h1:visible')).toHaveCount(1);
  await expect(page.locator('h1')).toHaveText('Luca Pîslaru');
-  await expect(page.locator('.site-header > p').first()).toHaveText(
+  await expect(page.locator('.hero-journey__role')).toHaveText(
    'System Administrator & Full-Stack Developer',
  );
  await expect(page.locator('main')).toBeVisible();
@@ -381,7 +380,7 @@ test('keeps every raw SSR reading-path segment visible without JavaScript', asyn

  const email = page.locator('a[href="mailto:luca.pislaru@gmail.com"]');
  await expect(email).toBeVisible();
-  await expect(email).toHaveText('luca.pislaru@gmail.com');
+  await expect(email).toHaveText('Start a conversation');
  await expect(
    page.getByText(
      'For a current CV or role-specific information, contact me directly.',
--- a/tests/browser/responsive-layout.spec.ts
+++ b/tests/browser/responsive-layout.spec.ts
@@ -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 });
--- a/tests/browser/scene-controls.spec.ts
+++ b/tests/browser/scene-controls.spec.ts
@@ -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');
--- a/tests/browser/semantic.spec.ts
+++ b/tests/browser/semantic.spec.ts
@@ -15,14 +15,13 @@ const sectionIds = [
 ] as const;

 const sectionHeadings = [
-  'START',
-  'PROFILE',
-  'EXPERIENCE',
-  'INFRASTRUCTURE',
-  'SELECTED BUILDS',
-  'ADDITIONAL WORK',
-  'TOOLKIT',
-  'CONTACT',
+  'Profile',
+  'Experience',
+  'Infrastructure',
+  'Selected builds',
+  'Additional work',
+  'Toolkit',
+  'Contact',
 ] as const;

 const rawStatus = async (
@@ -81,8 +80,8 @@ test('exposes the complete semantic portfolio from the generated document', asyn
  await page.goto(distUrl, { waitUntil: 'domcontentloaded' });

  await expect(page.locator('h1:visible')).toHaveCount(1);
-  await expect(page.locator('h1')).toHaveText('Luca Pîslaru');
-  await expect(page.locator('.site-header > p').first()).toHaveText(
+  await expect(page.locator('#start h1')).toHaveText('Luca Pîslaru');
+  await expect(page.locator('.hero-journey__role')).toHaveText(
    'System Administrator & Full-Stack Developer',
  );
  await expect(page.locator('main')).toHaveCount(1);
@@ -99,6 +98,9 @@ test('exposes the complete semantic portfolio from the generated document', asyn
  expect(await page.locator('main > section > h2').allTextContents()).toEqual(
    sectionHeadings,
  );
+  await expect(page.locator('.route-label')).toHaveCount(0);
+  await expect(page.getByRole('link', { name: 'Explore work' })).toHaveAttribute('href', '#selected-builds');
+  await expect(page.getByRole('link', { name: 'Start a conversation' })).toHaveAttribute('href', 'mailto:luca.pislaru@gmail.com');
  expect(
    await page.locator('h1, h2, h3').evaluateAll((headings) => {
      const levels = headings.map((heading) =>
@@ -122,7 +124,7 @@ test('loads the self-hosted Geist families for information and route text', asyn
    sansLoaded: document.fonts.check('16px "Geist Variable"'),
    monoLoaded: document.fonts.check('16px "Geist Mono Variable"'),
    headingFamily: getComputedStyle(document.querySelector('h1')!).fontFamily,
-    routeFamily: getComputedStyle(document.querySelector('.route-label')!).fontFamily,
+    routeFamily: getComputedStyle(document.querySelector('.section-eyebrow')!).fontFamily,
  }));

  expect(fonts).toMatchObject({ sansLoaded: true, monoLoaded: true });
@@ -149,7 +151,7 @@ test('keeps canonical native anchors and safe external destinations', async ({

  const email = page.locator('a[href^="mailto:"]');
  await expect(email).toHaveCount(1);
-  await expect(email).toHaveText('luca.pislaru@gmail.com');
+  await expect(email).toHaveText('Start a conversation');

  const externalLinks = page.locator('#contact a[target="_blank"]');
  await expect(externalLinks).toHaveCount(3);