refactor: reorganize shared/lib into per-function subfolders

refactor: extract contact links to shared config
feat: add groupByKey utility
2026-04-24 11:43:08 +03:00 · 2026-04-24 10:11:34 +03:00 · 2026-04-24 09:34:27 +03:00 · 2026-04-24 09:34:27 +03:00 · 2026-04-24 09:34:27 +03:00 · 2026-04-23 21:01:46 +03:00
90 changed files with 2010 additions and 1143 deletions
@@ -20,6 +20,8 @@
 # production
 /build

+/docs
+
 # misc
 .DS_Store
 *.pem
@@ -1,21 +0,0 @@
-import type { Preview } from '@storybook/nextjs-vite'
-import '../app/globals.css'
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-    a11y: {
-      // 'todo' - show a11y violations in the test UI only
-      // 'error' - fail CI on a11y violations
-      // 'off' - skip a11y checks entirely
-      test: 'todo',
-    },
-  },
-}
-
-export default preview
@@ -1,11 +1,11 @@
-import type { Metadata } from 'next'
-import { fraunces, publicSans } from '$shared/lib'
-import './globals.css'
+import type { Metadata } from 'next';
+import { fraunces, publicSans } from '$shared/lib';
+import './globals.css';

 export const metadata: Metadata = {
  title: 'Portfolio',
  description: 'Portfolio',
-}
+};

 /**
 * Root layout — injects font CSS variables used by theme.css
@@ -13,9 +13,7 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
-      <body className={`${fraunces.variable} ${publicSans.variable}`}>
-        {children}
-      </body>
+      <body className={`${fraunces.variable} ${publicSans.variable}`}>{children}</body>
    </html>
-  )
+  );
 }
@@ -1,36 +1,29 @@
-import Image from "next/image";
+import Image from 'next/image';

 export default function Home() {
  return (
    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
+        <Image className="dark:invert" src="/next.svg" alt="Next.js logo" width={100} height={20} priority />
        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
            To get started, edit the page.tsx file.
          </h1>
          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
+            Looking for a starting point or more instructions? Head over to{' '}
            <a
              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
              className="font-medium text-zinc-950 dark:text-zinc-50"
            >
              Templates
-            </a>{" "}
-            or the{" "}
+            </a>{' '}
+            or the{' '}
            <a
              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
              className="font-medium text-zinc-950 dark:text-zinc-50"
            >
              Learning
-            </a>{" "}
+            </a>{' '}
            center.
          </p>
        </div>
@@ -41,13 +34,7 @@ export default function Home() {
            target="_blank"
            rel="noopener noreferrer"
          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
+            <Image className="dark:invert" src="/vercel.svg" alt="Vercel logomark" width={16} height={16} />
            Deploy Now
          </a>
          <a
@@ -0,0 +1,57 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.4.13/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "includes": ["src/**/*", "app/**/*"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 120
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "noUnusedVariables": "warn"
+      },
+      "style": {
+        "noNonNullAssertion": "warn",
+        "useBlockStatements": "error"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "jsxQuoteStyle": "double",
+      "semicolons": "always",
+      "trailingCommas": "all"
+    }
+  },
+  "json": {
+    "formatter": {
+      "trailingCommas": "none"
+    }
+  },
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}
@@ -0,0 +1,9 @@
+pre-commit:
+  parallel: true
+  commands:
+    biome-check:
+      glob: "*.{js,ts,jsx,tsx,json,css}"
+      run: yarn biome check --write {staged_files}
+      stage_fixed: true
+    tests:
+      run: yarn test
@@ -6,7 +6,12 @@
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
-    "lint": "eslint",
+    "lint": "biome lint --write .",
+    "format": "biome format --write .",
+    "check": "biome check --write .",
+    "lint:ci": "biome lint .",
+    "format:ci": "biome format .",
+    "check:ci": "biome check .",
    "test": "vitest run",
    "test:watch": "vitest",
    "storybook": "storybook dev -p 6006",
@@ -20,6 +25,7 @@
    "tailwind-merge": "^3.5.0"
  },
  "devDependencies": {
+    "@biomejs/biome": "2.4.13",
    "@chromatic-com/storybook": "^5.1.2",
    "@storybook/addon-a11y": "^10.3.5",
    "@storybook/addon-docs": "^10.3.5",
@@ -40,6 +46,7 @@
    "eslint-config-next": "16.2.4",
    "eslint-plugin-storybook": "^10.3.5",
    "jsdom": "^29.0.2",
+    "lefthook": "^2.1.6",
    "playwright": "^1.59.1",
    "storybook": "^10.3.5",
    "tailwindcss": "^4",
@@ -0,0 +1,2 @@
+export * from './model/types';
+export * from './ui';
@@ -0,0 +1,23 @@
+import type { BaseRecord } from '$shared/api';
+
+/**
+ * PocketBase collection for site sections and routing.
+ */
+export type SectionRecord = BaseRecord & {
+  /**
+   * URL-friendly identifier used for routing
+   */
+  slug: string;
+  /**
+   * Display name of the section
+   */
+  title: string;
+  /**
+   * Visual numbering prefix (e.g., "01")
+   */
+  number: string;
+  /**
+   * Sorting weight for section order
+   */
+  order: number;
+};
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { SectionAccordion } from './SectionAccordion'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { SectionAccordion } from './SectionAccordion';

 const meta: Meta<typeof SectionAccordion> = {
  title: 'Shared/SectionAccordion',
@@ -11,11 +11,11 @@ const meta: Meta<typeof SectionAccordion> = {
      </div>
    ),
  ],
-}
+};

-export default meta
+export default meta;

-type Story = StoryObj<typeof SectionAccordion>
+type Story = StoryObj<typeof SectionAccordion>;

 export const Active: Story = {
  args: {
@@ -24,11 +24,9 @@ export const Active: Story = {
    id: 'bio',
    isActive: true,
    onClick: () => {},
-    children: (
-      <p>This is the expanded section content. It is visible because isActive is true.</p>
-    ),
+    children: <p>This is the expanded section content. It is visible because isActive is true.</p>,
  },
-}
+};

 export const Collapsed: Story = {
  args: {
@@ -37,8 +35,6 @@ export const Collapsed: Story = {
    id: 'work',
    isActive: false,
    onClick: () => console.log('section clicked'),
-    children: (
-      <p>This content is hidden in collapsed state.</p>
-    ),
+    children: <p>This content is hidden in collapsed state.</p>,
  },
-}
+};
@@ -1,7 +1,6 @@
-import { describe, it, expect, vi } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { SectionAccordion } from './SectionAccordion'
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SectionAccordion } from './SectionAccordion';

 const defaultProps = {
  number: '01',
@@ -10,48 +9,48 @@ const defaultProps = {
  isActive: false,
  onClick: vi.fn(),
  children: <p>Content here</p>,
-}
+};

 describe('SectionAccordion', () => {
  describe('collapsed state (isActive=false)', () => {
    it('renders a section element with the given id', () => {
-      const { container } = render(<SectionAccordion {...defaultProps} />)
-      expect(container.querySelector('section#about')).toBeInTheDocument()
-    })
+      const { container } = render(<SectionAccordion {...defaultProps} />);
+      expect(container.querySelector('section#about')).toBeInTheDocument();
+    });
    it('renders a button with number and title', () => {
-      render(<SectionAccordion {...defaultProps} />)
-      expect(screen.getByRole('button', { name: /01.*About/i })).toBeInTheDocument()
-    })
+      render(<SectionAccordion {...defaultProps} />);
+      expect(screen.getByRole('button', { name: /01.*About/i })).toBeInTheDocument();
+    });
    it('does not render children', () => {
-      render(<SectionAccordion {...defaultProps} />)
-      expect(screen.queryByText('Content here')).not.toBeInTheDocument()
-    })
+      render(<SectionAccordion {...defaultProps} />);
+      expect(screen.queryByText('Content here')).not.toBeInTheDocument();
+    });
    it('calls onClick when button is clicked', async () => {
-      const onClick = vi.fn()
-      render(<SectionAccordion {...defaultProps} onClick={onClick} />)
-      await userEvent.click(screen.getByRole('button'))
-      expect(onClick).toHaveBeenCalledOnce()
-    })
-  })
+      const onClick = vi.fn();
+      render(<SectionAccordion {...defaultProps} onClick={onClick} />);
+      await userEvent.click(screen.getByRole('button'));
+      expect(onClick).toHaveBeenCalledOnce();
+    });
+  });

  describe('active state (isActive=true)', () => {
-    const activeProps = { ...defaultProps, isActive: true }
+    const activeProps = { ...defaultProps, isActive: true };

    it('renders an h1 with number and title', () => {
-      render(<SectionAccordion {...activeProps} />)
-      expect(screen.getByRole('heading', { level: 1, name: /01.*About/i })).toBeInTheDocument()
-    })
+      render(<SectionAccordion {...activeProps} />);
+      expect(screen.getByRole('heading', { level: 1, name: /01.*About/i })).toBeInTheDocument();
+    });
    it('renders children', () => {
-      render(<SectionAccordion {...activeProps} />)
-      expect(screen.getByText('Content here')).toBeInTheDocument()
-    })
+      render(<SectionAccordion {...activeProps} />);
+      expect(screen.getByText('Content here')).toBeInTheDocument();
+    });
    it('does not render a button', () => {
-      render(<SectionAccordion {...activeProps} />)
-      expect(screen.queryByRole('button')).not.toBeInTheDocument()
-    })
+      render(<SectionAccordion {...activeProps} />);
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
    it('content wrapper has animate-fadeIn class', () => {
-      const { container } = render(<SectionAccordion {...activeProps} />)
-      expect(container.querySelector('.animate-fadeIn')).toBeInTheDocument()
-    })
-  })
-})
+      const { container } = render(<SectionAccordion {...activeProps} />);
+      expect(container.querySelector('.animate-fadeIn')).toBeInTheDocument();
+    });
+  });
+});
@@ -1,30 +1,30 @@
-import type { ReactNode } from 'react'
+import type { ReactNode } from 'react';

 interface SectionAccordionProps {
  /**
   * Display number prefix (e.g. "01")
   */
-  number: string
+  number: string;
  /**
   * Section title
   */
-  title: string
+  title: string;
  /**
   * HTML id for anchor navigation
   */
-  id: string
+  id: string;
  /**
   * Whether this section is expanded
   */
-  isActive: boolean
+  isActive: boolean;
  /**
   * Called when the collapsed header is clicked
   */
-  onClick: () => void
+  onClick: () => void;
  /**
   * Section content, shown when active
   */
-  children: ReactNode
+  children: ReactNode;
 }

 /**
@@ -43,12 +43,11 @@ export function SectionAccordion({ number, title, id, isActive, onClick, childre
              {number}. {title}
            </h1>
          </div>
-          <div className="animate-fadeIn">
-            {children}
-          </div>
+          <div className="animate-fadeIn">{children}</div>
        </div>
      ) : (
        <button
+          type="button"
          onClick={onClick}
          className="w-full text-left mb-3 py-3 transition-all duration-200 hover:opacity-60 group"
        >
@@ -61,5 +60,5 @@ export function SectionAccordion({ number, title, id, isActive, onClick, childre
        </button>
      )}
    </section>
-  )
+  );
 }
@@ -0,0 +1 @@
+export * from './SectionAccordion';
@@ -0,0 +1 @@
+export * from './SectionAccordion';
@@ -1 +1 @@
-export { ExperienceCard } from './ui/ExperienceCard'
+export { ExperienceCard } from './ui/ExperienceCard';
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { ExperienceCard } from './ExperienceCard'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { ExperienceCard } from './ExperienceCard';

 const meta: Meta<typeof ExperienceCard> = {
  title: 'Entities/ExperienceCard',
@@ -11,30 +11,28 @@ const meta: Meta<typeof ExperienceCard> = {
      </div>
    ),
  ],
-}
+};

-export default meta
+export default meta;

-type Story = StoryObj<typeof ExperienceCard>
+type Story = StoryObj<typeof ExperienceCard>;

 const baseArgs = {
  title: 'Senior Frontend Engineer',
  company: 'Acme Corp',
  period: '2021 – 2024',
-  description: 'Led frontend development for the core product, established design system practices, and mentored junior engineers across two distributed teams.',
-}
+  description:
+    'Led frontend development for the core product, established design system practices, and mentored junior engineers across two distributed teams.',
+};

 export const Default: Story = {
  args: baseArgs,
-}
+};

 export const SlateBackground: Story = {
  render: () => (
    <div className="bg-slate-indigo p-8 max-w-2xl">
-      <ExperienceCard
-        {...baseArgs}
-        className="border-ochre-clay"
-      />
+      <ExperienceCard {...baseArgs} className="border-ochre-clay" />
    </div>
  ),
-}
+};
@@ -1,72 +1,71 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { ExperienceCard } from './ExperienceCard'
+import { render, screen } from '@testing-library/react';
+import { ExperienceCard } from './ExperienceCard';

 const DEFAULT_PROPS = {
  title: 'Senior Developer',
  company: 'Acme Corp',
  period: '2021 – 2024',
  description: 'Built scalable frontend systems.',
-}
+};

 describe('ExperienceCard', () => {
  describe('rendering', () => {
    it('renders the job title', () => {
-      render(<ExperienceCard {...DEFAULT_PROPS} />)
-      expect(screen.getByText('Senior Developer')).toBeInTheDocument()
-    })
+      render(<ExperienceCard {...DEFAULT_PROPS} />);
+      expect(screen.getByText('Senior Developer')).toBeInTheDocument();
+    });

    it('renders the company name', () => {
-      render(<ExperienceCard {...DEFAULT_PROPS} />)
-      expect(screen.getByText('Acme Corp')).toBeInTheDocument()
-    })
+      render(<ExperienceCard {...DEFAULT_PROPS} />);
+      expect(screen.getByText('Acme Corp')).toBeInTheDocument();
+    });

    it('renders the period badge', () => {
-      render(<ExperienceCard {...DEFAULT_PROPS} />)
-      expect(screen.getByText('2021 – 2024')).toBeInTheDocument()
-    })
+      render(<ExperienceCard {...DEFAULT_PROPS} />);
+      expect(screen.getByText('2021 – 2024')).toBeInTheDocument();
+    });

    it('renders the description', () => {
-      render(<ExperienceCard {...DEFAULT_PROPS} />)
-      expect(screen.getByText('Built scalable frontend systems.')).toBeInTheDocument()
-    })
-  })
+      render(<ExperienceCard {...DEFAULT_PROPS} />);
+      expect(screen.getByText('Built scalable frontend systems.')).toBeInTheDocument();
+    });
+  });

  describe('structure', () => {
    it('title is rendered as an h4', () => {
-      render(<ExperienceCard {...DEFAULT_PROPS} />)
-      expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('Senior Developer')
-    })
+      render(<ExperienceCard {...DEFAULT_PROPS} />);
+      expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('Senior Developer');
+    });

    it('period badge has brutal-border, bg-carbon-black, text-ochre-clay, text-sm', () => {
-      render(<ExperienceCard {...DEFAULT_PROPS} />)
-      const badge = screen.getByText('2021 – 2024')
-      expect(badge).toHaveClass('brutal-border', 'bg-carbon-black', 'text-ochre-clay', 'text-sm')
-    })
+      render(<ExperienceCard {...DEFAULT_PROPS} />);
+      const badge = screen.getByText('2021 – 2024');
+      expect(badge).toHaveClass('brutal-border', 'bg-carbon-black', 'text-ochre-clay', 'text-sm');
+    });

    it('company paragraph has opacity-80', () => {
-      render(<ExperienceCard {...DEFAULT_PROPS} />)
-      const company = screen.getByText('Acme Corp')
-      expect(company.tagName).toBe('P')
-      expect(company).toHaveClass('opacity-80')
-    })
+      render(<ExperienceCard {...DEFAULT_PROPS} />);
+      const company = screen.getByText('Acme Corp');
+      expect(company.tagName).toBe('P');
+      expect(company).toHaveClass('opacity-80');
+    });

    it('description paragraph has text-base and max-w-[700px]', () => {
-      render(<ExperienceCard {...DEFAULT_PROPS} />)
-      const desc = screen.getByText('Built scalable frontend systems.')
-      expect(desc).toHaveClass('text-base', 'max-w-[700px]')
-    })
+      render(<ExperienceCard {...DEFAULT_PROPS} />);
+      const desc = screen.getByText('Built scalable frontend systems.');
+      expect(desc).toHaveClass('text-base', 'max-w-[700px]');
+    });

    it('card has brutal-border class (from Card component)', () => {
-      const { container } = render(<ExperienceCard {...DEFAULT_PROPS} />)
-      expect(container.firstChild).toHaveClass('brutal-border')
-    })
-  })
+      const { container } = render(<ExperienceCard {...DEFAULT_PROPS} />);
+      expect(container.firstChild).toHaveClass('brutal-border');
+    });
+  });

  describe('className passthrough', () => {
    it('forwards className to the card', () => {
-      const { container } = render(<ExperienceCard {...DEFAULT_PROPS} className="custom-class" />)
-      expect(container.firstChild).toHaveClass('custom-class')
-    })
-  })
-})
+      const { container } = render(<ExperienceCard {...DEFAULT_PROPS} className="custom-class" />);
+      expect(container.firstChild).toHaveClass('custom-class');
+    });
+  });
+});
@@ -1,27 +1,27 @@
-import { Card } from '$shared/ui'
+import { Card } from '$shared/ui';

 type Props = {
  /**
   * Job title
   */
-  title: string
+  title: string;
  /**
   * Company name
   */
-  company: string
+  company: string;
  /**
   * Employment period (e.g. "2021 – 2024")
   */
