Merge pull request 'fix: ul styles for rich text' (#9) from fixes/visuals into main

Reviewed-on: #9

app/[[...slug]]/page.tsx

@@ -19,9 +19,9 @@ export async function generateStaticParams() {
   }
 }
 
-type Props = {
+export interface Props {
   params: Promise<{ slug?: string[] }>;
-};
+}
 
 /**
  * Portfolio page — one route per section, sections list always visible.

src/entities/experience/ui/ExperienceCard/ExperienceCard.tsx

@@ -1,6 +1,6 @@
 import { Badge, Card, CardSidebar, CardTitle, RichText } from '$shared/ui';
 
-type Props = {
+export interface Props {
   /**
    * Job title
    */
@@ -25,7 +25,7 @@ type Props = {
    * Additional CSS classes forwarded to the card
    */
   className?: string;
-};
+}
 
 /**
  * Work experience card with sidebar layout.
@@ -37,9 +37,9 @@ export function ExperienceCard({ title, company, period, description, stack, cla
     <Card className={className}>
       <CardSidebar
         sidebar={
-          <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-3 sm:gap-4">
             <p className="text-sm font-medium brutal-border-left pl-3">{period}</p>
-            <p className="text-base font-medium">{company}</p>
+            <p className="text-lg font-black">{company}</p>
             {stack.length > 0 && (
               <div className="flex flex-wrap gap-2">
                 {stack.map((tech) => (

src/entities/project/ui/DetailedProjectCard/DetailedProjectCard.tsx

@@ -2,7 +2,7 @@ import Image from 'next/image';
 import { Card, RichText } from '$shared/ui';
 import { ProjectMetadata } from '../ProjectMetadata/ProjectMetadata';
 
-type Props = {
+export interface Props {
   /**
    * Project name
    */
@@ -36,7 +36,7 @@ type Props = {
    * @default false
    */
   reverse?: boolean;
-};
+}
 
 /**
  * Full-width detailed project card with metadata sidebar.

src/entities/project/ui/ProjectCard/ProjectCard.tsx

@@ -1,7 +1,7 @@
 import { cn } from '$shared/lib';
 import { Badge, Button, Card, CardSidebar, CardTitle, ImageLightbox, RichText } from '$shared/ui';
 
-type Props = {
+export interface Props {
   /**
    * Project name
    */
@@ -26,14 +26,20 @@ type Props = {
    * Optional preview image URL
    */
   imageUrl?: string;
-};
+  /**
+   * Skip lazy-loading the preview image. Set true for above-the-fold cards
+   * (typically the first card in the list) to improve LCP.
+   * @default false
+   */
+  priority?: boolean;
+}
 
 /**
  * Project card with sidebar layout.
  * Sidebar: year badge, stack tags, View Project button.
  * Main: title, optional image, description.
  */
-export function ProjectCard({ title, year, description, tags, url, imageUrl }: Props) {
+export function ProjectCard({ title, year, description, tags, url, imageUrl, priority = false }: Props) {
   return (
     <Card className={cn('group hover:shadow-brutal-xl transition-shadow duration-300')}>
       <CardSidebar
@@ -49,7 +55,7 @@ export function ProjectCard({ title, year, description, tags, url, imageUrl }: P
                 ))}
               </div>
             )}
-            <Button href={url} variant="primary" size="sm" className="w-full">
+            <Button href={url} variant="primary" size="sm" className="self-start lg:w-full lg:self-auto text-center">
               View Project
             </Button>
           </div>
@@ -57,7 +63,9 @@ export function ProjectCard({ title, year, description, tags, url, imageUrl }: P
       >
         <div className="flex flex-col gap-4">
           <CardTitle className="font-heading">{title}</CardTitle>
-          {imageUrl && <ImageLightbox src={imageUrl} alt={title} className="brutal-border bg-blue" />}
+          {imageUrl && (
+            <ImageLightbox src={imageUrl} alt={title} priority={priority} className="brutal-border bg-blue" />
+          )}
           <RichText html={description} />
         </div>
       </CardSidebar>

src/entities/project/ui/ProjectMetadata/ProjectMetadata.tsx

@@ -1,6 +1,6 @@
 import { cn } from '$shared/lib';
 
-type Props = {
+export interface Props {
   /**
    * Project year
    */
@@ -17,7 +17,7 @@ type Props = {
    * Additional CSS classes
    */
   className?: string;
-};
+}
 
 /**
  * Sidebar metadata display for a project: year, role, and stack.

src/shared/assets/icons/CloseIcon.tsx

@@ -1,9 +1,9 @@
-type Props = {
+export interface Props {
   /**
    * CSS classes on the svg element
    */
   className?: string;
-};
+}
 
 /**
  * Close / X icon (Lucide).

src/shared/assets/icons/MagnifyIcon.tsx

@@ -1,9 +1,9 @@
-type Props = {
+export interface Props {
   /**
    * CSS classes on the svg element
    */
   className?: string;
-};
+}
 
 /**
  * Magnify / search icon (Lucide).

src/shared/styles/theme.css

@@ -96,7 +96,6 @@
   --duration-spring: 220ms;
   --delay-normal: 200ms;
   --slide-section-body-in: clamp(1.25rem, 5vw, 3rem);
-  --slide-section-body-out: clamp(0.5rem, 1.5vw, 0.75rem);
 }
 
 @theme inline {
@@ -155,6 +154,9 @@
   html {
     font-size: var(--font-size);
     scroll-behavior: smooth;
+    /* Reserve scrollbar gutter so locking body scroll (e.g. when a modal
+     * opens) doesn't widen the viewport and shift fixed elements. */
+    scrollbar-gutter: stable;
   }
 
   body {
@@ -165,30 +167,16 @@
     overflow-x: hidden;
   }
 
-  /* Subtle blue-tinted grain on parchment */
+  /* Page-wide blue dot grain overlay. z-index 100 puts it above the footer
+   * (z-50) so the grain reads as continuous across the entire viewport;
+   * pointer-events: none keeps everything clickable through it. */
   body::before {
+    @apply grain-pattern;
     content: "";
     position: fixed;
     inset: 0;
-    background-image:
-      repeating-linear-gradient(
-        0deg,
-        transparent,
-        transparent 2px,
-        rgba(4, 28, 243, 0.015) 2px,
-        rgba(4, 28, 243, 0.015) 4px
-      ),
-      repeating-linear-gradient(
-        90deg,
-        transparent,
-        transparent 2px,
-        rgba(4, 28, 243, 0.015) 2px,
-        rgba(4, 28, 243, 0.015) 4px
-      );
-    opacity: 0.6;
-    display: block;
     pointer-events: none;
-    z-index: 1;
+    z-index: 100;
   }
 
   h1,
