feat: add Storybook with component stories

Installs @storybook/nextjs-vite. Stories co-located with components,
grouped by layer (Shared/Entities/Widgets). Multi-variant cases use
render functions instead of one story per variant/size.

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { ExperienceCard } from './ExperienceCard'
+
+const meta: Meta<typeof ExperienceCard> = {
+  title: 'Entities/ExperienceCard',
+  component: ExperienceCard,
+  decorators: [
+    (Story) => (
+      <div className="p-8 bg-white max-w-2xl">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+
+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.',
+}
+
+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"
+      />
+    </div>
+  ),
+}

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

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { DetailedProjectCard } from './DetailedProjectCard'
+
+const meta: Meta<typeof DetailedProjectCard> = {
+  title: 'Entities/DetailedProjectCard',
+  component: DetailedProjectCard,
+  decorators: [
+    (Story) => (
+      <div className="p-8 bg-ochre-clay">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+
+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.',
+  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',
+  },
+}

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

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { ProjectCard } from './ProjectCard'
+
+const meta: Meta<typeof ProjectCard> = {
+  title: 'Entities/ProjectCard',
+  component: ProjectCard,
+  decorators: [
+    (Story) => (
+      <div className="p-8 bg-white max-w-md">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof ProjectCard>
+
+export const Default: Story = {
+  args: {
+    title: 'Portfolio Website',
+    year: '2024',
+    description: 'A brutalist portfolio site built with Next.js and Tailwind CSS.',
+    tags: ['React', 'TypeScript', 'Next.js'],
+  },
+}
+
+export const WithImage: Story = {
+  args: {
+    title: 'Portfolio Website',
+    year: '2024',
+    description: 'A brutalist portfolio site built with Next.js and Tailwind CSS.',
+    tags: ['React', 'TypeScript', 'Next.js'],
+    imageUrl: 'https://placehold.co/800x450/3B4A59/D9B48F?text=Project',
+  },
+}

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

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { ProjectMetadata } from './ProjectMetadata'
+
+const meta: Meta<typeof ProjectMetadata> = {
+  title: 'Entities/ProjectMetadata',
+  component: ProjectMetadata,
+  decorators: [
+    (Story) => (
+      <div className="p-8 bg-ochre-clay max-w-xs">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof ProjectMetadata>
+
+export const Default: Story = {
+  args: {
+    year: '2024',
+    role: 'Lead Frontend Engineer',
+    stack: ['React', 'TypeScript', 'Next.js', 'Tailwind'],
+  },
+}