refactor: use shadow theme tokens, remove ProjectCard translate-hover

Replace inline var(--blue) arbitrary shadow values with typed theme
tokens (shadow-brutal-xl, shadow-brutal-2xl). Remove translate on
ProjectCard hover — shadow-only interaction is less distracting in
a dense grid layout.
This commit is contained in:
Ilia Mashkov
2026-05-16 19:04:37 +03:00
parent b8b5e65497
commit 76f5b269f8
3 changed files with 3 additions and 8 deletions
@@ -41,7 +41,7 @@ describe('ProjectCard', () => {
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');
expect(card).toHaveClass('group', 'transition-shadow', 'duration-300');
});
it('year badge has correct classes', () => {
@@ -30,12 +30,7 @@ type Props = {
*/
export function ProjectCard({ title, year, description, tags, imageUrl }: Props) {
return (
<Card
className={cn(
'group hover:translate-x-[2px] hover:translate-y-[2px]',
'hover:shadow-[10px_10px_0_var(--blue)] transition-all duration-300',
)}
>
<Card className={cn('group hover:shadow-brutal-xl transition-shadow duration-300')}>
<CardHeader>
<div className="flex flex-row justify-between items-start mb-3">
<CardTitle className="flex-1">{title}</CardTitle>