-  period: string
+  period: string;
  /**
   * Description of responsibilities and achievements
   */
-  description: string
+  description: string;
  /**
   * Additional CSS classes forwarded to the card
   */
-  className?: string
-}
+  className?: string;
+};

 /**
 * Work experience card with title, company, period, and description.
@@ -34,11 +34,9 @@ export function ExperienceCard({ title, company, period, description, className
          <h4>{title}</h4>
          <p className="text-base opacity-80">{company}</p>
        </div>
-        <span className="brutal-border px-4 py-2 bg-carbon-black text-ochre-clay text-sm self-start">
-          {period}
-        </span>
+        <span className="brutal-border px-4 py-2 bg-carbon-black text-ochre-clay text-sm self-start">{period}</span>
      </div>
      <p className="text-base max-w-[700px]">{description}</p>
    </Card>
-  )
+  );
 }
@@ -1,2 +1,2 @@
-export * from './project'
-export * from './experience'
+export * from './experience';
+export * from './project';
@@ -1,3 +1,3 @@
-export { ProjectMetadata } from './ui/ProjectMetadata'
-export { ProjectCard } from './ui/ProjectCard'
-export { DetailedProjectCard } from './ui/DetailedProjectCard'
+export { DetailedProjectCard } from './ui/DetailedProjectCard';
+export { ProjectCard } from './ui/ProjectCard';
+export { ProjectMetadata } from './ui/ProjectMetadata';
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { DetailedProjectCard } from './DetailedProjectCard'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { DetailedProjectCard } from './DetailedProjectCard';

 const meta: Meta<typeof DetailedProjectCard> = {
  title: 'Entities/DetailedProjectCard',
@@ -11,32 +11,33 @@ const meta: Meta<typeof DetailedProjectCard> = {
      </div>
    ),
  ],
-}
+};

-export default meta
+export default meta;

-type Story = StoryObj<typeof DetailedProjectCard>
+type Story = StoryObj<typeof DetailedProjectCard>;

 const baseArgs = {
  title: 'Design System',
  year: '2024',
  role: 'Lead Frontend Engineer',
  stack: ['React', 'TypeScript', 'Tailwind CSS', 'Storybook'],
-  description: 'A comprehensive design system built for a large-scale SaaS product, covering components, tokens, and documentation.',
+  description:
+    'A comprehensive design system built for a large-scale SaaS product, covering components, tokens, and documentation.',
  details: [
    'Established token system covering color, spacing, and typography.',
    'Built 40+ accessible components with full test coverage.',
    'Integrated Storybook for visual regression testing and documentation.',
  ],
-}
+};

 export const Default: Story = {
  args: baseArgs,
-}
+};

 export const WithImage: Story = {
  args: {
    ...baseArgs,
    imageUrl: 'https://placehold.co/800x450/3B4A59/D9B48F?text=Project',
  },
-}
+};
@@ -1,6 +1,5 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { DetailedProjectCard } from './DetailedProjectCard'
+import { render, screen } from '@testing-library/react';
+import { DetailedProjectCard } from './DetailedProjectCard';

 const DEFAULT_PROPS = {
  title: 'Big Project',
@@ -9,83 +8,82 @@ const DEFAULT_PROPS = {
  stack: ['Vue', 'Go'],
  description: 'A detailed project description',
  details: ['First detail point', 'Second detail point'],
-}
+};

 describe('DetailedProjectCard', () => {
  describe('rendering', () => {
    it('renders the project title', () => {
-      render(<DetailedProjectCard {...DEFAULT_PROPS} />)
-      expect(screen.getByText('Big Project')).toBeInTheDocument()
-    })
+      render(<DetailedProjectCard {...DEFAULT_PROPS} />);
+      expect(screen.getByText('Big Project')).toBeInTheDocument();
+    });

    it('renders the description', () => {
-      render(<DetailedProjectCard {...DEFAULT_PROPS} />)
-      expect(screen.getByText('A detailed project description')).toBeInTheDocument()
-    })
+      render(<DetailedProjectCard {...DEFAULT_PROPS} />);
+      expect(screen.getByText('A detailed project description')).toBeInTheDocument();
+    });

    it('renders each detail item', () => {
-      render(<DetailedProjectCard {...DEFAULT_PROPS} />)
-      expect(screen.getByText('First detail point')).toBeInTheDocument()
-      expect(screen.getByText('Second detail point')).toBeInTheDocument()
-    })
+      render(<DetailedProjectCard {...DEFAULT_PROPS} />);
+      expect(screen.getByText('First detail point')).toBeInTheDocument();
+      expect(screen.getByText('Second detail point')).toBeInTheDocument();
+    });

    it('renders ProjectMetadata with year, role, and stack', () => {
-      render(<DetailedProjectCard {...DEFAULT_PROPS} />)
-      expect(screen.getByText('2023')).toBeInTheDocument()
-      expect(screen.getByText('Lead Dev')).toBeInTheDocument()
-      expect(screen.getByText('Vue')).toBeInTheDocument()
-      expect(screen.getByText('Go')).toBeInTheDocument()
-    })
-  })
+      render(<DetailedProjectCard {...DEFAULT_PROPS} />);
+      expect(screen.getByText('2023')).toBeInTheDocument();
+      expect(screen.getByText('Lead Dev')).toBeInTheDocument();
+      expect(screen.getByText('Vue')).toBeInTheDocument();
+      expect(screen.getByText('Go')).toBeInTheDocument();
+    });
+  });

  describe('structure', () => {
    it('outer grid has grid-cols-1 and lg:grid-cols-12', () => {
-      const { container } = render(<DetailedProjectCard {...DEFAULT_PROPS} />)
-      expect(container.firstChild).toHaveClass('grid', 'grid-cols-1', 'lg:grid-cols-12')
-    })
+      const { container } = render(<DetailedProjectCard {...DEFAULT_PROPS} />);
+      expect(container.firstChild).toHaveClass('grid', 'grid-cols-1', 'lg:grid-cols-12');
+    });

    it('title is rendered as an h3', () => {
-      render(<DetailedProjectCard {...DEFAULT_PROPS} />)
-      expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('Big Project')
-    })
+      render(<DetailedProjectCard {...DEFAULT_PROPS} />);
+      expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('Big Project');
+    });

    it('detail items are rendered as <p> tags with text-base', () => {
-      render(<DetailedProjectCard {...DEFAULT_PROPS} />)
-      const detail = screen.getByText('First detail point')
-      expect(detail.tagName).toBe('P')
-      expect(detail).toHaveClass('text-base')
-    })
+      render(<DetailedProjectCard {...DEFAULT_PROPS} />);
+      const detail = screen.getByText('First detail point');
+      expect(detail.tagName).toBe('P');
+      expect(detail).toHaveClass('text-base');
+    });

    it('details list has brutal-border-top and pt-6', () => {
-      render(<DetailedProjectCard {...DEFAULT_PROPS} />)
-      const detail = screen.getByText('First detail point')
-      const detailList = detail.parentElement
-      expect(detailList).toHaveClass('brutal-border-top', 'pt-6')
-    })
+      render(<DetailedProjectCard {...DEFAULT_PROPS} />);
+      const detail = screen.getByText('First detail point');
+      const detailList = detail.parentElement;
+      expect(detailList).toHaveClass('brutal-border-top', 'pt-6');
+    });

    it('description has text-lg and mb-6', () => {
-      render(<DetailedProjectCard {...DEFAULT_PROPS} />)
-      const desc = screen.getByText('A detailed project description')
-      expect(desc).toHaveClass('text-lg', 'mb-6')
-    })
-  })
+      render(<DetailedProjectCard {...DEFAULT_PROPS} />);
+      const desc = screen.getByText('A detailed project description');
+      expect(desc).toHaveClass('text-lg', 'mb-6');
+    });
+  });

  describe('conditional image rendering', () => {
    it('does not render image when imageUrl is absent', () => {
-      const { container } = render(<DetailedProjectCard {...DEFAULT_PROPS} />)
-      expect(container.querySelector('img')).toBeNull()
-    })
+      const { container } = render(<DetailedProjectCard {...DEFAULT_PROPS} />);
+      expect(container.querySelector('img')).toBeNull();
+    });

    it('renders image when imageUrl is provided', () => {
-      render(<DetailedProjectCard {...DEFAULT_PROPS} imageUrl="/detail.jpg" />)
-      const img = screen.getByRole('img')
-      expect(img).toHaveAttribute('src', '/detail.jpg')
-    })
+      render(<DetailedProjectCard {...DEFAULT_PROPS} imageUrl="/detail.jpg" />);
+      expect(screen.getByRole('img')).toBeInTheDocument();
+    });

    it('image wrapper has aspect-video and brutal-border when imageUrl is provided', () => {
-      const { container } = render(<DetailedProjectCard {...DEFAULT_PROPS} imageUrl="/detail.jpg" />)
-      const imgWrapper = container.querySelector('img')!.parentElement
-      expect(imgWrapper).toHaveClass('aspect-video', 'brutal-border')
-    })
-  })
-})
+      const { container } = render(<DetailedProjectCard {...DEFAULT_PROPS} imageUrl="/detail.jpg" />);
+      const imgWrapper = container.querySelector('img')?.parentElement;
+      expect(imgWrapper).toHaveClass('aspect-video', 'brutal-border');
+    });
+  });
+});
@@ -1,54 +1,47 @@
-import { Card } from '$shared/ui'
-import { ProjectMetadata } from './ProjectMetadata'
+import Image from 'next/image';
+import { Card } from '$shared/ui';
+import { ProjectMetadata } from './ProjectMetadata';

 type Props = {
  /**
   * Project name
   */
-  title: string
+  title: string;
  /**
   * Year the project was completed
   */
-  year: string
+  year: string;
  /**
   * Developer role on the project
   */
-  role: string
+  role: string;
  /**
   * Technology stack list
   */
-  stack: string[]
+  stack: string[];
  /**
   * Project description paragraph
   */
-  description: string
+  description: string;
  /**
   * Bullet-style detail points listed below the description
   */
-  details: string[]
+  details: string[];
  /**
   * Optional hero image URL
   */
-  imageUrl?: string
+  imageUrl?: string;
  /**
   * Reverse layout (reserved for future use)
   * @default false
   */
-  reverse?: boolean
-}
+  reverse?: boolean;
+};

 /**
 * Full-width detailed project card with metadata sidebar.
 */