@@ -273,6 +261,18 @@
 @utility brutal-border-right {
   border-right: var(--border-width) solid var(--blue);
 }
+/* Border drawn as an outline — painted after children, so an image's
+ * subpixel paint bleed can't cover it. Doesn't take layout space; the
+ * ancestor must not have overflow:hidden or the outline gets clipped. */
+@utility brutal-outline {
+  outline: var(--border-width) solid var(--blue);
+}
+/* Tiled blue dot pattern — applied to body::before (page-wide) and reusable
+ * on any surface that should share the same paper-grain texture. The SVG
+ * tile is rasterized once and composited cheaply via repeating background. */
+@utility grain-pattern {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23041cf3' opacity='0.10'/%3E%3C/svg%3E");
+}
 /* Apply Fraunces variable axes to non-heading elements using the heading font */
 .font-wonk {
   font-variation-settings:
@@ -316,15 +316,12 @@
 
 .rich-text ul {
   list-style: none;
-  padding-left: 0;
+  padding-left: 1.5em;
   margin: 1em 0;
 }
 
 .rich-text ul li {
-  display: grid;
+  text-indent: -1.5em;
-  grid-template-columns: auto 1fr;
-  gap: 0.65em;
-  align-items: start;
   margin-top: 0.5em;
 }
 
@@ -334,6 +331,10 @@
 
 .rich-text ul li::before {
   content: "◆";
+  display: inline-block;
+  width: calc(1.5em / 0.55);
+  /* reset inherited text-indent so glyph isn't shifted inside the ::before box */
+  text-indent: 0;
   color: var(--blue);
   font-size: 0.55em;
   /* line-height matches parent so diamond centers within the first line box */
@@ -384,12 +385,13 @@
   animation: none;
 }
 
-/* Section body slide-in from right */
+/* Section body — snap OLD out and slide NEW in. Running an explicit OLD
+ * animation left a visible ghost of the previous section's content sitting
+ * behind the incoming slide; hiding it immediately keeps the transition
+ * clean and prevents the two-content overlap. */
 ::view-transition-old(section-body) {
-  animation-name: section-body-out;
+  animation: none;
-  animation-duration: var(--duration-normal);
+  opacity: 0;
-  animation-timing-function: var(--ease-default);
-  animation-fill-mode: both;
 }
 
 ::view-transition-new(section-body) {
@@ -397,20 +399,11 @@
   animation-duration: var(--duration-spring);
   animation-timing-function: var(--ease-spring);
   animation-fill-mode: both;
+  /* Hold the start-state for this delay before the slide-in begins — gives
+   * the snap-out a beat to register visually before new content arrives. */
   animation-delay: var(--delay-normal);
 }
 
-@keyframes section-body-out {
-  from {
-    opacity: 1;
-    transform: translateX(0) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(calc(-1 * var(--slide-section-body-out))) scale(0.98);
-  }
-}
-
 @keyframes section-body-in {
   from {
     opacity: 0;
@@ -422,9 +415,13 @@
   }
 }
 
-/* Keep footer above sliding section-body during view transitions */
+/* Page-load entry animation for the footer. Previously also carried
+ * `view-transition-name: site-footer` to layer above section-body's slide
+ * group, but the section-body group now has `animation: none` (purely
+ * horizontal slide of OLD/NEW snapshots), so the footer can live in the root
+ * snapshot during transitions — which also lets the lightbox dialog group
+ * stack cleanly above it. */
 .footer-vt {
-  view-transition-name: site-footer;
   animation: footer-enter var(--duration-slow) var(--ease-spring) both;
 }
 
@@ -439,12 +436,52 @@
   }
 }
 
-::view-transition-group(site-footer) {
+/* Lightbox dialog backdrop — flat cream wash. No filter, no gradient.
-  z-index: 10;
+ * Cheapest possible; Firefox-friendly during view transitions. */
+dialog.lightbox::backdrop {
+  background-color: color-mix(in srgb, var(--cream) 80%, transparent);
 }
 
-/* Lightbox dialog backdrop */
+/* Give the lightbox dialog its own view-transition group so it can stack
-dialog.lightbox::backdrop {
+ * above the footer's named group (z=10) during the open/close transition.
-  background-color: rgba(4, 28, 243, 0.25);
+ * Closed dialogs have `display: none` (UA) and don't get snapshotted, so
-  backdrop-filter: blur(4px);
+ * sharing the name across all `.lightbox` dialogs at rest is harmless —
+ * only the open one participates in any given transition. */
+dialog.lightbox {
+  view-transition-name: lightbox-dialog;
+}
+
+::view-transition-group(lightbox-dialog) {
+  z-index: 20;
+}
+
+/* The image wrapper (and the thumb during the OLD snapshot of an open
+ * transition) shares this static name — imperatively assigned only during
+ * the morph, so there's never more than one element holding it at a time.
+ * z=30 keeps it above the dialog (z=20) and the footer (z=10) during VT. */
+::view-transition-group(lightbox-frame) {
+  z-index: 30;
+}
+
+/* Lightbox image sizing — leaves vertical headroom for the fixed close button
+ * (sits at top-3, ~2.5rem tall). 8rem total = ~4rem top/bottom after centering,
+ * so the button never overlaps the image.
+ * box-sizing: content-box so max-w/max-h apply to the image pixels and the
+ * 3px brutal-border sits outside them — avoids subpixel clipping of the
+ * border by the dialog's overflow:hidden when both have border-box. */
+@utility lightbox-image {
+  box-sizing: content-box;
+  max-width: calc(100vw - 2rem);
+  max-height: calc(100vh - 10rem);
+}
+
+/* Disable transition animation for Firefox
+ * since it isn't supported yet */
+@supports (-moz-appearance: none) {
+  ::view-transition-group(lightbox-frame),
+  ::view-transition-old(lightbox-frame),
+  ::view-transition-new(lightbox-frame) {
+    animation-duration: 0s !important;
+    animation-delay: 0s !important;
+  }
 }

src/shared/ui/ImageLightbox/ui/ImageLightbox.test.tsx

@@ -9,6 +9,7 @@ beforeAll(() => {
 
 beforeEach(() => {
   vi.clearAllMocks();
+  document.body.style.overflow = '';
 });
 
 const DEFAULT_PROPS = { src: '/project.jpg', alt: 'My Project' };
@@ -65,5 +66,25 @@ describe('ImageLightbox', () => {
       render(<ImageLightbox {...DEFAULT_PROPS} />);
       expect(document.querySelector('dialog')).toHaveAttribute('aria-label', 'My Project');
     });
+
+    it('opening the lightbox blocks body scroll', () => {
+      render(<ImageLightbox {...DEFAULT_PROPS} />);
+      fireEvent.click(screen.getByRole('button', { name: 'My Project' }));
+      expect(document.body.style.overflow).toBe('hidden');
+    });
+
+    it('closing the lightbox restores body scroll', () => {
+      render(<ImageLightbox {...DEFAULT_PROPS} />);
+      fireEvent.click(screen.getByRole('button', { name: 'My Project' }));
+      const dialog = document.querySelector('dialog') as HTMLDialogElement;
+      fireEvent(dialog, new Event('close'));
+      expect(document.body.style.overflow).toBe('');
+    });
+
+    it('close button is positioned fixed', () => {
+      render(<ImageLightbox {...DEFAULT_PROPS} />);
+      const closeBtn = screen.getByRole('button', { name: /close/i, hidden: true });
+      expect(closeBtn).toHaveClass('fixed');
+    });
   });
 });

