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

fix: storybook font rendering and shared fonts module #1

Merged
ilia merged 74 commits from feat/portfolio-setup into main 2026-05-18 18:45:22 +00:00
Conversation 0 Commits 74 Files Changed 132
+111 -161
21 changed files with 111 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 30f8e4be95 - Show all commits
app/page.tsx
-38
View File
@@ -1,38 +0,0 @@
import type { SectionRecord } from '$entities/Section';
import { getCollection } from '$shared/api';
import type { NavItem } from '$widgets/Navigation';
import { MobileNav, SidebarNav } from '$widgets/Navigation';
import { SectionFactory } from '$widgets/SectionFactory';
import { SectionsAccordion } from '$widgets/SectionsAccordion';
/**
* Portfolio home page.
*
* Fetches all sections at build time (SSG). Renders a fixed sidebar with
* section navigation and a scrollable main column with accordion sections.
*/
export default async function Home() {
const { items: sections } = await getCollection<SectionRecord>('sections', {
sort: 'order',
});
const navItems: NavItem[] = sections.map((s) => ({
id: s.slug,
label: s.title,
number: s.number,
}));
return (
<div className="min-h-screen lg:flex">
<SidebarNav items={navItems} />
<main className="flex-1 lg:ml-[33.333%] px-8 py-12 lg:py-16 lg:px-16">
<MobileNav items={navItems} />
<SectionsAccordion sections={sections}>
{sections.map((s) => (
<SectionFactory key={s.slug} slug={s.slug} />
))}
</SectionsAccordion>
</main>
</div>
);
}
src/entities/experience/ui/ExperienceCard.test.tsx
+2 -2
View File
@@ -37,10 +37,10 @@ describe('ExperienceCard', () => {
expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('Senior Developer'); expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('Senior Developer');
}); });
it('period badge has brutal-border, bg-carbon-black, text-ochre-clay, text-sm', () => { it('period badge has brutal-border, bg-blue, text-cream, text-sm', () => {
render(<ExperienceCard {...DEFAULT_PROPS} />); render(<ExperienceCard {...DEFAULT_PROPS} />);
const badge = screen.getByText('2021 – 2024'); const badge = screen.getByText('2021 – 2024');
expect(badge).toHaveClass('brutal-border', 'bg-carbon-black', 'text-ochre-clay', 'text-sm'); expect(badge).toHaveClass('brutal-border', 'bg-blue', 'text-cream', 'text-sm');
}); });
it('company paragraph has opacity-80', () => { it('company paragraph has opacity-80', () => {
src/entities/experience/ui/ExperienceCard.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ export function ExperienceCard({ title, company, period, description, className
<h4>{title}</h4> <h4>{title}</h4>
<p className="text-base opacity-80">{company}</p> <p className="text-base opacity-80">{company}</p>
</div> </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-blue text-cream text-sm self-start">{period}</span>
</div> </div>
<p className="text-base max-w-[700px]">{description}</p> <p className="text-base max-w-[700px]">{description}</p>
</Card> </Card>
src/entities/project/ui/DetailedProjectCard.tsx
+2 -2
View File
@@ -49,12 +49,12 @@ export function DetailedProjectCard({ title, year, role, stack, description, det
</div> </div>
<div className="lg:col-span-10 order-1 lg:order-2"> <div className="lg:col-span-10 order-1 lg:order-2">
<Card background="white"> <Card>
<h3>{title}</h3> <h3>{title}</h3>
<p className="text-lg mb-6">{description}</p> <p className="text-lg mb-6">{description}</p>
{imageUrl && ( {imageUrl && (
<div className="brutal-border aspect-video bg-slate-indigo overflow-hidden relative"> <div className="brutal-border aspect-video bg-blue overflow-hidden relative">
<Image src={imageUrl} alt={title} fill className="object-cover" /> <Image src={imageUrl} alt={title} fill className="object-cover" />
</div> </div>
)} )}
src/entities/project/ui/ProjectCard.test.tsx
+2 -9
View File
@@ -47,20 +47,13 @@ describe('ProjectCard', () => {
it('year badge has correct classes', () => { it('year badge has correct classes', () => {
render(<ProjectCard {...DEFAULT_PROPS} />); render(<ProjectCard {...DEFAULT_PROPS} />);
const yearBadge = screen.getByText('2024'); const yearBadge = screen.getByText('2024');
expect(yearBadge).toHaveClass('brutal-border', 'bg-carbon-black', 'text-ochre-clay', 'text-sm'); expect(yearBadge).toHaveClass('brutal-border', 'bg-blue', 'text-cream', 'text-sm');
}); });
it('tags have correct classes', () => { it('tags have correct classes', () => {
render(<ProjectCard {...DEFAULT_PROPS} />); render(<ProjectCard {...DEFAULT_PROPS} />);
const tag = screen.getByText('React'); const tag = screen.getByText('React');
expect(tag).toHaveClass( expect(tag).toHaveClass('brutal-border', 'bg-cream', 'text-blue', 'text-sm', 'uppercase', 'tracking-wide');
'brutal-border',
'bg-white',
'text-carbon-black',
'text-sm',
'uppercase',
'tracking-wide',
);
}); });
}); });
src/entities/project/ui/ProjectCard.tsx
+4 -7
View File
@@ -33,29 +33,26 @@ export function ProjectCard({ title, year, description, tags, imageUrl }: Props)
<Card <Card
className={cn( className={cn(
'group hover:translate-x-[2px] hover:translate-y-[2px]', 'group hover:translate-x-[2px] hover:translate-y-[2px]',
'hover:shadow-[10px_10px_0_var(--carbon-black)] transition-all duration-300', 'hover:shadow-[10px_10px_0_var(--blue)] transition-all duration-300',
)} )}
> >
<CardHeader> <CardHeader>
<div className="flex flex-row justify-between items-start mb-3"> <div className="flex flex-row justify-between items-start mb-3">
<CardTitle className="flex-1">{title}</CardTitle> <CardTitle className="flex-1">{title}</CardTitle>
<span className="brutal-border px-3 py-1 bg-carbon-black text-ochre-clay text-sm">{year}</span> <span className="brutal-border px-3 py-1 bg-blue text-cream text-sm">{year}</span>
</div> </div>
<CardDescription>{description}</CardDescription> <CardDescription>{description}</CardDescription>
</CardHeader> </CardHeader>
{imageUrl && ( {imageUrl && (
<div className="brutal-border my-6 aspect-video bg-slate-indigo overflow-hidden relative"> <div className="brutal-border my-6 aspect-video bg-blue overflow-hidden relative">
<Image src={imageUrl} alt={title} fill className="object-cover" /> <Image src={imageUrl} alt={title} fill className="object-cover" />
</div> </div>
)} )}
<CardContent className="flex flex-wrap gap-2"> <CardContent className="flex flex-wrap gap-2">
{tags.map((tag) => ( {tags.map((tag) => (
<span <span key={tag} className="brutal-border px-3 py-1 bg-cream text-blue text-sm uppercase tracking-wide">
key={tag}
className="brutal-border px-3 py-1 bg-white text-carbon-black text-sm uppercase tracking-wide"
>
{tag} {tag}
</span> </span>
))} ))}
src/shared/styles/theme.css
+49 -41
View File
@@ -28,28 +28,26 @@
--fraunces-wonk: 1; --fraunces-wonk: 1;
--fraunces-soft: 0; --fraunces-soft: 0;
/* === COLOR PALETTE === */ /* === COLOR PALETTE: 2-color system === */
--vibrant-blue: #041cf3; --cream: #f4f0e8;
--paper-white: #ffffff; --blue: #041cf3;
--carbon-black: #121212;
--structure-gray: #f2f2f2;
/* === SEMANTIC COLORS === */ /* === SEMANTIC COLORS === */
--background: var(--paper-white); --background: var(--cream);
--foreground: var(--carbon-black); --foreground: var(--blue);
--card: var(--paper-white); --card: var(--cream);
--card-foreground: var(--carbon-black); --card-foreground: var(--blue);
--primary: var(--vibrant-blue); --primary: var(--blue);
--primary-foreground: var(--paper-white); --primary-foreground: var(--cream);
--secondary: var(--structure-gray); --secondary: var(--cream);
--secondary-foreground: var(--carbon-black); --secondary-foreground: var(--blue);
--muted: var(--structure-gray); --muted: var(--cream);
--muted-foreground: #666666; --muted-foreground: rgba(4, 28, 243, 0.5);
--accent: var(--vibrant-blue); --accent: var(--blue);
--accent-foreground: var(--paper-white); --accent-foreground: var(--cream);
--destructive: #d4183d; --destructive: var(--blue);
--border: var(--carbon-black); --border: var(--blue);
--ring: var(--vibrant-blue); --ring: var(--blue);
/* === SPACING (8pt Linear Scale) === */ /* === SPACING (8pt Linear Scale) === */
--space-0: 0; --space-0: 0;
@@ -71,9 +69,9 @@
--radius: 0px; --radius: 0px;
/* === BRUTALIST SHADOWS === */ /* === BRUTALIST SHADOWS === */
--shadow-brutal: 8px 8px 0 var(--carbon-black); --shadow-brutal: 8px 8px 0 var(--blue);
--shadow-brutal-sm: 4px 4px 0 var(--carbon-black); --shadow-brutal-sm: 4px 4px 0 var(--blue);
--shadow-brutal-lg: 12px 12px 0 var(--carbon-black); --shadow-brutal-lg: 12px 12px 0 var(--blue);
/* === GRID === */ /* === GRID === */
--grid-gap: var(--space-3); --grid-gap: var(--space-3);
@@ -83,10 +81,8 @@
--font-heading: var(--font-fraunces); --font-heading: var(--font-fraunces);
--font-body: var(--font-public-sans); --font-body: var(--font-public-sans);
--color-ochre-clay: var(--ochre-clay); --color-cream: var(--cream);
--color-slate-indigo: var(--slate-indigo); --color-blue: var(--blue);
--color-burnt-oxide: var(--burnt-oxide);
--color-carbon-black: var(--carbon-black);
--color-background: var(--background); --color-background: var(--background);
--color-foreground: var(--foreground); --color-foreground: var(--foreground);
--color-primary: var(--primary); --color-primary: var(--primary);
@@ -124,15 +120,27 @@
overflow-x: hidden; overflow-x: hidden;
} }
/* Paper grain texture */ /* Subtle blue-tinted grain on parchment */
body::before { body::before {
content: ""; content: "";
position: fixed; position: fixed;
inset: 0; inset: 0;
background-image: 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(
repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, 0.02) 2px, rgba(0, 0, 0, 0.02) 4px); 0deg,
opacity: 0.4; transparent,
transparent 2px,
rgba(4, 28, 243, 0.015) 2px,
rgba(4, 28, 243, 0.015) 4px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 2px,
rgba(4, 28, 243, 0.015) 2px,
rgba(4, 28, 243, 0.015) 4px
);
opacity: 0.6;
display: block; display: block;
pointer-events: none; pointer-events: none;
z-index: 1; z-index: 1;
@@ -150,7 +158,7 @@
font-variation-settings: font-variation-settings:
"WONK" var(--fraunces-wonk), "WONK" var(--fraunces-wonk),
"SOFT" var(--fraunces-soft); "SOFT" var(--fraunces-soft);
color: var(--carbon-black); color: var(--blue);
} }
h1 { h1 {
@@ -173,13 +181,13 @@
font-family: var(--font-body); font-family: var(--font-body);
font-size: var(--text-base); font-size: var(--text-base);
font-weight: var(--font-weight-body); font-weight: var(--font-weight-body);
color: var(--carbon-black); color: var(--blue);
} }
a { a {
color: var(--burnt-oxide); color: var(--blue);
text-decoration: none; text-decoration: none;
border-bottom: 2px solid var(--carbon-black); border-bottom: 2px solid var(--blue);
transition: all 0.2s; transition: all 0.2s;
} }
@@ -190,7 +198,7 @@
blockquote { blockquote {
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: var(--text-xl); font-size: var(--text-xl);
border-left: var(--border-width) solid var(--carbon-black); border-left: var(--border-width) solid var(--blue);
padding-left: var(--space-4); padding-left: var(--space-4);
margin: var(--space-6) 0; margin: var(--space-6) 0;
} }
@@ -207,19 +215,19 @@
box-shadow: var(--shadow-brutal-lg); box-shadow: var(--shadow-brutal-lg);
} }
.brutal-border { .brutal-border {
border: var(--border-width) solid var(--carbon-black); border: var(--border-width) solid var(--blue);
} }
.brutal-border-top { .brutal-border-top {
border-top: var(--border-width) solid var(--carbon-black); border-top: var(--border-width) solid var(--blue);
} }
.brutal-border-bottom { .brutal-border-bottom {
border-bottom: var(--border-width) solid var(--carbon-black); border-bottom: var(--border-width) solid var(--blue);
} }
.brutal-border-left { .brutal-border-left {
border-left: var(--border-width) solid var(--carbon-black); border-left: var(--border-width) solid var(--blue);
} }
.brutal-border-right { .brutal-border-right {
border-right: var(--border-width) solid var(--carbon-black); border-right: var(--border-width) solid var(--blue);
} }
/* Animations */ /* Animations */
src/shared/ui/Badge/ui/Badge.test.tsx
+4 -4
View File
@@ -18,17 +18,17 @@ describe('Badge', () => {
it('applies default variant classes', () => { it('applies default variant classes', () => {
render(<Badge variant="default">Tag</Badge>); render(<Badge variant="default">Tag</Badge>);
const el = screen.getByText('Tag'); const el = screen.getByText('Tag');
expect(el).toHaveClass('bg-carbon-black', 'text-ochre-clay'); expect(el).toHaveClass('bg-blue', 'text-cream');
}); });
it('applies primary variant classes', () => { it('applies primary variant classes', () => {
render(<Badge variant="primary">Tag</Badge>); render(<Badge variant="primary">Tag</Badge>);
expect(screen.getByText('Tag')).toHaveClass('bg-burnt-oxide'); expect(screen.getByText('Tag')).toHaveClass('bg-blue');
}); });
it('applies secondary variant classes', () => { it('applies secondary variant classes', () => {
render(<Badge variant="secondary">Tag</Badge>); render(<Badge variant="secondary">Tag</Badge>);
expect(screen.getByText('Tag')).toHaveClass('bg-slate-indigo'); expect(screen.getByText('Tag')).toHaveClass('bg-blue');
}); });
it('applies outline variant classes', () => { it('applies outline variant classes', () => {
@@ -38,7 +38,7 @@ describe('Badge', () => {
it('defaults to default variant when unspecified', () => { it('defaults to default variant when unspecified', () => {
render(<Badge>Tag</Badge>); render(<Badge>Tag</Badge>);
expect(screen.getByText('Tag')).toHaveClass('bg-carbon-black'); expect(screen.getByText('Tag')).toHaveClass('bg-blue');
}); });
}); });
src/shared/ui/Badge/ui/Badge.tsx
+4 -4
View File
@@ -20,10 +20,10 @@ interface Props {
} }
const VARIANTS: Record<BadgeVariant, string> = { const VARIANTS: Record<BadgeVariant, string> = {
default: 'brutal-border bg-carbon-black text-ochre-clay', default: 'brutal-border bg-blue text-cream',
primary: 'brutal-border bg-burnt-oxide text-ochre-clay', primary: 'brutal-border bg-blue text-cream',
secondary: 'brutal-border bg-slate-indigo text-ochre-clay', secondary: 'brutal-border bg-blue text-cream',
outline: 'brutal-border bg-transparent text-carbon-black', outline: 'brutal-border bg-transparent text-blue',
}; };
/** /**
src/shared/ui/Button/ui/Button.test.tsx
+3 -3
View File
@@ -16,11 +16,11 @@ describe('Button', () => {
describe('variants', () => { describe('variants', () => {
it('applies primary variant by default', () => { it('applies primary variant by default', () => {
render(<Button>Go</Button>); render(<Button>Go</Button>);
expect(screen.getByRole('button')).toHaveClass('bg-burnt-oxide'); expect(screen.getByRole('button')).toHaveClass('bg-blue');
}); });
it('applies secondary variant', () => { it('applies secondary variant', () => {
render(<Button variant="secondary">Go</Button>); render(<Button variant="secondary">Go</Button>);
expect(screen.getByRole('button')).toHaveClass('bg-slate-indigo'); expect(screen.getByRole('button')).toHaveClass('bg-blue');
}); });
it('applies outline variant', () => { it('applies outline variant', () => {
render(<Button variant="outline">Go</Button>); render(<Button variant="outline">Go</Button>);
@@ -28,7 +28,7 @@ describe('Button', () => {
}); });
it('applies ghost variant', () => { it('applies ghost variant', () => {
render(<Button variant="ghost">Go</Button>); render(<Button variant="ghost">Go</Button>);
expect(screen.getByRole('button')).toHaveClass('bg-ochre-clay'); expect(screen.getByRole('button')).toHaveClass('bg-cream');
}); });
}); });
describe('sizes', () => { describe('sizes', () => {
src/shared/ui/Button/ui/Button.tsx
+5 -5
View File
@@ -22,10 +22,10 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
} }
const VARIANTS: Record<ButtonVariant, string> = { const VARIANTS: Record<ButtonVariant, string> = {
primary: 'bg-burnt-oxide text-ochre-clay', primary: 'bg-blue text-cream',
secondary: 'bg-slate-indigo text-ochre-clay', secondary: 'bg-blue text-cream',
outline: 'bg-transparent text-carbon-black border-carbon-black', outline: 'bg-transparent text-blue border-blue',
ghost: 'bg-ochre-clay text-carbon-black border-carbon-black', ghost: 'bg-cream text-blue border-blue',
}; };
const SIZES: Record<ButtonSize, string> = { const SIZES: Record<ButtonSize, string> = {
@@ -35,7 +35,7 @@ const SIZES: Record<ButtonSize, string> = {
}; };
const BASE = 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'; 'brutal-border brutal-shadow transition-all duration-200 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[6px_6px_0_var(--blue)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-[4px_4px_0_var(--blue)] uppercase tracking-wider';
/** /**
* Brutalist button with variants and sizes. * Brutalist button with variants and sizes.
src/shared/ui/Card/ui/Card.test.tsx
+5 -9
View File
@@ -13,17 +13,13 @@ describe('Card', () => {
}); });
}); });
describe('background variants', () => { describe('background variants', () => {
it('defaults to ochre background', () => { it('defaults to cream background', () => {
const { container } = render(<Card>Content</Card>); const { container } = render(<Card>Content</Card>);
expect(container.firstChild).toHaveClass('bg-ochre-clay'); expect(container.firstChild).toHaveClass('bg-cream');
}); });
it('applies slate background', () => { it('applies blue background', () => {
const { container } = render(<Card background="slate">Content</Card>); const { container } = render(<Card background="blue">Content</Card>);
expect(container.firstChild).toHaveClass('bg-slate-indigo'); expect(container.firstChild).toHaveClass('bg-blue');
});
it('applies white background', () => {
const { container } = render(<Card background="white">Content</Card>);
expect(container.firstChild).toHaveClass('bg-white');
}); });
}); });
describe('padding', () => { describe('padding', () => {
src/shared/ui/Card/ui/Card.tsx
+5 -6
View File
@@ -1,7 +1,7 @@
import type { ReactNode } from 'react'; import type { ReactNode } from 'react';
import { cn } from '$shared/lib'; import { cn } from '$shared/lib';
export type CardBackground = 'ochre' | 'slate' | 'white'; export type CardBackground = 'cream' | 'blue';
interface CardProps { interface CardProps {
/** /**
@@ -14,7 +14,7 @@ interface CardProps {
className?: string; className?: string;
/** /**
* Background color preset * Background color preset
* @default 'ochre' * @default 'cream'
*/ */
background?: CardBackground; background?: CardBackground;
/** /**
@@ -25,15 +25,14 @@ interface CardProps {
} }
const BG: Record<CardBackground, string> = { const BG: Record<CardBackground, string> = {
ochre: 'bg-ochre-clay', cream: 'bg-cream',
slate: 'bg-slate-indigo text-ochre-clay', blue: 'bg-blue text-cream',
white: 'bg-white',
}; };
/** /**
* Brutalist card container with background and padding variants. * Brutalist card container with background and padding variants.
*/ */
export function Card({ children, className, background = 'ochre', noPadding = false }: CardProps) { export function Card({ children, className, background = 'cream', noPadding = false }: CardProps) {
return ( return (
<div className={cn('brutal-border brutal-shadow', BG[background], !noPadding && 'p-6 md:p-8', className)}> <div className={cn('brutal-border brutal-shadow', BG[background], !noPadding && 'p-6 md:p-8', className)}>
{children} {children}
src/shared/ui/Input/ui/Input.tsx
+5 -5
View File
@@ -13,7 +13,7 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
} }
const INPUT_BASE = 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'; 'brutal-border bg-cream px-4 py-3 text-blue focus:outline-none focus:ring-2 focus:ring-blue focus:ring-offset-2 focus:ring-offset-cream transition-all';
/** /**
* Text input with optional label and error state. * Text input with optional label and error state.
@@ -26,7 +26,7 @@ export function Input({ label, error, className, id, ...props }: InputProps) {
return ( return (
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
{label && ( {label && (
<label htmlFor={inputId} className="text-carbon-black"> <label htmlFor={inputId} className="text-blue">
{label} {label}
</label> </label>
)} )}
@@ -37,7 +37,7 @@ export function Input({ label, error, className, id, ...props }: InputProps) {
{...props} {...props}
/> />
{error && ( {error && (
<span id={errorId} className="text-sm text-burnt-oxide"> <span id={errorId} className="text-sm text-blue">
{error} {error}
</span> </span>
)} )}
@@ -72,7 +72,7 @@ export function Textarea({ label, error, rows = 4, className, id, ...props }: Te
return ( return (
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
{label && ( {label && (
<label htmlFor={textareaId} className="text-carbon-black"> <label htmlFor={textareaId} className="text-blue">
{label} {label}
</label> </label>
)} )}
@@ -84,7 +84,7 @@ export function Textarea({ label, error, rows = 4, className, id, ...props }: Te
{...props} {...props}
/> />
{error && ( {error && (
<span id={errorId} className="text-sm text-burnt-oxide"> <span id={errorId} className="text-sm text-blue">
{error} {error}
</span> </span>
)} )}
src/shared/ui/Section/ui/Section.test.tsx
+5 -9
View File
@@ -18,17 +18,13 @@ describe('Section', () => {
}); });
describe('background variants', () => { describe('background variants', () => {
it('defaults to ochre background', () => { it('defaults to cream background', () => {
const { container } = render(<Section>x</Section>); const { container } = render(<Section>x</Section>);
expect(container.querySelector('section')).toHaveClass('bg-ochre-clay', 'text-carbon-black'); expect(container.querySelector('section')).toHaveClass('bg-cream', 'text-blue');
}); });
it('applies slate background', () => { it('applies blue background', () => {
const { container } = render(<Section background="slate">x</Section>); const { container } = render(<Section background="blue">x</Section>);
expect(container.querySelector('section')).toHaveClass('bg-slate-indigo', 'text-ochre-clay'); expect(container.querySelector('section')).toHaveClass('bg-blue', 'text-cream');
});
it('applies white background', () => {
const { container } = render(<Section background="white">x</Section>);
expect(container.querySelector('section')).toHaveClass('bg-white', 'text-carbon-black');
}); });
}); });
src/shared/ui/Section/ui/Section.tsx
+5 -6
View File
@@ -1,7 +1,7 @@
import type { ReactNode } from 'react'; import type { ReactNode } from 'react';
import { cn } from '$shared/lib'; import { cn } from '$shared/lib';
export type SectionBackground = 'ochre' | 'slate' | 'white'; export type SectionBackground = 'cream' | 'blue';
export type ContainerSize = 'default' | 'wide' | 'ultra-wide'; export type ContainerSize = 'default' | 'wide' | 'ultra-wide';
interface SectionProps { interface SectionProps {
@@ -11,7 +11,7 @@ interface SectionProps {
children: ReactNode; children: ReactNode;
/** /**
* Background color variant * Background color variant
* @default 'ochre' * @default 'cream'
*/ */
background?: SectionBackground; background?: SectionBackground;
/** /**
@@ -26,15 +26,14 @@ interface SectionProps {
} }
const BACKGROUNDS: Record<SectionBackground, string> = { const BACKGROUNDS: Record<SectionBackground, string> = {
ochre: 'bg-ochre-clay text-carbon-black', cream: 'bg-cream text-blue',
slate: 'bg-slate-indigo text-ochre-clay', blue: 'bg-blue text-cream',
white: 'bg-white text-carbon-black',
}; };
/** /**
* Full-width page section with background and optional borders. * Full-width page section with background and optional borders.
*/ */
export function Section({ children, background = 'ochre', bordered = false, className }: SectionProps) { export function Section({ children, background = 'cream', bordered = false, className }: SectionProps) {
return ( 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} {children}
src/shared/ui/TechStack/ui/TechStack.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ export function TechStackBrick({ name, className }: TechStackBrickProps) {
return ( return (
<div <div
className={cn( className={cn(
'brutal-border brutal-shadow bg-white px-4 py-3 text-center', 'brutal-border brutal-shadow bg-cream px-4 py-3 text-center',
'transition-all duration-200 hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px]', 'transition-all duration-200 hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px]',
className, className,
)} )}
src/widgets/Navigation/ui/MobileNav.tsx
+3 -3
View File
@@ -30,13 +30,13 @@ export function MobileNav({ items }: Props) {
}, [pathname]); }, [pathname]);
return ( return (
<div className="lg:hidden fixed top-0 left-0 right-0 bg-ochre-clay brutal-border-bottom z-50"> <div className="lg:hidden fixed top-0 left-0 right-0 bg-cream brutal-border-bottom z-50">
<div className="px-6 py-4 flex items-center justify-between"> <div className="px-6 py-4 flex items-center justify-between">
<h4>allmy.work</h4> <h4>allmy.work</h4>
<button <button
type="button" type="button"
onClick={() => setIsOpen((prev) => !prev)} onClick={() => setIsOpen((prev) => !prev)}
className="brutal-border px-4 py-2 bg-carbon-black text-ochre-clay" className="brutal-border px-4 py-2 bg-blue text-cream"
> >
{isOpen ? 'Close' : 'Menu'} {isOpen ? 'Close' : 'Menu'}
</button> </button>
@@ -44,7 +44,7 @@ export function MobileNav({ items }: Props) {
{isOpen && ( {isOpen && (
<div className="px-6 py-6 brutal-border-top space-y-2 max-h-[80vh] overflow-y-auto"> <div className="px-6 py-6 brutal-border-top space-y-2 max-h-[80vh] overflow-y-auto">
{items.map((item) => ( {items.map((item) => (
<Link key={item.id} href={`/${item.id}`} className="block w-full brutal-border bg-ochre-clay px-4 py-3"> <Link key={item.id} href={`/${item.id}`} className="block w-full brutal-border bg-cream px-4 py-3">
<div className={cn('flex items-baseline gap-3')}> <div className={cn('flex items-baseline gap-3')}>
<span className="text-sm opacity-60 font-body">{item.number}</span> <span className="text-sm opacity-60 font-body">{item.number}</span>
<span <span
src/widgets/Navigation/ui/SidebarNav.tsx
+3 -3
View File
@@ -37,7 +37,7 @@ export function SidebarNav({ items }: Props) {
} }
return ( return (
<nav className="fixed top-0 left-0 h-screen w-full lg:w-1/3 bg-ochre-clay brutal-border-right hidden lg:block overflow-y-auto z-50"> <nav className="fixed top-0 left-0 h-screen w-full lg:w-1/3 bg-cream brutal-border-right hidden lg:block overflow-y-auto z-50">
<div className="px-8 py-12 space-y-2"> <div className="px-8 py-12 space-y-2">
<div className="mb-12"> <div className="mb-12">
<h2>Index</h2> <h2>Index</h2>
@@ -51,9 +51,9 @@ export function SidebarNav({ items }: Props) {
key={item.id} key={item.id}
href={`/${item.id}`} href={`/${item.id}`}
className={cn( className={cn(
'block w-full text-left brutal-border bg-ochre-clay px-6 py-4 transition-all duration-300', 'block w-full text-left brutal-border bg-cream px-6 py-4 transition-all duration-300',
isActive(item) isActive(item)
? 'shadow-[12px_12px_0_var(--carbon-black)] opacity-100 translate-x-0' ? 'shadow-[12px_12px_0_var(--blue)] opacity-100 translate-x-0'
: 'opacity-40 shadow-none hover:opacity-60', : 'opacity-40 shadow-none hover:opacity-60',
)} )}
> >
src/widgets/Navigation/ui/UtilityBar.test.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ describe('UtilityBar', () => {
it('Download CV button has primary variant class', () => { it('Download CV button has primary variant class', () => {
render(<UtilityBar />); render(<UtilityBar />);
const btn = screen.getByRole('button', { name: /download cv/i }); const btn = screen.getByRole('button', { name: /download cv/i });
expect(btn).toHaveClass('bg-burnt-oxide'); expect(btn).toHaveClass('bg-blue');
}); });
}); });
}); });
src/widgets/Navigation/ui/UtilityBar.tsx
+2 -2
View File
@@ -15,11 +15,11 @@ export function UtilityBar() {
} }
return ( return (
<div className="fixed bottom-0 left-0 right-0 bg-ochre-clay brutal-border-top z-40"> <div className="fixed bottom-0 left-0 right-0 bg-cream brutal-border-top z-40">
<div className="max-w-[2560px] mx-auto px-6 md:px-12 lg:px-16 py-4 flex items-center justify-between"> <div className="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"> <div className="flex items-center gap-4">
<span className="text-sm uppercase tracking-wider">Contact</span> <span className="text-sm uppercase tracking-wider">Contact</span>
<a href={`mailto:${CONTACT_LINKS.email}`} className="text-base hover:text-burnt-oxide transition-colors"> <a href={`mailto:${CONTACT_LINKS.email}`} className="text-base hover:opacity-60 transition-opacity">
{CONTACT_LINKS.email} {CONTACT_LINKS.email}
</a> </a>
</div> </div>