-export function DetailedProjectCard({
-  title,
-  year,
-  role,
-  stack,
-  description,
-  details,
-  imageUrl,
-}: Props) {
+export function DetailedProjectCard({ title, year, role, stack, description, details, imageUrl }: Props) {
  return (
    <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 mb-16">
      <div className="lg:col-span-2 order-2 lg:order-1">
@@ -61,18 +54,20 @@ export function DetailedProjectCard({
          <p className="text-lg mb-6">{description}</p>

          {imageUrl && (
-            <div className="brutal-border aspect-video bg-slate-indigo overflow-hidden">
-              <img src={imageUrl} alt={title} className="w-full h-full object-cover" />
+            <div className="brutal-border aspect-video bg-slate-indigo overflow-hidden relative">
+              <Image src={imageUrl} alt={title} fill className="object-cover" />
            </div>
          )}

          <div className="max-w-[700px] space-y-4 brutal-border-top pt-6">
-            {details.map((detail, index) => (
-              <p key={index} className="text-base">{detail}</p>
+            {details.map((detail) => (
+              <p key={detail} className="text-base">
+                {detail}
+              </p>
            ))}
          </div>
        </Card>
      </div>
    </div>
-  )
+  );
 }
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { ProjectCard } from './ProjectCard'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { ProjectCard } from './ProjectCard';

 const meta: Meta<typeof ProjectCard> = {
  title: 'Entities/ProjectCard',
@@ -11,11 +11,11 @@ const meta: Meta<typeof ProjectCard> = {
      </div>
    ),
  ],
-}
+};

-export default meta
+export default meta;

-type Story = StoryObj<typeof ProjectCard>
+type Story = StoryObj<typeof ProjectCard>;

 export const Default: Story = {
  args: {
@@ -24,7 +24,7 @@ export const Default: Story = {
    description: 'A brutalist portfolio site built with Next.js and Tailwind CSS.',
    tags: ['React', 'TypeScript', 'Next.js'],
  },
-}
+};

 export const WithImage: Story = {
  args: {
@@ -34,4 +34,4 @@ export const WithImage: Story = {
    tags: ['React', 'TypeScript', 'Next.js'],
    imageUrl: 'https://placehold.co/800x450/3B4A59/D9B48F?text=Project',
  },
-}
+};
@@ -1,79 +1,84 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { ProjectCard } from './ProjectCard'
+import { render, screen } from '@testing-library/react';
+import { ProjectCard } from './ProjectCard';

 const DEFAULT_PROPS = {
  title: 'My Project',
  year: '2024',
  description: 'A cool project description',
  tags: ['React', 'Node'],
-}
+};

 describe('ProjectCard', () => {
  describe('rendering', () => {
    it('renders the project title', () => {
-      render(<ProjectCard {...DEFAULT_PROPS} />)
-      expect(screen.getByText('My Project')).toBeInTheDocument()
-    })
+      render(<ProjectCard {...DEFAULT_PROPS} />);
+      expect(screen.getByText('My Project')).toBeInTheDocument();
+    });

    it('renders the year badge', () => {
-      render(<ProjectCard {...DEFAULT_PROPS} />)
-      expect(screen.getByText('2024')).toBeInTheDocument()
-    })
+      render(<ProjectCard {...DEFAULT_PROPS} />);
+      expect(screen.getByText('2024')).toBeInTheDocument();
+    });

    it('renders the description', () => {
-      render(<ProjectCard {...DEFAULT_PROPS} />)
-      expect(screen.getByText('A cool project description')).toBeInTheDocument()
-    })
+      render(<ProjectCard {...DEFAULT_PROPS} />);
+      expect(screen.getByText('A cool project description')).toBeInTheDocument();
+    });

    it('renders each tag', () => {
-      render(<ProjectCard {...DEFAULT_PROPS} />)
-      expect(screen.getByText('React')).toBeInTheDocument()
-      expect(screen.getByText('Node')).toBeInTheDocument()
-    })
+      render(<ProjectCard {...DEFAULT_PROPS} />);
+      expect(screen.getByText('React')).toBeInTheDocument();
+      expect(screen.getByText('Node')).toBeInTheDocument();
+    });

    it('renders the View Project button', () => {
-      render(<ProjectCard {...DEFAULT_PROPS} />)
-      expect(screen.getByRole('button', { name: /view project/i })).toBeInTheDocument()
-    })
-  })
+      render(<ProjectCard {...DEFAULT_PROPS} />);
+      expect(screen.getByRole('button', { name: /view project/i })).toBeInTheDocument();
+    });
+  });

  describe('structure', () => {
    it('card has hover transition classes', () => {
-      const { container } = render(<ProjectCard {...DEFAULT_PROPS} />)
-      const card = container.firstChild as HTMLElement
-      expect(card).toHaveClass('group', 'transition-all', 'duration-300')
-    })
+      const { container } = render(<ProjectCard {...DEFAULT_PROPS} />);
+      const card = container.firstChild as HTMLElement;
+      expect(card).toHaveClass('group', 'transition-all', 'duration-300');
+    });

    it('year badge has correct classes', () => {
-      render(<ProjectCard {...DEFAULT_PROPS} />)
-      const yearBadge = screen.getByText('2024')
-      expect(yearBadge).toHaveClass('brutal-border', 'bg-carbon-black', 'text-ochre-clay', 'text-sm')
-    })
+      render(<ProjectCard {...DEFAULT_PROPS} />);
+      const yearBadge = screen.getByText('2024');
+      expect(yearBadge).toHaveClass('brutal-border', 'bg-carbon-black', 'text-ochre-clay', 'text-sm');
+    });

    it('tags have correct classes', () => {
-      render(<ProjectCard {...DEFAULT_PROPS} />)
-      const tag = screen.getByText('React')
-      expect(tag).toHaveClass('brutal-border', 'bg-white', 'text-carbon-black', 'text-sm', 'uppercase', 'tracking-wide')
-    })
-  })
+      render(<ProjectCard {...DEFAULT_PROPS} />);
+      const tag = screen.getByText('React');
+      expect(tag).toHaveClass(
+        'brutal-border',
+        'bg-white',
+        'text-carbon-black',
+        'text-sm',
+        'uppercase',
+        'tracking-wide',
+      );
+    });
+  });

  describe('conditional image rendering', () => {
    it('does not render image when imageUrl is absent', () => {
-      const { container } = render(<ProjectCard {...DEFAULT_PROPS} />)
-      expect(container.querySelector('img')).toBeNull()
-    })
+      const { container } = render(<ProjectCard {...DEFAULT_PROPS} />);
+      expect(container.querySelector('img')).toBeNull();
+    });

    it('renders image when imageUrl is provided', () => {
-      render(<ProjectCard {...DEFAULT_PROPS} imageUrl="/project.jpg" />)
-      const img = screen.getByRole('img')
-      expect(img).toHaveAttribute('src', '/project.jpg')
-    })
+      render(<ProjectCard {...DEFAULT_PROPS} imageUrl="/project.jpg" />);
+      expect(screen.getByRole('img')).toBeInTheDocument();
+    });

    it('image wrapper has aspect-video and overflow-hidden when imageUrl is provided', () => {
-      const { container } = render(<ProjectCard {...DEFAULT_PROPS} imageUrl="/project.jpg" />)
-      const imgWrapper = container.querySelector('img')!.parentElement
-      expect(imgWrapper).toHaveClass('aspect-video', 'overflow-hidden', 'brutal-border')
-    })
-  })
-})
+      const { container } = render(<ProjectCard {...DEFAULT_PROPS} imageUrl="/project.jpg" />);
+      const imgWrapper = container.querySelector('img')?.parentElement;
+      expect(imgWrapper).toHaveClass('aspect-video', 'overflow-hidden', 'brutal-border');
+    });
+  });
+});
@@ -1,28 +1,29 @@
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button } from '$shared/ui'
-import { cn } from '$shared/lib'
+import Image from 'next/image';
+import { cn } from '$shared/lib';
+import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '$shared/ui';

 type Props = {
  /**
   * Project name
   */
-  title: string
+  title: string;
  /**
   * Year the project was completed
   */
-  year: string
+  year: string;
  /**
   * Short project description
   */
-  description: string
+  description: string;
  /**
   * Technology or category tags
   */
-  tags: string[]
+  tags: string[];
  /**
   * Optional preview image URL
   */
-  imageUrl?: string
-}
+  imageUrl?: string;
+};

 /**
 * Compact project card for grid/list display.
@@ -44,8 +45,8 @@ export function ProjectCard({ title, year, description, tags, imageUrl }: Props)
      </CardHeader>

      {imageUrl && (
-        <div className="brutal-border my-6 aspect-video bg-slate-indigo overflow-hidden">
-          <img src={imageUrl} alt={title} className="w-full h-full object-cover" />
+        <div className="brutal-border my-6 aspect-video bg-slate-indigo overflow-hidden relative">
+          <Image src={imageUrl} alt={title} fill className="object-cover" />
        </div>
      )}

@@ -61,8 +62,10 @@ export function ProjectCard({ title, year, description, tags, imageUrl }: Props)
      </CardContent>

      <CardFooter>
-        <Button variant="primary" className="w-full">View Project</Button>
+        <Button variant="primary" className="w-full">
+          View Project
+        </Button>
      </CardFooter>
    </Card>
-  )
+  );
 }
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { ProjectMetadata } from './ProjectMetadata'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { ProjectMetadata } from './ProjectMetadata';

 const meta: Meta<typeof ProjectMetadata> = {
  title: 'Entities/ProjectMetadata',
@@ -11,11 +11,11 @@ const meta: Meta<typeof ProjectMetadata> = {
      </div>
    ),
  ],
-}
+};

-export default meta
+export default meta;

-type Story = StoryObj<typeof ProjectMetadata>
+type Story = StoryObj<typeof ProjectMetadata>;

 export const Default: Story = {
  args: {
@@ -23,4 +23,4 @@ export const Default: Story = {
    role: 'Lead Frontend Engineer',
    stack: ['React', 'TypeScript', 'Next.js', 'Tailwind'],
  },
-}
+};
@@ -1,96 +1,95 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { ProjectMetadata } from './ProjectMetadata'
+import { render, screen } from '@testing-library/react';
+import { ProjectMetadata } from './ProjectMetadata';

 const DEFAULT_PROPS = {
  year: '2024',
  role: 'Frontend Engineer',
  stack: ['React', 'TypeScript', 'Tailwind'],
-}
+};

 describe('ProjectMetadata', () => {
  describe('rendering', () => {
    it('renders the year value', () => {
-      render(<ProjectMetadata {...DEFAULT_PROPS} />)
-      expect(screen.getByText('2024')).toBeInTheDocument()
-    })
+      render(<ProjectMetadata {...DEFAULT_PROPS} />);
+      expect(screen.getByText('2024')).toBeInTheDocument();
+    });

    it('renders the YEAR label', () => {
-      render(<ProjectMetadata {...DEFAULT_PROPS} />)
-      expect(screen.getByText('YEAR')).toBeInTheDocument()
-    })
+      render(<ProjectMetadata {...DEFAULT_PROPS} />);
+      expect(screen.getByText('YEAR')).toBeInTheDocument();
+    });

    it('renders the role value', () => {
-      render(<ProjectMetadata {...DEFAULT_PROPS} />)
-      expect(screen.getByText('Frontend Engineer')).toBeInTheDocument()
-    })
+      render(<ProjectMetadata {...DEFAULT_PROPS} />);
+      expect(screen.getByText('Frontend Engineer')).toBeInTheDocument();
+    });

    it('renders the ROLE label', () => {
-      render(<ProjectMetadata {...DEFAULT_PROPS} />)
-      expect(screen.getByText('ROLE')).toBeInTheDocument()
-    })
+      render(<ProjectMetadata {...DEFAULT_PROPS} />);
+      expect(screen.getByText('ROLE')).toBeInTheDocument();
+    });

    it('renders the STACK label', () => {
-      render(<ProjectMetadata {...DEFAULT_PROPS} />)
-      expect(screen.getByText('STACK')).toBeInTheDocument()
-    })
+      render(<ProjectMetadata {...DEFAULT_PROPS} />);
+      expect(screen.getByText('STACK')).toBeInTheDocument();
+    });

    it('renders each stack technology', () => {
-      render(<ProjectMetadata {...DEFAULT_PROPS} />)
-      expect(screen.getByText('React')).toBeInTheDocument()
-      expect(screen.getByText('TypeScript')).toBeInTheDocument()
-      expect(screen.getByText('Tailwind')).toBeInTheDocument()
-    })
-  })
+      render(<ProjectMetadata {...DEFAULT_PROPS} />);
+      expect(screen.getByText('React')).toBeInTheDocument();
+      expect(screen.getByText('TypeScript')).toBeInTheDocument();
+      expect(screen.getByText('Tailwind')).toBeInTheDocument();
+    });
+  });

  describe('structure', () => {
    it('outer div has space-y-6', () => {
-      const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />)
-      expect(container.firstChild).toHaveClass('space-y-6')
-    })
+      const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
+      expect(container.firstChild).toHaveClass('space-y-6');
+    });

    it('year section has no brutal-border-top (first section)', () => {
-      const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />)
-      const sections = container.firstChild!.childNodes
-      expect(sections[0]).not.toHaveClass('brutal-border-top')
-    })
+      const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
+      const sections = container.firstChild?.childNodes;
+      expect(sections[0]).not.toHaveClass('brutal-border-top');
+    });

    it('role section has brutal-border-top and pt-6', () => {
-      const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />)
-      const sections = container.firstChild!.childNodes
-      expect(sections[1]).toHaveClass('brutal-border-top', 'pt-6')
-    })
+      const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
+      const sections = container.firstChild?.childNodes;
+      expect(sections[1]).toHaveClass('brutal-border-top', 'pt-6');
+    });

    it('stack section has brutal-border-top and pt-6', () => {
-      const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />)
-      const sections = container.firstChild!.childNodes
-      expect(sections[2]).toHaveClass('brutal-border-top', 'pt-6')
-    })
+      const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
+      const sections = container.firstChild?.childNodes;
+      expect(sections[2]).toHaveClass('brutal-border-top', 'pt-6');
+    });

    it('label has text-xs uppercase tracking-wider opacity-60', () => {
-      render(<ProjectMetadata {...DEFAULT_PROPS} />)
-      const yearLabel = screen.getByText('YEAR')
-      expect(yearLabel).toHaveClass('text-xs', 'uppercase', 'tracking-wider', 'opacity-60')
-    })
+      render(<ProjectMetadata {...DEFAULT_PROPS} />);
+      const yearLabel = screen.getByText('YEAR');
+      expect(yearLabel).toHaveClass('text-xs', 'uppercase', 'tracking-wider', 'opacity-60');
+    });

    it('year value has text-base font-bold', () => {
-      render(<ProjectMetadata {...DEFAULT_PROPS} />)
-      const yearValue = screen.getByText('2024')
-      expect(yearValue).toHaveClass('text-base', 'font-bold')
-    })
+      render(<ProjectMetadata {...DEFAULT_PROPS} />);
+      const yearValue = screen.getByText('2024');
+      expect(yearValue).toHaveClass('text-base', 'font-bold');
+    });

    it('each stack tech is rendered as a <p> with text-sm', () => {
-      render(<ProjectMetadata {...DEFAULT_PROPS} />)
-      const techEl = screen.getByText('React')
-      expect(techEl.tagName).toBe('P')
-      expect(techEl).toHaveClass('text-sm')
-    })
-  })
+      render(<ProjectMetadata {...DEFAULT_PROPS} />);
+      const techEl = screen.getByText('React');
+      expect(techEl.tagName).toBe('P');
+      expect(techEl).toHaveClass('text-sm');
+    });
+  });

  describe('className passthrough', () => {
    it('merges custom className onto outer div', () => {
-      const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} className="my-custom" />)
-      expect(container.firstChild).toHaveClass('my-custom')
-    })
-  })
-})
+      const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} className="my-custom" />);
+      expect(container.firstChild).toHaveClass('my-custom');
+    });
+  });
+});
@@ -1,23 +1,23 @@
-import { cn } from '$shared/lib'
+import { cn } from '$shared/lib';

 type Props = {
  /**
   * Project year
   */
-  year: string
+  year: string;
  /**
   * Developer role on the project
   */
-  role: string
+  role: string;
  /**
   * Technology stack list
   */
-  stack: string[]
+  stack: string[];
  /**
   * Additional CSS classes
   */
-  className?: string
-}
+  className?: string;
+};

 /**
 * Sidebar metadata display for a project: year, role, and stack.
@@ -36,9 +36,11 @@ export function ProjectMetadata({ year, role, stack, className }: Props) {
      <div className="brutal-border-top pt-6">
        <p className="text-xs uppercase tracking-wider opacity-60">STACK</p>
        {stack.map((tech) => (
-          <p key={tech} className="text-sm">{tech}</p>
+          <p key={tech} className="text-sm">
+            {tech}
+          </p>
        ))}
      </div>
    </div>
-  )
+  );
 }
@@ -0,0 +1,69 @@
+import type { ListResponse } from './types';
+
+/*
+ * Native fetch wrapper for PocketBase API requests.
+ */
+
+const PB_URL =
+  process.env.NEXT_PUBLIC_PB_URL ||
+  (process.env.NODE_ENV === 'production'
+    ? (() => {
+        throw new Error('NEXT_PUBLIC_PB_URL is not set');
+      })()
+    : 'http://127.0.0.1:8090');
+
+/**
+ * Options for PocketBase collection fetching.
+ */
+export type PBFetchOptions = {
+  /**
+   * Sorting criteria (e.g., "-created,order")
+   */
+  sort?: string;
+  /**
+   * Filter query string
+   */
+  filter?: string;
+  /**
+   * Fields to expand (e.g., "stack")
+   */
+  expand?: string;
+};
+
+/**
+ * Fetch a list of records from a PocketBase collection.
+ */
+export async function getCollection<T>(collection: string, options: PBFetchOptions = {}): Promise<ListResponse<T>> {
+  const { sort, filter, expand } = options;
+
+  const params = new URLSearchParams();
+  if (sort) {
+    params.set('sort', sort);
+  }
+  if (filter) {
+    params.set('filter', filter);
+  }
+  if (expand) {
+    params.set('expand', expand);
+  }
+
+  const url = `${PB_URL}/api/collections/${collection}/records?${params.toString()}`;
+
+  /* force-cache deduplicates identical fetches during the static build phase;
+   * it has no runtime effect in `output: 'export'` mode. */
+  const res = await fetch(url, { cache: 'force-cache' });
+
+  if (!res.ok) {
+    throw new Error(`PocketBase ${res.status} ${res.statusText} on collection "${collection}"`);
+  }
+
+  return res.json();
+}
+
+/**
+ * Fetch the first record matching an optional filter from a PocketBase collection.
+ */
+export async function getFirstRecord<T>(collection: string, options: PBFetchOptions = {}): Promise<T | null> {
+  const data = await getCollection<T>(collection, options);
+  return data.items[0] ?? null;
+}
@@ -0,0 +1,2 @@
+export * from './client';
+export * from './types';
@@ -0,0 +1,151 @@
+/**
+ * Common properties for all PocketBase records.
+ */
+export type BaseRecord = {
+  /**
+   * Unique record ID
+   */
+  id: string;
+  /**
+   * ID of the collection this record belongs to
+   */
+  collectionId: string;
+  /**
+   * Name of the collection this record belongs to
+   */
+  collectionName: string;
+  /**
+   * Record creation timestamp (ISO 8601)
+   */
+  created: string;
+  /**
+   * Record last update timestamp (ISO 8601)
+   */
+  updated: string;
+};
+
+/**
+ * PocketBase collection for simple text blocks (Intro, Bio).
+ */
+export type PageContentRecord = BaseRecord & {
+  /**
+   * Slug corresponding to the parent section
+   */
+  slug: string;
+  /**
+   * HTML or Markdown content string
+   */
+  content: string;
+};
+
+/**
+ * PocketBase collection for technology skills.
+ */
+export type SkillRecord = BaseRecord & {
+  /**
+   * Name of the technology or tool
+   */
+  name: string;
+  /**
+   * Grouping category (e.g., 'Frontend', 'Backend')
+   */
+  category: 'Frontend' | 'Backend' | 'Tools' | 'Design' | string;
+  /**
+   * Sorting weight within the category
+   */
+  order: number;
+};
+
+/**
+ * PocketBase collection for work experience history.
+ */
+export type ExperienceRecord = BaseRecord & {
+  /**
+   * Name of the organization
+   */
+  company: string;
+  /**
+   * Professional title held
+   */
+  role: string;
+  /**
+   * Start date of the tenure
+   */
+  start_date: string;
+  /**
+   * End date of the tenure, or null if currently employed
+   */
+  end_date: string | null;
+  /**
+   * Rich text description of responsibilities and achievements
+   */
+  description: string;
+  /**
+   * Sorting weight for chronological display
+   */
+  order: number;
+};
+
+/**
+ * PocketBase collection for portfolio projects.
+ */
+export type ProjectRecord = BaseRecord & {
+  /**
+   * Full title of the project
+   */
+  title: string;
+  /**
+   * Completion or duration year (e.g., "2024")
+   */
+  year: string;
+  /**
+   * Role performed on the project
+   */
+  role: string;
+  /**
+   * Short summary of the project
+   */
+  description: string;
+  /**
+   * List of specific feature or achievement points
+   */
+  details: string[];
+  /**
+   * List of SkillRecord IDs used in the project
+   */
+  stack: string[];
+  /**
+   * Primary thumbnail or hero image filename
+   */
+  image: string;
+  /**
+   * Sorting weight for the project list
+   */
+  order: number;
+};
+
+/**
+ * Generic response for a list of PocketBase records.
+ */
+export type ListResponse<T> = {
+  /**
+   * Current page index
+   */
+  page: number;
+  /**
+   * Number of items per page
+   */
+  perPage: number;
+  /**
+   * Total number of items across all pages
+   */
+  totalItems: number;
+  /**
+   * Total number of pages available
+   */
+  totalPages: number;
+  /**
+   * Array of records for the current page
+   */
+  items: T[];
+};
@@ -1,2 +1,3 @@
-export * from './ui'
-export * from './lib'
+export * from './api';
+export * from './lib';
+export * from './ui';
@@ -0,0 +1,21 @@
+/**
+ * Static contact and social links shown in navigation.
+ */
+export const CONTACT_LINKS = {
+  /**
+   * Primary contact email address
+   */
+  email: 'hello@allmy.work',
+  /**
+   * LinkedIn profile URL
+   */
+  linkedin: 'https://linkedin.com',
+  /**
+   * Instagram profile URL
+   */
+  instagram: 'https://instagram.com',
+  /**
+   * Are.na profile URL
+   */
+  arena: 'https://are.na',
+} as const;
@@ -1,4 +1,4 @@
-import { Fraunces, Public_Sans } from 'next/font/google'
+import { Fraunces, Public_Sans } from 'next/font/google';

 /**
 * Heading font — variable axes for brutalist variation settings
@@ -7,7 +7,7 @@ export const fraunces = Fraunces({
  subsets: ['latin'],
  variable: '--font-fraunces',
  axes: ['opsz', 'SOFT', 'WONK'],
-})
+});

 /**
 * Body font
@@ -15,4 +15,4 @@ export const fraunces = Fraunces({
 export const publicSans = Public_Sans({
  subsets: ['latin'],
  variable: '--font-public-sans',
-})
+});
@@ -1,3 +1,6 @@
-export { cn } from './cn'
-export type { ClassValue } from 'clsx'
-export * from './fonts'
+export type { ClassValue } from 'clsx';
+export { CONTACT_LINKS } from './config/config';
+export * from './fonts/fonts';
+export { cn } from './utils/cn/cn';
+export * from './utils/formatDate/formatDate';
+export { groupByKey } from './utils/groupByKey/groupByKey';
@@ -1,40 +1,39 @@
-import { describe, it, expect } from 'vitest'
-import { cn } from './cn'
+import { cn } from './cn';

 describe('cn', () => {
  describe('basic merging', () => {
    it('returns single class unchanged', () => {
-      expect(cn('foo')).toBe('foo')
-    })
+      expect(cn('foo')).toBe('foo');
+    });

    it('joins multiple classes', () => {
-      expect(cn('foo', 'bar')).toBe('foo bar')
-    })
-  })
+      expect(cn('foo', 'bar')).toBe('foo bar');
+    });
+  });

  describe('conditional classes', () => {
    it('includes truthy conditional', () => {
-      expect(cn('foo', true && 'bar')).toBe('foo bar')
-    })
+      expect(cn('foo', true && 'bar')).toBe('foo bar');
+    });

    it('excludes falsy conditional', () => {
-      expect(cn('foo', false && 'bar')).toBe('foo')
-    })
-  })
+      expect(cn('foo', false && 'bar')).toBe('foo');
+    });
+  });

  describe('object syntax', () => {
    it('includes classes with truthy object values', () => {
-      expect(cn({ foo: true, bar: false })).toBe('foo')
-    })
-  })
+      expect(cn({ foo: true, bar: false })).toBe('foo');
+    });
+  });

  describe('tailwind conflict resolution', () => {
    it('last padding wins', () => {
-      expect(cn('px-2', 'px-4')).toBe('px-4')
-    })
+      expect(cn('px-2', 'px-4')).toBe('px-4');
+    });

    it('last text color wins', () => {
-      expect(cn('text-red-500', 'text-blue-500')).toBe('text-blue-500')
-    })
-  })
-})
+      expect(cn('text-red-500', 'text-blue-500')).toBe('text-blue-500');
+    });
+  });
+});
@@ -1,9 +1,9 @@
-import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';

 /**
 * Merges Tailwind classes, resolving conflicts in favor of the last value.
 */
 export function cn(...inputs: ClassValue[]): string {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
@@ -0,0 +1,47 @@
+import { formatYearRange } from './formatDate';
+
+describe('formatYearRange', () => {
+  describe('Success Paths', () => {
+    it('formats a date range within the same year', () => {
+      const start = '2024-01-01 12:00:00.000Z';
+      const end = '2024-12-31 12:00:00.000Z';
+      expect(formatYearRange(start, end)).toBe('2024');
+    });
+
+    it('formats a range between different years', () => {
+      const start = '2021-05-15 12:00:00.000Z';
+      const end = '2024-03-20 12:00:00.000Z';
+      expect(formatYearRange(start, end)).toBe('2021 — 2024');
+    });
+
+    it('formats a range with null end date as "Present"', () => {
+      const start = '2022-08-01 12:00:00.000Z';
+      const end = null;
+      expect(formatYearRange(start, end)).toBe('2022 — Present');
+    });
+  });
+
+  describe('Error & Edge Cases', () => {
+    it('throws if start date is invalid', () => {
+      const start = 'not-a-date';
+      const end = '2024-01-01';
+      expect(() => formatYearRange(start, end)).toThrow('Invalid start date');
+    });
+
+    it('throws if end date is provided but invalid', () => {
+      const start = '2024-01-01';
+      const end = 'invalid';
+      expect(() => formatYearRange(start, end)).toThrow('Invalid end date');
+    });
+
+    it('throws if start year is after end year', () => {
+      const start = '2024-01-01';
+      const end = '2020-01-01';
+      expect(() => formatYearRange(start, end)).toThrow('Start year cannot be after end year');
+    });
+
+    it('handles empty strings by throwing', () => {
+      expect(() => formatYearRange('', null)).toThrow('Invalid start date');
+    });
+  });
+});
@@ -0,0 +1,31 @@
+/**
+ * Formats a PocketBase date string into a localized year string or "Present".
+ * @throws {Error} if any date is invalid or if the range is logically impossible.
+ */
+export function formatYearRange(start: string, end: string | null): string {
+  const startDate = new Date(start);
+  if (Number.isNaN(startDate.getTime())) {
+    throw new Error('Invalid start date');
+  }
+  const startYear = startDate.getFullYear();
+
+  if (end === null) {
+    return `${startYear} — Present`;
+  }
+
+  const endDate = new Date(end);
+  if (Number.isNaN(endDate.getTime())) {
+    throw new Error('Invalid end date');
+  }
+  const endYear = endDate.getFullYear();
+
+  if (startYear > endYear) {
+    throw new Error('Start year cannot be after end year');
+  }
+
+  if (startYear === endYear) {
+    return `${startYear}`;
+  }
+
+  return `${startYear} — ${endYear}`;
+}
@@ -0,0 +1,54 @@
+import { groupByKey } from './groupByKey';
+
+describe('groupByKey', () => {
+  describe('basic grouping', () => {
+    it('groups items by a string key', () => {
+      const items = [
+        { category: 'Frontend', name: 'React' },
+        { category: 'Backend', name: 'Node' },
+        { category: 'Frontend', name: 'Vue' },
+      ];
+      expect(groupByKey(items, 'category')).toEqual({
+        Frontend: [
+          { category: 'Frontend', name: 'React' },
+          { category: 'Frontend', name: 'Vue' },
+        ],
+        Backend: [{ category: 'Backend', name: 'Node' }],
+      });
+    });
+
+    it('preserves insertion order within each group', () => {
+      const items = [
+        { category: 'A', order: 1 },
+        { category: 'A', order: 2 },
+      ];
+      expect(groupByKey(items, 'category')['A']).toEqual([
+        { category: 'A', order: 1 },
+        { category: 'A', order: 2 },
+      ]);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('returns empty object for empty array', () => {
+      expect(groupByKey<{ category: string }>([], 'category')).toEqual({});
+    });
+
+    it('handles all items in same group', () => {
+      const items = [
+        { type: 'X', id: 1 },
+        { type: 'X', id: 2 },
+      ];
+      const result = groupByKey(items, 'type');
+      expect(Object.keys(result)).toHaveLength(1);
+      expect(result['X']).toHaveLength(2);
+    });
+
+    it('handles single item', () => {
+      const items = [{ category: 'Only', name: 'One' }];
+      expect(groupByKey(items, 'category')).toEqual({
+        Only: [{ category: 'Only', name: 'One' }],
+      });
+    });
+  });
+});
@@ -0,0 +1,19 @@
+/**
+ * Groups an array of objects by a shared key into a record of arrays.
+ * @param items - Array of objects to group
+ * @param key - Key whose value determines the group
+ * @returns Record mapping each unique key value to an array of matching items
+ */
+export function groupByKey<T>(items: T[], key: keyof T): Record<string, T[]> {
+  return items.reduce(
+    (acc, item) => {
+      const k = String(item[key]);
+      if (!acc[k]) {
+        acc[k] = [];
+      }
+      acc[k].push(item);
+      return acc;
+    },
+    {} as Record<string, T[]>,
+  );
+}
@@ -2,7 +2,7 @@
  /* === TYPOGRAPHY SCALE (Augmented Fourth 1.414) === */
  --font-size: 16px;
  --text-xs: 0.707rem;
-  --text-sm: 0.840rem;
+  --text-sm: 0.84rem;
  --text-base: 1rem;
  --text-lg: 1.414rem;
  --text-xl: 2rem;
@@ -29,9 +29,9 @@
  --fraunces-soft: 0;

  /* === COLOR PALETTE === */
-  --ochre-clay: #D9B48F;
-  --slate-indigo: #3B4A59;
-  --burnt-oxide: #A64B35;
+  --ochre-clay: #d9b48f;
+  --slate-indigo: #3b4a59;
+  --burnt-oxide: #a64b35;
  --carbon-black: #121212;

  /* === SEMANTIC COLORS === */
@@ -126,31 +126,48 @@

  /* Paper grain texture */
  body::before {
-    content: '';
+    content: "";
    position: fixed;
    inset: 0;
    background-image:
-      repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.02) 2px, rgba(0,0,0,0.02) 4px),
-      repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.02) 2px, rgba(0,0,0,0.02) 4px);
+      repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.02) 2px, rgba(0, 0, 0, 0.02) 4px),
+      repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, 0.02) 2px, rgba(0, 0, 0, 0.02) 4px);
    opacity: 0.4;
    display: block;
    pointer-events: none;
    z-index: 1;
  }

