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
!/.gitignore
!/.dockerignore
!/.gitea
!/biome.json
*storybook.log
app/[[...slug]]/page.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ export default async function SectionPage({ params }: Props) {
}
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}>
{sections.map((s) => (
<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 }) {
return (
<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}
<Footer />
</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 (
<section id={id} className="scroll-mt-8">
{isActive ? (
<div className="mb-12">
<div className="mb-6 sm:mb-12">
<ViewTransitionWrapper name="section-content">
<div className="mb-16">
<h1 className="font-heading font-black text-section-title leading-[1.2] mb-0">{heading}</h1>
<div className="mb-6 sm:mb-16">
<h1 className="font-heading font-black text-xl sm:text-section-title leading-[1.2] mb-0">{heading}</h1>
</div>
</ViewTransitionWrapper>
<ViewTransitionWrapper name="section-body">
@@ -52,9 +52,9 @@ export function SectionAccordion({ number, title, id, isActive, href, children }
<Link
href={href}
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}
</span>
</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', () => {
render(<ProjectCard {...DEFAULT_PROPS} />);
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', () => {
src/shared/api/types.ts
+10 -2
View File
@@ -141,6 +141,10 @@ export type SocialRecord = BaseRecord & {
* Full URL for the social profile
*/
url: string;
/**
* SVG markup string stored in PocketBase
*/
icon: string;
};
/**
@@ -149,7 +153,7 @@ export type SocialRecord = BaseRecord & {
*/
export type ContactsRecord = BaseRecord & {
/**
* Primary contact email address
* Raw relation ID — use expand?.email for the resolved record
*/
email: string;
/**
@@ -157,9 +161,13 @@ export type ContactsRecord = BaseRecord & {
*/
socials: string[];
/**
* Expanded relation data, present when fetched with expand=socials
* Expanded relation data, present when fetched with expand=email,socials
*/
expand?: {
/**
* Resolved email contact record
*/
email?: SocialRecord;
/**
* Resolved social link records
*/
src/shared/styles/theme.css
+17 -12
View File
@@ -84,7 +84,6 @@
/* === GRID === */
--grid-gap: var(--space-3);
--section-content-width: 72rem;
/* === ANIMATION === */
--ease-default: ease;
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
@@ -121,6 +120,8 @@
--radius-md: var(--radius);
--radius-lg: var(--radius);
--container-section: var(--section-content-width);
--spacing-footer: 5rem;
--spacing-footer-wide: 4rem;
--text-section-title: var(--text-section-title);
--shadow-brutal-xs: var(--shadow-brutal-xs);
@@ -226,12 +227,6 @@
a {
color: var(--blue);
text-decoration: none;
border-bottom: 2px solid var(--blue);
transition: all 0.2s;
}
a:hover {
border-bottom-width: 4px;
}
blockquote {
@@ -258,19 +253,19 @@
.brutal-shadow-lg {
box-shadow: var(--shadow-brutal-lg);
}
.brutal-border {
@utility brutal-border {
border: var(--border-width) solid var(--blue);
}
.brutal-border-top {
@utility brutal-border-top {
border-top: var(--border-width) solid var(--blue);
}
.brutal-border-bottom {
@utility brutal-border-bottom {
border-bottom: var(--border-width) solid var(--blue);
}
.brutal-border-left {
@utility brutal-border-left {
border-left: var(--border-width) solid var(--blue);
}
.brutal-border-right {
@utility brutal-border-right {
border-right: var(--border-width) solid var(--blue);
}
/* Apply Fraunces variable axes to non-heading elements using the heading font */
@@ -300,6 +295,16 @@
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 {
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', () => {
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', () => {
render(<Button size="lg">Go</Button>);
@@ -87,7 +87,7 @@ describe('Button', () => {
</Button>,
);
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>;
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',
lg: 'px-8 py-4 text-lg',
} 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>;
export const Internal: Story = {
const decorator = (Story: React.ComponentType) => (
<div className="p-8 bg-cream">
<Story />
</div>
);
export const Primary: Story = {
args: {
href: '/about',
children: 'Internal page',
},
decorators: [
(Story) => (
<div className="p-8 bg-cream">
<Story />
</div>
),
],
decorators: [decorator],
};
export const External: Story = {
export const PrimaryExternal: Story = {
args: {
href: 'https://example.com',
external: true,
children: 'External site',
},
decorators: [
(Story) => (
<div className="p-8 bg-cream">
<Story />
</div>
),
],
decorators: [decorator],
};
export const Secondary: Story = {
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 { 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', () => {
it('renders an anchor element', () => {
@@ -28,10 +29,10 @@ describe('internal link', () => {
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>);
const link = screen.getByRole('link', { name: 'About' });
for (const cls of BASE.split(' ')) {
for (const cls of PRIMARY.split(' ')) {
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', () => {
it('merges custom className with base classes', () => {
it('merges custom className with variant classes', () => {
render(
<Link href="/about" className="text-red-500">
Styled
@@ -75,7 +111,7 @@ describe('className passthrough', () => {
);
const link = screen.getByRole('link', { name: 'Styled' });
expect(link).toHaveClass('text-red-500');
for (const cls of BASE.split(' ')) {
for (const cls of PRIMARY.split(' ')) {
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 { cn } from '$shared/lib';
export type LinkVariant = 'primary' | 'secondary';
/**
* Props for Link.
*/
@@ -18,6 +20,13 @@ interface Props {
* CSS classes
*/
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".
* Use for links that open outside the app.
@@ -25,22 +34,27 @@ interface Props {
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.
* 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) {
return (
<a href={href} target="_blank" rel="noopener noreferrer" className={cn(BASE, className)}>
<a href={href} target="_blank" rel="noopener noreferrer" className={cls}>
{children}
</a>
);
}
return (
<NextLink href={href} className={cn(BASE, className)}>
<NextLink href={href} className={cls}>
{children}
</NextLink>
);
src/shared/ui/index.ts
+2
View File
@@ -5,7 +5,9 @@ export { Button } from './Button';
export type { CardBackground } from './Card';
export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardSidebar, CardTitle } from './Card';
export { InlineSvg } from './InlineSvg';
export { Input, Textarea } from './Input';
export type { LinkVariant } from './Link';
export { Link } from './Link';
export { RichText } from './RichText';
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',
created: '',
updated: '',
email: 'hello@allmy.work',
email: 'e1',
socials: ['s1'],
expand: {
email: {
id: 'e1',
collectionId: 'contact',
collectionName: 'contact',
created: '',
updated: '',
label: 'hello@allmy.work',
url: 'mailto:hello@allmy.work',
icon: '',
},
socials: [
{
id: 's1',
@@ -33,6 +43,7 @@ const mockSettings = {
updated: '',
label: 'GitHub',
url: 'https://github.com',
icon: '',
},
],
},
@@ -58,19 +69,28 @@ describe('Footer', () => {
});
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());
const link = screen.getByRole('link', { name: /hello@allmy\.work/i });
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({
...mockSettings,
expand: {
contacts: {
...mockSettings.expand.contacts,
email: '',
expand: {
...mockSettings.expand.contacts.expand,
email: undefined,
},
},
},
});
@@ -98,7 +118,10 @@ describe('Footer', () => {
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 { getFirstRecord } from '$shared/api';
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.
@@ -9,21 +9,23 @@ import { Button, Link } from '$shared/ui';
*/
export async function Footer() {
const settings = await getFirstRecord<SiteSettingsRecord>('site_settings', {
expand: 'contacts,contacts.socials',
expand: 'contacts,contacts.email,contacts.socials',
tags: ['site_settings'],
});
const cvUrl = settings?.cv ? buildFileUrl(settings.collectionId, settings.id, settings.cv) : null;
const contacts = settings?.expand?.contacts;
const email = contacts?.expand?.email;
const socials = contacts?.expand?.socials ?? [];
return (
<footer className="brutal-border-top px-8 py-6 lg:px-16 lg:py-8">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div className="flex flex-wrap items-center gap-4">
{contacts?.email && (
<Link href={`mailto:${contacts.email}`} className="text-sm opacity-60 hover:opacity-100 no-underline">
{contacts.email}
<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="w-full flex flex-row justify-between gap-4">
<div className="flex flex-wrap items-center gap-6 sm:gap-4">
{email && (
<Link href={email.url} external variant="secondary" className="flex items-center gap-1.5 text-sm">
{email.icon && <InlineSvg svg={email.icon} className="inline-flex w-8 h-8 sm:hidden" />}
<span className="hidden sm:block">{email.label}</span>
</Link>
)}
{socials.map((social) => (
@@ -31,9 +33,11 @@ export async function Footer() {
key={social.id}
href={social.url}
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>
))}
</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);
return (
<div className="space-y-2">
<div className="space-y-0 sm:space-y-2">
{sections.map((section, i) => (
<SectionAccordion
key={section.slug}