Add projects gallery page with responsive grid (Story 2.2)

- Create useFetchProjects composable for API integration
- Implement responsive grid layout (1/2/3/4 columns)
- Add stagger fadeInUp animation with prefers-reduced-motion support
- Include loading skeleton, error state with retry, and empty state
- Configure SEO meta tags via useSeo composable
- Update Project model ordered scope for proper sorting

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-02-06 02:12:32 +01:00
parent 4117a84809
commit 0399f0dc1c
6 changed files with 188 additions and 55 deletions

View File

@@ -0,0 +1,21 @@
import type { Project } from '~/types/project'
interface ProjectsResponse {
data: Project[]
meta: { lang: string }
}
export function useFetchProjects() {
const config = useRuntimeConfig()
const { locale } = useI18n()
return useFetch<ProjectsResponse>('/projects', {
baseURL: config.public.apiUrl as string,
headers: {
'X-API-Key': config.public.apiKey as string,
'Accept-Language': locale.value,
},
transform: (response) => response.data,
default: () => [],
})
}