-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-tight);
-    font-variation-settings: 'WONK' var(--fraunces-wonk), 'SOFT' var(--fraunces-soft);
+    font-variation-settings:
+      "WONK" var(--fraunces-wonk),
+      "SOFT" var(--fraunces-soft);
    color: var(--carbon-black);
  }

-  h1 { font-size: var(--text-4xl); }
-  h2 { font-size: var(--text-3xl); }
-  h3 { font-size: var(--text-2xl); }
-  h4 { font-size: var(--text-xl); }
-  h5 { font-size: var(--text-lg); }
+  h1 {
+    font-size: var(--text-4xl);
+  }
+  h2 {
+    font-size: var(--text-3xl);
+  }
+  h3 {
+    font-size: var(--text-2xl);
+  }
+  h4 {
+    font-size: var(--text-xl);
+  }
+  h5 {
+    font-size: var(--text-lg);
+  }

  p {
    font-family: var(--font-body);
@@ -180,18 +197,42 @@
 }

 /* Brutalist utility classes */
-.brutal-shadow     { box-shadow: var(--shadow-brutal); }
-.brutal-shadow-sm  { box-shadow: var(--shadow-brutal-sm); }
-.brutal-shadow-lg  { box-shadow: var(--shadow-brutal-lg); }
-.brutal-border        { border: var(--border-width) solid var(--carbon-black); }
-.brutal-border-top    { border-top: var(--border-width) solid var(--carbon-black); }
-.brutal-border-bottom { border-bottom: var(--border-width) solid var(--carbon-black); }
-.brutal-border-left   { border-left: var(--border-width) solid var(--carbon-black); }
-.brutal-border-right  { border-right: var(--border-width) solid var(--carbon-black); }
+.brutal-shadow {
+  box-shadow: var(--shadow-brutal);
+}
+.brutal-shadow-sm {
+  box-shadow: var(--shadow-brutal-sm);
+}
+.brutal-shadow-lg {
+  box-shadow: var(--shadow-brutal-lg);
+}
+.brutal-border {
+  border: var(--border-width) solid var(--carbon-black);
+}
+.brutal-border-top {
+  border-top: var(--border-width) solid var(--carbon-black);
+}
+.brutal-border-bottom {
+  border-bottom: var(--border-width) solid var(--carbon-black);
+}
+.brutal-border-left {
+  border-left: var(--border-width) solid var(--carbon-black);
+}
+.brutal-border-right {
+  border-right: var(--border-width) solid var(--carbon-black);
+}

 /* Animations */
@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.animate-fadeIn {
+  animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
-.animate-fadeIn { animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
@@ -1,2 +1,2 @@
-export { Badge } from './ui/Badge'
-export type { BadgeVariant } from './ui/Badge'
+export type { BadgeVariant } from './ui/Badge';
+export { Badge } from './ui/Badge';
@@ -1,14 +1,14 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { Badge } from './Badge'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Badge } from './Badge';

 const meta: Meta<typeof Badge> = {
  title: 'Shared/Badge',
  component: Badge,
-}
+};

-export default meta
+export default meta;

-type Story = StoryObj<typeof Badge>
+type Story = StoryObj<typeof Badge>;

 export const AllVariants: Story = {
  render: () => (
@@ -19,4 +19,4 @@ export const AllVariants: Story = {
      <Badge variant="outline">Outline</Badge>
    </div>
  ),
-}
+};
@@ -1,52 +1,51 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { Badge } from './Badge'
+import { render, screen } from '@testing-library/react';
+import { Badge } from './Badge';

 describe('Badge', () => {
  describe('rendering', () => {
    it('renders children', () => {
-      render(<Badge>React</Badge>)
-      expect(screen.getByText('React')).toBeInTheDocument()
-    })
+      render(<Badge>React</Badge>);
+      expect(screen.getByText('React')).toBeInTheDocument();
+    });

    it('renders as inline span', () => {
-      render(<Badge>Tag</Badge>)
-      expect(screen.getByText('Tag').tagName).toBe('SPAN')
-    })
-  })
+      render(<Badge>Tag</Badge>);
+      expect(screen.getByText('Tag').tagName).toBe('SPAN');
+    });
+  });

  describe('variants', () => {
    it('applies default variant classes', () => {
-      render(<Badge variant="default">Tag</Badge>)
-      const el = screen.getByText('Tag')
-      expect(el).toHaveClass('bg-carbon-black', 'text-ochre-clay')
-    })
+      render(<Badge variant="default">Tag</Badge>);
+      const el = screen.getByText('Tag');
+      expect(el).toHaveClass('bg-carbon-black', 'text-ochre-clay');
+    });

    it('applies primary variant classes', () => {
-      render(<Badge variant="primary">Tag</Badge>)
-      expect(screen.getByText('Tag')).toHaveClass('bg-burnt-oxide')
-    })
+      render(<Badge variant="primary">Tag</Badge>);
+      expect(screen.getByText('Tag')).toHaveClass('bg-burnt-oxide');
+    });

    it('applies secondary variant classes', () => {
-      render(<Badge variant="secondary">Tag</Badge>)
-      expect(screen.getByText('Tag')).toHaveClass('bg-slate-indigo')
-    })
+      render(<Badge variant="secondary">Tag</Badge>);
+      expect(screen.getByText('Tag')).toHaveClass('bg-slate-indigo');
+    });

    it('applies outline variant classes', () => {
-      render(<Badge variant="outline">Tag</Badge>)
-      expect(screen.getByText('Tag')).toHaveClass('bg-transparent')
-    })
+      render(<Badge variant="outline">Tag</Badge>);
+      expect(screen.getByText('Tag')).toHaveClass('bg-transparent');
+    });

    it('defaults to default variant when unspecified', () => {
-      render(<Badge>Tag</Badge>)
-      expect(screen.getByText('Tag')).toHaveClass('bg-carbon-black')
-    })
-  })
+      render(<Badge>Tag</Badge>);
+      expect(screen.getByText('Tag')).toHaveClass('bg-carbon-black');
+    });
+  });

  describe('className passthrough', () => {
    it('merges custom className', () => {
-      render(<Badge className="mt-4">Tag</Badge>)
-      expect(screen.getByText('Tag')).toHaveClass('mt-4')
-    })
-  })
-})
+      render(<Badge className="mt-4">Tag</Badge>);
+      expect(screen.getByText('Tag')).toHaveClass('mt-4');
+    });
+  });
+});
@@ -1,30 +1,30 @@
-import type { ReactNode } from 'react'
-import { cn } from '$shared/lib'
+import type { ReactNode } from 'react';
+import { cn } from '$shared/lib';

-export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'outline'
+export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'outline';

 interface Props {
  /**
   * Badge content
   */
-  children: ReactNode
+  children: ReactNode;
  /**
   * Visual variant
   * @default 'default'
   */
-  variant?: BadgeVariant
+  variant?: BadgeVariant;
  /**
   * Additional CSS classes
   */
-  className?: string
+  className?: string;
 }

 const VARIANTS: Record<BadgeVariant, string> = {
-  default:   'brutal-border bg-carbon-black text-ochre-clay',
-  primary:   'brutal-border bg-burnt-oxide text-ochre-clay',
+  default: 'brutal-border bg-carbon-black text-ochre-clay',
+  primary: 'brutal-border bg-burnt-oxide text-ochre-clay',
  secondary: 'brutal-border bg-slate-indigo text-ochre-clay',
-  outline:   'brutal-border bg-transparent text-carbon-black',
-}
+  outline: 'brutal-border bg-transparent text-carbon-black',
+};

 /**
 * Small label for categorization or status.
@@ -34,5 +34,5 @@ export function Badge({ children, variant = 'default', className }: Props) {
    <span className={cn('inline-block px-3 py-1 text-xs uppercase tracking-wider', VARIANTS[variant], className)}>
      {children}
    </span>
-  )
+  );
 }
@@ -1,2 +1,2 @@
-export { Button } from './ui/Button'
-export type { ButtonVariant, ButtonSize } from './ui/Button'
+export type { ButtonSize, ButtonVariant } from './ui/Button';
+export { Button } from './ui/Button';
@@ -1,35 +1,49 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { Button } from './Button'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Button } from './Button';

 const meta: Meta<typeof Button> = {
  title: 'Shared/Button',
  component: Button,
-}
+};

-export default meta
+export default meta;

-type Story = StoryObj<typeof Button>
+type Story = StoryObj<typeof Button>;

 export const AllVariants: Story = {
  render: () => (
    <div className="flex gap-4 flex-wrap p-8 bg-ochre-clay">
-      <Button variant="primary" size="md">Primary</Button>
-      <Button variant="secondary" size="md">Secondary</Button>
-      <Button variant="outline" size="md">Outline</Button>
-      <Button variant="ghost" size="md">Ghost</Button>
+      <Button variant="primary" size="md">
+        Primary
+      </Button>
+      <Button variant="secondary" size="md">
+        Secondary
+      </Button>
+      <Button variant="outline" size="md">
+        Outline
+      </Button>
+      <Button variant="ghost" size="md">
+        Ghost
+      </Button>
    </div>
  ),
-}
+};

 export const Sizes: Story = {
  render: () => (
    <div className="flex gap-4 items-center flex-wrap p-8 bg-ochre-clay">
-      <Button variant="primary" size="sm">Small</Button>
-      <Button variant="primary" size="md">Medium</Button>
-      <Button variant="primary" size="lg">Large</Button>
+      <Button variant="primary" size="sm">
+        Small
+      </Button>
+      <Button variant="primary" size="md">
+        Medium
+      </Button>
+      <Button variant="primary" size="lg">
+        Large
+      </Button>
    </div>
  ),
-}
+};

 export const Disabled: Story = {
  args: {
@@ -44,4 +58,4 @@ export const Disabled: Story = {
      </div>
    ),
  ],
-}
+};
@@ -1,67 +1,66 @@
-import { describe, it, expect, vi } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { Button } from './Button'
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Button } from './Button';

 describe('Button', () => {
  describe('rendering', () => {
    it('renders children', () => {
-      render(<Button>Click me</Button>)
-      expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument()
-    })
+      render(<Button>Click me</Button>);
+      expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+    });
    it('renders as button element', () => {
-      render(<Button>Click</Button>)
-      expect(screen.getByRole('button')).toBeInTheDocument()
-    })
-  })
+      render(<Button>Click</Button>);
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+  });
  describe('variants', () => {
    it('applies primary variant by default', () => {
-      render(<Button>Go</Button>)
-      expect(screen.getByRole('button')).toHaveClass('bg-burnt-oxide')
-    })
+      render(<Button>Go</Button>);
+      expect(screen.getByRole('button')).toHaveClass('bg-burnt-oxide');
+    });
    it('applies secondary variant', () => {
-      render(<Button variant="secondary">Go</Button>)
-      expect(screen.getByRole('button')).toHaveClass('bg-slate-indigo')
-    })
+      render(<Button variant="secondary">Go</Button>);
+      expect(screen.getByRole('button')).toHaveClass('bg-slate-indigo');
+    });
    it('applies outline variant', () => {
-      render(<Button variant="outline">Go</Button>)
-      expect(screen.getByRole('button')).toHaveClass('bg-transparent')
-    })
+      render(<Button variant="outline">Go</Button>);
+      expect(screen.getByRole('button')).toHaveClass('bg-transparent');
+    });
    it('applies ghost variant', () => {
-      render(<Button variant="ghost">Go</Button>)
-      expect(screen.getByRole('button')).toHaveClass('bg-ochre-clay')
-    })
-  })
+      render(<Button variant="ghost">Go</Button>);
+      expect(screen.getByRole('button')).toHaveClass('bg-ochre-clay');
+    });
+  });
  describe('sizes', () => {
    it('applies md size by default', () => {
-      render(<Button>Go</Button>)
-      expect(screen.getByRole('button')).toHaveClass('px-6', 'py-3')
-    })
+      render(<Button>Go</Button>);
+      expect(screen.getByRole('button')).toHaveClass('px-6', 'py-3');
+    });
    it('applies sm size', () => {
-      render(<Button size="sm">Go</Button>)
-      expect(screen.getByRole('button')).toHaveClass('px-4', 'py-2')
-    })
+      render(<Button size="sm">Go</Button>);
+      expect(screen.getByRole('button')).toHaveClass('px-4', 'py-2');
+    });
    it('applies lg size', () => {
-      render(<Button size="lg">Go</Button>)
-      expect(screen.getByRole('button')).toHaveClass('px-8', 'py-4')
-    })
-  })
+      render(<Button size="lg">Go</Button>);
+      expect(screen.getByRole('button')).toHaveClass('px-8', 'py-4');
+    });
+  });
  describe('interactions', () => {
    it('calls onClick when clicked', async () => {
-      const onClick = vi.fn()
-      render(<Button onClick={onClick}>Go</Button>)
-      await userEvent.click(screen.getByRole('button'))
-      expect(onClick).toHaveBeenCalledOnce()
-    })
+      const onClick = vi.fn();
+      render(<Button onClick={onClick}>Go</Button>);
+      await userEvent.click(screen.getByRole('button'));
+      expect(onClick).toHaveBeenCalledOnce();
+    });
    it('is disabled when disabled prop is set', () => {
-      render(<Button disabled>Go</Button>)
-      expect(screen.getByRole('button')).toBeDisabled()
-    })
-  })
+      render(<Button disabled>Go</Button>);
+      expect(screen.getByRole('button')).toBeDisabled();
+    });
+  });
  describe('className passthrough', () => {
    it('merges custom className', () => {
-      render(<Button className="w-full">Go</Button>)
-      expect(screen.getByRole('button')).toHaveClass('w-full')
-    })
-  })
-})
+      render(<Button className="w-full">Go</Button>);
+      expect(screen.getByRole('button')).toHaveClass('w-full');
+    });
+  });
+});
@@ -1,40 +1,41 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react'
-import { cn } from '$shared/lib'
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { cn } from '$shared/lib';

-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost'
-export type ButtonSize = 'sm' | 'md' | 'lg'
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg';

 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
  /**
   * Visual variant
   * @default 'primary'
   */
