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

chore: add .dockerignore #2

Merged
ilia merged 8 commits from fixes/responsive into main 2026-05-19 15:11:14 +00:00
Conversation 0 Commits 8 Files Changed 20
+243 -66
20 changed files with 243 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.dockerignore
+8
View File
@@ -0,0 +1,8 @@
node_modules
.next
.git
.gitea
.env*.local
README.md
Dockerfile
.dockerignore
.gitea/workflows/deploy.yml
+31
View File
@@ -0,0 +1,31 @@
name: Build and push
on:
push:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: docker/setup-buildx-action@v3
- name: Login to Gitea registry
uses: docker/login-action@v3
with:
registry: docker.allmy.work
username: ${{ gitea.actor }}
password: ${{ secrets.REGISTRY_TOKEN }}
- name: Build and push
uses: docker/build-push-action@v6
with:
context: .
push: true
tags: |
docker.allmy.work/${{ gitea.repository }}:latest
docker.allmy.work/${{ gitea.repository }}:${{ gitea.sha }}
cache-from: type=registry,ref=docker.allmy.work/${{ gitea.repository }}:buildcache
cache-to: type=registry,ref=docker.allmy.work/${{ gitea.repository }}:buildcache,mode=max
.gitignore
+1
View File
@@ -55,6 +55,7 @@ next-env.d.ts
!/.gitattributes !/.gitattributes
!/.gitignore !/.gitignore
!/.dockerignore !/.dockerignore
!/.gitea
!/biome.json !/biome.json
*storybook.log *storybook.log
app/[[...slug]]/page.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ export default async function SectionPage({ params }: Props) {
} }
return ( return (
<main className="px-8 py-12 lg:py-16 lg:px-16"> <main className="px-4 py-6 sm:px-8 sm:py-12 lg:py-16 lg:px-16">
<SectionsAccordion sections={sections} activeSlug={activeSlug}> <SectionsAccordion sections={sections} activeSlug={activeSlug}>
{sections.map((s) => ( {sections.map((s) => (
<SectionFactory key={s.slug} slug={s.slug} /> <SectionFactory key={s.slug} slug={s.slug} />
app/layout.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: { children: React.ReactNode }) { export default function RootLayout({ children }: { children: React.ReactNode }) {
return ( return (
<html lang="en"> <html lang="en">
<body className={`${fraunces.variable} ${publicSans.variable} flex flex-col min-h-screen`}> <body className={`${fraunces.variable} ${publicSans.variable} pb-footer md:pb-footer-wide`}>
{children} {children}
<Footer /> <Footer />
</body> </body>
src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx
+5 -5
View File
@@ -38,10 +38,10 @@ export function SectionAccordion({ number, title, id, isActive, href, children }
return ( return (
<section id={id} className="scroll-mt-8"> <section id={id} className="scroll-mt-8">
{isActive ? ( {isActive ? (
<div className="mb-12"> <div className="mb-6 sm:mb-12">
<ViewTransitionWrapper name="section-content"> <ViewTransitionWrapper name="section-content">
<div className="mb-16"> <div className="mb-6 sm:mb-16">
<h1 className="font-heading font-black text-section-title leading-[1.2] mb-0">{heading}</h1> <h1 className="font-heading font-black text-xl sm:text-section-title leading-[1.2] mb-0">{heading}</h1>
</div> </div>
</ViewTransitionWrapper> </ViewTransitionWrapper>
<ViewTransitionWrapper name="section-body"> <ViewTransitionWrapper name="section-body">
@@ -52,9 +52,9 @@ export function SectionAccordion({ number, title, id, isActive, href, children }
<Link <Link
href={href} href={href}
aria-label={heading} aria-label={heading}
className="block w-full text-left mb-3 py-3 group border-b-0 hover:border-b-0" className="block w-full text-left mb-1 py-1 sm:mb-3 sm:py-3 group border-b-0 hover:border-b-0"
> >
<span className="block font-heading font-wonk font-black text-2xl sm:text-3xl opacity-30 group-hover:opacity-60 transition-opacity duration-200"> <span className="block font-heading font-wonk font-black text-xl sm:text-3xl opacity-30 group-hover:opacity-60 transition-opacity duration-200">
{heading} {heading}
</span> </span>
</Link> </Link>
src/entities/project/ui/ProjectCard/ProjectCard.test.tsx
+1 -1
View File
@@ -98,7 +98,7 @@ describe('ProjectCard', () => {
it('View Project button uses sm size', () => { it('View Project button uses sm size', () => {
render(<ProjectCard {...DEFAULT_PROPS} />); render(<ProjectCard {...DEFAULT_PROPS} />);
const btn = screen.getByRole('link', { name: /view project/i }); const btn = screen.getByRole('link', { name: /view project/i });
expect(btn).toHaveClass('px-4', 'py-2', 'text-sm'); expect(btn).toHaveClass('px-3', 'py-1.5', 'sm:px-4', 'sm:py-2', 'text-sm');
}); });
it('tags are xs outline badges', () => { it('tags are xs outline badges', () => {
src/shared/api/types.ts
+10 -2
View File
@@ -141,6 +141,10 @@ export type SocialRecord = BaseRecord & {
* Full URL for the social profile * Full URL for the social profile
*/ */
url: string; url: string;
/**
* SVG markup string stored in PocketBase
*/
icon: string;
}; };
/** /**
@@ -149,7 +153,7 @@ export type SocialRecord = BaseRecord & {
*/ */
export type ContactsRecord = BaseRecord & { export type ContactsRecord = BaseRecord & {
/** /**
* Primary contact email address * Raw relation ID — use expand?.email for the resolved record
*/ */
email: string; email: string;
/** /**
@@ -157,9 +161,13 @@ export type ContactsRecord = BaseRecord & {
*/ */
socials: string[]; socials: string[];
/** /**
* Expanded relation data, present when fetched with expand=socials * Expanded relation data, present when fetched with expand=email,socials
*/ */
expand?: { expand?: {
/**
* Resolved email contact record
*/
email?: SocialRecord;
/** /**
* Resolved social link records * Resolved social link records
*/ */
src/shared/styles/theme.css
+17 -12
View File
@@ -84,7 +84,6 @@
/* === GRID === */ /* === GRID === */
--grid-gap: var(--space-3); --grid-gap: var(--space-3);
--section-content-width: 72rem; --section-content-width: 72rem;
/* === ANIMATION === */ /* === ANIMATION === */
--ease-default: ease; --ease-default: ease;
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
@@ -121,6 +120,8 @@
--radius-md: var(--radius); --radius-md: var(--radius);
--radius-lg: var(--radius); --radius-lg: var(--radius);
--container-section: var(--section-content-width); --container-section: var(--section-content-width);
--spacing-footer: 5rem;
--spacing-footer-wide: 4rem;
--text-section-title: var(--text-section-title); --text-section-title: var(--text-section-title);
--shadow-brutal-xs: var(--shadow-brutal-xs); --shadow-brutal-xs: var(--shadow-brutal-xs);
@@ -226,12 +227,6 @@
a { a {
color: var(--blue); color: var(--blue);
text-decoration: none; text-decoration: none;
border-bottom: 2px solid var(--blue);
transition: all 0.2s;
}
a:hover {
border-bottom-width: 4px;
} }
blockquote { blockquote {
@@ -258,19 +253,19 @@
.brutal-shadow-lg { .brutal-shadow-lg {
box-shadow: var(--shadow-brutal-lg); box-shadow: var(--shadow-brutal-lg);
} }
.brutal-border { @utility brutal-border {
border: var(--border-width) solid var(--blue); border: var(--border-width) solid var(--blue);
} }
.brutal-border-top { @utility brutal-border-top {
border-top: var(--border-width) solid var(--blue); border-top: var(--border-width) solid var(--blue);
} }
.brutal-border-bottom { @utility brutal-border-bottom {
border-bottom: var(--border-width) solid var(--blue); border-bottom: var(--border-width) solid var(--blue);
} }
.brutal-border-left { @utility brutal-border-left {
border-left: var(--border-width) solid var(--blue); border-left: var(--border-width) solid var(--blue);
} }
.brutal-border-right { @utility brutal-border-right {
border-right: var(--border-width) solid var(--blue); border-right: var(--border-width) solid var(--blue);
} }
/* Apply Fraunces variable axes to non-heading elements using the heading font */ /* Apply Fraunces variable axes to non-heading elements using the heading font */
@@ -300,6 +295,16 @@
text-wrap: pretty; text-wrap: pretty;
} }
.rich-text a {
border-bottom: var(--border-width) solid var(--blue);
opacity: 1;
transition: opacity var(--duration-normal);
}
.rich-text a:hover {
opacity: 0.6;
}
.rich-text p + p { .rich-text p + p {
margin-top: 1.2em; margin-top: 1.2em;
} }
src/shared/ui/Button/ui/Button.test.tsx
+2 -2
View File
@@ -38,7 +38,7 @@ describe('Button', () => {
}); });
it('applies sm size', () => { it('applies sm size', () => {
render(<Button size="sm">Go</Button>); render(<Button size="sm">Go</Button>);
expect(screen.getByRole('button')).toHaveClass('px-4', 'py-2'); expect(screen.getByRole('button')).toHaveClass('px-3', 'py-1.5', 'sm:px-4', 'sm:py-2');
}); });
it('applies lg size', () => { it('applies lg size', () => {
render(<Button size="lg">Go</Button>); render(<Button size="lg">Go</Button>);
@@ -87,7 +87,7 @@ describe('Button', () => {
</Button>, </Button>,
); );
const link = screen.getByRole('link'); const link = screen.getByRole('link');
expect(link).toHaveClass('bg-blue', 'px-4', 'py-2'); expect(link).toHaveClass('bg-blue', 'px-3', 'py-1.5', 'sm:px-4', 'sm:py-2');
}); });
}); });
}); });
src/shared/ui/Button/ui/Button.tsx
+1 -1
View File
@@ -52,7 +52,7 @@ const VARIANTS = {
} as const satisfies Record<ButtonVariant, string>; } as const satisfies Record<ButtonVariant, string>;
const SIZES = { const SIZES = {
sm: 'px-4 py-2 text-sm', sm: 'px-3 py-1.5 sm:px-4 sm:py-2 text-sm',
md: 'px-6 py-3 text-base', md: 'px-6 py-3 text-base',
lg: 'px-8 py-4 text-lg', lg: 'px-8 py-4 text-lg',
} as const satisfies Record<ButtonSize, string>; } as const satisfies Record<ButtonSize, string>;
src/shared/ui/InlineSvg/index.ts
+1
View File
@@ -0,0 +1 @@
export { InlineSvg } from './ui/InlineSvg';
src/shared/ui/InlineSvg/ui/InlineSvg.tsx
+25
View File
@@ -0,0 +1,25 @@
import parse from 'html-react-parser';
import { cn } from '$shared/lib';
type Props = {
/**
* SVG markup string to inline as React elements
*/
svg: string;
/**
* Additional CSS classes on the wrapper span
*/
className?: string;
};
/**
* Parses an SVG markup string into React elements.
* Inherits color from parent via currentColor.
*/
export function InlineSvg({ svg, className }: Props) {
if (!svg) {
return null;
}
return <span className={cn('inline-flex items-center', className)}>{parse(svg)}</span>;
}
src/shared/ui/Link/ui/Link/Link.stories.tsx
+35 -16
View File
@@ -10,31 +10,50 @@ export default meta;
type Story = StoryObj<typeof Link>; type Story = StoryObj<typeof Link>;
export const Internal: Story = { const decorator = (Story: React.ComponentType) => (
<div className="p-8 bg-cream">
<Story />
</div>
);
export const Primary: Story = {
args: { args: {
href: '/about', href: '/about',
children: 'Internal page', children: 'Internal page',
}, },
decorators: [ decorators: [decorator],
(Story) => (
<div className="p-8 bg-cream">
<Story />
</div>
),
],
}; };
export const External: Story = { export const PrimaryExternal: Story = {
args: { args: {
href: 'https://example.com', href: 'https://example.com',
external: true, external: true,
children: 'External site', children: 'External site',
}, },
decorators: [ decorators: [decorator],
(Story) => ( };
<div className="p-8 bg-cream">
<Story /> export const Secondary: Story = {
</div> args: {
), href: 'https://github.com',
], external: true,
variant: 'secondary',
children: 'GitHub',
},
decorators: [decorator],
};
export const SecondaryWithIcon: Story = {
args: {
href: 'https://github.com',
external: true,
variant: 'secondary',
className: 'flex items-center gap-1.5 text-sm',
children: (
<>
<span className="hidden sm:block">GitHub</span>
</>
),
},
decorators: [decorator],
}; };
src/shared/ui/Link/ui/Link/Link.test.tsx
+41 -5
View File
@@ -10,7 +10,8 @@ import { render, screen } from '@testing-library/react';
import type React from 'react'; import type React from 'react';
import { Link } from './Link'; import { Link } from './Link';
const BASE = 'underline underline-offset-2 hover:opacity-60 transition-opacity'; const PRIMARY = 'underline underline-offset-2 hover:opacity-60 transition-opacity';
const SECONDARY = 'no-underline opacity-60 hover:opacity-100 sm:brutal-border-bottom transition-opacity';
describe('internal link', () => { describe('internal link', () => {
it('renders an anchor element', () => { it('renders an anchor element', () => {
@@ -28,10 +29,10 @@ describe('internal link', () => {
expect(screen.getByRole('link', { name: 'About' })).not.toHaveAttribute('target'); expect(screen.getByRole('link', { name: 'About' })).not.toHaveAttribute('target');
}); });
it('applies base classes', () => { it('applies primary classes by default', () => {
render(<Link href="/about">About</Link>); render(<Link href="/about">About</Link>);
const link = screen.getByRole('link', { name: 'About' }); const link = screen.getByRole('link', { name: 'About' });
for (const cls of BASE.split(' ')) { for (const cls of PRIMARY.split(' ')) {
expect(link).toHaveClass(cls); expect(link).toHaveClass(cls);
} }
}); });
@@ -66,8 +67,43 @@ describe('external link', () => {
}); });
}); });
describe('variant', () => {
it('primary applies underline classes', () => {
render(
<Link href="/about" variant="primary">
About
</Link>,
);
const link = screen.getByRole('link', { name: 'About' });
for (const cls of PRIMARY.split(' ')) {
expect(link).toHaveClass(cls);
}
});
it('secondary applies secondary classes', () => {
render(
<Link href="/about" variant="secondary">
About
</Link>,
);
const link = screen.getByRole('link', { name: 'About' });
for (const cls of SECONDARY.split(' ')) {
expect(link).toHaveClass(cls);
}
});
it('secondary does not apply underline', () => {
render(
<Link href="/about" variant="secondary">
About
</Link>,
);
expect(screen.getByRole('link', { name: 'About' })).not.toHaveClass('underline');
});
});
describe('className passthrough', () => { describe('className passthrough', () => {
it('merges custom className with base classes', () => { it('merges custom className with variant classes', () => {
render( render(
<Link href="/about" className="text-red-500"> <Link href="/about" className="text-red-500">
Styled Styled
@@ -75,7 +111,7 @@ describe('className passthrough', () => {
); );
const link = screen.getByRole('link', { name: 'Styled' }); const link = screen.getByRole('link', { name: 'Styled' });
expect(link).toHaveClass('text-red-500'); expect(link).toHaveClass('text-red-500');
for (const cls of BASE.split(' ')) { for (const cls of PRIMARY.split(' ')) {
expect(link).toHaveClass(cls); expect(link).toHaveClass(cls);
} }
}); });
src/shared/ui/Link/ui/Link/Link.tsx
+18 -4
View File
@@ -2,6 +2,8 @@ import NextLink from 'next/link';
import type { ReactNode } from 'react'; import type { ReactNode } from 'react';
import { cn } from '$shared/lib'; import { cn } from '$shared/lib';
export type LinkVariant = 'primary' | 'secondary';
/** /**
* Props for Link. * Props for Link.
*/ */
@@ -18,6 +20,13 @@ interface Props {
* CSS classes * CSS classes
*/ */
className?: string; className?: string;
/**
* Visual variant.
* primary — text-decoration underline.
* secondary — border-bottom at sm+, no underline on mobile (for icon+label links).
* @default 'primary'
*/
variant?: LinkVariant;
/** /**
* When true, renders a plain <a> with target="_blank" rel="noopener noreferrer". * When true, renders a plain <a> with target="_blank" rel="noopener noreferrer".
* Use for links that open outside the app. * Use for links that open outside the app.
@@ -25,22 +34,27 @@ interface Props {
external?: boolean; external?: boolean;
} }
const BASE = 'underline underline-offset-2 hover:opacity-60 transition-opacity'; const VARIANTS = {
primary: 'underline underline-offset-2 hover:opacity-60 transition-opacity',
secondary: 'no-underline opacity-60 hover:opacity-100 sm:brutal-border-bottom transition-opacity',
} as const satisfies Record<LinkVariant, string>;
/** /**
* Inline text link. * Inline text link.
* Renders as Next.js Link for internal routes, plain <a> for external links. * Renders as Next.js Link for internal routes, plain <a> for external links.
*/ */
export function Link({ href, children, className, external }: Props) { export function Link({ href, children, className, variant = 'primary', external }: Props) {
const cls = cn(VARIANTS[variant], className);
if (external) { if (external) {
return ( return (
<a href={href} target="_blank" rel="noopener noreferrer" className={cn(BASE, className)}> <a href={href} target="_blank" rel="noopener noreferrer" className={cls}>
{children} {children}
</a> </a>
); );
} }
return ( return (
<NextLink href={href} className={cn(BASE, className)}> <NextLink href={href} className={cls}>
{children} {children}
</NextLink> </NextLink>
); );
src/shared/ui/index.ts
+2
View File
@@ -5,7 +5,9 @@ export { Button } from './Button';
export type { CardBackground } from './Card'; export type { CardBackground } from './Card';
export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardSidebar, CardTitle } from './Card'; export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardSidebar, CardTitle } from './Card';
export { InlineSvg } from './InlineSvg';
export { Input, Textarea } from './Input'; export { Input, Textarea } from './Input';
export type { LinkVariant } from './Link';
export { Link } from './Link'; export { Link } from './Link';
export { RichText } from './RichText'; export { RichText } from './RichText';
export type { ContainerSize, SectionBackground } from './Section'; export type { ContainerSize, SectionBackground } from './Section';
src/widgets/Footer/ui/Footer/Footer.test.tsx
+28 -5
View File
@@ -21,9 +21,19 @@ const mockSettings = {
collectionName: 'contacts', collectionName: 'contacts',
created: '', created: '',
updated: '', updated: '',
email: 'hello@allmy.work', email: 'e1',
socials: ['s1'], socials: ['s1'],
expand: { expand: {
email: {
id: 'e1',
collectionId: 'contact',
collectionName: 'contact',
created: '',
updated: '',
label: 'hello@allmy.work',
url: 'mailto:hello@allmy.work',
icon: '',
},
socials: [ socials: [
{ {
id: 's1', id: 's1',
@@ -33,6 +43,7 @@ const mockSettings = {
updated: '', updated: '',
label: 'GitHub', label: 'GitHub',
url: 'https://github.com', url: 'https://github.com',
icon: '',
}, },
], ],
}, },
@@ -58,19 +69,28 @@ describe('Footer', () => {
}); });
describe('email link', () => { describe('email link', () => {
it('renders the contact email as a mailto link', async () => { it('renders the contact email link', async () => {
render(await Footer());
const link = screen.getByRole('link', { name: /hello@allmy\.work/i });
expect(link).toBeInTheDocument();
});
it('email link points to the mailto url', async () => {
render(await Footer()); render(await Footer());
const link = screen.getByRole('link', { name: /hello@allmy\.work/i }); const link = screen.getByRole('link', { name: /hello@allmy\.work/i });
expect(link).toHaveAttribute('href', 'mailto:hello@allmy.work'); expect(link).toHaveAttribute('href', 'mailto:hello@allmy.work');
}); });
it('does not render email link when contacts.email is missing', async () => { it('does not render email link when expand.email is missing', async () => {
vi.mocked(getFirstRecord).mockResolvedValue({ vi.mocked(getFirstRecord).mockResolvedValue({
...mockSettings, ...mockSettings,
expand: { expand: {
contacts: { contacts: {
...mockSettings.expand.contacts, ...mockSettings.expand.contacts,
email: '', expand: {
...mockSettings.expand.contacts.expand,
email: undefined,
},
}, },
}, },
}); });
@@ -98,7 +118,10 @@ describe('Footer', () => {
expand: { expand: {
contacts: { contacts: {
...mockSettings.expand.contacts, ...mockSettings.expand.contacts,
expand: { socials: [] }, expand: {
...mockSettings.expand.contacts.expand,
socials: [],
},
}, },
}, },
}); });
src/widgets/Footer/ui/Footer/Footer.tsx
+14 -10
View File
@@ -1,7 +1,7 @@
import type { SiteSettingsRecord } from '$shared/api'; import type { SiteSettingsRecord } from '$shared/api';
import { getFirstRecord } from '$shared/api'; import { getFirstRecord } from '$shared/api';
import { buildFileUrl } from '$shared/lib'; import { buildFileUrl } from '$shared/lib';
import { Button, Link } from '$shared/ui'; import { Button, InlineSvg, Link } from '$shared/ui';
/** /**
* Site-wide footer with contact email, social links, and CV download. * Site-wide footer with contact email, social links, and CV download.
@@ -9,21 +9,23 @@ import { Button, Link } from '$shared/ui';
*/ */
export async function Footer() { export async function Footer() {
const settings = await getFirstRecord<SiteSettingsRecord>('site_settings', { const settings = await getFirstRecord<SiteSettingsRecord>('site_settings', {
expand: 'contacts,contacts.socials', expand: 'contacts,contacts.email,contacts.socials',
tags: ['site_settings'], tags: ['site_settings'],
}); });
const cvUrl = settings?.cv ? buildFileUrl(settings.collectionId, settings.id, settings.cv) : null; const cvUrl = settings?.cv ? buildFileUrl(settings.collectionId, settings.id, settings.cv) : null;
const contacts = settings?.expand?.contacts; const contacts = settings?.expand?.contacts;
const email = contacts?.expand?.email;
const socials = contacts?.expand?.socials ?? []; const socials = contacts?.expand?.socials ?? [];
return ( return (
<footer className="brutal-border-top px-8 py-6 lg:px-16 lg:py-8"> <footer className="fixed bottom-0 left-0 right-0 z-50 h-footer md:h-footer-wide brutal-border-top bg-background px-8 lg:px-16 flex items-center">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4"> <div className="w-full flex flex-row justify-between gap-4">
<div className="flex flex-wrap items-center gap-4"> <div className="flex flex-wrap items-center gap-6 sm:gap-4">
{contacts?.email && ( {email && (
<Link href={`mailto:${contacts.email}`} className="text-sm opacity-60 hover:opacity-100 no-underline"> <Link href={email.url} external variant="secondary" className="flex items-center gap-1.5 text-sm">
{contacts.email} {email.icon && <InlineSvg svg={email.icon} className="inline-flex w-8 h-8 sm:hidden" />}
<span className="hidden sm:block">{email.label}</span>
</Link> </Link>
)} )}
{socials.map((social) => ( {socials.map((social) => (
@@ -31,9 +33,11 @@ export async function Footer() {
key={social.id} key={social.id}
href={social.url} href={social.url}
external external
className="text-sm opacity-60 hover:opacity-100 no-underline" variant="secondary"
className="flex items-center gap-1.5 text-sm"
> >
{social.label} {social.icon && <InlineSvg svg={social.icon} className="inline-flex w-8 h-8 sm:hidden" />}
<span className="hidden sm:block">{social.label}</span>
</Link> </Link>
))} ))}
</div> </div>
src/widgets/SectionsAccordion/ui/SectionsAccordion/SectionsAccordion.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export function SectionsAccordion({ sections, activeSlug, children }: Props) {
const slots = Children.toArray(children); const slots = Children.toArray(children);
return ( return (
<div className="space-y-2"> <div className="space-y-0 sm:space-y-2">
{sections.map((section, i) => ( {sections.map((section, i) => (
<SectionAccordion <SectionAccordion
key={section.slug} key={section.slug}