ilia/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: format codebase and move SectionAccordion to entities/Section

Browse Source
This commit is contained in:
Ilia Mashkov
2026-04-23 20:52:43 +03:00
parent 8aff27f8ac
commit 1d333fd945
73 changed files with 1201 additions and 1153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/entities/project/ui/DetailedProjectCard.stories.tsx
+10 -9
View File
@@ -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',
},
}
};
src/entities/project/ui/DetailedProjectCard.test.tsx
+55 -55
View File
@@ -1,6 +1,6 @@
import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { DetailedProjectCard } from './DetailedProjectCard'
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { DetailedProjectCard } from './DetailedProjectCard';
const DEFAULT_PROPS = {
title: 'Big Project',
@@ -9,83 +9,83 @@ 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" />);
const img = screen.getByRole('img');
expect(img).toHaveAttribute('src', '/detail.jpg');
});
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');
});
});
});
src/entities/project/ui/DetailedProjectCard.tsx
+16 -22
View File
@@ -1,54 +1,46 @@
import { Card } from '$shared/ui'
import { ProjectMetadata } from './ProjectMetadata'
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">
@@ -68,11 +60,13 @@ export function DetailedProjectCard({
<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>
<p key={index} className="text-base">
{detail}
</p>
))}
</div>
</Card>
</div>
</div>
)
);
}
src/entities/project/ui/ProjectCard.stories.tsx
+7 -7
View File
@@ -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',
},
}
};
src/entities/project/ui/ProjectCard.test.tsx
+54 -47
View File
@@ -1,79 +1,86 @@
import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { ProjectCard } from './ProjectCard'
import { describe, it, expect } from 'vitest';
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" />);
const img = screen.getByRole('img');
expect(img).toHaveAttribute('src', '/project.jpg');
});
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');
});
});
});
src/entities/project/ui/ProjectCard.tsx
+12 -10
View File
@@ -1,28 +1,28 @@
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button } from '$shared/ui'
import { cn } from '$shared/lib'
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button } from '$shared/ui';
import { cn } from '$shared/lib';
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.
@@ -61,8 +61,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>
)
);
}
src/entities/project/ui/ProjectMetadata.stories.tsx
+6 -6
View File
@@ -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'],
},
}
};
src/entities/project/ui/ProjectMetadata.test.tsx
+59 -59
View File
@@ -1,96 +1,96 @@
import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { ProjectMetadata } from './ProjectMetadata'
import { describe, it, expect } from 'vitest';
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');
});
});
});
src/entities/project/ui/ProjectMetadata.tsx
+10 -8
View File
@@ -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>
)
);
}