-  variant?: ButtonVariant
+  variant?: ButtonVariant;
  /**
   * Size preset
   * @default 'md'
   */
-  size?: ButtonSize
+  size?: ButtonSize;
  /**
   * Button content
   */
-  children: ReactNode
+  children: ReactNode;
 }

 const VARIANTS: Record<ButtonVariant, string> = {
-  primary:   'bg-burnt-oxide text-ochre-clay',
+  primary: 'bg-burnt-oxide text-ochre-clay',
  secondary: 'bg-slate-indigo text-ochre-clay',
-  outline:   'bg-transparent text-carbon-black border-carbon-black',
-  ghost:     'bg-ochre-clay text-carbon-black border-carbon-black',
-}
+  outline: 'bg-transparent text-carbon-black border-carbon-black',
+  ghost: 'bg-ochre-clay text-carbon-black border-carbon-black',
+};

 const SIZES: Record<ButtonSize, string> = {
  sm: 'px-4 py-2 text-sm',
  md: 'px-6 py-3 text-base',
  lg: 'px-8 py-4 text-lg',
-}
+};

-const BASE = 'brutal-border brutal-shadow transition-all duration-200 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[6px_6px_0_var(--carbon-black)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-[4px_4px_0_var(--carbon-black)] uppercase tracking-wider'
+const BASE =
+  'brutal-border brutal-shadow transition-all duration-200 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[6px_6px_0_var(--carbon-black)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-[4px_4px_0_var(--carbon-black)] uppercase tracking-wider';

 /**
 * Brutalist button with variants and sizes.
@@ -44,5 +45,5 @@ export function Button({ variant = 'primary', size = 'md', className, children,
    <button className={cn(BASE, VARIANTS[variant], SIZES[size], className)} {...props}>
      {children}
    </button>
-  )
+  );
 }
@@ -1,2 +1,2 @@
-export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './ui/Card'
-export type { CardBackground } from './ui/Card'
+export type { CardBackground } from './ui/Card';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './ui/Card';
@@ -1,14 +1,14 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './Card';

 const meta: Meta<typeof Card> = {
  title: 'Shared/Card',
  component: Card,
-}
+};

-export default meta
+export default meta;

-type Story = StoryObj<typeof Card>
+type Story = StoryObj<typeof Card>;

 export const AllBackgrounds: Story = {
  render: () => (
@@ -36,19 +36,17 @@ export const AllBackgrounds: Story = {
      </Card>
    </div>
  ),
-}
+};

 export const NoPadding: Story = {
  render: () => (
    <div className="p-8 bg-ochre-clay">
      <Card noPadding className="w-64 overflow-hidden">
-        <div className="h-40 bg-slate-indigo flex items-center justify-center text-ochre-clay">
-          Image placeholder
-        </div>
+        <div className="h-40 bg-slate-indigo flex items-center justify-center text-ochre-clay">Image placeholder</div>
      </Card>
    </div>
  ),
-}
+};

 export const FullComposition: Story = {
  render: () => (
@@ -67,4 +65,4 @@ export const FullComposition: Story = {
      </Card>
    </div>
  ),
-}
+};
@@ -1,79 +1,78 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card'
+import { render, screen } from '@testing-library/react';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './Card';

 describe('Card', () => {
  describe('rendering', () => {
    it('renders children', () => {
-      render(<Card>Content</Card>)
-      expect(screen.getByText('Content')).toBeInTheDocument()
-    })
+      render(<Card>Content</Card>);
+      expect(screen.getByText('Content')).toBeInTheDocument();
+    });
    it('has brutal-border and brutal-shadow classes', () => {
-      const { container } = render(<Card>Content</Card>)
-      expect(container.firstChild).toHaveClass('brutal-border', 'brutal-shadow')
-    })
-  })
+      const { container } = render(<Card>Content</Card>);
+      expect(container.firstChild).toHaveClass('brutal-border', 'brutal-shadow');
+    });
+  });
  describe('background variants', () => {
    it('defaults to ochre background', () => {
-      const { container } = render(<Card>Content</Card>)
-      expect(container.firstChild).toHaveClass('bg-ochre-clay')
-    })
+      const { container } = render(<Card>Content</Card>);
+      expect(container.firstChild).toHaveClass('bg-ochre-clay');
+    });
    it('applies slate background', () => {
-      const { container } = render(<Card background="slate">Content</Card>)
-      expect(container.firstChild).toHaveClass('bg-slate-indigo')
-    })
+      const { container } = render(<Card background="slate">Content</Card>);
+      expect(container.firstChild).toHaveClass('bg-slate-indigo');
+    });
    it('applies white background', () => {
-      const { container } = render(<Card background="white">Content</Card>)
-      expect(container.firstChild).toHaveClass('bg-white')
-    })
-  })
+      const { container } = render(<Card background="white">Content</Card>);
+      expect(container.firstChild).toHaveClass('bg-white');
+    });
+  });
  describe('padding', () => {
    it('has default padding', () => {
-      const { container } = render(<Card>Content</Card>)
-      expect(container.firstChild).toHaveClass('p-6')
-    })
+      const { container } = render(<Card>Content</Card>);
+      expect(container.firstChild).toHaveClass('p-6');
+    });
    it('removes padding when noPadding is true', () => {
-      const { container } = render(<Card noPadding>Content</Card>)
-      expect(container.firstChild).not.toHaveClass('p-6')
-    })
-  })
+      const { container } = render(<Card noPadding>Content</Card>);
+      expect(container.firstChild).not.toHaveClass('p-6');
+    });
+  });
  describe('className passthrough', () => {
    it('merges custom className', () => {
-      const { container } = render(<Card className="group">Content</Card>)
-      expect(container.firstChild).toHaveClass('group')
-    })
-  })
-})
+      const { container } = render(<Card className="group">Content</Card>);
+      expect(container.firstChild).toHaveClass('group');
+    });
+  });
+});
 describe('CardHeader', () => {
  it('renders children with bottom margin', () => {
-    render(<CardHeader>Header</CardHeader>)
-    expect(screen.getByText('Header')).toHaveClass('mb-4')
-  })
-})
+    render(<CardHeader>Header</CardHeader>);
+    expect(screen.getByText('Header')).toHaveClass('mb-4');
+  });
+});
 describe('CardTitle', () => {
  it('renders children as h3', () => {
-    render(<CardTitle>Title</CardTitle>)
-    expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('Title')
-  })
-})
+    render(<CardTitle>Title</CardTitle>);
+    expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('Title');
+  });
+});
 describe('CardDescription', () => {
  it('renders children as paragraph with opacity', () => {
-    render(<CardDescription>Desc</CardDescription>)
-    const el = screen.getByText('Desc')
-    expect(el.tagName).toBe('P')
-    expect(el).toHaveClass('opacity-80')
-  })
-})
+    render(<CardDescription>Desc</CardDescription>);
+    const el = screen.getByText('Desc');
+    expect(el.tagName).toBe('P');
+    expect(el).toHaveClass('opacity-80');
+  });
+});
 describe('CardContent', () => {
  it('renders children in a div', () => {
-    render(<CardContent>Body</CardContent>)
-    expect(screen.getByText('Body')).toBeInTheDocument()
-  })
-})
+    render(<CardContent>Body</CardContent>);
+    expect(screen.getByText('Body')).toBeInTheDocument();
+  });
+});
 describe('CardFooter', () => {
  it('renders children with top border', () => {
-    render(<CardFooter>Footer</CardFooter>)
-    const el = screen.getByText('Footer')
-    expect(el).toHaveClass('brutal-border-top', 'mt-6', 'pt-6')
-  })
-})
+    render(<CardFooter>Footer</CardFooter>);
+    const el = screen.getByText('Footer');
+    expect(el).toHaveClass('brutal-border-top', 'mt-6', 'pt-6');
+  });
+});
@@ -1,34 +1,34 @@
-import type { ReactNode } from 'react'
-import { cn } from '$shared/lib'
+import type { ReactNode } from 'react';
+import { cn } from '$shared/lib';

-export type CardBackground = 'ochre' | 'slate' | 'white'
+export type CardBackground = 'ochre' | 'slate' | 'white';

 interface CardProps {
  /**
   * Card content
   */
-  children: ReactNode
+  children: ReactNode;
  /**
   * Additional CSS classes
   */
-  className?: string
+  className?: string;
  /**
   * Background color preset
   * @default 'ochre'
   */
-  background?: CardBackground
+  background?: CardBackground;
  /**
   * Remove default padding
   * @default false
   */
-  noPadding?: boolean
+  noPadding?: boolean;
 }

 const BG: Record<CardBackground, string> = {
  ochre: 'bg-ochre-clay',
  slate: 'bg-slate-indigo text-ochre-clay',
  white: 'bg-white',
-}
+};

 /**
 * Brutalist card container with background and padding variants.
@@ -38,51 +38,51 @@ export function Card({ children, className, background = 'ochre', noPadding = fa
    <div className={cn('brutal-border brutal-shadow', BG[background], !noPadding && 'p-6 md:p-8', className)}>
      {children}
    </div>
-  )
+  );
 }

 interface SlotProps {
  /**
   * Slot content
   */
-  children: ReactNode
+  children: ReactNode;
  /**
   * Additional CSS classes
   */
-  className?: string
+  className?: string;
 }

 /**
 * Card header wrapper — adds bottom margin.
 */
 export function CardHeader({ children, className }: SlotProps) {
-  return <div className={cn('mb-4', className)}>{children}</div>
+  return <div className={cn('mb-4', className)}>{children}</div>;
 }

 /**
 * Card title — renders as h3.
 */
 export function CardTitle({ children, className }: SlotProps) {
-  return <h3 className={className}>{children}</h3>
+  return <h3 className={className}>{children}</h3>;
 }

 /**
 * Card description — muted paragraph below the title.
 */
 export function CardDescription({ children, className }: SlotProps) {
-  return <p className={cn('mt-2 opacity-80', className)}>{children}</p>
+  return <p className={cn('mt-2 opacity-80', className)}>{children}</p>;
 }

 /**
 * Card body content area.
 */
 export function CardContent({ children, className }: SlotProps) {
-  return <div className={className}>{children}</div>
+  return <div className={className}>{children}</div>;
 }

 /**
 * Card footer — separated by a brutal border-top.
 */
 export function CardFooter({ children, className }: SlotProps) {
-  return <div className={cn('mt-6 pt-6 brutal-border-top', className)}>{children}</div>
+  return <div className={cn('mt-6 pt-6 brutal-border-top', className)}>{children}</div>;
 }
@@ -1 +1 @@
-export { Input, Textarea } from './ui/Input'
+export { Input, Textarea } from './ui/Input';
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { Input, Textarea } from './Input'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Input, Textarea } from './Input';

 const meta: Meta<typeof Input> = {
  title: 'Shared/Input',
@@ -11,35 +11,35 @@ const meta: Meta<typeof Input> = {
      </div>
    ),
  ],
-}
+};

-export default meta
+export default meta;