src/shared/ui/ImageLightbox/ui/ImageLightbox.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import Image from 'next/image';
-import { useRef } from 'react';
+import { type SyntheticEvent, useRef } from 'react';
 import { CloseIcon } from '$shared/assets/icons';
 import { cn } from '$shared/lib';
 import { Button } from '$shared/ui/Button';
+import { Modal, type ModalHandle } from '$shared/ui/Modal';
 
-type Props = {
+export interface Props {
   /**
    * Image source URL
    */
@@ -19,75 +20,178 @@ type Props = {
    * CSS classes forwarded to the thumbnail button wrapper
    */
   className?: string;
-};
+  /**
+   * Skip lazy-loading and preload the thumbnail. Set true for above-the-fold
+   * images to improve LCP.
+   * @default false
+   */
+  priority?: boolean;
+  /**
+   * Responsive `sizes` attribute for the thumbnail. Without this, next/image
+   * `fill` defaults to `100vw` and the browser fetches the largest srcset
+   * variant. Tune to match the actual rendered width at each breakpoint.
+   * @default '(min-width: 1024px) 56rem, 100vw'
+   */
+  sizes?: string;
+}
 
 /**
  * Clickable image thumbnail that opens a fullscreen brutalist dialog on click.
+ *
+ * Uses the View Transitions API to morph the thumbnail's rect into the dialog
+ * frame's rect (and back on close). The view-transition-name is seated
+ * just-in-time around each transition rather than living on the thumb at rest
+ * — a persistent name would isolate the thumb from any parent transition
+ * (e.g. the section-body slide-in), causing the image to snap into place
+ * while the rest of the section animates.
  */
-export function ImageLightbox({ src, alt, className }: Props) {
+export function ImageLightbox({
-  const dialogRef = useRef<HTMLDialogElement>(null);
+  src,
+  alt,
+  className,
+  priority = false,
+  sizes = '(min-width: 1024px) 56rem, 100vw',
+}: Props) {
+  const modalRef = useRef<ModalHandle>(null);
+  const thumbRef = useRef<HTMLButtonElement>(null);
+  const dialogFrameRef = useRef<HTMLDivElement>(null);
+  /* Shared static name across all instances. Only one dialog can be open at a
+   * time (showModal is browser-exclusive), and we set the name imperatively
+   * only during a transition — so at any snapshot, exactly one element has it. */
+  const vtName = 'lightbox-frame';
+
+  /**
+   * Drops the view-transition-name from both thumb and dialog frame. Called
+   * after the lightbox close transition settles (and as a safety net on any
+   * unexpected close path) so the thumb rejoins parent transitions.
+   */
+  function clearVtNames() {
+    if (thumbRef.current) {
+      thumbRef.current.style.viewTransitionName = '';
+    }
+    if (dialogFrameRef.current) {
+      dialogFrameRef.current.style.viewTransitionName = '';
+    }
+  }
+
+  /**
+   * Runs `mutate` inside a view transition when supported; falls back to a
+   * plain synchronous call otherwise (Firefox without VT support, jsdom).
+   * Returns the transition handle so callers can await `finished` for cleanup.
+   */
+  function withTransition(mutate: () => void): { finished: Promise<void> } | null {
+    const doc = document as Document & {
+      startViewTransition?: (cb: () => void) => { finished: Promise<void> };
+    };
+    if (typeof doc.startViewTransition === 'function') {
+      return doc.startViewTransition(mutate);
+    }
+    mutate();
+    return null;
+  }
 
   function open() {
-    dialogRef.current?.showModal();
+    /* Seat the name on the thumb *before* startViewTransition so it's
+     * captured in the OLD snapshot. The thumb otherwise carries no vt-name. */
+    if (thumbRef.current) {
+      thumbRef.current.style.viewTransitionName = vtName;
+    }
+    withTransition(() => {
+      if (thumbRef.current) {
+        thumbRef.current.style.viewTransitionName = '';
+      }
+      if (dialogFrameRef.current) {
+        dialogFrameRef.current.style.viewTransitionName = vtName;
+      }
+      modalRef.current?.open();
+    });
   }
 
   function close() {
-    dialogRef.current?.close();
+    const transition = withTransition(() => {
+      if (dialogFrameRef.current) {
+        dialogFrameRef.current.style.viewTransitionName = '';
       }
-
+      if (thumbRef.current) {
-  /**
+        thumbRef.current.style.viewTransitionName = vtName;
-   * Closes the dialog when the user clicks the backdrop area directly.
+      }
-   * Comparing target to currentTarget distinguishes a click on the <dialog>
+      modalRef.current?.close();
-   * element itself (the backdrop) from a click on its content children.
+    });
-   */
+    /* Drop the name from the thumb once the transition settles. Otherwise the
-  function handleBackdropClick(e: React.MouseEvent<HTMLDialogElement>) {
+     * thumb stays its own snapshot until the next open, isolated from any
-    if (e.target === e.currentTarget) {
+     * parent transition that runs in the meantime. */
-      close();
+    if (transition) {
+      transition.finished.finally(clearVtNames);
+    } else {
+      clearVtNames();
     }
   }
 
   /**
-   * Keyboard equivalent of backdrop click — closes the dialog when the user
+   * Intercept ESC so it also runs through our view-transition-wrapped close.
-   * activates the backdrop area (dialog element itself) via Enter or Space.
+   * Without this, ESC would snap the dialog away without the morph.
-   * ESC is handled natively by showModal(); this covers explicit backdrop activation.
    */
-  function handleBackdropKeyUp(e: React.KeyboardEvent<HTMLDialogElement>) {
+  function handleCancel(e: SyntheticEvent<HTMLDialogElement>) {
-    if (e.target === e.currentTarget && (e.key === 'Enter' || e.key === ' ')) {
+    e.preventDefault();
     close();
   }
-  }
 
   return (
     <>
       <button
+        ref={thumbRef}
         type="button"
         onClick={open}
         aria-label={alt}
         className={cn('relative block w-full aspect-video overflow-hidden cursor-zoom-in', className)}
       >
-        <Image src={src} alt={alt} fill className="object-cover" />
+        <Image
-      </button>
-
-      <dialog
-        ref={dialogRef}
-        aria-label={alt}
-        onClick={handleBackdropClick}
-        onKeyUp={handleBackdropKeyUp}
-        className="lightbox fixed inset-0 m-auto relative bg-blue brutal-border p-0 overflow-hidden"
-      >
-        {/* Native img so the dialog sizes to the image — next/image fill requires a pre-sized container */}
-        {/* aria-hidden: the dialog element itself carries the accessible label */}
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img
           src={src}
           alt={alt}
-          aria-hidden={true}
+          fill
-          className="block max-w-[calc(100vw-2rem)] max-h-[calc(100vh-2rem)] w-auto h-auto"
+          loading={priority ? 'eager' : undefined}
+          priority={priority}
+          sizes={sizes}
+          className="object-cover"
         />
-        <Button variant="outline" size="sm" onClick={close} aria-label="Close image" className="absolute top-3 right-3">
+      </button>
+
+      <Modal
+        ref={modalRef}
+        aria-label={alt}
+        className="lightbox bg-cream overflow-visible"
+        onClose={clearVtNames}
+        onCancel={handleCancel}
+        onBackdropClose={close}
+      >
+        {/* Wrapper carries the border as an `outline` (not `border`) — paint
+         * order is border→children→outline, so an `outline` is drawn ON TOP
+         * of any subpixel image bleed and stays fully visible. The dialog
+         * uses `overflow-visible` because outline can be clipped by an
+         * ancestor's overflow:hidden.
+         * The wrapper is the named VT element so the brutalist frame
+         * participates in the morph.
+         * aria-hidden: the dialog element itself carries the accessible label. */}
+        <div ref={dialogFrameRef} className="brutal-outline block w-fit">
+          {/* Explicit width/height are placeholders next/image requires when not using `fill`; CSS
+           * (`lightbox-image` max-w/max-h + `w-auto h-auto`) drives the actual rendered size, so
+           * the dialog still hugs the image's intrinsic dimensions (capped at viewport bounds).
+           * `sizes="100vw"` hints the browser to fetch the srcset variant matching viewport width. */}
+          <Image
+            src={src}
+            alt={alt}
+            width={2000}
+            height={2000}
+            loading="lazy"
+            sizes="100vw"
+            aria-hidden={true}
+            className="lightbox-image block w-auto h-auto"
+          />
+        </div>
+        <Button variant="outline" size="sm" onClick={close} aria-label="Close image" className="fixed top-3 right-3">
           <CloseIcon />
         </Button>
-      </dialog>
+      </Modal>
     </>
   );
 }

src/shared/ui/InlineSvg/ui/InlineSvg.tsx

@@ -1,7 +1,7 @@
 import parse from 'html-react-parser';
 import { cn } from '$shared/lib';
 
-type Props = {
+export interface Props {
   /**
    * SVG markup string to inline as React elements
    */
@@ -10,7 +10,7 @@ type Props = {
    * Additional CSS classes on the wrapper span
    */
   className?: string;
-};
+}
 
 /**
  * Parses an SVG markup string into React elements.

src/shared/ui/Modal/index.ts

@@ -0,0 +1 @@
+export { Modal, type ModalHandle } from './ui/Modal';

src/shared/ui/Modal/ui/Modal.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { useRef } from 'react';
+import { Button } from '../../Button';
+import { Modal, type ModalHandle } from './Modal';
+
+const meta: Meta<typeof Modal> = {
+  title: 'Shared/Modal',
+  component: Modal,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Modal>;
+
+/**
+ * Imperative trigger — Storybook can't drive a ref-based API directly, so each
+ * story renders its own trigger button that calls `modalRef.current?.open()`.
+ */
+function TriggerWrapper({ className, children }: { className?: string; children: React.ReactNode }) {
+  const modalRef = useRef<ModalHandle>(null);
+  return (
+    <div className="p-8">
+      <Button onClick={() => modalRef.current?.open()}>Open modal</Button>
+      <Modal ref={modalRef} aria-label="Story modal" className={className}>
+        <div className="p-8 max-w-md">
+          {children}
+          <div className="mt-4">
+            <Button variant="outline" size="sm" onClick={() => modalRef.current?.close()}>
+              Close
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: () => (
+    <TriggerWrapper className="bg-cream brutal-border">
+      <h3 className="mb-2">Default modal</h3>
+      <p>Native dialog with scroll lock, backdrop-click close, and ESC close.</p>
+    </TriggerWrapper>
+  ),
+};
+
+export const Brutalist: Story = {
+  render: () => (
+    <TriggerWrapper className="bg-blue text-cream brutal-border">
+      <h3 className="mb-2 text-cream">Brutalist modal</h3>
+      <p className="text-cream">
+        Blue background, hard border. Style is fully driven by the className you pass — Modal stays neutral.
+      </p>
+    </TriggerWrapper>
+  ),
+};

src/shared/ui/Modal/ui/Modal.test.tsx

@@ -0,0 +1,145 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Modal, type ModalHandle } from './Modal';
+
+// jsdom does not implement dialog methods — mock them
+beforeAll(() => {
+  HTMLDialogElement.prototype.showModal = vi.fn();
+  HTMLDialogElement.prototype.close = vi.fn();
+});
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  document.body.style.overflow = '';
+});
+
+describe('Modal', () => {
+  describe('rendering', () => {
+    it('renders children', () => {
+      render(<Modal aria-label="Test">child content</Modal>);
+      expect(screen.getByText('child content')).toBeInTheDocument();
+    });
+
+    it('forwards className to dialog element', () => {
+      render(
+        <Modal aria-label="Test" className="extra-class">
+          x
+        </Modal>,
+      );
+      expect(document.querySelector('dialog')).toHaveClass('extra-class');
+    });
+
+    it('sets aria-label on dialog', () => {
+      render(<Modal aria-label="My modal">x</Modal>);
+      expect(document.querySelector('dialog')).toHaveAttribute('aria-label', 'My modal');
+    });
+  });
+
+  describe('imperative API', () => {
+    it('open() calls showModal', () => {
+      const ref = createRef<ModalHandle>();
+      render(
+        <Modal ref={ref} aria-label="Test">
+          x
+        </Modal>,
+      );
+      ref.current?.open();
+      expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalledOnce();
+    });
+
+    it('close() calls dialog.close', () => {
+      const ref = createRef<ModalHandle>();
+      render(
+        <Modal ref={ref} aria-label="Test">
+          x
+        </Modal>,
+      );
+      ref.current?.close();
+      expect(HTMLDialogElement.prototype.close).toHaveBeenCalledOnce();
+    });
+  });
+
+  describe('scroll lock', () => {
+    it('locks body scroll on open()', () => {
+      const ref = createRef<ModalHandle>();
+      render(
+        <Modal ref={ref} aria-label="Test">
+          x
+        </Modal>,
+      );
+      ref.current?.open();
+      expect(document.body.style.overflow).toBe('hidden');
+    });
+
+    it('restores body scroll when the dialog close event fires', () => {
+      const ref = createRef<ModalHandle>();
+      render(
+        <Modal ref={ref} aria-label="Test">
+          x
+        </Modal>,
+      );
+      ref.current?.open();
+      const dialog = document.querySelector('dialog') as HTMLDialogElement;
+      fireEvent(dialog, new Event('close'));
+      expect(document.body.style.overflow).toBe('');
+    });
+  });
+
+  describe('backdrop interaction', () => {
+    it('closes on backdrop click (dialog element itself)', () => {
+      render(<Modal aria-label="Test">x</Modal>);
+      const dialog = document.querySelector('dialog') as HTMLDialogElement;
+      fireEvent.click(dialog, { target: dialog });
+      expect(HTMLDialogElement.prototype.close).toHaveBeenCalledOnce();
+    });
+
+    it('does not close on click inside content', () => {
+      render(
+        <Modal aria-label="Test">
+          <span>inner</span>
+        </Modal>,
+      );
+      fireEvent.click(screen.getByText('inner'));
+      expect(HTMLDialogElement.prototype.close).not.toHaveBeenCalled();
+    });
+
+    it('routes backdrop click through onBackdropClose when provided (skips default close)', () => {
+      const onBackdropClose = vi.fn();
+      render(
+        <Modal aria-label="Test" onBackdropClose={onBackdropClose}>
+          x
+        </Modal>,
+      );
+      const dialog = document.querySelector('dialog') as HTMLDialogElement;
+      fireEvent.click(dialog, { target: dialog });
+      expect(onBackdropClose).toHaveBeenCalledOnce();
+      expect(HTMLDialogElement.prototype.close).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('callbacks', () => {
+    it('invokes onClose when close event fires', () => {
+      const onClose = vi.fn();
+      render(
+        <Modal aria-label="Test" onClose={onClose}>
+          x
+        </Modal>,
+      );
+      const dialog = document.querySelector('dialog') as HTMLDialogElement;
+      fireEvent(dialog, new Event('close'));
+      expect(onClose).toHaveBeenCalledOnce();
+    });
+
+    it('invokes onCancel when cancel event fires', () => {
+      const onCancel = vi.fn();
+      render(
+        <Modal aria-label="Test" onCancel={onCancel}>
+          x
+        </Modal>,
+      );
+      const dialog = document.querySelector('dialog') as HTMLDialogElement;
+      fireEvent(dialog, new Event('cancel'));
+      expect(onCancel).toHaveBeenCalledOnce();
+    });
+  });
+});

src/shared/ui/Modal/ui/Modal.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import {
+  type DialogHTMLAttributes,
+  forwardRef,
+  type KeyboardEvent,
+  type MouseEvent,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import { cn } from '$shared/lib';
+
+export type ModalHandle = {
+  /**
+   * Opens the dialog as a modal and locks body scroll.
+   */
+  open: () => void;
+  /**
+   * Closes the dialog. Body scroll is restored on the native `close` event,
+   * so any close path (ESC, backdrop, this method) restores it.
+   */
+  close: () => void;
+};
+
+export interface Props extends DialogHTMLAttributes<HTMLDialogElement> {
+  /**
+   * Called when the user activates the backdrop (click or Enter/Space).
+   * Replaces the default close — useful when the close path must be wrapped
+   * (e.g. in a view transition). When omitted, the dialog closes itself.
+   */
+  onBackdropClose?: () => void;
+}
+
+/**
+ * Thin wrapper over native `<dialog>` with `showModal()`. Locks body scroll
+ * while open, restores it on any close path, and treats backdrop clicks /
+ * Enter|Space on the backdrop as a close intent. Style the backdrop externally
+ * via a className on this component + a `::backdrop` selector.
+ *
+ * All standard dialog attributes pass through — `aria-label`, `onClose`,
+ * `onCancel`, etc. Use `onCancel` with `e.preventDefault()` to intercept ESC
+ * (e.g. to route close through a view transition wrapper).
+ */
+export const Modal = forwardRef<ModalHandle, Props>(function Modal(
+  { className, onClick, onKeyUp, onBackdropClose, children, ...rest },
+  ref,
+) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  /* Either run consumer-supplied close path (e.g. view-transition-wrapped) or
+   * fall back to closing the dialog directly. Shared between click and keyboard
+   * backdrop activation. */
+  function triggerBackdropClose() {
+    if (onBackdropClose) {
+      onBackdropClose();
+    } else {
+      dialogRef.current?.close();
+    }
+  }
+
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      document.body.style.overflow = 'hidden';
+      dialogRef.current?.showModal();
+    },
+    close: () => {
+      dialogRef.current?.close();
+    },
+  }));
+
+  useEffect(() => {
+    const el = dialogRef.current;
+    if (!el) {
+      return;
+    }
+    /* Scroll restore lives on the native event listener (not a React onClose
+     * prop) so it can't be unintentionally overridden by a caller that passes
+     * their own onClose. Both fire for the same close event. */
+    const handleClose = () => {
+      document.body.style.overflow = '';
+    };
+    el.addEventListener('close', handleClose);
+    return () => el.removeEventListener('close', handleClose);
+  }, []);
+
+  /**
+   * Closes the dialog when the user clicks the backdrop area directly.
+   * Target===currentTarget distinguishes the <dialog> element itself (the
+   * backdrop hit-area) from its content children. Caller's onClick still runs.
+   */
+  function handleClick(e: MouseEvent<HTMLDialogElement>) {
+    if (e.target === e.currentTarget) {
+      triggerBackdropClose();
+    }
+    onClick?.(e);
+  }
+
+  /**
+   * Keyboard equivalent of backdrop click — Enter/Space on the backdrop area
+   * closes the dialog. ESC is handled natively by `showModal()`.
+   */
+  function handleKeyUp(e: KeyboardEvent<HTMLDialogElement>) {
+    if (e.target === e.currentTarget && (e.key === 'Enter' || e.key === ' ')) {
+      triggerBackdropClose();
+    }
+    onKeyUp?.(e);
+  }
+
+  return (
+    <dialog
+      ref={dialogRef}
+      {...rest}
+      className={cn('fixed inset-0 m-auto p-0 overflow-hidden', className)}
+      onClick={handleClick}
+      onKeyUp={handleKeyUp}
+    >
+      {children}
+    </dialog>
+  );
+});

src/shared/ui/RichText/ui/RichText.tsx

@@ -1,7 +1,7 @@
 import parse from 'html-react-parser';
 import { cn } from '$shared/lib';
 
-type Props = {
+export interface Props {
   /**
    * HTML string from PocketBase rich-text editor
    */
@@ -10,7 +10,7 @@ type Props = {
    * Additional CSS classes merged onto the wrapper div
    */
   className?: string;
-};
+}
 
 /**
  * Renders a PocketBase rich-text HTML string as React elements.

src/shared/ui/ViewTransitionWrapper/ui/ViewTransitionWrapper.tsx

@@ -6,7 +6,7 @@ import { Fragment, type ReactNode, ViewTransition as VT } from 'react';
  */
 const Transition = (VT ?? Fragment) as typeof VT;
 
-type Props = {
+export interface Props {
   /**
    * Maps to the view-transition-name CSS property
    */
@@ -15,7 +15,7 @@ type Props = {
    * Content to animate
    */
   children: ReactNode;
-};
+}
 
 /**
  * Wraps children in React's ViewTransition when available,

src/shared/ui/index.ts

@@ -9,6 +9,7 @@ export { InlineSvg } from './InlineSvg';
 export { Input, Textarea } from './Input';
 export type { LinkVariant } from './Link';
 export { Link } from './Link';
+export { Modal, type ModalHandle } from './Modal';
 export { RichText } from './RichText';
 export type { ContainerSize, SectionBackground } from './Section';
 export { Container, Section } from './Section';

src/widgets/Navigation/index.ts

@@ -1,4 +0,0 @@
-export type { NavItem } from './model/types';
-export { MobileNav } from './ui/MobileNav';
-export { SidebarNav } from './ui/SidebarNav';
-export { UtilityBar } from './ui/UtilityBar';

src/widgets/Navigation/model/types.ts

@@ -1,14 +0,0 @@
-export type NavItem = {
-  /**
-   * Section HTML id for anchor scrolling
-   */
-  id: string;
-  /**
-   * Display label
-   */
-  label: string;
-  /**
-   * Display number prefix (e.g. "01")
-   */
-  number: string;
-};

src/widgets/Navigation/ui/MobileNav.stories.tsx

@@ -1,28 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { MobileNav } from './MobileNav';
-
-// MobileNav is lg:hidden — it renders only on mobile viewports.
-// Use the viewport toolbar in Storybook to switch to a mobile size to see it.
-const meta: Meta<typeof MobileNav> = {
-  title: 'Widgets/MobileNav',
-  component: MobileNav,
-  parameters: {
-    viewport: {
-      defaultViewport: 'mobile1',
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof MobileNav>;
-
-export const Default: Story = {
-  args: {
-    items: [
-      { id: 'bio', label: 'Bio', number: '01' },
-      { id: 'work', label: 'Work', number: '02' },
-      { id: 'contact', label: 'Contact', number: '03' },
-    ],
-  },
-};

src/widgets/Navigation/ui/MobileNav.test.tsx

@@ -1,62 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import type { NavItem } from '../model/types';
-import { MobileNav } from './MobileNav';
-
-vi.mock('next/navigation', () => ({ usePathname: vi.fn(() => '/') }));
-
-const ITEMS: NavItem[] = [
-  { id: 'intro', label: 'Intro', number: '01' },
-  { id: 'bio', label: 'Bio', number: '02' },
-];
-
-describe('MobileNav', () => {
-  describe('rendering', () => {
-    it('renders title "allmy.work"', () => {
-      render(<MobileNav items={ITEMS} />);
-      expect(screen.getByText('allmy.work')).toBeInTheDocument();
-    });
-
-    it('renders toggle button with text "Menu" initially', () => {
-      render(<MobileNav items={ITEMS} />);
-      expect(screen.getByRole('button', { name: 'Menu' })).toBeInTheDocument();
-    });
-
-    it('menu items are hidden initially', () => {
-      render(<MobileNav items={ITEMS} />);
-      expect(screen.queryByRole('link', { name: /intro/i })).not.toBeInTheDocument();
-    });
-  });
-
-  describe('navigation items', () => {
-    it('shows items as links with correct hrefs when open', async () => {
-      render(<MobileNav items={ITEMS} />);
-      await userEvent.click(screen.getByRole('button', { name: 'Menu' }));
-      expect(screen.getByRole('link', { name: /01.*Intro/i })).toHaveAttribute('href', '/intro');
-      expect(screen.getByRole('link', { name: /02.*Bio/i })).toHaveAttribute('href', '/bio');
-    });
-  });
-
-  describe('interactions', () => {
-    it('click toggle shows links and changes label to "Close"', async () => {
-      render(<MobileNav items={ITEMS} />);
-      await userEvent.click(screen.getByRole('button', { name: 'Menu' }));
-      expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
-      expect(screen.getByText('Intro')).toBeInTheDocument();
-    });
-
-    it('closes menu when pathname changes', async () => {
-      const { usePathname } = await import('next/navigation');
-      vi.mocked(usePathname).mockReturnValue('/');
-      const { rerender } = render(<MobileNav items={ITEMS} />);
-      await userEvent.click(screen.getByRole('button', { name: 'Menu' }));
-      expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
-
-      vi.mocked(usePathname).mockReturnValue('/bio');
-      rerender(<MobileNav items={ITEMS} />);
-
-      expect(screen.getByRole('button', { name: 'Menu' })).toBeInTheDocument();
-      expect(screen.queryByRole('button', { name: 'Close' })).not.toBeInTheDocument();
-    });
-  });
-});

src/widgets/Navigation/ui/MobileNav.tsx

@@ -1,63 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { cn } from '$shared/lib';
-import type { NavItem } from '../model/types';
-
-/**
- * Props for MobileNav.
- */
-interface Props {
-  /**
-   * Navigation items to render
-   */
-  items: NavItem[];
-}
-
-/**
- * Mobile navigation overlay, hidden on lg+ screens.
- * Closes automatically when the URL pathname changes after navigation.
- */
-export function MobileNav({ items }: Props) {
-  const [isOpen, setIsOpen] = useState(false);
-  const pathname = usePathname();
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: pathname is the trigger, not a value used inside the callback
-  useEffect(() => {
-    setIsOpen(false);
-  }, [pathname]);
-
-  return (
-    <div className="lg:hidden fixed top-0 left-0 right-0 bg-cream brutal-border-bottom z-50">
-      <div className="px-6 py-4 flex items-center justify-between">
-        <h4>allmy.work</h4>
-        <button
-          type="button"
-          onClick={() => setIsOpen((prev) => !prev)}
-          className="brutal-border px-4 py-2 bg-blue text-cream"
-        >
-          {isOpen ? 'Close' : 'Menu'}
-        </button>
-      </div>
-      {isOpen && (
-        <div className="px-6 py-6 brutal-border-top space-y-2 max-h-[80vh] overflow-y-auto">
-          {items.map((item) => (
-            <Link key={item.id} href={`/${item.id}`} className="block w-full brutal-border bg-cream px-4 py-3">
-              <div className={cn('flex items-baseline gap-3')}>
-                <span className="text-sm opacity-60 font-body">{item.number}</span>
-                <span
-                  className="font-heading text-lg font-black"
-                  style={{ fontVariationSettings: '"WONK" 1, "SOFT" 0' }}
-                >
-                  {item.label}
-                </span>
-              </div>
-            </Link>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

src/widgets/Navigation/ui/SidebarNav.stories.tsx

@@ -1,29 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { SidebarNav } from './SidebarNav';
-
-// SidebarNav is hidden lg:block — it renders only on desktop viewports.
-// Use the viewport toolbar in Storybook to switch to a desktop size to see it.
-const meta: Meta<typeof SidebarNav> = {
-  title: 'Widgets/SidebarNav',
-  component: SidebarNav,
-  parameters: {
-    layout: 'fullscreen',
-    viewport: {
-      defaultViewport: 'desktop',
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof SidebarNav>;
-
-export const Default: Story = {
-  args: {
-    items: [
-      { id: 'bio', label: 'Bio', number: '01' },
-      { id: 'work', label: 'Work', number: '02' },
-      { id: 'contact', label: 'Contact', number: '03' },
-    ],
-  },
-};

src/widgets/Navigation/ui/SidebarNav.test.tsx

@@ -1,84 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import type { NavItem } from '../model/types';
-import { SidebarNav } from './SidebarNav';
-
-vi.mock('next/navigation', () => ({
-  usePathname: vi.fn(),
-}));
-
-import { usePathname } from 'next/navigation';
-
-const ITEMS: NavItem[] = [
-  { id: 'bio', label: 'Bio', number: '01' },
-  { id: 'work', label: 'Work', number: '02' },
-];
-
-describe('SidebarNav', () => {
-  describe('rendering', () => {
-    beforeEach(() => {
-      vi.mocked(usePathname).mockReturnValue('/bio');
-    });
-
-    it('renders a nav element', () => {
-      render(<SidebarNav items={ITEMS} />);
-      expect(screen.getByRole('navigation')).toBeInTheDocument();
-    });
-
-    it('renders "Index" heading', () => {
-      render(<SidebarNav items={ITEMS} />);
-      expect(screen.getByText('Index')).toBeInTheDocument();
-    });
-
-    it('renders "Digital Monograph" subtitle', () => {
-      render(<SidebarNav items={ITEMS} />);
-      expect(screen.getByText('Digital Monograph')).toBeInTheDocument();
-    });
-
-    it('renders each item label and number', () => {
-      render(<SidebarNav items={ITEMS} />);
-      expect(screen.getByText('Bio')).toBeInTheDocument();
-      expect(screen.getByText('01')).toBeInTheDocument();
-      expect(screen.getByText('Work')).toBeInTheDocument();
-      expect(screen.getByText('02')).toBeInTheDocument();
-    });
-
-    it('renders "Quick Links" section', () => {
-      render(<SidebarNav items={ITEMS} />);
-      expect(screen.getByText('Quick Links')).toBeInTheDocument();
-    });
-
-    it('renders Email quick link', () => {
-      render(<SidebarNav items={ITEMS} />);
-      expect(screen.getByRole('link', { name: 'Email' })).toBeInTheDocument();
-    });
-
-    it('renders a link for each nav item', () => {
-      render(<SidebarNav items={ITEMS} />);
-      expect(screen.getByRole('link', { name: /Bio/i })).toBeInTheDocument();
-      expect(screen.getByRole('link', { name: /Work/i })).toBeInTheDocument();
-    });
-  });
-
-  describe('active state', () => {
-    it('marks matching pathname item as active (no opacity-40)', () => {
-      vi.mocked(usePathname).mockReturnValue('/bio');
-      render(<SidebarNav items={ITEMS} />);
-      const activeLink = screen.getByRole('link', { name: /Bio/i });
-      expect(activeLink).not.toHaveClass('opacity-40');
-    });
-
-    it('marks non-matching item as inactive (opacity-40)', () => {
-      vi.mocked(usePathname).mockReturnValue('/bio');
-      render(<SidebarNav items={ITEMS} />);
-      const inactiveLink = screen.getByRole('link', { name: /Work/i });
-      expect(inactiveLink).toHaveClass('opacity-40');
-    });
-
-    it('marks first item active at root path', () => {
-      vi.mocked(usePathname).mockReturnValue('/');
-      render(<SidebarNav items={ITEMS} />);
-      const firstLink = screen.getByRole('link', { name: /Bio/i });
-      expect(firstLink).not.toHaveClass('opacity-40');
-    });
-  });
-});

src/widgets/Navigation/ui/SidebarNav.tsx

@@ -1,87 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { CONTACT_LINKS, cn } from '$shared/lib';
-import type { NavItem } from '../model/types';
-
-/**
- * Props for SidebarNav.
- */
-interface Props {
-  /**
-   * Navigation items to render
-   */
-  items: NavItem[];
-}
-
-/**
- * Fixed sidebar navigation, visible on lg+ screens.
- * Active section determined by current URL pathname.
- */
-export function SidebarNav({ items }: Props) {
-  const pathname = usePathname();
-
-  /**
-   * An item is active when its slug matches the current pathname,
-   * or when the pathname is root and it is the first item.
-   */
-  function isActive(item: NavItem): boolean {
-    if (pathname === `/${item.id}`) {
-      return true;
-    }
-    if (pathname === '/' && items[0]?.id === item.id) {
-      return true;
-    }
-    return false;
-  }
-
-  return (
-    <nav className="fixed top-0 left-0 h-screen w-full lg:w-1/3 bg-cream brutal-border-right hidden lg:block overflow-y-auto z-50">
-      <div className="px-8 py-12 space-y-2">
-        <div className="mb-12">
-          <h2>Index</h2>
-          <div className="brutal-border-top pt-4">
-            <p className="text-sm opacity-60">Digital Monograph</p>
-          </div>
-        </div>
-
-        {items.map((item) => (
-          <Link
-            key={item.id}
-            href={`/${item.id}`}
-            className={cn(
-              'block w-full text-left brutal-border bg-cream px-6 py-4 transition-all duration-300',
-              isActive(item)
-                ? 'shadow-brutal-2xl opacity-100 translate-x-0'
-                : 'opacity-40 shadow-none hover:opacity-60',
-            )}
-          >
-            <div className="flex items-baseline gap-4">
-              <span className="text-sm opacity-60">{item.number}</span>
-              <span className="font-heading text-xl font-black">{item.label}</span>
-            </div>
-          </Link>
-        ))}
-
-        <div className="mt-12 pt-12 brutal-border-top">
-          <p className="text-sm uppercase tracking-wider mb-4 opacity-60">Quick Links</p>
-          <div className="space-y-3">
-            <a href={`mailto:${CONTACT_LINKS.email}`} className="block">
-              Email
-            </a>
-            <a href={CONTACT_LINKS.linkedin} className="block">
-              LinkedIn
-            </a>
-            <a href={CONTACT_LINKS.instagram} className="block">
-              Instagram
-            </a>
-            <a href={CONTACT_LINKS.arena} className="block">
-              Are.na
-            </a>
-          </div>
-        </div>
-      </div>
-    </nav>
-  );
-}

src/widgets/Navigation/ui/UtilityBar.stories.tsx

@@ -1,20 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { UtilityBar } from './UtilityBar';
-
-const meta: Meta<typeof UtilityBar> = {
-  title: 'Widgets/UtilityBar',
-  component: UtilityBar,
-  decorators: [
-    (Story) => (
-      <div className="relative h-24 bg-ochre-clay">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof UtilityBar>;
-
-export const Default: Story = {};

src/widgets/Navigation/ui/UtilityBar.test.tsx

@@ -1,29 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { UtilityBar } from './UtilityBar';
-
-describe('UtilityBar', () => {
-  describe('rendering', () => {
-    it('renders "Contact" label', () => {
-      render(<UtilityBar />);
-      expect(screen.getByText('Contact')).toBeInTheDocument();
-    });
-
-    it('renders email link with correct href', () => {
-      render(<UtilityBar />);
-      const link = screen.getByRole('link', { name: 'hello@allmy.work' });
-      expect(link).toBeInTheDocument();
-      expect(link).toHaveAttribute('href', 'mailto:hello@allmy.work');
-    });
-
-    it('renders "Download CV" button', () => {
-      render(<UtilityBar />);
-      expect(screen.getByRole('button', { name: /download cv/i })).toBeInTheDocument();
-    });
-
-    it('Download CV button has primary variant class', () => {
-      render(<UtilityBar />);
-      const btn = screen.getByRole('button', { name: /download cv/i });
-      expect(btn).toHaveClass('bg-blue');
-    });
-  });
-});

src/widgets/Navigation/ui/UtilityBar.tsx

@@ -1,32 +0,0 @@
-'use client';
-
-import { CONTACT_LINKS } from '$shared/lib';
-import { Button } from '$shared/ui';
-
-/**
- * Fixed bottom utility bar with contact info and CV download.
- */
-export function UtilityBar() {
-  /**
-   * Handles CV download action.
-   */
-  function handleDownloadCV() {
-    console.log('Downloading CV...');
-  }
-
-  return (
-    <div className="fixed bottom-0 left-0 right-0 bg-cream brutal-border-top z-40">
-      <div className="max-w-[2560px] mx-auto px-6 md:px-12 lg:px-16 py-4 flex items-center justify-between">
-        <div className="flex items-center gap-4">
-          <span className="text-sm uppercase tracking-wider">Contact</span>
-          <a href={`mailto:${CONTACT_LINKS.email}`} className="text-base hover:opacity-60 transition-opacity">
-            {CONTACT_LINKS.email}
-          </a>
-        </div>
-        <Button variant="primary" size="sm" onClick={handleDownloadCV}>
-          Download CV
-        </Button>
-      </div>
-    </div>
-  );
-}

src/widgets/ProjectsSection/ui/ProjectsSection/ProjectsSection.tsx

@@ -13,9 +13,14 @@ export default async function ProjectsSection() {
     tags: ['projects'],
   });
 
+  /* Mark the first project that actually has an image as LCP-priority.
+   * Using `index === 0` alone misses the case where the first card has no
+   * image and the LCP candidate ends up being the next card's image. */
+  const lcpIndex = items.findIndex((project) => project.image);
+
   return (
     <div className="space-y-6 max-w-section">
-      {items.map((project) => (
+      {items.map((project, index) => (
         <ProjectCard
           key={project.id}
           title={project.title}
@@ -24,6 +29,7 @@ export default async function ProjectsSection() {
           tags={project.stack}
           url={project.url}
           imageUrl={project.image ? buildFileUrl(project.collectionId, project.id, project.image) : undefined}
+          priority={index === lcpIndex}
         />
       ))}
     </div>

src/widgets/SectionFactory/ui/SectionErrorBoundary/SectionErrorBoundary.tsx

@@ -3,12 +3,12 @@
 import type { ErrorInfo, ReactNode } from 'react';
 import { Component } from 'react';
 
-type Props = {
+export interface Props {
   /**
    * Section content to render
    */
   children: ReactNode;
-};
+}
 
 type State = {
   /**

src/widgets/SectionsAccordion/ui/SectionsAccordion/SectionsAccordion.tsx

@@ -3,7 +3,7 @@ import { Children } from 'react';
 import type { SectionRecord } from '$entities/Section';
 import { SectionAccordion } from '$entities/Section';
 
-type Props = {
+export interface Props {
   /**
    * Ordered section metadata — drives navigation labels and IDs
    */
@@ -17,7 +17,7 @@ type Props = {
    * Pre-rendered RSC content slots, one per section, matched by index
    */
   children: ReactNode;
-};
+}
 
 /**
  * Renders all portfolio sections as an accordion list.

src/widgets/index.ts

@@ -1,2 +1 @@
 export * from './Footer';
-export * from './Navigation';

vitest.config.ts

@@ -1,5 +1,5 @@
+import path from 'node:path';
 import react from '@vitejs/plugin-react';
-import path from 'path';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({