-type Story = StoryObj<typeof Input>
+type Story = StoryObj<typeof Input>;

 export const Default: Story = {
  args: {},
-}
+};

 export const WithLabel: Story = {
  args: {
    label: 'Email address',
  },
-}
+};

 export const WithError: Story = {
  args: {
    label: 'Email',
    error: 'This field is required',
  },
-}
+};

 export const WithPlaceholder: Story = {
  args: {
    placeholder: 'Enter your email',
    type: 'email',
  },
-}
+};

 export const TextareaStory: Story = {
  name: 'Textarea',
@@ -48,7 +48,7 @@ export const TextareaStory: Story = {
      <Textarea label="Message" rows={4} />
    </div>
  ),
-}
+};

 export const TextareaWithError: Story = {
  render: () => (
@@ -56,4 +56,4 @@ export const TextareaWithError: Story = {
      <Textarea label="Message" error="Too short" rows={4} />
    </div>
  ),
-}
+};
@@ -1,110 +1,109 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { Input, Textarea } from './Input'
+import { render, screen } from '@testing-library/react';
+import { Input, Textarea } from './Input';

 describe('Input', () => {
  describe('rendering', () => {
    it('renders an input element', () => {
-      render(<Input />)
-      expect(screen.getByRole('textbox')).toBeInTheDocument()
-    })
+      render(<Input />);
+      expect(screen.getByRole('textbox')).toBeInTheDocument();
+    });
    it('renders label when provided', () => {
-      render(<Input label="Email" />)
-      expect(screen.getByText('Email')).toBeInTheDocument()
-    })
+      render(<Input label="Email" />);
+      expect(screen.getByText('Email')).toBeInTheDocument();
+    });
    it('does not render label when omitted', () => {
-      const { container } = render(<Input />)
-      expect(container.querySelector('label')).toBeNull()
-    })
+      const { container } = render(<Input />);
+      expect(container.querySelector('label')).toBeNull();
+    });
    it('renders error message when provided', () => {
-      render(<Input error="Required" />)
-      expect(screen.getByText('Required')).toBeInTheDocument()
-    })
+      render(<Input error="Required" />);
+      expect(screen.getByText('Required')).toBeInTheDocument();
+    });
    it('does not render error when omitted', () => {
-      render(<Input />)
-      expect(screen.queryByText('Required')).toBeNull()
-    })
-  })
+      render(<Input />);
+      expect(screen.queryByText('Required')).toBeNull();
+    });
+  });
  describe('accessibility', () => {
    it('label is associated with input via htmlFor/id', () => {
-      render(<Input label="Email" />)
-      expect(screen.getByLabelText('Email')).toBeInTheDocument()
-    })
+      render(<Input label="Email" />);
+      expect(screen.getByLabelText('Email')).toBeInTheDocument();
+    });
    it('error span is referenced by aria-describedby', () => {
-      render(<Input error="Required" />)
-      const input = screen.getByRole('textbox')
-      const errorId = input.getAttribute('aria-describedby')
-      expect(errorId).toBeTruthy()
-      expect(document.getElementById(errorId!)).toHaveTextContent('Required')
-    })
+      render(<Input error="Required" />);
+      const input = screen.getByRole('textbox');
+      const errorId = input.getAttribute('aria-describedby');
+      expect(errorId).toBeTruthy();
+      expect(document.getElementById(errorId as string)).toHaveTextContent('Required');
+    });
    it('no aria-describedby when no error', () => {
-      render(<Input />)
-      expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-describedby')
-    })
+      render(<Input />);
+      expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-describedby');
+    });
    it('uses provided id prop', () => {
-      render(<Input id="my-input" label="Email" />)
-      expect(screen.getByLabelText('Email')).toHaveAttribute('id', 'my-input')
-    })
-  })
+      render(<Input id="my-input" label="Email" />);
+      expect(screen.getByLabelText('Email')).toHaveAttribute('id', 'my-input');
+    });
+  });
  describe('styling', () => {
    it('has brutal-border class', () => {
-      render(<Input />)
-      expect(screen.getByRole('textbox')).toHaveClass('brutal-border')
-    })
+      render(<Input />);
+      expect(screen.getByRole('textbox')).toHaveClass('brutal-border');
+    });
    it('applies custom className', () => {
-      render(<Input className="w-full" />)
-      expect(screen.getByRole('textbox')).toHaveClass('w-full')
-    })
-  })
+      render(<Input className="w-full" />);
+      expect(screen.getByRole('textbox')).toHaveClass('w-full');
+    });
+  });
  describe('forwarded props', () => {
    it('passes placeholder to input', () => {
-      render(<Input placeholder="Enter email" />)
-      expect(screen.getByPlaceholderText('Enter email')).toBeInTheDocument()
-    })
+      render(<Input placeholder="Enter email" />);
+      expect(screen.getByPlaceholderText('Enter email')).toBeInTheDocument();
+    });
    it('passes type to input', () => {
-      render(<Input type="email" />)
-      expect(screen.getByRole('textbox')).toHaveAttribute('type', 'email')
-    })
-  })
-})
+      render(<Input type="email" />);
+      expect(screen.getByRole('textbox')).toHaveAttribute('type', 'email');
+    });
+  });
+});
 describe('Textarea', () => {
  describe('rendering', () => {
    it('renders a textarea element', () => {
-      render(<Textarea />)
-      expect(screen.getByRole('textbox')).toBeInTheDocument()
-    })
+      render(<Textarea />);
+      expect(screen.getByRole('textbox')).toBeInTheDocument();
+    });
    it('renders label when provided', () => {
-      render(<Textarea label="Message" />)
-      expect(screen.getByText('Message')).toBeInTheDocument()
-    })
+      render(<Textarea label="Message" />);
+      expect(screen.getByText('Message')).toBeInTheDocument();
+    });
    it('renders error when provided', () => {
-      render(<Textarea error="Too short" />)
-      expect(screen.getByText('Too short')).toBeInTheDocument()
-    })
+      render(<Textarea error="Too short" />);
+      expect(screen.getByText('Too short')).toBeInTheDocument();
+    });
    it('defaults to 4 rows', () => {
-      render(<Textarea />)
-      expect(screen.getByRole('textbox')).toHaveAttribute('rows', '4')
-    })
+      render(<Textarea />);
+      expect(screen.getByRole('textbox')).toHaveAttribute('rows', '4');
+    });
    it('accepts custom rows', () => {
-      render(<Textarea rows={8} />)
-      expect(screen.getByRole('textbox')).toHaveAttribute('rows', '8')
-    })
-  })
+      render(<Textarea rows={8} />);
+      expect(screen.getByRole('textbox')).toHaveAttribute('rows', '8');
+    });
+  });
  describe('accessibility', () => {
    it('label is associated with textarea via htmlFor/id', () => {
-      render(<Textarea label="Message" />)
-      expect(screen.getByLabelText('Message')).toBeInTheDocument()
-    })
+      render(<Textarea label="Message" />);
+      expect(screen.getByLabelText('Message')).toBeInTheDocument();
+    });
    it('error span is referenced by aria-describedby', () => {
-      render(<Textarea error="Too short" />)
-      const textarea = screen.getByRole('textbox')
-      const errorId = textarea.getAttribute('aria-describedby')
-      expect(errorId).toBeTruthy()
-      expect(document.getElementById(errorId!)).toHaveTextContent('Too short')
-    })
+      render(<Textarea error="Too short" />);
+      const textarea = screen.getByRole('textbox');
+      const errorId = textarea.getAttribute('aria-describedby');
+      expect(errorId).toBeTruthy();
+      expect(document.getElementById(errorId as string)).toHaveTextContent('Too short');
+    });
    it('no aria-describedby when no error', () => {
-      render(<Textarea />)
-      expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-describedby')
-    })
-  })
-})
+      render(<Textarea />);
+      expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-describedby');
+    });
+  });
+});
@@ -1,68 +1,81 @@
-import { useId, type InputHTMLAttributes, type TextareaHTMLAttributes } from 'react'
-import { cn } from '$shared/lib'
+import { type InputHTMLAttributes, type TextareaHTMLAttributes, useId } from 'react';
+import { cn } from '$shared/lib';

 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  /**
   * Visible label rendered above the input
   */
-  label?: string
+  label?: string;
  /**
   * Validation error shown below the input
   */
-  error?: string
+  error?: string;
 }

-const INPUT_BASE = 'brutal-border bg-white px-4 py-3 text-carbon-black focus:outline-none focus:ring-2 focus:ring-burnt-oxide focus:ring-offset-2 focus:ring-offset-ochre-clay transition-all'
+const INPUT_BASE =
+  'brutal-border bg-white px-4 py-3 text-carbon-black focus:outline-none focus:ring-2 focus:ring-burnt-oxide focus:ring-offset-2 focus:ring-offset-ochre-clay transition-all';

 /**
 * Text input with optional label and error state.
 */
 export function Input({ label, error, className, id, ...props }: InputProps) {
-  const generatedId = useId()
-  const inputId = id ?? generatedId
-  const errorId = `${inputId}-error`
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const errorId = `${inputId}-error`;

  return (
    <div className="flex flex-col gap-2">
-      {label && <label htmlFor={inputId} className="text-carbon-black">{label}</label>}
+      {label && (
+        <label htmlFor={inputId} className="text-carbon-black">
+          {label}
+        </label>
+      )}
      <input
        id={inputId}
        className={cn(INPUT_BASE, className)}
        aria-describedby={error ? errorId : undefined}
        {...props}
      />
-      {error && <span id={errorId} className="text-sm text-burnt-oxide">{error}</span>}
+      {error && (
+        <span id={errorId} className="text-sm text-burnt-oxide">
+          {error}
+        </span>
+      )}
    </div>
-  )
+  );
 }

 interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
  /**
   * Visible label rendered above the textarea
   */
-  label?: string
+  label?: string;
  /**
   * Validation error shown below the textarea
   */
-  error?: string
+  error?: string;
  /**
   * Number of visible rows
   * @default 4
   */
-  rows?: number
+  rows?: number;
 }

 /**
 * Multiline textarea with optional label and error state.
 */
 export function Textarea({ label, error, rows = 4, className, id, ...props }: TextareaProps) {
-  const generatedId = useId()
-  const textareaId = id ?? generatedId
-  const errorId = `${textareaId}-error`
+  const generatedId = useId();
+  const textareaId = id ?? generatedId;
+  const errorId = `${textareaId}-error`;

  return (
    <div className="flex flex-col gap-2">
-      {label && <label htmlFor={textareaId} className="text-carbon-black">{label}</label>}
+      {label && (
+        <label htmlFor={textareaId} className="text-carbon-black">
+          {label}
+        </label>
+      )}
      <textarea
        id={textareaId}
        rows={rows}
@@ -70,7 +83,11 @@ export function Textarea({ label, error, rows = 4, className, id, ...props }: Te
        aria-describedby={error ? errorId : undefined}
        {...props}
      />
-      {error && <span id={errorId} className="text-sm text-burnt-oxide">{error}</span>}
+      {error && (
+        <span id={errorId} className="text-sm text-burnt-oxide">
+          {error}
+        </span>
+      )}
    </div>
-  )
+  );
 }
@@ -1,2 +1,2 @@
-export { Section, Container } from './ui/Section'
-export type { SectionBackground, ContainerSize } from './ui/Section'
+export type { ContainerSize, SectionBackground } from './ui/Section';
+export { Container, Section } from './ui/Section';
@@ -1,14 +1,14 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { Section, Container } from './Section'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Container, Section } from './Section';

 const meta: Meta<typeof Section> = {
  title: 'Shared/Section',
  component: Section,
-}
+};

-export default meta
+export default meta;

-type Story = StoryObj<typeof Section>
+type Story = StoryObj<typeof Section>;

 export const AllBackgrounds: Story = {
  render: () => (
@@ -16,32 +16,44 @@ export const AllBackgrounds: Story = {
      <Section background="ochre" className="py-12">
        <Container>
          <h2>Ochre Section</h2>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua.
+          </p>
        </Container>
      </Section>
      <Section background="slate" className="py-12">
        <Container>
          <h2>Slate Section</h2>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua.
+          </p>
        </Container>
      </Section>
      <Section background="white" className="py-12">
        <Container>
          <h2>White Section</h2>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua.
+          </p>
        </Container>
      </Section>
    </div>
  ),
-}
+};

 export const Bordered: Story = {
  render: () => (
    <Section background="ochre" bordered className="py-12">
      <Container>
        <h2>Bordered Section</h2>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua.
+        </p>
      </Container>
    </Section>
  ),
-}
+};
@@ -1,95 +1,102 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { Section, Container } from './Section'
+import { render, screen } from '@testing-library/react';
+import { Container, Section } from './Section';

 describe('Section', () => {
  describe('rendering', () => {
    it('renders a section element', () => {
-      const { container } = render(<Section>content</Section>)
-      expect(container.querySelector('section')).toBeInTheDocument()
-    })
+      const { container } = render(<Section>content</Section>);
+      expect(container.querySelector('section')).toBeInTheDocument();
+    });
    it('renders children', () => {
-      render(<Section><span>hello</span></Section>)
-      expect(screen.getByText('hello')).toBeInTheDocument()
-    })
-  })
+      render(
+        <Section>
+          <span>hello</span>
+        </Section>,
+      );
+      expect(screen.getByText('hello')).toBeInTheDocument();
+    });
+  });

  describe('background variants', () => {
    it('defaults to ochre background', () => {
-      const { container } = render(<Section>x</Section>)
-      expect(container.querySelector('section')).toHaveClass('bg-ochre-clay', 'text-carbon-black')
-    })
+      const { container } = render(<Section>x</Section>);
+      expect(container.querySelector('section')).toHaveClass('bg-ochre-clay', 'text-carbon-black');
+    });
    it('applies slate background', () => {
-      const { container } = render(<Section background="slate">x</Section>)
-      expect(container.querySelector('section')).toHaveClass('bg-slate-indigo', 'text-ochre-clay')
-    })
+      const { container } = render(<Section background="slate">x</Section>);
+      expect(container.querySelector('section')).toHaveClass('bg-slate-indigo', 'text-ochre-clay');
+    });
    it('applies white background', () => {
-      const { container } = render(<Section background="white">x</Section>)
-      expect(container.querySelector('section')).toHaveClass('bg-white', 'text-carbon-black')
-    })
-  })
+      const { container } = render(<Section background="white">x</Section>);
+      expect(container.querySelector('section')).toHaveClass('bg-white', 'text-carbon-black');
+    });
+  });

  describe('bordered', () => {
    it('no border classes by default', () => {
-      const { container } = render(<Section>x</Section>)
-      const el = container.querySelector('section')!
-      expect(el).not.toHaveClass('brutal-border-top')
-      expect(el).not.toHaveClass('brutal-border-bottom')
-    })
+      const { container } = render(<Section>x</Section>);
+      const el = container.querySelector('section') as HTMLElement;
+      expect(el).not.toHaveClass('brutal-border-top');
+      expect(el).not.toHaveClass('brutal-border-bottom');
+    });
    it('adds top and bottom borders when bordered=true', () => {
-      const { container } = render(<Section bordered>x</Section>)
-      const el = container.querySelector('section')!
-      expect(el).toHaveClass('brutal-border-top')
-      expect(el).toHaveClass('brutal-border-bottom')
-    })
-  })
+      const { container } = render(<Section bordered>x</Section>);
+      const el = container.querySelector('section') as HTMLElement;
+      expect(el).toHaveClass('brutal-border-top');
+      expect(el).toHaveClass('brutal-border-bottom');
+    });
+  });

  describe('className', () => {
    it('applies custom className', () => {
-      const { container } = render(<Section className="py-16">x</Section>)
-      expect(container.querySelector('section')).toHaveClass('py-16')
-    })
-  })
-})
+      const { container } = render(<Section className="py-16">x</Section>);
+      expect(container.querySelector('section')).toHaveClass('py-16');
+    });
+  });
+});

 describe('Container', () => {
  describe('rendering', () => {
    it('renders a div with children', () => {
-      render(<Container><span>inner</span></Container>)
-      expect(screen.getByText('inner')).toBeInTheDocument()
-    })
-  })
+      render(
+        <Container>
+          <span>inner</span>
+        </Container>,
+      );
+      expect(screen.getByText('inner')).toBeInTheDocument();
+    });
+  });

  describe('size variants', () => {
    it('defaults to max-w-7xl', () => {
-      const { container } = render(<Container>x</Container>)
-      expect(container.firstChild).toHaveClass('max-w-7xl')
-    })
+      const { container } = render(<Container>x</Container>);
+      expect(container.firstChild).toHaveClass('max-w-7xl');
+    });
    it('wide applies max-w-[1920px]', () => {
-      const { container } = render(<Container size="wide">x</Container>)
-      expect(container.firstChild).toHaveClass('max-w-[1920px]')
-    })
+      const { container } = render(<Container size="wide">x</Container>);
+      expect(container.firstChild).toHaveClass('max-w-[1920px]');
+    });
    it('ultra-wide applies max-w-[2560px]', () => {
-      const { container } = render(<Container size="ultra-wide">x</Container>)
-      expect(container.firstChild).toHaveClass('max-w-[2560px]')
-    })
-  })
+      const { container } = render(<Container size="ultra-wide">x</Container>);
+      expect(container.firstChild).toHaveClass('max-w-[2560px]');
+    });
+  });

  describe('layout', () => {
    it('centers content horizontally', () => {
-      const { container } = render(<Container>x</Container>)
-      expect(container.firstChild).toHaveClass('mx-auto')
-    })
+      const { container } = render(<Container>x</Container>);
+      expect(container.firstChild).toHaveClass('mx-auto');
+    });
    it('applies horizontal padding', () => {
-      const { container } = render(<Container>x</Container>)
-      expect(container.firstChild).toHaveClass('px-6')
-    })
-  })
+      const { container } = render(<Container>x</Container>);
+      expect(container.firstChild).toHaveClass('px-6');
+    });
+  });

  describe('className', () => {
    it('applies custom className', () => {
-      const { container } = render(<Container className="my-custom">x</Container>)
-      expect(container.firstChild).toHaveClass('my-custom')
-    })
-  })
-})
+      const { container } = render(<Container className="my-custom">x</Container>);
+      expect(container.firstChild).toHaveClass('my-custom');
+    });
+  });
+});
@@ -1,82 +1,72 @@
-import type { ReactNode } from 'react'
-import { cn } from '$shared/lib'
+import type { ReactNode } from 'react';
+import { cn } from '$shared/lib';

-export type SectionBackground = 'ochre' | 'slate' | 'white'
-export type ContainerSize = 'default' | 'wide' | 'ultra-wide'
+export type SectionBackground = 'ochre' | 'slate' | 'white';
+export type ContainerSize = 'default' | 'wide' | 'ultra-wide';

 interface SectionProps {
  /**
   * Section content
   */
-  children: ReactNode
+  children: ReactNode;
  /**
   * Background color variant
   * @default 'ochre'
   */
-  background?: SectionBackground
+  background?: SectionBackground;
  /**
   * Adds top and bottom brutal borders
   * @default false
   */
-  bordered?: boolean
+  bordered?: boolean;
  /**
   * CSS classes
   */
-  className?: string
+  className?: string;
 }

 const BACKGROUNDS: Record<SectionBackground, string> = {
  ochre: 'bg-ochre-clay text-carbon-black',
  slate: 'bg-slate-indigo text-ochre-clay',
  white: 'bg-white text-carbon-black',
-}
+};

 /**
 * Full-width page section with background and optional borders.
 */
 export function Section({ children, background = 'ochre', bordered = false, className }: SectionProps) {
  return (
-    <section
-      className={cn(
-        BACKGROUNDS[background],
-        bordered && 'brutal-border-top brutal-border-bottom',
-        className,
-      )}
-    >
+    <section className={cn(BACKGROUNDS[background], bordered && 'brutal-border-top brutal-border-bottom', className)}>
      {children}
    </section>
-  )
+  );
 }

 interface ContainerProps {
  /**
   * Container content
   */
-  children: ReactNode
+  children: ReactNode;
  /**
   * Max-width constraint
   * @default 'default'
   */
-  size?: ContainerSize
+  size?: ContainerSize;
  /**
   * CSS classes
   */
-  className?: string
+  className?: string;
 }

 const SIZES: Record<ContainerSize, string> = {
-  'default': 'max-w-7xl',
-  'wide': 'max-w-[1920px]',
+  default: 'max-w-7xl',
+  wide: 'max-w-[1920px]',
  'ultra-wide': 'max-w-[2560px]',
-}
+};

 /**
 * Centered content container with responsive horizontal padding.
 */
 export function Container({ children, size = 'default', className }: ContainerProps) {
-  return (
-    <div className={cn(SIZES[size], 'mx-auto px-6 md:px-12 lg:px-16', className)}>
-      {children}
-    </div>
-  )
+  return <div className={cn(SIZES[size], 'mx-auto px-6 md:px-12 lg:px-16', className)}>{children}</div>;
 }
@@ -1 +0,0 @@
-export { SectionAccordion } from './ui/SectionAccordion'
@@ -1 +1 @@
-export { TechStackBrick, TechStackGrid } from './ui/TechStack'
+export { TechStackBrick, TechStackGrid } from './ui/TechStack';
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { TechStackGrid, TechStackBrick } from './TechStack'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { TechStackBrick, TechStackGrid } from './TechStack';

 const meta: Meta<typeof TechStackGrid> = {
  title: 'Shared/TechStack',
@@ -11,11 +11,11 @@ const meta: Meta<typeof TechStackGrid> = {
      </div>
    ),
  ],
-}
+};

-export default meta
+export default meta;

-type Story = StoryObj<typeof TechStackGrid>
+type Story = StoryObj<typeof TechStackGrid>;

 export const Grid: Story = {
  args: {
@@ -34,7 +34,7 @@ export const Grid: Story = {
      'Rust',
    ],
  },
-}
+};

 export const SingleBrick: Story = {
  render: () => (
@@ -42,4 +42,4 @@ export const SingleBrick: Story = {
      <TechStackBrick name="TypeScript" />
    </div>
  ),
-}
+};
@@ -1,62 +1,61 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { TechStackBrick, TechStackGrid } from './TechStack'
+import { render, screen } from '@testing-library/react';
+import { TechStackBrick, TechStackGrid } from './TechStack';

 describe('TechStackBrick', () => {
  describe('rendering', () => {
    it('renders the technology name', () => {
-      render(<TechStackBrick name="TypeScript" />)
-      expect(screen.getByText('TypeScript')).toBeInTheDocument()
-    })
-  })
+      render(<TechStackBrick name="TypeScript" />);
+      expect(screen.getByText('TypeScript')).toBeInTheDocument();
+    });
+  });

  describe('styling', () => {
    it('has brutal-border class', () => {
-      const { container } = render(<TechStackBrick name="React" />)
-      expect(container.firstChild).toHaveClass('brutal-border')
-    })
+      const { container } = render(<TechStackBrick name="React" />);
+      expect(container.firstChild).toHaveClass('brutal-border');
+    });
    it('has brutal-shadow class', () => {
-      const { container } = render(<TechStackBrick name="React" />)
-      expect(container.firstChild).toHaveClass('brutal-shadow')
-    })
+      const { container } = render(<TechStackBrick name="React" />);
+      expect(container.firstChild).toHaveClass('brutal-shadow');
+    });
    it('name span has uppercase and tracking-wide', () => {
-      render(<TechStackBrick name="Go" />)
-      const span = screen.getByText('Go')
-      expect(span).toHaveClass('uppercase', 'tracking-wide')
-    })
+      render(<TechStackBrick name="Go" />);
+      const span = screen.getByText('Go');
+      expect(span).toHaveClass('uppercase', 'tracking-wide');
+    });
    it('applies custom className', () => {
-      const { container } = render(<TechStackBrick name="Go" className="w-full" />)
-      expect(container.firstChild).toHaveClass('w-full')
-    })
-  })
-})
+      const { container } = render(<TechStackBrick name="Go" className="w-full" />);
+      expect(container.firstChild).toHaveClass('w-full');
+    });
+  });
+});

 describe('TechStackGrid', () => {
  describe('rendering', () => {
    it('renders all skill names', () => {
-      render(<TechStackGrid skills={['React', 'TypeScript', 'Go']} />)
-      expect(screen.getByText('React')).toBeInTheDocument()
-      expect(screen.getByText('TypeScript')).toBeInTheDocument()
-      expect(screen.getByText('Go')).toBeInTheDocument()
-    })
+      render(<TechStackGrid skills={['React', 'TypeScript', 'Go']} />);
+      expect(screen.getByText('React')).toBeInTheDocument();
+      expect(screen.getByText('TypeScript')).toBeInTheDocument();
+      expect(screen.getByText('Go')).toBeInTheDocument();
+    });
    it('renders correct number of bricks', () => {
-      const { container } = render(<TechStackGrid skills={['A', 'B', 'C']} />)
-      expect(container.firstChild!.childNodes).toHaveLength(3)
-    })
+      const { container } = render(<TechStackGrid skills={['A', 'B', 'C']} />);
+      expect(container.firstChild?.childNodes).toHaveLength(3);
+    });
    it('renders empty grid with no skills', () => {
-      const { container } = render(<TechStackGrid skills={[]} />)
-      expect(container.firstChild!.childNodes).toHaveLength(0)
-    })
-  })
+      const { container } = render(<TechStackGrid skills={[]} />);
+      expect(container.firstChild?.childNodes).toHaveLength(0);
+    });
+  });

  describe('layout', () => {
    it('has grid class', () => {
-      const { container } = render(<TechStackGrid skills={['A']} />)
-      expect(container.firstChild).toHaveClass('grid')
-    })
+      const { container } = render(<TechStackGrid skills={['A']} />);
+      expect(container.firstChild).toHaveClass('grid');
+    });
    it('applies custom className', () => {
-      const { container } = render(<TechStackGrid skills={[]} className="my-custom" />)
-      expect(container.firstChild).toHaveClass('my-custom')
-    })
-  })
-})
+      const { container } = render(<TechStackGrid skills={[]} className="my-custom" />);
+      expect(container.firstChild).toHaveClass('my-custom');
+    });
+  });
+});
@@ -1,14 +1,14 @@
-import { cn } from '$shared/lib'
+import { cn } from '$shared/lib';

 interface TechStackBrickProps {
  /**
   * Technology name displayed in the brick
   */
-  name: string
+  name: string;
  /**
   * CSS classes
   */
-  className?: string
+  className?: string;
 }

 /**
@@ -25,18 +25,18 @@ export function TechStackBrick({ name, className }: TechStackBrickProps) {
    >
      <span className="text-sm uppercase tracking-wide">{name}</span>
    </div>
-  )
+  );
 }

 interface TechStackGridProps {
  /**
   * List of technology names to render as bricks
   */
-  skills: string[]
+  skills: string[];
  /**
   * CSS classes
   */
-  className?: string
+  className?: string;
 }

 /**
@@ -45,14 +45,11 @@ interface TechStackGridProps {
 export function TechStackGrid({ skills, className }: TechStackGridProps) {
  return (
    <div
-      className={cn(
-        'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4',
-        className,
-      )}
+      className={cn('grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4', className)}
    >
-      {skills.map((skill, index) => (
-        <TechStackBrick key={index} name={skill} />
+      {skills.map((skill) => (
+        <TechStackBrick key={skill} name={skill} />
      ))}
    </div>
-  )
+  );
 }
@@ -1,17 +1,12 @@
-export { Badge } from './Badge'
-export type { BadgeVariant } from './Badge'
+export type { BadgeVariant } from './Badge';
+export { Badge } from './Badge';
+export type { ButtonSize, ButtonVariant } from './Button';
+export { Button } from './Button';
+export type { CardBackground } from './Card';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './Card';

-export { Button } from './Button'
-export type { ButtonVariant, ButtonSize } from './Button'
+export { Input, Textarea } from './Input';
+export type { ContainerSize, SectionBackground } from './Section';
+export { Container, Section } from './Section';

-export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card'
-export type { CardBackground } from './Card'
-
-export { Input, Textarea } from './Input'
-
-export { Section, Container } from './Section'
-export type { SectionBackground, ContainerSize } from './Section'
-
-export { SectionAccordion } from './SectionAccordion'
-
-export { TechStackBrick, TechStackGrid } from './TechStack'
+export { TechStackBrick, TechStackGrid } from './TechStack';
@@ -0,0 +1,12 @@
+import { vi } from 'vitest';
+
+const mockFont = () => ({
+  variable: '--font-mock',
+  className: 'mock-font',
+  style: { fontFamily: 'mock-font' },
+});
+
+vi.mock('next/font/google', () => ({
+  Fraunces: mockFont,
+  Public_Sans: mockFont,
+}));
@@ -1 +1,2 @@
-import '@testing-library/jest-dom'
+import '@testing-library/jest-dom';
+import './__mocks__/next-font-google';
@@ -0,0 +1,22 @@
+import type { PageContentRecord } from '$shared/api';
+import { getFirstRecord } from '$shared/api';
+
+/**
+ * Bio section component.
+ * Displays personal biography content from PocketBase.
+ */
+export default async function BioSection() {
+  const data = await getFirstRecord<PageContentRecord>('bio', {
+    filter: 'slug = "bio"',
+  });
+
+  if (!data) {
+    return <p>Loading bio content...</p>;
+  }
+
+  return (
+    <div className="prose prose-lg dark:prose-invert max-w-none">
+      <p>{data.content}</p>
+    </div>
+  );
+}
@@ -0,0 +1,22 @@
+import type { PageContentRecord } from '$shared/api';
+import { getFirstRecord } from '$shared/api';
+
+/**
+ * Intro section component.
+ * Displays primary introduction content from PocketBase.
+ */
+export default async function IntroSection() {
+  const data = await getFirstRecord<PageContentRecord>('intro', {
+    filter: 'slug = "intro"',
+  });
+
+  if (!data) {
+    return <p>Loading intro content...</p>;
+  }
+
+  return (
+    <div className="prose prose-lg dark:prose-invert max-w-none">
+      <p>{data.content}</p>
+    </div>
+  );
+}
@@ -1,4 +1,4 @@
-export { MobileNav } from './ui/MobileNav'
-export { SidebarNav } from './ui/SidebarNav'
-export { UtilityBar } from './ui/UtilityBar'
-export type { NavItem } from './model/types'
+export type { NavItem } from './model/types';
+export { MobileNav } from './ui/MobileNav';
+export { SidebarNav } from './ui/SidebarNav';
+export { UtilityBar } from './ui/UtilityBar';
@@ -2,13 +2,13 @@ export type NavItem = {
  /**
   * Section HTML id for anchor scrolling
   */
-  id: string
+  id: string;
  /**
   * Display label
   */
-  label: string
+  label: string;
  /**
   * Display number prefix (e.g. "01")
   */
-  number: string
-}
+  number: string;
+};
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { MobileNav } from './MobileNav'
+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.
@@ -11,11 +11,11 @@ const meta: Meta<typeof MobileNav> = {
      defaultViewport: 'mobile1',
    },
  },
-}
+};

-export default meta
+export default meta;

-type Story = StoryObj<typeof MobileNav>
+type Story = StoryObj<typeof MobileNav>;

 export const Default: Story = {
  args: {
@@ -25,4 +25,4 @@ export const Default: Story = {
      { id: 'contact', label: 'Contact', number: '03' },
    ],
  },
-}
+};
@@ -1,46 +1,45 @@
-import { describe, it, expect, vi } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { MobileNav } from './MobileNav'
-import type { NavItem } from '../model/types'
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { NavItem } from '../model/types';
+import { MobileNav } from './MobileNav';

-const ITEMS: NavItem[] = [{ id: 'about', label: 'About', number: '01' }]
+const ITEMS: NavItem[] = [{ id: 'about', label: 'About', number: '01' }];

 describe('MobileNav', () => {
  describe('rendering', () => {
    it('renders title "allmy.work"', () => {
-      render(<MobileNav items={ITEMS} />)
-      expect(screen.getByText('allmy.work')).toBeInTheDocument()
-    })
+      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()
-    })
+      render(<MobileNav items={ITEMS} />);
+      expect(screen.getByRole('button', { name: 'Menu' })).toBeInTheDocument();
+    });

    it('menu items are hidden initially', () => {
-      render(<MobileNav items={ITEMS} />)
-      expect(screen.queryByRole('button', { name: /about/i })).not.toBeInTheDocument()
-    })
-  })
+      render(<MobileNav items={ITEMS} />);
+      expect(screen.queryByRole('button', { name: /about/i })).not.toBeInTheDocument();
+    });
+  });

  describe('interactions', () => {
    it('click toggle shows item buttons 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('About')).toBeInTheDocument()
-    })
+      render(<MobileNav items={ITEMS} />);
+      await userEvent.click(screen.getByRole('button', { name: 'Menu' }));
+      expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
+      expect(screen.getByText('About')).toBeInTheDocument();
+    });

    it('click item button closes the menu', async () => {
-      render(<MobileNav items={ITEMS} />)
-      await userEvent.click(screen.getByRole('button', { name: 'Menu' }))
+      render(<MobileNav items={ITEMS} />);
+      await userEvent.click(screen.getByRole('button', { name: 'Menu' }));
      // item button label contains number + label text; find by accessible name fragment
-      const itemBtn = screen.getAllByRole('button').find(b => b.textContent?.includes('About'))
-      expect(itemBtn).toBeDefined()
-      await userEvent.click(itemBtn!)
-      expect(screen.queryByText('Close')).not.toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'Menu' })).toBeInTheDocument()
-    })
-  })
-})
+      const itemBtn = screen.getAllByRole('button').find((b) => b.textContent?.includes('About'));
+      expect(itemBtn).toBeDefined();
+      await userEvent.click(itemBtn as HTMLElement);
+      expect(screen.queryByText('Close')).not.toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Menu' })).toBeInTheDocument();
+    });
+  });
+});
@@ -1,32 +1,32 @@
-'use client'
+'use client';

-import { useState } from 'react'
-import { cn } from '$shared/lib'
-import type { NavItem } from '../model/types'
+import { useState } from 'react';
+import { cn } from '$shared/lib';
+import type { NavItem } from '../model/types';

 interface Props {
  /**
   * Navigation items to render
   */
-  items: NavItem[]
+  items: NavItem[];
 }

 /**
 * Mobile navigation overlay, hidden on lg+ screens.
 */
 export function MobileNav({ items }: Props) {
-  const [isOpen, setIsOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(false);

  /**
   * Scrolls to the section by id with a 100px offset, then closes the menu.
   */
  function scrollToSection(id: string) {
-    const el = document.getElementById(id)
+    const el = document.getElementById(id);
    if (el) {
-      const top = el.getBoundingClientRect().top + window.scrollY - 100
-      window.scrollTo({ top, behavior: 'smooth' })
+      const top = el.getBoundingClientRect().top + window.scrollY - 100;
+      window.scrollTo({ top, behavior: 'smooth' });
    }
-    setIsOpen(false)
+    setIsOpen(false);
  }

  return (
@@ -34,7 +34,8 @@ export function MobileNav({ items }: Props) {
      <div className="px-6 py-4 flex items-center justify-between">
        <h4>allmy.work</h4>
        <button
-          onClick={() => setIsOpen(prev => !prev)}
+          type="button"
+          onClick={() => setIsOpen((prev) => !prev)}
          className="brutal-border px-4 py-2 bg-carbon-black text-ochre-clay"
        >
          {isOpen ? 'Close' : 'Menu'}
@@ -42,8 +43,9 @@ export function MobileNav({ items }: Props) {
      </div>
      {isOpen && (
        <div className="px-6 py-6 brutal-border-top space-y-2 max-h-[80vh] overflow-y-auto">
-          {items.map(item => (
+          {items.map((item) => (
            <button
+              type="button"
              key={item.id}
              onClick={() => scrollToSection(item.id)}
              className="w-full text-left brutal-border bg-ochre-clay px-4 py-3"
@@ -62,5 +64,5 @@ export function MobileNav({ items }: Props) {
        </div>
      )}
    </div>
-  )
+  );
 }
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { SidebarNav } from './SidebarNav'
+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.
@@ -12,11 +12,11 @@ const meta: Meta<typeof SidebarNav> = {
      defaultViewport: 'desktop',
    },
  },
-}
+};

-export default meta
+export default meta;

-type Story = StoryObj<typeof SidebarNav>
+type Story = StoryObj<typeof SidebarNav>;

 export const Default: Story = {
  args: {
@@ -26,4 +26,4 @@ export const Default: Story = {
      { id: 'contact', label: 'Contact', number: '03' },
    ],
  },
-}
+};
@@ -1,62 +1,59 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { SidebarNav } from './SidebarNav'
-import type { NavItem } from '../model/types'
+import { render, screen } from '@testing-library/react';
+import type { NavItem } from '../model/types';
+import { SidebarNav } from './SidebarNav';

 const ITEMS: NavItem[] = [
  { id: 'bio', label: 'Bio', number: '01' },
  { id: 'work', label: 'Work', number: '02' },
-]
+];

 beforeEach(() => {
-  global.IntersectionObserver = vi.fn(function () {
-    return {
-      observe: vi.fn(),
-      disconnect: vi.fn(),
-      unobserve: vi.fn(),
-    }
-  }) as unknown as typeof IntersectionObserver
-})
+  global.IntersectionObserver = class {
+    observe = vi.fn();
+    disconnect = vi.fn();
+    unobserve = vi.fn();
+  } as unknown as typeof IntersectionObserver;
+});

 describe('SidebarNav', () => {
  describe('rendering', () => {
    it('renders a nav element', () => {
-      render(<SidebarNav items={ITEMS} />)
-      expect(screen.getByRole('navigation')).toBeInTheDocument()
-    })
+      render(<SidebarNav items={ITEMS} />);
+      expect(screen.getByRole('navigation')).toBeInTheDocument();
+    });

    it('renders "Index" heading', () => {
-      render(<SidebarNav items={ITEMS} />)
-      expect(screen.getByText('Index')).toBeInTheDocument()
-    })
+      render(<SidebarNav items={ITEMS} />);
+      expect(screen.getByText('Index')).toBeInTheDocument();
+    });

    it('renders "Digital Monograph" subtitle', () => {
-      render(<SidebarNav items={ITEMS} />)
-      expect(screen.getByText('Digital Monograph')).toBeInTheDocument()
-    })
+      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()
-    })
+      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()
-    })
+      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()
-    })
+      render(<SidebarNav items={ITEMS} />);
+      expect(screen.getByRole('link', { name: 'Email' })).toBeInTheDocument();
+    });

    it('renders a button for each item', () => {
-      render(<SidebarNav items={ITEMS} />)
-      const buttons = screen.getAllByRole('button')
-      expect(buttons.length).toBeGreaterThanOrEqual(ITEMS.length)
-    })
-  })
-})
+      render(<SidebarNav items={ITEMS} />);
+      const buttons = screen.getAllByRole('button');
+      expect(buttons.length).toBeGreaterThanOrEqual(ITEMS.length);
+    });
+  });
+});
@@ -1,50 +1,52 @@
-'use client'
+'use client';

-import { useState, useEffect } from 'react'
-import { cn } from '$shared/lib'
-import type { NavItem } from '../model/types'
+import { useEffect, useState } from 'react';
+import { CONTACT_LINKS, cn } from '$shared/lib';
+import type { NavItem } from '../model/types';

 interface Props {
  /**
   * Navigation items to render
   */
-  items: NavItem[]
+  items: NavItem[];
 }

 /**
 * Fixed sidebar navigation, visible on lg+ screens.
 */
 export function SidebarNav({ items }: Props) {
-  const [activeSection, setActiveSection] = useState('bio')
+  const [activeSection, setActiveSection] = useState('bio');

  useEffect(() => {
    const observer = new IntersectionObserver(
-      entries => {
-        entries.forEach(entry => {
+      (entries) => {
+        entries.forEach((entry) => {
          if (entry.isIntersecting) {
-            setActiveSection(entry.target.id)
+            setActiveSection(entry.target.id);
          }
-        })
+        });
      },
      { rootMargin: '-20% 0px -70% 0px', threshold: 0 },
-    )
+    );

-    items.forEach(item => {
-      const el = document.getElementById(item.id)
-      if (el) observer.observe(el)
-    })
+    items.forEach((item) => {
+      const el = document.getElementById(item.id);
+      if (el) {
+        observer.observe(el);
+      }
+    });

-    return () => observer.disconnect()
-  }, [items])
+    return () => observer.disconnect();
+  }, [items]);

  /**
   * Scrolls to the section by id with a 40px offset.
   */
  function scrollToSection(id: string) {
-    const el = document.getElementById(id)
+    const el = document.getElementById(id);
    if (el) {
-      const top = el.getBoundingClientRect().top + window.scrollY - 40
-      window.scrollTo({ top, behavior: 'smooth' })
+      const top = el.getBoundingClientRect().top + window.scrollY - 40;
+      window.scrollTo({ top, behavior: 'smooth' });
    }
  }

@@ -58,10 +60,11 @@ export function SidebarNav({ items }: Props) {
          </div>
        </div>

-        {items.map(item => {
-          const isActive = activeSection === item.id
+        {items.map((item) => {
+          const isActive = activeSection === item.id;
          return (
            <button
+              type="button"
              key={item.id}
              onClick={() => scrollToSection(item.id)}
              className={cn(
@@ -76,19 +79,27 @@ export function SidebarNav({ items }: Props) {
                <span className="font-heading text-xl font-black">{item.label}</span>
              </div>
            </button>
-          )
+          );
        })}

        <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:hello@allmy.work" className="block">Email</a>
-            <a href="https://linkedin.com" className="block">LinkedIn</a>
-            <a href="https://instagram.com" className="block">Instagram</a>
-            <a href="https://are.na" className="block">Are.na</a>
+            <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>
-  )
+  );
 }
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { UtilityBar } from './UtilityBar'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { UtilityBar } from './UtilityBar';

 const meta: Meta<typeof UtilityBar> = {
  title: 'Widgets/UtilityBar',
@@ -11,10 +11,10 @@ const meta: Meta<typeof UtilityBar> = {
      </div>
    ),
  ],
-}
+};

-export default meta
+export default meta;

-type Story = StoryObj<typeof UtilityBar>
+type Story = StoryObj<typeof UtilityBar>;

-export const Default: Story = {}
+export const Default: Story = {};
@@ -1,30 +1,29 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { UtilityBar } from './UtilityBar'
+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()
-    })
+      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')
-    })
+      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()
-    })
+      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-burnt-oxide')
-    })
-  })
-})
+      render(<UtilityBar />);
+      const btn = screen.getByRole('button', { name: /download cv/i });
+      expect(btn).toHaveClass('bg-burnt-oxide');
+    });
+  });
+});
@@ -1,6 +1,7 @@
-'use client'
+'use client';

-import { Button } from '$shared/ui'
+import { CONTACT_LINKS } from '$shared/lib';
+import { Button } from '$shared/ui';

 /**
 * Fixed bottom utility bar with contact info and CV download.
@@ -10,7 +11,7 @@ export function UtilityBar() {
   * Handles CV download action.
   */
  function handleDownloadCV() {
-    console.log('Downloading CV...')
+    console.log('Downloading CV...');
  }

  return (
@@ -18,11 +19,8 @@ export function UtilityBar() {
      <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:hello@allmy.work"
-            className="text-base hover:text-burnt-oxide transition-colors"
-          >
-            hello@allmy.work
+          <a href={`mailto:${CONTACT_LINKS.email}`} className="text-base hover:text-burnt-oxide transition-colors">
+            {CONTACT_LINKS.email}
          </a>
        </div>
        <Button variant="primary" size="sm" onClick={handleDownloadCV}>
@@ -30,5 +28,5 @@ export function UtilityBar() {
        </Button>
      </div>
    </div>
-  )
+  );
 }
@@ -0,0 +1,38 @@
+import { notFound } from 'next/navigation';
+
+/**
+ * Registry of dynamic section widgets.
+ */
+const SECTIONS: Record<string, () => Promise<{ default: React.ComponentType<Record<string, unknown>> }>> = {
+  intro: () => import('../../../IntroSection/ui/IntroSection/IntroSection'),
+  bio: () => import('../../../BioSection/ui/BioSection/BioSection'),
+  skills: () => import('../../../SkillsSection/ui/SkillsSection/SkillsSection'),
+  experience: () => import('../../../ExperienceSection/ui/ExperienceSection/ExperienceSection'),
+  projects: () => import('../../../ProjectsSection/ui/ProjectsSection/ProjectsSection'),
+};
+
+/**
+ * Props for the SectionFactory widget.
+ */
+export type SectionFactoryProps = {
+  /**
+   * Section slug to render
+   */
+  slug: string;
+};
+
+/**
+ * Factory widget that dynamically imports and renders the correct section widget.
+ * Based on the provided slug.
+ */
+export async function SectionFactory({ slug }: SectionFactoryProps) {
+  const loadSection = SECTIONS[slug];
+
+  if (!loadSection) {
+    notFound();
+  }
+
+  const { default: SectionComponent } = await loadSection();
+
+  return <SectionComponent />;
+}
@@ -0,0 +1,39 @@
+import type { SkillRecord } from '$shared/api';
+import { getCollection } from '$shared/api';
+import { Badge } from '$shared/ui';
+
+/**
+ * Skills section component.
+ * Displays technology skills grouped by category.
+ */
+export default async function SkillsSection() {
+  const data = await getCollection<SkillRecord>('skills', {
+    sort: 'category,order',
+  });
+
+  const categories = data.items.reduce(
+    (acc, skill) => {
+      if (!acc[skill.category]) {
+        acc[skill.category] = [];
+      }
+      acc[skill.category].push(skill);
+      return acc;
+    },
+    {} as Record<string, SkillRecord[]>,
+  );
+
+  return (
+    <div className="space-y-12">
+      {Object.entries(categories).map(([category, items]) => (
+        <div key={category} className="space-y-4">
+          <h3 className="text-xl font-bold uppercase tracking-widest opacity-50">{category}</h3>
+          <div className="flex flex-wrap gap-3">
+            {items.map((skill) => (
+              <Badge key={skill.id}>{skill.name}</Badge>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
@@ -1 +1 @@
-export * from './Navigation'
+export * from './Navigation';
@@ -18,6 +18,7 @@
        "name": "next"
      }
    ],
+    "types": ["vitest/globals"],
    "paths": {
      "@/*": ["./*"],
      "$shared/*": ["./src/shared/*"],
@@ -0,0 +1 @@
+/// <reference types="@vitest/browser-playwright" />
@@ -248,6 +248,97 @@ __metadata:
  languageName: node
  linkType: hard

+"@biomejs/biome@npm:2.4.13":
+  version: 2.4.13
+  resolution: "@biomejs/biome@npm:2.4.13"
+  dependencies:
+    "@biomejs/cli-darwin-arm64": "npm:2.4.13"
+    "@biomejs/cli-darwin-x64": "npm:2.4.13"
+    "@biomejs/cli-linux-arm64": "npm:2.4.13"
+    "@biomejs/cli-linux-arm64-musl": "npm:2.4.13"
+    "@biomejs/cli-linux-x64": "npm:2.4.13"
+    "@biomejs/cli-linux-x64-musl": "npm:2.4.13"
+    "@biomejs/cli-win32-arm64": "npm:2.4.13"
+    "@biomejs/cli-win32-x64": "npm:2.4.13"
+  dependenciesMeta:
+    "@biomejs/cli-darwin-arm64":
+      optional: true
+    "@biomejs/cli-darwin-x64":
+      optional: true
+    "@biomejs/cli-linux-arm64":
+      optional: true
+    "@biomejs/cli-linux-arm64-musl":
+      optional: true
+    "@biomejs/cli-linux-x64":
+      optional: true
+    "@biomejs/cli-linux-x64-musl":
+      optional: true
+    "@biomejs/cli-win32-arm64":
+      optional: true
+    "@biomejs/cli-win32-x64":
+      optional: true
+  bin:
+    biome: bin/biome
+  checksum: 10c0/a8c09d7c05d834243a76704e31bda05346d2a06a75e90e6de2ef0d4edc33bd7d382b380bad9275ddd379e9e44ceaea9907a9c0de2156859b36b057c155f20a0e
+  languageName: node
+  linkType: hard
+
+"@biomejs/cli-darwin-arm64@npm:2.4.13":
+  version: 2.4.13
+  resolution: "@biomejs/cli-darwin-arm64@npm:2.4.13"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@biomejs/cli-darwin-x64@npm:2.4.13":
+  version: 2.4.13
+  resolution: "@biomejs/cli-darwin-x64@npm:2.4.13"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@biomejs/cli-linux-arm64-musl@npm:2.4.13":
+  version: 2.4.13
+  resolution: "@biomejs/cli-linux-arm64-musl@npm:2.4.13"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@biomejs/cli-linux-arm64@npm:2.4.13":
+  version: 2.4.13
+  resolution: "@biomejs/cli-linux-arm64@npm:2.4.13"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@biomejs/cli-linux-x64-musl@npm:2.4.13":
+  version: 2.4.13
+  resolution: "@biomejs/cli-linux-x64-musl@npm:2.4.13"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@biomejs/cli-linux-x64@npm:2.4.13":
+  version: 2.4.13
+  resolution: "@biomejs/cli-linux-x64@npm:2.4.13"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@biomejs/cli-win32-arm64@npm:2.4.13":
+  version: 2.4.13
+  resolution: "@biomejs/cli-win32-arm64@npm:2.4.13"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@biomejs/cli-win32-x64@npm:2.4.13":
+  version: 2.4.13
+  resolution: "@biomejs/cli-win32-x64@npm:2.4.13"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@blazediff/core@npm:1.9.1":
  version: 1.9.1
  resolution: "@blazediff/core@npm:1.9.1"
@@ -4826,6 +4917,117 @@ __metadata:
  languageName: node
  linkType: hard

+"lefthook-darwin-arm64@npm:2.1.6":
+  version: 2.1.6
+  resolution: "lefthook-darwin-arm64@npm:2.1.6"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lefthook-darwin-x64@npm:2.1.6":
+  version: 2.1.6
+  resolution: "lefthook-darwin-x64@npm:2.1.6"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lefthook-freebsd-arm64@npm:2.1.6":
+  version: 2.1.6
+  resolution: "lefthook-freebsd-arm64@npm:2.1.6"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lefthook-freebsd-x64@npm:2.1.6":
+  version: 2.1.6
+  resolution: "lefthook-freebsd-x64@npm:2.1.6"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lefthook-linux-arm64@npm:2.1.6":
+  version: 2.1.6
+  resolution: "lefthook-linux-arm64@npm:2.1.6"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lefthook-linux-x64@npm:2.1.6":
+  version: 2.1.6
+  resolution: "lefthook-linux-x64@npm:2.1.6"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lefthook-openbsd-arm64@npm:2.1.6":
+  version: 2.1.6
+  resolution: "lefthook-openbsd-arm64@npm:2.1.6"
+  conditions: os=openbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lefthook-openbsd-x64@npm:2.1.6":
+  version: 2.1.6
+  resolution: "lefthook-openbsd-x64@npm:2.1.6"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lefthook-windows-arm64@npm:2.1.6":
+  version: 2.1.6
+  resolution: "lefthook-windows-arm64@npm:2.1.6"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lefthook-windows-x64@npm:2.1.6":
+  version: 2.1.6
+  resolution: "lefthook-windows-x64@npm:2.1.6"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lefthook@npm:^2.1.6":
+  version: 2.1.6
+  resolution: "lefthook@npm:2.1.6"
+  dependencies:
+    lefthook-darwin-arm64: "npm:2.1.6"
+    lefthook-darwin-x64: "npm:2.1.6"
+    lefthook-freebsd-arm64: "npm:2.1.6"
+    lefthook-freebsd-x64: "npm:2.1.6"
+    lefthook-linux-arm64: "npm:2.1.6"
+    lefthook-linux-x64: "npm:2.1.6"
+    lefthook-openbsd-arm64: "npm:2.1.6"
+    lefthook-openbsd-x64: "npm:2.1.6"
+    lefthook-windows-arm64: "npm:2.1.6"
+    lefthook-windows-x64: "npm:2.1.6"
+  dependenciesMeta:
+    lefthook-darwin-arm64:
+      optional: true
+    lefthook-darwin-x64:
+      optional: true
+    lefthook-freebsd-arm64:
+      optional: true
+    lefthook-freebsd-x64:
+      optional: true
+    lefthook-linux-arm64:
+      optional: true
+    lefthook-linux-x64:
+      optional: true
+    lefthook-openbsd-arm64:
+      optional: true
+    lefthook-openbsd-x64:
+      optional: true
+    lefthook-windows-arm64:
+      optional: true
+    lefthook-windows-x64:
+      optional: true
+  bin:
+    lefthook: bin/index.js
+  checksum: 10c0/3ccbe60951ebf59e35e02ca10dc8942a4455ec106f0f14a5fed2e40f000b5b57190594f3be87715d5a9a8b0cf93de33902cbd3c94688e116ffc07ad1760cfe9e
+  languageName: node
+  linkType: hard
+
 "levn@npm:^0.4.1":
  version: 0.4.1
  resolution: "levn@npm:0.4.1"
@@ -5636,6 +5838,7 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "portfolio@workspace:."
  dependencies:
+    "@biomejs/biome": "npm:2.4.13"
    "@chromatic-com/storybook": "npm:^5.1.2"
    "@storybook/addon-a11y": "npm:^10.3.5"
    "@storybook/addon-docs": "npm:^10.3.5"
@@ -5657,6 +5860,7 @@ __metadata:
    eslint-config-next: "npm:16.2.4"
    eslint-plugin-storybook: "npm:^10.3.5"
    jsdom: "npm:^29.0.2"
+    lefthook: "npm:^2.1.6"
    next: "npm:16.2.4"
    playwright: "npm:^1.59.1"
    react: "npm:19.2.4"
Author	SHA1	Message	Date
Ilia Mashkov	41edc7edf7	refactor: reorganize shared/lib into per-function subfolders	2026-04-24 11:43:08 +03:00
Ilia Mashkov	f3b4e1d064	refactor: extract contact links to shared config	2026-04-24 10:11:34 +03:00
Ilia Mashkov	fce4672218	feat: add groupByKey utility	2026-04-24 09:34:27 +03:00
Ilia Mashkov	d89dc2ee70	chore: add vitest/globals types, remove redundant vitest imports, fix pre-existing lint issues	2026-04-24 09:34:27 +03:00
Ilia Mashkov	f0fccd55f1	fix: replace revalidate with cache force-cache for SSG compatibility	2026-04-24 09:34:27 +03:00
Ilia Mashkov	5dbf5e34c2	fix: mock next/font in tests and remove broken shared export	2026-04-23 21:01:46 +03:00
Ilia Mashkov	68d5de3716	chore: setup lefthook for pre-commit checks	2026-04-23 21:00:43 +03:00
Ilia Mashkov	1d333fd945	chore: format codebase and move SectionAccordion to entities/Section	2026-04-23 20:52:43 +03:00
Ilia Mashkov	8aff27f8ac	chore: configure biome for linting and formatting	2026-04-23 20:40:11 +03:00
Ilia Mashkov	9c139adbf5	feat: define PocketBase types and fetch client	2026-04-23 20:35:46 +03:00
				`@@ -1 +0,0 @@`
				`export { SectionAccordion } from './ui/SectionAccordion'`
				`@@ -0,0 +1 @@`
				`/// <reference types="@vitest/browser-playwright" />`